[hidden]:not([hidden=until-found i]){display:none!important}
img{max-width:100%}
  :root{
    --paper:#F3F6F9; --surface:#FFFFFF; --surface-2:#F8FAFC;
    --ink:#0A2A40; --ink-soft:#48617A; --ink-faint:#76899A;
    --line:#D6E0E8; --line-strong:#B9C9D5;
    --us:#0B4A6B; --us-soft:#DCE9F1;
    --them:#7A3B63; --them-soft:#F3E7EE;
    --mgr:#4B7B9D; --mgr-soft:#E2ECF3;
    --brand:#25748A; --brand-soft:#DFEEF2;
    --good:#2E7D46; --good-soft:#E4F2E7;
    --warn:#9C7418; --warn-soft:#F7EEDD;
    --bad:#B23A32; --bad-soft:#F8E6E4;
    --focus:#25748A;
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --paper:#071C2B; --surface:#0D2A3E; --surface-2:#113249;
      --ink:#E8F0F5; --ink-soft:#A3B8C7; --ink-faint:#718A9C;
      --line:#1C3E55; --line-strong:#2A5470;
      --us:#7CC4DA; --us-soft:#123B50;
      --them:#E7A7C6; --them-soft:#3A2430;
      --mgr:#8FB3D9; --mgr-soft:#16314A;
      --brand:#5DB5CB; --brand-soft:#123B4B;
      --good:#7BDB95; --good-soft:#1C3323;
      --warn:#E7B663; --warn-soft:#3A2E17;
      --bad:#EF8177; --bad-soft:#3A1F1C;
      --focus:#5DB5CB;
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"]{
    --paper:#071C2B; --surface:#0D2A3E; --surface-2:#113249;
    --ink:#E8F0F5; --ink-soft:#A3B8C7; --ink-faint:#718A9C;
    --line:#1C3E55; --line-strong:#2A5470;
    --us:#7CC4DA; --us-soft:#123B50;
    --them:#E7A7C6; --them-soft:#3A2430;
    --mgr:#8FB3D9; --mgr-soft:#16314A;
    --brand:#5DB5CB; --brand-soft:#123B4B;
    --good:#7BDB95; --good-soft:#1C3323;
    --warn:#E7B663; --warn-soft:#3A2E17;
    --bad:#EF8177; --bad-soft:#3A1F1C;
    --focus:#5DB5CB;
    color-scheme: dark;
  }

  *{box-sizing:border-box;}
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size:15px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{ max-width:900px; margin:0 auto; padding-inline:20px; padding-block:24px 80px; }
  a{ color:inherit; }
  h1,h2,h3,h4{ font-family:"Poppins", "Public Sans", sans-serif; font-weight:600; text-wrap:balance; margin:0; }
  .mono{ font-family:"Public Sans", sans-serif; font-variant-numeric:tabular-nums; }
  button, input, select, textarea{ font:inherit; color:inherit; }
  input, select, textarea{
    background:var(--surface); border:1px solid var(--line); border-radius:6px;
    padding:7px 10px; width:100%;
  }
  input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible, [tabindex]:focus-visible{
    outline:2px solid var(--focus); outline-offset:2px;
  }
  button{ cursor:pointer; border:1px solid var(--line); background:var(--surface); border-radius:6px; padding:7px 12px; }
  button:hover{ border-color:var(--line-strong); }
  .btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; border:1px solid var(--line); background:var(--surface); border-radius:6px; padding:7px 12px; font:inherit; color:inherit; text-decoration:none; }
  .btn:hover{ border-color:var(--line-strong); }
  .btn-ghost{ border-color:transparent; background:transparent; }
  .btn-ghost:hover{ background:var(--surface-2); border-color:var(--line); }
  .btn-primary{ background:var(--ink); color:var(--paper); border-color:var(--ink); font-weight:600; }
  .btn-primary:hover{ opacity:.88; border-color:var(--ink); }
  .btn-outline{ background:transparent; border:1px solid var(--ink); color:var(--ink); font-weight:600; }
  .btn-outline:hover{ background:var(--surface-2); }
  .btn-danger{ color:var(--bad); }
  textarea{ resize:vertical; min-height:64px; }

  /* ---------- global top nav ---------- */
  .topnav{ position:sticky; top:0; z-index:30; background:var(--paper); border-bottom:1px solid var(--line); }
  .topnav-inner{ max-width:1040px; margin:0 auto; padding:14px 20px 10px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
  .brand{ display:flex; align-items:center; gap:8px; font-family:"Poppins", sans-serif; font-weight:600; font-size:18px; text-decoration:none; color:var(--ink); }
  .brand-icon path{ stroke:var(--brand); }
  .brand-text{ display:flex; flex-direction:column; line-height:1.3; }
  .brand-tagline{ font-family:"Public Sans", sans-serif; font-size:10.5px; font-weight:400; letter-spacing:.02em; color:var(--ink-faint); }
  .nav-right{ display:flex; align-items:center; gap:10px; }
  .nav-right .btn{ padding:8px 14px; font-size:13.5px; }
  .nav-right .btn-primary{ background:var(--brand); border-color:var(--brand); color:#fff; }
  .topnav-links-row{ border-top:1px solid var(--line); }
  .topnav-links-inner{ max-width:1040px; margin:0 auto; padding:2px 20px 8px; }
  .nav-links{ display:flex; gap:4px; flex-wrap:wrap; }
  .nav-link{ text-decoration:none; color:var(--ink-soft); font-size:14px; font-weight:600; padding:8px 12px; border-radius:6px; position:relative; }
  .nav-link:hover{ color:var(--ink); background:var(--surface-2); }
  .nav-link.active{ color:var(--ink); }
  .nav-link.active::after{ content:""; position:absolute; left:12px; right:12px; bottom:2px; height:2px; background:var(--brand); border-radius:2px; }
  .btn-client-login{ font-weight:700; color:var(--us); border:1.5px solid var(--us); background:var(--us-soft); }
  .btn-client-login:hover{ background:var(--us); color:#fff; }

  /* ---------- landing: stats ---------- */
  .stats-bar{ max-width:1040px; margin:14px auto 0; padding:28px 20px; background:var(--surface); border:1px solid var(--line); border-radius:14px; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; text-align:center; }
  .stat-num{ font-family:"Poppins", sans-serif; font-weight:600; font-size:28px; color:var(--brand); }
  .stat-label{ font-size:12.5px; color:var(--ink-soft); margin-top:4px; }
  @media (max-width:760px){ .stats-bar{ grid-template-columns:1fr 1fr; } }
  .stats-eyebrow{ max-width:1040px; margin:36px auto 0; padding:0 20px; font-family:"Public Sans", sans-serif; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); text-align:center; }
  .stats-source{ max-width:1040px; margin:10px auto 0; padding:0 20px; font-size:12px; color:var(--ink-faint); text-align:center; }

  /* ---------- currency toggle ---------- */
  .cur-toggle{ display:flex; width:max-content; margin:0 auto 14px; padding:3px; border:1px solid var(--line); border-radius:999px; background:var(--surface); }
  .cur-btn{ font:inherit; font-size:13px; font-weight:600; padding:6px 18px; border:0; border-radius:999px; background:transparent; color:var(--ink-soft); cursor:pointer; }
  .cur-btn.active{ background:var(--ink); color:var(--paper); }
  .cur-btn:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
  .pricing-price .cur-sym{ font-family:"Public Sans", sans-serif; font-size:16px; font-weight:600; color:var(--ink-soft); margin-right:3px; }
  .pricing-toggle-note{ max-width:none; width:100%; }
  .role-tag{ display:inline-block; margin-left:8px; padding:2px 8px; border-radius:999px; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; background:var(--surface); border:1px solid var(--line); color:var(--ink-soft); vertical-align:middle; }
  .tool-head{ max-width:1100px; margin:0 auto 22px; }
  .tool-head .kicker{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.1em; color:var(--brand); }
  .tool-head .kicker .dot{ width:8px; height:8px; border-radius:50%; background:var(--brand); }
  .tool-head.client .kicker, .tool-head.client .kicker .dot{ color:var(--us); } .tool-head.client .kicker .dot{ background:var(--us); }
  .product-card .cta-row{ display:flex; gap:10px; flex-wrap:wrap; }
  .tool-head h2{ margin:6px 0 8px; }
  .tool-head p{ max-width:72ch; color:var(--ink-soft); }
  .bill-toggle{ margin-bottom:10px; }
  .bill-btn{ font:inherit; font-size:13px; font-weight:600; padding:6px 18px; border:0; border-radius:999px; background:transparent; color:var(--ink-soft); cursor:pointer; }
  .bill-btn.active{ background:var(--ink); color:var(--paper); }
  .bill-btn:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
  .bill-save{ font-size:11px; font-weight:700; margin-left:4px; padding:1px 6px; border-radius:999px; background:#d8f0e0; color:#14532d; }
  .price-sub{ min-height:20px; font-size:13px; color:var(--ink-faint); margin:2px 0 10px; }
  .cmp-table .price-sub{ margin:2px 0 4px; font-size:12px; }
  .signup-total{ font-size:13.5px; color:var(--ink-soft); margin:2px 0 0; }
  .signup-pay{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
  .pay-secure{ font-size:12px; color:var(--ink-faint); font-weight:400; }

  /* ---------- compare plans ---------- */
  .cmp-link-row{ text-align:center; margin-top:26px; }
  .cmp-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
  .cmp-table{ width:100%; min-width:720px; border-collapse:collapse; font-size:14px; }
  .cmp-table th, .cmp-table td{ padding:12px 16px; text-align:center; border-bottom:1px solid var(--line); vertical-align:middle; }
  .cmp-table tbody th[scope=row]{ text-align:left; font-weight:500; color:var(--ink); width:34%; }
  .cmp-table thead th{ vertical-align:bottom; padding-top:22px; padding-bottom:18px; }
  .cmp-table thead th:first-child{ text-align:left; }
  .cmp-table .hl{ background:var(--brand-soft); }
  .cmp-plan{ font-family:"Poppins", sans-serif; font-weight:600; font-size:20px; color:var(--ink); }
  .cmp-price{ font-size:22px; font-weight:700; margin-top:4px; color:var(--ink); }
  .cmp-price span{ font-size:12px; font-weight:400; color:var(--ink-faint); }
  .cmp-for{ font-size:12.5px; color:var(--ink-soft); margin-top:4px; font-weight:400; }
  .cmp-badge{ display:inline-block; font-family:"Public Sans", sans-serif; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--brand); margin-bottom:6px; }
  .cmp-back{ font-size:13px; font-weight:600; color:var(--ink-soft); text-decoration:none; }
  .cmp-back:hover{ color:var(--ink); }
  .cmp-group th{ text-align:left !important; font-family:"Public Sans", sans-serif; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); background:var(--surface-2); font-weight:500; padding:9px 16px; }
  .cmp-yes{ color:var(--good); font-weight:700; font-size:17px; }
  .cmp-no{ color:var(--ink-faint); }
  .cmp-table tfoot td{ border-bottom:none; padding:18px 16px; }

  /* ---------- milestone library ---------- */
  .lib-section{ max-width:1040px; margin:0 auto; padding:30px 20px 10px; }
  .lib-section h2{ font-size:22px; margin-bottom:10px; }
  .lib-section > p{ color:var(--ink-soft); font-size:14.5px; max-width:70ch; margin:0 0 20px; }
  .lib-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
  @media (max-width:760px){ .lib-grid{ grid-template-columns:1fr; } }
  .lib-card{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px 22px; }
  .lib-card h3{ font-size:16px; margin-bottom:12px; display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
  .lib-count{ font-family:"Public Sans", sans-serif; font-size:11px; color:var(--ink-faint); font-weight:400; white-space:nowrap; }
  .lib-chips{ display:flex; flex-wrap:wrap; gap:7px; }
  .lib-chip{ font-size:12.5px; padding:5px 11px; border-radius:999px; background:var(--brand-soft); color:var(--ink); border:1px solid var(--line); }
  .lib-more{ font-size:12.5px; color:var(--ink-faint); padding:5px 4px; }
  .lib-custom{ margin-top:16px; background:var(--us-soft); border:1px solid var(--line); border-radius:14px; padding:22px 24px; display:grid; grid-template-columns:1.1fr 1fr; gap:22px; align-items:center; }
  @media (max-width:760px){ .lib-custom{ grid-template-columns:1fr; } }
  .lib-custom h3{ font-size:17px; margin-bottom:6px; }
  .lib-custom p{ margin:0; font-size:13.5px; color:var(--ink-soft); }
  .lib-custom ul{ margin:0; padding-left:18px; font-size:13.5px; color:var(--ink-soft); display:flex; flex-direction:column; gap:5px; }

  /* ---------- interior marketing pages ---------- */
  .page-hero{ max-width:1040px; margin:0 auto; padding:50px 20px 6px; }
  .page-eyebrow{ font-family:"Public Sans", sans-serif; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--brand); font-weight:500; margin-bottom:12px; }
  .page-hero h1{ font-size:clamp(26px,3.6vw,38px); line-height:1.16; margin-bottom:14px; }
  .page-hero .lede{ font-size:16px; color:var(--ink-soft); max-width:62ch; margin:0; }
  .content-section{ max-width:1040px; margin:0 auto; padding:34px 20px; }
  .content-section h2{ font-size:21px; margin-bottom:18px; }
  .content-section > p{ color:var(--ink-soft); font-size:14.5px; max-width:70ch; }

  .card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .info-card{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:24px; display:flex; flex-direction:column; gap:10px; }
  .info-card .icon{ width:38px; height:38px; border-radius:10px; background:var(--brand-soft); color:var(--brand); display:flex; align-items:center; justify-content:center; font-size:18px; }
  .info-card h3{ font-size:16.5px; }
  .info-card p{ font-size:13.5px; color:var(--ink-soft); margin:0; }
  .info-card.photo{ padding:0; overflow:hidden; }
  .info-card.photo .photo-frame{ height:130px; overflow:hidden; }
  .info-card.photo .photo-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
  .card-grid.two{ grid-template-columns:1fr 1fr; }
  @media (max-width:760px){ .card-grid.two{ grid-template-columns:1fr; } }
  .info-card.photo .photo-frame{ height:170px; }
  .ind-label{ font-family:"Public Sans", sans-serif; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--brand); margin-top:8px; }
  .ind-stake{ font-size:13px; }
  .ind-list{ margin:0; padding-left:18px; color:var(--ink-soft); font-size:13px; display:flex; flex-direction:column; gap:5px; }
  .info-card.photo .info-card-body{ padding:18px 20px 22px; display:flex; flex-direction:column; gap:8px; }
  .about-photo{ border-radius:14px; overflow:hidden; margin-top:6px; }
  .about-photo img{ width:100%; max-height:320px; object-fit:cover; display:block; }
  @media (max-width:960px){ .card-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:640px){ .card-grid{ grid-template-columns:1fr; } }

  .value-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
  @media (max-width:900px){ .value-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:480px){ .value-grid{ grid-template-columns:1fr; } }

  .service-detail{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:28px; display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:20px; align-items:start; }
  .service-detail .kicker{ display:inline-flex; align-items:center; gap:7px; font-family:"Public Sans", sans-serif; font-size:12px; letter-spacing:.04em; margin-bottom:10px; }
  .service-detail .kicker .dot{ width:7px; height:7px; border-radius:50%; }
  .service-detail.client .kicker{ color:var(--us); } .service-detail.client .kicker .dot{ background:var(--us); }
  .service-detail.rep .kicker{ color:var(--mgr); } .service-detail.rep .kicker .dot{ background:var(--mgr); }
  .service-detail h3{ font-size:22px; margin-bottom:10px; }
  .service-detail p{ color:var(--ink-soft); font-size:14px; }
  .service-detail ul{ margin:0; padding-left:18px; color:var(--ink-soft); font-size:13.5px; display:flex; flex-direction:column; gap:7px; }
  @media (max-width:760px){ .service-detail{ grid-template-columns:1fr; } }

  /* ---------- pricing ---------- */
  .pricing-toggle-note{ text-align:center; color:var(--ink-faint); font-size:13px; margin:-4px 0 26px; }
  .pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }
  .pricing-card{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:28px 26px; display:flex; flex-direction:column; gap:16px; position:relative; }
  .pricing-card.featured{ border-color:var(--brand); box-shadow:0 10px 28px rgba(20,24,20,.08); }
  .pricing-badge{ position:absolute; top:-12px; left:26px; background:var(--brand); color:#fff; font-family:"Public Sans", sans-serif; font-size:11px; letter-spacing:.04em; text-transform:uppercase; padding:4px 10px; border-radius:999px; }
  .pricing-card h3{ font-size:19px; }
  .pricing-card .pricing-blurb{ font-size:13.5px; color:var(--ink-soft); margin:0; }
  .pricing-price{ font-family:"Poppins", sans-serif; font-weight:600; font-size:34px; color:var(--ink); }
  .pricing-price span{ font-family:"Public Sans", sans-serif; font-weight:400; font-size:13.5px; color:var(--ink-faint); }
  .pricing-card ul{ margin:0; padding-left:18px; color:var(--ink-soft); font-size:13.5px; display:flex; flex-direction:column; gap:8px; flex:1; }
  .pricing-card .btn{ justify-content:center; margin-top:auto; }
  @media (max-width:900px){ .pricing-grid{ grid-template-columns:1fr; } }

  .signup-wrap{ max-width:460px; margin:0 auto; padding:60px 20px 90px; }
  .signup-card{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:28px; display:flex; flex-direction:column; gap:14px; }
  .signup-card label{ font-size:12.5px; color:var(--ink-soft); display:block; margin-bottom:5px; font-weight:600; }
  .signup-plan-note{ background:var(--brand-soft); color:var(--brand); border-radius:8px; padding:10px 14px; font-size:13px; font-weight:600; }
  .signup-success{ background:var(--good-soft); color:var(--good); border-radius:8px; padding:12px 14px; font-size:13.5px; font-weight:600; }

  .blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .blog-card{ background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; }
  .blog-card-img{ height:130px; background:var(--surface-2); overflow:hidden; }
  .blog-card-img img{ width:100%; height:100%; object-fit:cover; display:block; }
  .blog-card-body{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:8px; flex:1; }
  .blog-tag{ font-family:"Public Sans", sans-serif; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--brand); }
  .blog-card h3{ font-size:16px; }
  .blog-card p{ font-size:13px; color:var(--ink-soft); margin:0; flex:1; }
  .blog-meta{ font-size:12px; color:var(--ink-faint); margin-top:6px; }
  @media (max-width:760px){ .blog-grid{ grid-template-columns:1fr; } }

  .contact-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:32px; max-width:1040px; margin:0 auto; padding:8px 20px 60px; }
  .contact-form{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:26px; display:flex; flex-direction:column; gap:14px; }
  .contact-form label{ font-size:12.5px; color:var(--ink-soft); display:block; margin-bottom:5px; font-weight:600; }
  .contact-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .contact-info{ display:flex; flex-direction:column; gap:22px; }
  .contact-info-block h4{ font-size:14px; margin-bottom:6px; }
  .contact-info-block p, .contact-info-block a{ font-size:13.5px; color:var(--ink-soft); text-decoration:none; display:block; }
  .contact-info-block a:hover{ color:var(--ink); }
  .contact-success{ background:var(--good-soft); color:var(--good); border-radius:8px; padding:12px 14px; font-size:13.5px; font-weight:600; }
  @media (max-width:760px){ .contact-grid{ grid-template-columns:1fr; } .contact-row-2{ grid-template-columns:1fr; } }

  .login-wrap{ max-width:640px; margin:0 auto; padding:60px 20px 90px; text-align:center; }
  .login-choices{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:28px; }
  .login-choice{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:26px 20px; text-decoration:none; color:var(--ink); display:flex; flex-direction:column; gap:8px; align-items:center; text-align:center; }
  .login-choice:hover{ border-color:var(--line-strong); }
  .login-choice .dot{ width:10px; height:10px; border-radius:50%; }
  @media (max-width:600px){ .login-choices{ grid-template-columns:1fr; } }

  .signin-wrap{ max-width:400px; margin:0 auto; padding:60px 20px 90px; }
  .signin-card{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:30px; display:flex; flex-direction:column; gap:14px; }
  .signin-card label{ font-size:12.5px; color:var(--ink-soft); display:block; margin-bottom:5px; font-weight:600; }
  .signin-error{ background:var(--bad-soft); color:var(--bad); border-radius:8px; padding:10px 14px; font-size:13px; font-weight:600; }
  .signin-foot{ text-align:center; margin-top:18px; font-size:13px; color:var(--ink-soft); }
  .signin-foot a{ color:var(--us); text-decoration:none; font-weight:600; }
  .signin-foot a:hover{ text-decoration:underline; }

  /* ---------- landing: hero ---------- */
  .hero{ max-width:1040px; margin:0 auto; padding:52px 20px 36px; display:grid; grid-template-columns:1.05fr 1fr; gap:36px; align-items:center; }
  .hero-eyebrow{ font-family:"Public Sans", sans-serif; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--brand); font-weight:500; margin-bottom:14px; }
  .hero-tagline{ font-family:"Poppins", sans-serif; font-style:italic; font-weight:500; font-size:16px; color:var(--brand); margin:0 0 10px; }
  .hero h1{ font-size:clamp(28px,4vw,45px); line-height:1.14; margin-bottom:16px; }
  .hero .lede{ font-size:16.5px; color:var(--ink-soft); max-width:46ch; margin:0 0 26px; }
  .hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; }
  .hero-ctas .btn-primary{ background:var(--brand); border-color:var(--brand); color:#fff; padding:11px 18px; font-size:14.5px; }
  .hero-ctas .btn-outline{ padding:11px 18px; font-size:14.5px; }
  .hero-highlights{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; }
  .hero-highlights li{ display:flex; align-items:flex-start; gap:9px; font-size:14.5px; color:var(--ink-soft); }
  .hero-highlights li::before{ content:"✓"; color:var(--brand); font-weight:700; flex-shrink:0; line-height:1.4; }
  .hero-art{ border-radius:18px; overflow:hidden; box-shadow:0 12px 34px rgba(20,24,20,.12); }
  .hero-art img{ width:100%; height:100%; min-height:300px; object-fit:cover; display:block; }
  .hero-art svg{ width:100%; height:auto; display:block; }
  .bridge-cable{ stroke:var(--brand); stroke-width:2; fill:none; }
  .bridge-hanger{ stroke:var(--brand); stroke-width:1; opacity:.55; }
  .bridge-pylon{ fill:var(--mgr); }
  .bridge-deck{ stroke:var(--ink); stroke-width:4; stroke-linecap:round; }
  .bridge-water{ stroke:var(--line-strong); stroke-width:1.5; stroke-dasharray:2 5; stroke-linecap:round; }
  .bridge-dot{ fill:var(--surface); stroke:var(--us); stroke-width:2; }
  .bridge-dot.current{ fill:var(--brand); stroke:var(--brand); }
  .bridge-dot-ring{ fill:none; stroke:var(--brand); opacity:.28; }
  @media (max-width:760px){ .hero{ grid-template-columns:1fr; padding-top:32px; } }

  /* ---------- landing: product cards ---------- */
  .products{ max-width:1040px; margin:8px auto 0; padding:16px 20px 8px; display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  .product-card{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:26px; display:flex; flex-direction:column; gap:13px; }
  .product-card .kicker{ display:inline-flex; align-items:center; gap:7px; font-family:"Public Sans", sans-serif; font-size:12px; letter-spacing:.04em; }
  .product-card .kicker .dot{ width:7px; height:7px; border-radius:50%; }
  .product-card.client .kicker{ color:var(--us); }
  .product-card.client .kicker .dot{ background:var(--us); }
  .product-card.rep .kicker{ color:var(--mgr); }
  .product-card.rep .kicker .dot{ background:var(--mgr); }
  .product-card h3{ font-size:21px; }
  .product-card > p{ color:var(--ink-soft); font-size:14.5px; margin:0; }
  .product-card ul{ margin:0; padding-left:18px; color:var(--ink-soft); font-size:13.5px; display:flex; flex-direction:column; gap:6px; }
  .product-card .cta-row{ margin-top:auto; padding-top:6px; }
  @media (max-width:760px){ .products{ grid-template-columns:1fr; } }

  /* ---------- landing: how it works ---------- */
  .how{ max-width:1040px; margin:26px auto 0; padding:30px 20px; }
  .how h2{ font-size:21px; margin-bottom:22px; }
  .how-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  .how-step .num{ font-family:"Public Sans", sans-serif; font-size:12px; color:var(--brand); margin-bottom:8px; }
  .how-step h4{ font-size:16.5px; margin-bottom:6px; }
  .how-step p{ font-size:13.5px; color:var(--ink-soft); margin:0; }
  @media (max-width:760px){ .how-steps{ grid-template-columns:1fr; } }

  /* ---------- landing: see it in action (product mockups) ---------- */
  .visual-section{ max-width:1040px; margin:8px auto 0; padding:30px 20px 40px; }
  .visual-section h2{ font-size:21px; margin-bottom:8px; }
  .visual-section > p{ color:var(--ink-soft); font-size:14.5px; max-width:60ch; margin:0 0 26px; }
  .visual-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
  @media (max-width:820px){ .visual-grid{ grid-template-columns:1fr; } }
  .visual-card h4{ font-size:15.5px; margin:14px 0 4px; }
  .visual-card p{ font-size:13px; color:var(--ink-soft); margin:0; }
  .visual-frame{ background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:0 8px 22px rgba(20,24,20,.06); }
  .frame-bar{ display:flex; align-items:center; gap:5px; padding:9px 12px; border-bottom:1px solid var(--line); background:var(--surface-2); }
  .frame-bar span{ width:8px; height:8px; border-radius:50%; background:var(--line-strong); }
  .frame-body{ padding:18px; font-size:13px; }

  /* mock: stage dropdown */
  .mock-row{ display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line); }
  .mock-row:last-child{ border-bottom:none; }
  .mock-row-title{ font-weight:600; color:var(--ink); }
  .mock-select{ position:relative; }
  .mock-pill{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:11.5px; font-weight:600; border:1px solid var(--line); background:var(--surface); cursor:default; }
  .mock-pill::after{ content:"▾"; font-size:9px; margin-left:2px; opacity:.6; }
  .mock-dropdown-panel{ margin-top:8px; background:var(--surface); border:1px solid var(--line-strong); border-radius:8px; box-shadow:0 8px 18px rgba(20,24,20,.12); overflow:hidden; }
  .mock-dropdown-opt{ display:flex; align-items:center; gap:8px; padding:8px 12px; font-size:12.5px; color:var(--ink-soft); }
  .mock-dropdown-opt.active{ background:var(--brand-soft); color:var(--brand); font-weight:600; }
  .mock-dot{ width:7px; height:7px; border-radius:50%; flex:none; }

  /* mock: task tracking */
  .mock-task{ display:flex; align-items:flex-start; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); }
  .mock-task:last-child{ border-bottom:none; }
  .mock-check{ width:16px; height:16px; border-radius:5px; border:1.5px solid var(--line-strong); flex:none; margin-top:1px; display:flex; align-items:center; justify-content:center; font-size:11px; color:#fff; }
  .mock-check.done{ background:var(--good); border-color:var(--good); }
  .mock-task-title{ font-size:13px; color:var(--ink); }
  .mock-task-title.done{ color:var(--ink-faint); text-decoration:line-through; }
  .mock-task-meta{ display:flex; gap:8px; margin-top:3px; align-items:center; }
  .mock-owner{ font-size:10.5px; font-weight:700; padding:1px 7px; border-radius:999px; }
  .mock-owner.us{ background:var(--us-soft); color:var(--us); }
  .mock-owner.them{ background:var(--them-soft); color:var(--them); }
  .mock-owner.both{ background:var(--mgr-soft); color:var(--mgr); }
  .mock-date{ font-size:11px; color:var(--ink-faint); }

  /* mock: notifications */
  .mock-toast{ display:flex; gap:10px; align-items:flex-start; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:10px; box-shadow:0 4px 12px rgba(20,24,20,.05); }
  .mock-toast:last-child{ margin-bottom:0; }
  .mock-toast-icon{ width:26px; height:26px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-size:13px; }
  .mock-toast-icon.good{ background:var(--good-soft); color:var(--good); }
  .mock-toast-icon.warn{ background:var(--warn-soft); color:var(--warn); }
  .mock-toast-title{ font-size:12.5px; font-weight:600; color:var(--ink); }
  .mock-toast-sub{ font-size:11.5px; color:var(--ink-faint); margin-top:2px; }

  /* mock: reporting / analytics */
  .mock-kpis{ display:flex; gap:14px; margin-bottom:16px; }
  .mock-kpi-num{ font-family:"Poppins", sans-serif; font-weight:600; font-size:19px; color:var(--ink); }
  .mock-kpi-label{ font-size:10.5px; color:var(--ink-faint); margin-top:1px; }
  .mock-bars{ display:flex; align-items:flex-end; gap:10px; height:80px; }
  .mock-bar{ flex:1; background:var(--brand-soft); border-radius:5px 5px 0 0; position:relative; }
  .mock-bar span{ position:absolute; bottom:100%; left:0; right:0; text-align:center; font-size:10px; color:var(--ink-faint); margin-bottom:3px; }
  .mock-bar-fill{ position:absolute; left:0; right:0; bottom:0; background:var(--brand); border-radius:5px 5px 0 0; }


  /* ---------- interactive product demo ---------- */
  .demo-layout{ display:grid; grid-template-columns:minmax(300px,360px) minmax(0,1fr); gap:26px; max-width:1180px; margin:0 auto; padding:10px 20px 70px; align-items:start; }
  .demo-guide{ position:sticky; top:130px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:22px; box-shadow:0 8px 22px rgba(20,24,20,.06); }
  .demo-progress{ display:flex; gap:5px; margin-bottom:14px; }
  .demo-progress span{ flex:1; height:4px; border-radius:2px; background:var(--line); }
  .demo-progress span.on{ background:var(--brand); }
  .demo-step-label{ font-family:"Public Sans", sans-serif; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--brand); }
  .demo-guide h3{ font-size:20px; margin:6px 0 8px; }
  .demo-guide p{ font-size:13.5px; color:var(--ink-soft); margin:0; }
  .demo-guide label{ font-size:12.5px; font-weight:600; color:var(--ink-soft); display:block; margin:16px 0 5px; }
  .demo-date{ display:block; width:100%; margin-top:10px; padding:9px 10px; font:inherit; font-size:14px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); }
  .demo-notice{ margin-top:14px; padding:10px 12px; border-radius:8px; font-size:12.5px; font-weight:600; background:var(--good-soft); color:var(--good); }
  .demo-notice.warn{ background:var(--warn-soft); color:var(--warn); }
  .demo-actions{ display:flex; justify-content:space-between; gap:10px; margin-top:20px; }
  .demo-actions .btn{ padding:8px 16px; }
  .demo-cta-list{ display:flex; flex-direction:column; gap:10px; margin-top:16px; }
  .demo-board{ min-width:0; border:1px solid var(--line); border-radius:14px; background:var(--paper); padding:6px 18px 18px; }
  .demo-board .board-bar{ display:none; }
  .demo-board .wrap{ padding:0; max-width:none; }
  @media (max-width:900px){ .demo-layout{ grid-template-columns:1fr; } .demo-guide{ position:static; } }
  @media (prefers-reduced-motion:no-preference){ .node.demo-flash{ animation:demoflash 1.8s ease; } }
  @keyframes demoflash{ 0%{ box-shadow:0 0 0 4px var(--brand-soft); background:var(--brand-soft); } 100%{ box-shadow:0 0 0 0 transparent; background:transparent; } }

  /* mock: CRM sync */
  .mock-sync-row{ display:flex; align-items:center; gap:10px; }
  .mock-sync-side{ flex:1; background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:12px 14px; }
  .mock-sync-logo{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--brand); margin-bottom:8px; }
  .mock-sync-field{ font-size:11.5px; color:var(--ink-soft); padding:2px 0; }
  .mock-sync-arrows{ flex:none; width:26px; height:26px; border-radius:50%; background:var(--brand-soft); color:var(--brand); display:flex; align-items:center; justify-content:center; font-size:14px; }
  .mock-sync-status{ margin-top:12px; font-size:11.5px; color:var(--good); font-weight:600; }

  /* integrations badge row */
  /* ---------- manager reporting section (product page) ---------- */
  .rpt-section{ margin-top:56px; }
  .rpt-section h2{ font-size:clamp(24px,3vw,32px); margin:0 0 10px; }
  .rpt-lede{ font-size:16px; color:var(--ink-soft); max-width:70ch; margin:0 0 26px; }
  .rpt-points{ list-style:none; margin:30px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px 28px; }
  .rpt-points li{ font-size:14.5px; color:var(--ink); padding-left:26px; position:relative; line-height:1.5; }
  .rpt-points li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--brand); font-weight:700; }
  .rpt-points b{ display:block; font-family:"Poppins",sans-serif; font-size:14.5px; }
  .rpt-points span{ color:var(--ink-soft); font-size:13.5px; }
  @media (max-width:820px){ .rpt-points{ grid-template-columns:1fr; } }
  .rpt-note{ font-size:12px; color:var(--ink-faint); margin-top:14px; }
  .rpt-tbl{ width:100%; border-collapse:collapse; font-size:12.5px; }
  .rpt-tbl th{ text-align:left; font-size:10.5px; color:var(--ink-faint); font-weight:600; padding:0 0 6px; text-transform:uppercase; letter-spacing:.04em; }
  .rpt-tbl td{ padding:6px 0; border-top:1px solid var(--line); color:var(--ink); }
  .rpt-tbl td.n, .rpt-tbl th.n{ text-align:right; font-variant-numeric:tabular-nums; }
  .rpt-up{ color:var(--good); font-weight:600; }
  .rpt-qty{ background:var(--surface-2); border-radius:10px; padding:12px 14px; }
  .rpt-qty .row{ display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:8px; gap:10px; }
  .rpt-qty .track{ height:7px; background:var(--line); border-radius:4px; overflow:hidden; } .rpt-qty .track i{ display:block; height:100%; width:100%; background:var(--brand); }
  .rpt-pill{ display:inline-block; font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; background:var(--good-soft); color:var(--good); }
  /* ---------- rep synopsis / 1 on 1 prep section (product page) ---------- */
  .im-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start; margin-bottom:6px; }
  @media (max-width:900px){ .im-steps{ grid-template-columns:1fr; } }
  .im-drop{ border:2px dashed #b9c4c8; border-radius:10px; padding:22px 12px; text-align:center; display:flex; flex-direction:column; gap:4px; font-size:14px; }
  .im-drop span, .im-small{ font-size:12px; color:#5b6b70; }
  .im-small{ margin:10px 0 0; }
  .im-map{ width:100%; border-collapse:collapse; font-size:13px; }
  .im-map th{ text-align:left; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:#5b6b70; padding:4px 6px; }
  .im-map td{ padding:7px 6px; border-top:1px solid #e3e8e8; vertical-align:top; }
  .im-map small{ display:block; font-size:11px; color:#8a5a00; }
  .im-map .im-w td{ background:#fbf6e8; } .im-map .im-b td{ background:#fbecec; } .im-map .im-b small{ color:#a02828; }
  .im-counts{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; font-size:12px; font-weight:600; }
  .im-counts span{ padding:3px 9px; border-radius:99px; }
  .im-ok{ background:#e3f3ea; color:#1d6b3f; } .im-warn{ background:#fbf0d4; color:#8a5a00; } .im-bad{ background:#fbe3e3; color:#a02828; }
  .rb-section{ margin-top:64px; }
  .rb-section h2{ font-size:clamp(24px,3vw,32px); margin:0 0 10px; }
  .rb-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:24px; align-items:start; }
  @media (max-width:900px){ .rb-grid{ grid-template-columns:1fr; } }
  .rb-card .visual-frame{ margin-bottom:14px; }
  .rb-doc{ font-size:12.5px; line-height:1.45; color:var(--ink); text-align:left; }
  .rb-doc .rb-t{ font-family:"Poppins",sans-serif; font-weight:700; font-size:14.5px; margin:0; }
  .rb-doc .rb-m{ font-size:11px; color:var(--ink-faint); margin:1px 0 8px; }
  .rb-doc .rb-h{ font-weight:600; margin:0 0 8px; }
  .rb-doc h6{ font-family:"Poppins",sans-serif; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--brand); margin:12px 0 5px; padding-bottom:3px; border-bottom:1.5px solid var(--brand); }
  .rb-vs{ width:100%; border-collapse:collapse; font-size:12px; } .rb-vs td, .rb-vs th{ padding:3px 0; border-bottom:1px solid var(--line); text-align:left; } .rb-vs th{ font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); font-weight:600; } .rb-vs td:nth-child(n+2), .rb-vs th:nth-child(n+2){ text-align:right; font-variant-numeric:tabular-nums; }
  .rb-dn{ color:#b03a2e; font-weight:700; } .rb-up{ color:var(--good); font-weight:700; }
  .rb-two{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } @media (max-width:520px){ .rb-two{ grid-template-columns:1fr; } }
  .rb-two ul, .rb-doc ul{ margin:0; padding-left:16px; } .rb-two li, .rb-doc li{ margin:3px 0; }
  .rb-good h6{ color:var(--good); border-color:var(--good); } .rb-bad h6{ color:#b03a2e; border-color:#c8553d; }
  .rb-deal{ border:1px solid var(--line); border-radius:8px; padding:8px 10px; margin:6px 0; }
  .rb-deal b{ font-weight:600; } .rb-deal em{ font-style:normal; color:var(--ink-faint); float:right; font-size:11px; }
  .rb-ask{ background:var(--surface-2); border-radius:6px; padding:5px 8px; margin-top:5px; }
  .rb-checks{ list-style:none; padding:0!important; } .rb-checks li{ padding-left:20px; position:relative; } .rb-checks li::before{ content:""; position:absolute; left:0; top:3px; width:11px; height:11px; border:1.5px solid var(--ink-faint); border-radius:3px; }
  .rb-btns{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 10px; } .rb-btn{ font-size:11.5px; font-weight:600; padding:5px 11px; border-radius:7px; border:1px solid var(--brand); color:var(--brand); } .rb-btn.on{ background:var(--brand); color:#fff; }
  .rb-sched{ width:100%; border-collapse:collapse; font-size:12px; text-align:left; } .rb-sched th{ font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); font-weight:600; padding-bottom:5px; } .rb-sched td{ padding:7px 6px 7px 0; border-top:1px solid var(--line); vertical-align:top; } .rb-sched small{ display:block; color:var(--ink-faint); font-size:11px; }
  .rb-wide{ margin-top:24px; }
  .integrations-row{ text-align:center; margin-top:36px; }
  .integrations-label{ font-family:"Public Sans", sans-serif; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
  .integrations-badges{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:16px; }
  .integration-badge{ padding:8px 16px; border:1px solid var(--line); border-radius:999px; font-size:13px; font-weight:600; color:var(--ink-soft); background:var(--surface); }

  /* ---------- global footer ---------- */
  .site-footer-grid{ max-width:1040px; margin:56px auto 0; padding:36px 20px 22px; border-top:1px solid var(--line); display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1fr; gap:24px; }
  .footer-col h5{ font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); margin-bottom:12px; }
  .footer-col a{ display:block; font-size:13px; color:var(--ink-soft); text-decoration:none; margin-bottom:9px; }
  .footer-col a:hover{ color:var(--ink); }
  .footer-brand-blurb{ font-size:13px; color:var(--ink-soft); max-width:30ch; margin-top:10px; }
  .footer-social{ display:flex; gap:10px; margin-top:14px; }
  .footer-social a{ width:30px; height:30px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; margin:0; }
  .footer-social a:hover{ border-color:var(--line-strong); }
  .footer-bottom{ max-width:1040px; margin:0 auto; padding:16px 20px 50px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--ink-faint); }
  .footer-bottom a{ color:var(--ink-faint); text-decoration:none; margin-left:16px; }
  .footer-bottom a:hover{ color:var(--ink-soft); }
  @media (max-width:760px){ .site-footer-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:480px){ .site-footer-grid{ grid-template-columns:1fr; } }

  /* ---------- board chrome (shared by PontemClient / PontemVelo) ---------- */
  .board-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
  .board-crumb{ font-size:13px; color:var(--ink-soft); text-decoration:none; }
  .board-crumb:hover{ color:var(--ink); }
  .identity{ position:relative; }
  .identity-chip{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-soft); }
  .identity-chip button{ font-size:12.5px; padding:5px 10px; }
  .identity-form{ position:absolute; right:0; top:calc(100% + 6px); background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:14px; width:230px; box-shadow:0 6px 24px rgba(0,0,0,.12); z-index:20; }
  .identity-form label{ display:block; font-size:12px; color:var(--ink-soft); margin-bottom:4px; }
  .identity-form .row{ margin-bottom:10px; }
  .side-toggle{ display:flex; gap:6px; }
  .side-toggle button{ flex:1; padding:6px; font-size:13px; }
  .side-toggle button[aria-pressed="true"][data-side="us"]{ background:var(--us-soft); border-color:var(--us); color:var(--us); }
  .side-toggle button[aria-pressed="true"][data-side="them"]{ background:var(--them-soft); border-color:var(--them); color:var(--them); }
  .side-toggle button[aria-pressed="true"][data-side="mgr"]{ background:var(--mgr-soft); border-color:var(--mgr); color:var(--mgr); }

  /* ---------- deal / plan card ---------- */
  .deal{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:22px 24px; margin-bottom:8px; }
  .deal-title{ font-size:26px; margin-bottom:4px; }
  .deal-title[contenteditable="true"]{ outline:none; border-bottom:1px dashed transparent; }
  .deal-title[contenteditable="true"]:hover, .deal-title[contenteditable="true"]:focus{ border-bottom-color:var(--line-strong); }
  .deal-sub{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-top:10px; font-size:13.5px; color:var(--ink-soft); }
  .party{ display:inline-flex; align-items:center; gap:6px; }
  .party .swatch{ width:8px; height:8px; border-radius:2px; flex:none; }
  .party[data-side="us"] .swatch{ background:var(--us); }
  .party[data-side="them"] .swatch{ background:var(--them); }
  .party span[contenteditable="true"]{ outline:none; border-bottom:1px dashed transparent; color:var(--ink); font-weight:600; }
  .party span[contenteditable="true"]:hover, .party span[contenteditable="true"]:focus{ border-bottom-color:var(--line-strong); }
  .field-plain{ display:inline-flex; align-items:center; gap:4px; }
  .field-plain span[contenteditable="true"]{ outline:none; border-bottom:1px dashed transparent; color:var(--ink); font-weight:600; }
  .field-plain span[contenteditable="true"]:hover, .field-plain span[contenteditable="true"]:focus{ border-bottom-color:var(--line-strong); }
  .sep{ color:var(--line-strong); }
  .close-date{ display:inline-flex; align-items:center; gap:6px; }
  .close-date input{ width:auto; padding:2px 6px; font-size:13px; border:none; background:transparent; text-decoration:underline dashed var(--line-strong); text-underline-offset:3px; }

  .progress-row{ display:flex; align-items:center; gap:16px; margin-top:18px; flex-wrap:wrap; }
  .progress-track{ flex:1; min-width:160px; height:8px; border-radius:5px; background:var(--surface-2); border:1px solid var(--line); overflow:hidden; }
  .progress-fill{ height:100%; background:var(--us); border-radius:5px 0 0 5px; transition:width .4s ease; }
  @media (prefers-reduced-motion: reduce){ .progress-fill{ transition:none; } }
  .progress-label{ font-size:13px; color:var(--ink-soft); white-space:nowrap; }
  .health{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; padding:4px 10px; border-radius:999px; white-space:nowrap; }
  .health.good{ background:var(--good-soft); color:var(--good); }
  .health.warn{ background:var(--warn-soft); color:var(--warn); }
  .health.bad{ background:var(--bad-soft); color:var(--bad); }
  .health .pulse{ width:6px; height:6px; border-radius:50%; background:currentColor; }

  .example-note{ font-size:12.5px; color:var(--ink-faint); margin:10px 2px 26px; }

  /* ---------- route / spine ---------- */
  .stage-heading{ display:flex; align-items:baseline; gap:10px; margin:34px 0 14px; }
  .stage-heading:first-of-type{ margin-top:26px; }
  .stage-heading h2{ font-size:15px; font-weight:600; color:var(--ink); }
  .stage-heading .count{ font-size:12px; color:var(--ink-faint); }
  .stage-heading::after{ content:""; flex:1; height:1px; background:var(--line); }

  .spine{ position:relative; padding-left:26px; }
  .spine::before{ content:""; position:absolute; left:7px; top:6px; bottom:6px; width:1.5px; background:var(--line); }

  .node{ position:relative; margin-bottom:10px; }
  .node-row{ display:flex; align-items:flex-start; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:12px 14px; }
  .node-row:hover{ border-color:var(--line-strong); }
  .marker{ position:absolute; left:-26px; top:16px; width:15px; height:15px; border-radius:50%; background:var(--surface); border:2px solid var(--line-strong); flex:none; }
  .marker.done{ background:var(--good); border-color:var(--good); }
  .marker.in_progress{ background:var(--surface); border-color:var(--us); box-shadow:inset 0 0 0 3px var(--us-soft); }
  .marker.blocked{ background:var(--bad); border-color:var(--bad); }
  .marker.locked{ background:var(--surface-2); border:2px dashed var(--line-strong); box-shadow:none; }
  .node.locked .node-row{ background:var(--surface-2); border-style:dashed; }
  .node.locked .node-title, .node.locked .node-desc{ color:var(--ink-faint); }
  .marker.recur{ background:var(--us-soft); border-color:var(--us); }
  .tag.repeat{ background:var(--surface); color:var(--ink-soft); border:1px solid var(--line-strong); font-weight:600; }
  .recur-box{ margin:10px 0 2px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--surface-2); }
  .recur-head{ display:flex; flex-wrap:wrap; gap:4px 12px; align-items:baseline; font-size:14px; color:var(--ink); }
  .recur-count b{ font-size:21px; font-weight:700; }
  .recur-period{ color:var(--ink-soft); }
  .recur-state{ margin-left:auto; font-size:12.5px; font-weight:600; color:var(--ink-soft); }
  .recur-state.met{ color:var(--good); }
  .recur-state.behind{ color:var(--bad); }
  .recur-track{ height:8px; border-radius:5px; background:var(--surface); border:1px solid var(--line); overflow:hidden; margin-top:8px; }
  .recur-fill{ height:100%; background:var(--us); border-radius:5px; transition:width .25s; }
  .recur-box.met .recur-fill{ background:var(--good); }
  .recur-box.behind .recur-fill{ background:var(--warn); }
  .recur-log{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:10px; }
  .recur-log input[type=number]{ width:84px; padding:6px 8px; }
  .recur-log button{ padding:5px 10px; }
  .recur-set{ border:1px solid var(--line); border-radius:8px; padding:8px 10px; background:var(--surface); font-size:13px; }
  .recur-set .chk{ display:flex; gap:8px; align-items:center; font-weight:600; color:var(--ink-soft); text-transform:none; letter-spacing:0; font-size:13px; cursor:pointer; }
  .recur-set .chk small{ font-weight:400; color:var(--ink-faint); }
  .recur-set input[type=checkbox], .recur-add input[type=checkbox]{ width:auto; flex:none; margin:0; }
  .recur-fields{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:8px; }
  .recur-fields input[type=number]{ width:90px; }
  .recur-fields input[type=text]{ flex:1; min-width:150px; }
  .recur-fields select{ width:auto; }
  .recur-msg{ margin-top:6px; font-size:12.5px; color:var(--bad); }
  .recur-add .chk{ display:flex; gap:8px; align-items:center; font-weight:600; text-transform:none; letter-spacing:0; font-size:13px; cursor:pointer; }
  .recur-hist{ margin-top:2px; }
  .recur-hist h4, .recur-entries h4{ margin:0 0 6px; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint); font-weight:700; }
  .hist-row{ display:flex; flex-wrap:wrap; gap:6px; }
  .hist{ font-size:12px; padding:3px 9px; border-radius:999px; border:1px solid var(--line); color:var(--ink-soft); }
  .hist.hit{ background:var(--good-soft); color:var(--good); border-color:transparent; }
  .hist.miss{ background:var(--bad-soft); color:var(--bad); border-color:transparent; }
  .hist.cur{ background:var(--us-soft); color:var(--ink); }
  .recur-entries ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; font-size:13px; }
  .recur-entries li{ display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; color:var(--ink-soft); }
  .recur-entries li b{ color:var(--ink); }
  .recur-entries .link-undo{ margin-left:auto; background:none; border:0; color:var(--ink-faint); font-size:12px; cursor:pointer; text-decoration:underline; padding:0; }
  .node-trail{ margin-top:6px; font-size:12.5px; color:var(--ink-soft); display:flex; flex-wrap:wrap; gap:2px 8px; align-items:baseline; }
  .node-trail a, .trail a{ color:var(--us); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
  .trail{ border:1px solid var(--line); border-radius:8px; padding:8px 10px; background:var(--surface); font-size:13px; }
  .trail h4{ margin:0 0 6px; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint); font-weight:700; }
  .trail ul{ list-style:none; margin:0 0 8px; padding:0; display:flex; flex-direction:column; gap:6px; }
  .trail li{ display:flex; flex-wrap:wrap; gap:2px 8px; align-items:baseline; color:var(--ink-soft); }
  .trail li .tdate{ font-family:var(--mono, monospace); font-size:12px; color:var(--ink-faint); min-width:52px; }
  .trail li b{ color:var(--ink); }
  .trail li .tshared{ font-size:11px; padding:1px 7px; border-radius:999px; background:var(--us-soft); color:var(--ink); }
  .trail li .tnote{ flex-basis:100%; padding-left:60px; color:var(--ink-soft); }
  .trail .t-undo{ margin-left:auto; background:none; border:0; color:var(--ink-faint); font-size:12px; cursor:pointer; text-decoration:underline; padding:0; }
  .trail-add{ display:grid; grid-template-columns:1fr 140px; gap:6px; }
  .trail-add .t-url, .trail-add .t-note{ grid-column:1 / -1; }
  .trail-add .chk{ grid-column:1 / -1; display:flex; gap:8px; align-items:center; text-transform:none; letter-spacing:0; font-size:12.5px; font-weight:500; cursor:pointer; }
  .trail-add .chk input{ width:auto; margin:0; flex:none; }
  .trail-add button{ justify-self:start; }
  .trail-msg{ color:var(--bad); font-size:12.5px; margin-top:4px; }
  .tag.waiting{ background:var(--surface); color:var(--ink-soft); border:1px dashed var(--line-strong); font-weight:600; }
  .tag.waiting a{ color:inherit; text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
  .dep-box{ border:1px solid var(--line); border-radius:8px; padding:8px 10px; background:var(--surface); }
  .dep-box summary{ cursor:pointer; font-size:13px; font-weight:600; color:var(--ink-soft); }
  .dep-list{ max-height:190px; overflow:auto; margin-top:8px; display:flex; flex-direction:column; gap:5px; }
  .dep-list label{ display:flex; gap:8px; align-items:flex-start; font-size:13px; font-weight:400; text-transform:none; letter-spacing:0; color:var(--ink); cursor:pointer; }
  .dep-list small{ color:var(--ink-faint); display:block; }
  .dep-list input[type=checkbox]{ width:auto; flex:none; margin:3px 0 0; }
  .dep-help{ font-size:12px; color:var(--ink-faint); margin-top:6px; }
  @keyframes unlockpulse{ 0%{ box-shadow:0 0 0 0 rgba(31,138,92,.45); } 100%{ box-shadow:0 0 0 12px rgba(31,138,92,0); } }
  .node.just-unlocked .node-row{ border-color:var(--good); animation:unlockpulse 1.6s ease 2; }

  .node-main{ flex:1; min-width:0; }
  .node-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
  .node-title{ font-weight:600; font-size:14.5px; cursor:pointer; }
  .node-title:hover{ text-decoration:underline; text-underline-offset:3px; }
  .node-actions{ display:flex; gap:2px; flex:none; }
  .node-actions button{ padding:4px 6px; font-size:12px; }
  .node-desc{ font-size:13.5px; color:var(--ink-soft); margin-top:4px; }
  .node-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; align-items:center; }
  .tag{ font-size:11.5px; font-weight:600; padding:2px 8px; border-radius:999px; letter-spacing:.02em; }
  .tag.us{ background:var(--us-soft); color:var(--us); }
  .tag.them{ background:var(--them-soft); color:var(--them); }
  .tag.mgr{ background:var(--mgr-soft); color:var(--mgr); }
  .tag.both{ background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--line); }
  .due{ font-size:12px; color:var(--ink-faint); }
  .due.overdue{ color:var(--bad); font-weight:600; }
  select.status-select{ font-size:12px; padding:3px 6px; width:auto; border-radius:999px; font-weight:600; }
  select.status-select.not_started{ background:var(--surface-2); color:var(--ink-soft); }
  select.status-select.in_progress{ background:var(--us-soft); color:var(--us); border-color:var(--us); }
  select.status-select.done{ background:var(--good-soft); color:var(--good); border-color:var(--good); }
  select.status-select.blocked{ background:var(--bad-soft); color:var(--bad); border-color:var(--bad); }

  .detail{ margin:8px 0 0 0; padding:14px 16px; background:var(--surface-2); border:1px solid var(--line); border-radius:9px; }
  .detail-edit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }
  .detail-edit-grid label{ font-size:11.5px; color:var(--ink-soft); display:block; margin-bottom:3px; }
  .detail-edit-grid .full{ grid-column:1 / -1; }
  .comments{ margin-top:12px; border-top:1px dashed var(--line); padding-top:12px; }
  .comments-head{ font-weight:700; font-size:13px; color:var(--navy); margin-bottom:8px; }
  .comment-text{ white-space:pre-wrap; word-break:break-word; }
  .mention{ background:rgba(23,162,184,.14); color:var(--navy); font-weight:600; border-radius:4px; padding:0 3px; }
  .tag-wrap{ position:relative; flex:1; display:flex; }
  .tag-wrap textarea{ flex:1; width:100%; }
  .tag-menu{ position:absolute; left:0; right:0; bottom:100%; margin-bottom:4px; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,.14); z-index:30; overflow:hidden; }
  .tag-opt{ display:flex; gap:8px; align-items:baseline; width:100%; text-align:left; padding:8px 10px; border:0; background:#fff; font:inherit; font-size:13px; cursor:pointer; }
  .tag-opt span{ color:var(--muted,#6b7a89); font-size:12px; }
  .tag-opt.on,.tag-opt:hover{ background:#eef4f8; }
  .comment-hint{ font-size:12px; color:var(--muted,#6b7a89); margin-top:4px; }
  .comment{ display:flex; gap:8px; margin-bottom:10px; }
  .comment .avatar{ width:22px; height:22px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:700; color:#fff; }
  .comment .avatar.us{ background:var(--us); }
  .comment .avatar.them{ background:var(--them); }
  .comment .avatar.mgr{ background:var(--mgr); }
  .comment-body{ font-size:13px; }
  .comment-meta{ font-size:11.5px; color:var(--ink-faint); margin-bottom:1px; }
  .comment-add{ display:flex; gap:8px; margin-top:10px; }
  .comment-add textarea{ min-height:38px; font-size:13px; }
  .comment-add button{ flex:none; align-self:flex-end; }
  .no-comments{ font-size:12.5px; color:var(--ink-faint); font-style:italic; }

  .add-node{ margin-left:26px; }
  .add-toggle{ font-size:13px; color:var(--ink-soft); }
  .add-form{ background:var(--surface); border:1px dashed var(--line-strong); border-radius:9px; padding:14px; margin-top:8px; }
  .add-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .add-grid .full{ grid-column:1/-1; }
  .add-grid label{ font-size:11.5px; color:var(--ink-soft); display:block; margin-bottom:3px; }
  .form-actions{ display:flex; gap:8px; margin-top:12px; justify-content:flex-end; }

  .footer-note{ margin-top:40px; font-size:12px; color:var(--ink-faint); text-align:center; }

  @media (max-width:640px){
    .detail-edit-grid, .add-grid{ grid-template-columns:1fr; }
    .node-row{ flex-wrap:wrap; }
  }
  [hidden]{ display:none !important; }

  /* ---------- Pontem brand refresh: navy + teal, arch-bridge mark, arc motif ---------- */
  :root{ --navy:#083048; --navy-2:#0B3F5C; --teal:#25748A; --sky:#8CC7D6; --arc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 240' preserveAspectRatio='none'%3E%3Cpath d='M0 240C260 -60 940 -60 1200 240C940 70 260 70 0 240Z' fill='%2325748A'/%3E%3C/svg%3E"); }
  h1,h2,h3,h4{ letter-spacing:-.012em; }
  .topnav{ background:var(--surface); box-shadow:0 1px 0 var(--line); }
  .topnav-inner{ padding:10px 20px 8px; }
  .brand{ gap:0; }
  .brand-logo{ display:block; height:50px; width:auto; }
  .brand-logo-dark{ display:none; }
  @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .topnav{ background:var(--paper); } :root:not([data-theme="light"]) .brand-logo-light{ display:none; } :root:not([data-theme="light"]) .brand-logo-dark{ display:block; } }
  :root[data-theme="dark"] .topnav{ background:var(--paper); } :root[data-theme="dark"] .brand-logo-light{ display:none; } :root[data-theme="dark"] .brand-logo-dark{ display:block; }
  .btn{ border-radius:8px; } .btn-primary{ background:var(--navy-2); border-color:var(--navy-2); color:#fff; } .btn-primary:hover{ opacity:1; background:var(--navy); border-color:var(--navy); }
  .btn-outline{ border-color:var(--navy-2); color:var(--navy-2); } .btn-outline:hover{ background:var(--brand-soft); }
  .btn-client-login{ border-color:var(--teal); color:var(--teal); background:transparent; font-weight:600; }
  .nav-right .btn-primary{ background:var(--navy-2); border-color:var(--navy-2); }
  :root[data-theme="dark"] .btn-outline, :root[data-theme="dark"] .btn-client-login{ color:var(--sky); border-color:var(--sky); }
  @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .btn-outline, :root:not([data-theme="light"]) .btn-client-login{ color:var(--sky); border-color:var(--sky); } }
  .nav-link.active::after{ background:var(--teal); height:3px; }
  .hero-eyebrow, .page-eyebrow, .stats-eyebrow, .cmp-badge, .blog-tag, .ind-label, .demo-step-label, .integrations-label, .product-card .kicker, .service-detail .kicker{ font-weight:700; letter-spacing:.1em; }
  /* hero: full-width navy band over the aerial bridge, with the letterhead arc */
  .hero-band{ position:relative; overflow:hidden; color:#fff; background:linear-gradient(100deg, rgba(8,48,72,.97) 0%, rgba(8,48,72,.93) 42%, rgba(8,48,72,.70) 70%, rgba(8,48,72,.50) 100%), var(--hero-img, none) center/cover, var(--navy); }
  .hero-band::before{ content:""; position:absolute; left:-6%; right:-6%; top:-120px; height:240px; background:var(--arc) center/100% 100% no-repeat; opacity:.9; pointer-events:none; }
  .hero-band::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:6px; background:linear-gradient(90deg, var(--teal), var(--sky)); }
  .hero-band .hero{ position:relative; padding:64px 20px 62px; }
  .hero-band .hero-eyebrow{ color:var(--sky); } .hero-band .hero-tagline{ color:#B6DFEA; font-family:"Poppins",sans-serif; font-weight:500; }
  .hero-band h1{ color:#fff; font-size:clamp(28px,3.5vw,41px); line-height:1.16; } .hero-band .lede{ color:rgba(255,255,255,.84); }
  .hero-band .hero-highlights li{ color:rgba(255,255,255,.88); } .hero-band .hero-highlights li::before{ color:var(--sky); }
  .hero-band .hero-art{ box-shadow:0 18px 44px rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.18); max-height:420px; }
  .hero-band .hero-art img{ min-height:320px; max-height:420px; }
  @media (max-width:760px){ .hero-band .hero{ padding:40px 20px 40px; } .hero-band .hero-art{ max-height:260px; } .hero-band .hero-art img{ min-height:220px; } .brand-logo{ height:42px; } }
  /* footer: deep navy with the arc */
  footer{ position:relative; background:var(--navy); color:#CFE1EB; margin-top:72px; padding-top:34px; overflow:hidden; }
  footer::before{ content:""; position:absolute; left:-6%; right:-6%; top:-150px; height:190px; background:var(--arc) center/100% 100% no-repeat; opacity:.55; pointer-events:none; }
  footer .site-footer-grid{ position:relative; margin-top:0; border-top:0; padding-top:30px; }
  footer .footer-col h5{ color:var(--sky); }
  footer .footer-col a{ color:#CFE1EB; } footer .footer-col a:hover{ color:#fff; }
  footer .footer-brand-blurb{ color:#B3CBD9; }
  footer .footer-social a{ border-color:rgba(255,255,255,.28); color:#CFE1EB; } footer .footer-social a:hover{ border-color:#fff; color:#fff; }
  footer .footer-bottom{ position:relative; color:#8EAABB; border-top:1px solid rgba(255,255,255,.12); } footer .footer-bottom a{ color:#8EAABB; } footer .footer-bottom a:hover{ color:#fff; }
  .footer-brand-blurb{ margin-top:12px; }
  /* inner pages: navy banner with the arc */
  .page-hero{ position:relative; overflow:hidden; max-width:none; margin:0 0 28px; padding:48px max(20px, calc((100% - 1000px)/2)) 40px; color:#fff; background:linear-gradient(100deg, rgba(8,48,72,.98) 0%, rgba(8,48,72,.92) 60%, rgba(8,48,72,.82) 100%), var(--hero-img, none) center/cover, var(--navy); }
  .page-hero::before{ content:""; position:absolute; left:-6%; right:-6%; top:-135px; height:200px; background:var(--arc) center/100% 100% no-repeat; opacity:.75; pointer-events:none; }
  .page-hero::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:linear-gradient(90deg, var(--teal), var(--sky)); }
  .page-hero > *{ position:relative; }
  .page-hero .page-eyebrow{ color:var(--sky); } .page-hero h1{ color:#fff; } .page-hero .lede{ color:rgba(255,255,255,.84); }
  .page-hero a{ color:#fff; }
  :root[data-theme="dark"] .btn-primary, :root[data-theme="dark"] .nav-right .btn-primary{ background:var(--brand); border-color:var(--brand); color:#06222f; }
  @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .btn-primary, :root:not([data-theme="light"]) .nav-right .btn-primary{ background:var(--brand); border-color:var(--brand); color:#06222f; } }

  /* Pontem vs a CRM */
  .vs-wrap{ max-width:1040px; margin:0 auto; padding:8px 20px 56px; }
  .vs-intro p{ font-size:17px; line-height:1.6; color:var(--ink-soft); max-width:68ch; margin:0 0 8px; }
  .vs-h{ font-size:clamp(22px,2.8vw,28px); margin:46px 0 12px; }
  .vs-sub{ color:var(--ink-soft); font-size:14.5px; max-width:68ch; margin:0 0 18px; }
  .vs-three{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .vs-card{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:22px; }
  .vs-card h3{ font-size:16.5px; margin:10px 0 8px; }
  .vs-card p{ font-size:14px; color:var(--ink-soft); margin:0; line-height:1.55; }
  .vs-num{ width:30px; height:30px; border-radius:50%; background:var(--brand-soft); color:var(--brand); font-weight:700; display:flex; align-items:center; justify-content:center; font-size:14px; }
  .vs-table{ min-width:640px; }
  .vs-table th, .vs-table td{ text-align:left; font-size:14px; line-height:1.5; }
  .vs-table thead th{ font-family:"Poppins", sans-serif; font-size:16px; padding-top:18px; padding-bottom:14px; }
  .vs-table tbody th[scope=row]{ width:24%; font-weight:600; }
  .vs-compare{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .vs-before, .vs-after{ border-radius:14px; padding:22px; border:1px solid var(--line); background:var(--surface); }
  .vs-after{ background:var(--brand-soft); border-color:transparent; }
  .vs-label{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--ink-faint); margin-bottom:12px; }
  .vs-after .vs-label{ color:var(--brand); }
  .vs-q{ font-size:15px; font-weight:500; color:var(--ink); margin:0 0 10px; padding-left:12px; border-left:3px solid var(--line); line-height:1.45; }
  .vs-after .vs-q{ border-left-color:var(--brand); }
  .vs-note{ font-size:13px; color:var(--ink-soft); margin:14px 0 0; }
  .vs-link{ margin:16px 0 0; font-weight:600; }
  .vs-keep p{ font-size:15.5px; line-height:1.6; color:var(--ink-soft); max-width:68ch; margin:0 0 6px; }
  .vs-cta{ margin-top:48px; text-align:center; padding:34px 20px; border-radius:16px; background:var(--navy); color:#fff; }
  .vs-cta h2{ color:#fff; margin:0 0 16px; font-size:clamp(22px,2.8vw,28px); }
  .vs-cta .cta-row{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
  .vs-cta .btn-outline{ color:#fff; border-color:rgba(255,255,255,.55); background:transparent; }
  .vs-band{ max-width:1040px; margin:24px auto 0; padding:0 20px; }
  .vs-band-in{ background:var(--navy); color:#fff; border-radius:16px; padding:30px 32px; display:grid; grid-template-columns:1.1fr 1fr; gap:28px; align-items:center; }
  .vs-band h2{ color:#fff; font-size:clamp(22px,2.8vw,28px); margin:0 0 10px; }
  .vs-band p{ color:rgba(255,255,255,.85); margin:0 0 16px; font-size:15px; line-height:1.55; }
  .vs-band ul{ margin:0; padding:0; list-style:none; display:grid; gap:12px; }
  .vs-band li{ font-size:14.5px; line-height:1.45; color:rgba(255,255,255,.9); padding-left:16px; border-left:3px solid var(--sky); }
  .vs-band li b{ color:#fff; display:block; }
  .vs-band .btn-primary, .vs-cta .btn-primary{ background:#fff; color:var(--navy); border-color:#fff; }
  .vs-band .btn-primary:hover, .vs-cta .btn-primary:hover{ background:var(--sky); border-color:var(--sky); color:var(--navy); }
  .vs-frame{ margin:14px 0 0; padding:12px 16px; border-radius:10px; background:var(--brand-soft); color:var(--ink); font-size:14px; line-height:1.5; }
  .vs-frame a{ font-weight:600; }
  @media (max-width:820px){ .vs-three, .vs-compare, .vs-band-in{ grid-template-columns:1fr; } .vs-band-in{ padding:24px 20px; } }

  /* legal pages */
  .legal{ max-width:760px; margin:0 auto; padding:8px 20px 64px; }
  .legal h2{ font-size:clamp(19px,2.4vw,23px); margin:34px 0 10px; }
  .legal h3{ font-size:16px; margin:18px 0 6px; }
  .legal p, .legal li{ font-size:15.5px; line-height:1.65; color:var(--ink-soft); }
  .legal p{ margin:0 0 12px; }
  .legal ul{ margin:0 0 12px; padding-left:22px; display:block; }
  .legal li{ margin:0 0 7px; display:list-item; }
  .legal li b, .legal p b{ color:var(--ink); }
  .legal a{ color:var(--brand); font-weight:600; }

  /* ---------- multi-page additions ---------- */
  .skip-link{ position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:8px 14px; z-index:100; border-radius:0 0 8px 0; }
  .skip-link:focus{ left:0; }
  a.blog-card{ text-decoration:none; color:inherit; transition:border-color .15s, transform .15s; }
  a.blog-card:hover{ border-color:var(--brand); transform:translateY(-2px); }
  .prose{ max-width:720px; margin:0 auto; padding:10px 20px 20px; }
  .prose h2{ font-size:22px; margin:30px 0 10px; }
  .prose p, .prose li{ font-size:16.5px; line-height:1.7; color:var(--ink); }
  .prose p{ margin:0 0 16px; }
  .prose ul, .prose ol{ margin:0 0 18px; padding-left:22px; display:flex; flex-direction:column; gap:8px; }
  .post-hero{ max-width:720px; margin:0 auto; padding:46px 20px 8px; }
  .post-hero .blog-tag{ display:inline-block; margin-bottom:10px; }
  .post-hero h1{ font-size:clamp(28px,4vw,40px); line-height:1.14; margin:0 0 12px; }
  .post-hero .post-meta{ font-size:13px; color:var(--ink-faint); }
  .post-img{ max-width:720px; margin:14px auto 6px; padding:0 20px; }
  .post-img img{ width:100%; max-height:340px; object-fit:cover; border-radius:14px; display:block; }
  .post-cta{ max-width:720px; margin:10px auto 40px; padding:0 20px; }
  .post-cta-box{ background:var(--brand-soft); border:1px solid var(--line); border-radius:14px; padding:22px 24px; display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
  .post-cta-box p{ margin:0; font-size:15px; font-weight:600; max-width:44ch; }
  .crumbs{ max-width:1040px; margin:0 auto; padding:18px 20px 0; font-size:13px; color:var(--ink-faint); }
  .post-hero + .crumbs{ display:none; }
  .crumbs a{ color:var(--ink-soft); text-decoration:none; } .crumbs a:hover{ text-decoration:underline; }
  .faq{ max-width:1040px; margin:0 auto; padding:10px 20px 40px; }
  .faq h2{ font-size:21px; margin-bottom:16px; }
  .faq details{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 18px; margin-bottom:10px; }
  .faq summary{ font-weight:600; cursor:pointer; font-size:15px; }
  .faq details p{ margin:10px 0 0; font-size:14px; color:var(--ink-soft); max-width:70ch; }