:root{
    --deep:#173359; --deep-2:#1E4670; --deep-3:#24507C; --midnight:#041E42; --sapphire:#002855;
    --sky:#A6D7F0; --sky-2:#5B8FC7; --sky-soft:#E9F4FB;
    --travertine:#F4EFE7; --white:#FFFFFF;
    --ink:#202020; --slate:#3D4A54; --muted:#6E6A62; --line:#E4E0D7; --line-deep:#2C4C71;
    --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
    --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --wrap:1200px; --radius:16px; --radius-sm:10px;
    --shadow:0 1px 2px rgba(6,20,40,.05),0 14px 32px -14px rgba(6,20,40,.18);
    --shadow-lift:0 2px 4px rgba(6,20,40,.07),0 28px 56px -18px rgba(6,20,40,.30);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{margin:0;font-family:var(--sans);color:var(--slate);background:var(--white);
    font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  h1,h2,h3{font-family:var(--serif);color:var(--deep);line-height:1.1;margin:0;font-weight:600;letter-spacing:-.012em}
  p{margin:0}
  a{color:var(--deep);text-decoration:none}
  a:hover{text-decoration:underline}
  .wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px}
  .eyebrow{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--sky-2);margin:0 0 15px}
  .on-deep .eyebrow{color:var(--sky)}
  .lede{font-size:19px;color:var(--slate);max-width:60ch}
  .on-deep,.on-deep h1,.on-deep h2,.on-deep h3{color:#EEF4F9}
  .on-deep .lede{color:#BBD0E0}

  a.skip{position:absolute;left:-9999px;top:0;background:var(--deep);color:#fff;padding:12px 18px;z-index:100}
  a.skip:focus{left:0}
  :focus-visible{outline:3px solid var(--sky-2);outline-offset:2px;border-radius:4px}
  .on-deep :focus-visible{outline-color:var(--sky)}

  .ap{display:block}
  /* Wordmark */
  .wm{display:inline-flex;align-items:baseline;font-family:var(--sans);font-weight:800;letter-spacing:.02em;white-space:nowrap;line-height:1}
  .wm b{color:var(--deep);font-weight:800}
  .wm .s{color:var(--sky-2);font-weight:500;margin-left:.34em}
  .on-deep .wm b{color:#fff}.on-deep .wm .s{color:var(--sky)}

  /* Pill buttons (JPMC model) */
  .btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:600;font-size:15.5px;
    padding:12px 22px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;
    transition:transform .16s ease,background .16s ease,border-color .16s ease,color .16s ease}
  .btn .arw{transition:transform .16s ease}.btn:hover .arw{transform:translateX(3px)}
  .btn:hover{text-decoration:none;transform:translateY(-1px)}
  .btn-deep{background:var(--deep);color:#fff}.btn-deep:hover{background:#0F2A48}
  .btn-sky{background:var(--sky);color:#0E2036}.btn-sky:hover{background:#C6E5F6}
  .btn-ghost-deep{border-color:var(--line);color:var(--deep);background:transparent}.btn-ghost-deep:hover{border-color:var(--deep);background:#fff}
  .btn-ghost-sky{border-color:var(--line-deep);color:var(--sky);background:transparent}.btn-ghost-sky:hover{border-color:var(--sky);background:rgba(166,215,240,.10)}
  .textlink{font-weight:600;display:inline-flex;align-items:center;gap:6px;color:var(--deep)}
  .on-deep .textlink{color:var(--sky)}
  .textlink .arw{transition:transform .16s ease}.textlink:hover .arw{transform:translateX(3px)}

  /* Ribbon */
  .ribbon{background:var(--midnight);color:#CFE0EA;font-size:13.5px;text-align:center;padding:9px 44px 9px 16px;position:relative}
  .ribbon strong{color:#fff;font-weight:600}
  .ribbon button{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:0;color:#8FB0C1;font-size:20px;line-height:1;cursor:pointer;padding:4px 8px}
  .ribbon button:hover{color:#fff}

  /* Header */
  header.site{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;gap:22px;height:74px;flex-wrap:nowrap}
  .brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
  .brand:hover{text-decoration:none}
  .brand .ap{width:34px;height:34px;flex:none}
  .brand .wm{font-size:19px}
  nav.primary{display:flex;gap:24px;margin-left:14px;white-space:nowrap}
  nav.primary a{color:var(--ink);font-weight:500;font-size:15.5px}
  nav.primary a:hover{color:var(--deep);text-decoration:none}
  .nav .spacer{flex:1}
  .nav .actions{display:flex;align-items:center;gap:16px;flex:none}
  .nav .actions .login{color:var(--deep);font-weight:600;font-size:15.5px;white-space:nowrap}
  .navtoggle{display:none;background:none;border:1px solid var(--line);border-radius:9px;width:44px;height:42px;cursor:pointer;align-items:center;justify-content:center}
  .navtoggle svg{width:22px;height:22px;stroke:var(--deep)}

  section{padding:92px 0}
  .sec-deep{background:var(--deep)}
  .sec-trav{background:var(--travertine)}
  .sec-tight{padding:66px 0}

  /* Hero */
  .hero{position:relative;overflow:hidden;background:radial-gradient(120% 100% at 88% -20%,#234f7a 0%,var(--deep) 58%)}
  .hero .halo{position:absolute;right:-140px;top:-120px;width:640px;height:640px;pointer-events:none;opacity:.10}
  .hero .halo .spin{transform-origin:60px 60px;animation:spin 100s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion:reduce){.hero .halo .spin{animation:none}}
  .hero .grid{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:center}
  .hero h1{font-size:clamp(33px,4.3vw,48px);font-weight:600;letter-spacing:-.02em;line-height:1.08}
  .hero .lede{margin-top:22px;font-size:20px}
  .hero .cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
  .hero .partnerlink{margin-top:20px;font-size:15px;color:#9FB6C8}
  .hero .partnerlink a{color:var(--sky)}
  .hero-aside{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;background:rgba(30,70,112,.5);border:1px solid var(--line-deep);border-radius:22px;padding:40px 34px;text-align:center;box-shadow:0 30px 70px -30px rgba(0,0,0,.55)}
  .hero-aside .ap{width:112px;height:112px}
  .hero-aside .aside-h{font-family:var(--serif);color:#fff;font-size:22px;font-weight:600}
  .hero-aside .aside-p{color:#B4CADA;font-size:14.5px;line-height:1.55}
  .hero-aside .aside-tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
  .tag{font-size:12.5px;color:#D3E4F0;border:1px solid var(--line-deep);border-radius:999px;padding:5px 12px}
  /* Hero carousel */
  .carousel{position:relative;width:100%;min-height:330px}
  .slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;visibility:hidden;transition:opacity .55s ease}
  .slide.is-active{opacity:1;visibility:visible}
  .c-glyph{width:56px;height:56px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:rgba(166,215,240,.12)}
  .c-glyph svg{width:30px;height:30px;stroke:var(--sky);fill:none}
  .c-h{font-family:var(--serif);color:#fff;font-size:23px;font-weight:600;line-height:1.15;text-align:center}
  .c-h.sm{font-size:20px;margin-bottom:14px;text-align:left}
  .c-p{color:#B4CADA;font-size:14px;line-height:1.55;margin-top:10px;text-align:center}
  .c-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;justify-content:center}
  .chip{font-size:12px;color:#D3E4F0;border:1px solid var(--line-deep);border-radius:999px;padding:5px 12px;display:inline-flex;align-items:center;gap:6px}
  .chip svg{width:12px;height:12px;stroke:var(--sky);fill:none}
  .c-acct{background:#fff;border-radius:14px;padding:18px}
  .c-acct-top{display:flex;justify-content:space-between;align-items:center}
  .c-nm{font:600 14px var(--sans);color:#173359}
  .c-badge{display:inline-flex;align-items:center;gap:5px;font:600 11px var(--sans);color:#0E2036;background:#A6D7F0;border-radius:999px;padding:4px 9px}
  .c-badge svg{width:11px;height:11px;stroke:#0E2036;fill:none}
  .c-bal{font:700 26px var(--sans);color:#0F2A48;margin:12px 0 4px;letter-spacing:-.01em}
  .c-balc{font:400 11px var(--sans);color:#8a93a0;margin-bottom:12px}
  .c-hold{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid #EEF1F4}
  .c-dotc{width:9px;height:9px;border-radius:3px;flex:none}
  .c-hn{font:500 13px var(--sans);color:#33414d;flex:1}
  .c-hp{font:600 13px var(--sans);color:#173359}
  .c-illus{font:400 10px var(--sans);color:#93AEC1;margin-top:12px;text-align:center}
  .c-stat{display:flex;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-deep)}
  .c-stat:last-of-type{border-bottom:0}
  .c-stat b{font-family:var(--serif);color:#fff;font-size:30px;font-weight:600;min-width:88px}
  .c-stat span{color:#B4CADA;font-size:13px}
  .c-note{color:#93AEC1;font:400 11px var(--sans);margin-top:12px}
  .c-controls{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:4px}
  .c-dots{display:flex;gap:8px}
  .c-dot{width:8px;height:8px;border-radius:999px;border:0;background:rgba(166,215,240,.35);cursor:pointer;padding:0;transition:width .2s ease,background .2s ease}
  .c-dot.is-active{background:var(--sky);width:22px}
  .c-pause{background:none;border:1px solid var(--line-deep);color:var(--sky);border-radius:999px;width:28px;height:28px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
  .c-pause:hover{border-color:var(--sky)}

  /* Proof */
  .proof{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;text-align:center}
  .proof .stat{position:relative}
  .proof .stat b{font-family:var(--serif);font-size:clamp(42px,5vw,58px);font-weight:600;color:var(--deep);display:block;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
  .proof .stat span{display:block;margin-top:11px;font-size:14.5px;color:var(--muted);max-width:26ch;margin-inline:auto}
  .proof .stat + .stat::before{content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:1px;background:var(--line)}
  .proof-foot{margin-top:36px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:7px}
  .proof-foot .secured{display:inline-flex;align-items:center;gap:10px;font-weight:600;color:var(--deep);font-size:15px}
  .proof-foot .secured .dot{width:6px;height:6px;border-radius:50%;background:var(--sky-2);display:inline-block}
  .proof-foot small{color:var(--muted);font-size:12.5px;max-width:66ch}

  .sechead{max-width:64ch}
  .sechead h2{font-size:clamp(29px,3.5vw,42px);font-weight:600}
  .sechead .lede{margin-top:16px}
  .sec-head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:42px}

  .cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .acard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px 26px;display:flex;flex-direction:column;gap:12px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
  .acard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:#D8D3C8}
  .acard .ic{width:44px;height:44px;border-radius:11px;background:rgba(23,51,89,.08);display:flex;align-items:center;justify-content:center;margin-bottom:4px}
  .acard .ic svg{width:23px;height:23px;stroke:var(--deep)}
  .acard h3{font-size:21px}
  .acard p{font-size:15.5px;color:var(--slate)}
  .acard .textlink{margin-top:auto;padding-top:8px}

  .acct-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  .acct{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:18px 40px 18px 18px;display:flex;flex-direction:column;gap:5px;text-decoration:none;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
  .acct:hover{border-color:var(--sky-2);box-shadow:var(--shadow);transform:translateY(-2px);text-decoration:none}
  .acct b{color:var(--deep);font-family:var(--serif);font-weight:600;font-size:17px}
  .acct span{font-size:12.5px;color:var(--muted)}
  .acct .go{position:absolute;right:15px;top:50%;transform:translateY(-50%);color:var(--sky-2);opacity:0;transition:opacity .16s ease,transform .16s ease;font-weight:700}
  .acct:hover .go{opacity:1;transform:translateY(-50%) translateX(2px)}

  .split{display:grid;grid-template-columns:1fr 1fr;gap:22px}
  .holdcol{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px}
  .holdcol h3{font-size:20px;margin-bottom:16px}
  .holdcol.alt{background:var(--deep);border-color:var(--deep)}
  .holdcol.alt h3{color:#fff}
  .holdlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
  .holdlist li{display:flex;gap:11px;font-size:15.5px;align-items:flex-start}
  .holdlist li svg{width:19px;height:19px;flex:none;margin-top:2px;stroke:var(--sky-2);fill:none}
  .holdcol.alt .holdlist li{color:#D4E3EE}
  .holdcol.alt .holdlist li svg{stroke:var(--sky)}
  .holdnote{margin-top:20px;font-size:13px;color:var(--muted)}
  .holdcol.alt .holdnote{color:#93AEC1}

  .sec-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:8px}
  .scard{background:var(--deep-2);border:1px solid var(--line-deep);border-radius:var(--radius);padding:28px 26px}
  .scard .num{font-family:var(--sans);color:var(--sky);font-size:12px;font-weight:600;letter-spacing:.11em;text-transform:uppercase}
  .scard h3{color:#fff;font-size:20px;margin:11px 0 8px}
  .scard p{color:#B4CADA;font-size:15px}
  .sec-foot{margin-top:30px;color:#9FB6C8;font-size:14px;display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center}

  .learn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .lcard{border:1px solid var(--line);border-radius:var(--radius);padding:28px;background:#fff;display:flex;flex-direction:column;gap:10px;transition:transform .18s ease,box-shadow .18s ease}
  .lcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
  .lcard h3{font-size:19px}.lcard p{font-size:15px}
  .lcard ul{margin:2px 0 0;padding-left:18px;color:var(--muted);font-size:14px}
  .lcard ul li{margin:3px 0}
  .lcard .textlink{margin-top:6px}

  .partner{display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:center;background:linear-gradient(120deg,var(--deep) 0%,var(--deep-3) 130%);border-radius:24px;padding:52px 48px}
  .partner h2{color:#fff;font-size:clamp(26px,3vw,34px)}
  .partner p{color:#BBD0E0;margin-top:14px;font-size:16.5px}
  .partner .p-cta{display:flex;justify-content:flex-end}
  @media (max-width:820px){.partner .p-cta{justify-content:flex-start}}

  .final{text-align:center;max-width:720px;margin:0 auto}
  .final h2{font-size:clamp(30px,4vw,46px);color:#fff}
  .final .lede{margin:18px auto 0}
  .final .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px}
  .final .fine{margin-top:22px;color:#93AEC1;font-size:13px}

  .offices{background:var(--midnight)}
  .offices .row{display:flex;align-items:center;gap:30px;flex-wrap:wrap;padding:26px 0}
  .offices .lbl{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--sky);font-weight:600;margin-right:6px}
  .offices .office{display:flex;flex-direction:column;line-height:1.3}
  .offices .office b{color:#EEF4F9;font-weight:600;font-size:14.5px}
  .offices .office a{color:#B4CADA;font-size:13.5px}
  .offices .office a:hover{color:#fff}

  footer.site{background:var(--deep);color:#B4CADA;padding:60px 0 40px}
  .foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;padding-bottom:42px;border-bottom:1px solid var(--line-deep)}
  .foot-brand p{margin-top:16px;font-size:14px;color:#93AEC1;max-width:34ch}
  .foot-col h4{color:#fff;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;margin:0 0 16px;font-family:var(--sans);font-weight:600}
  .foot-col a{display:block;color:#BBD0E0;font-size:14.5px;margin-bottom:11px}
  .foot-col a:hover{color:#fff;text-decoration:none}
  .disclosures{padding:28px 0 6px;display:flex;flex-direction:column;gap:12px}
  .disclosures p{font-size:12.5px;color:#89A2B4;line-height:1.6}
  .disclosures strong{color:#B4CADA}
  .foot-legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--line-deep);margin-top:16px;font-size:13px;color:#89A2B4}
  .foot-legal a{color:#A9C1CF}

  .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
  .reveal.in{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

  @media (max-width:1040px){nav.primary{gap:18px}.brand .wm{font-size:18px}}
  @media (max-width:900px){
    .hero .grid{grid-template-columns:1fr;gap:36px}
    .hero-aside{order:-1;max-width:420px}
    .cards-3,.learn-grid{grid-template-columns:1fr}
    .acct-grid{grid-template-columns:repeat(2,1fr)}
    .split,.sec-grid{grid-template-columns:1fr}
    .partner{grid-template-columns:1fr;padding:40px 30px}
    .foot-top{grid-template-columns:1fr 1fr}
  }
  @media (max-width:560px){
    section{padding:62px 0}
    .proof{grid-template-columns:1fr;gap:34px}.proof .stat + .stat::before{display:none}
    .acct-grid{grid-template-columns:1fr}.foot-top{grid-template-columns:1fr}
    .hero .cta-row .btn{flex:1 1 100%}
  }
  .mobile-menu{display:none;border-top:1px solid var(--line);background:#fff;padding:14px 26px 24px}
  .mobile-menu.open{display:block}
  .mobile-menu a{display:block;padding:12px 0;color:var(--ink);font-weight:500;border-bottom:1px solid var(--line)}
  .mobile-menu .btn{width:100%;justify-content:center;margin-top:16px}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 22px}
.step .n{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--deep);color:#fff;font-family:var(--serif);font-weight:600;font-size:18px;margin-bottom:14px}
.step h3{margin:0 0 6px;font-family:var(--serif);color:var(--deep);font-size:19px}
.step p{margin:0;color:var(--slate);font-size:15px;line-height:1.55}
@media(max-width:860px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
.holdlist a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(23,51,89,.28);padding-bottom:1px;transition:border-color .15s}.holdlist a:hover{border-bottom-color:var(--sky-2,#5B8FC7);border-bottom-width:2px}
#partner .holdlist li{color:#fff}#partner .holdlist li svg{stroke:var(--sky)}

/* ---- content pages ---- */
.page-hero{background:var(--deep);padding:64px 0 56px}
.page-hero .eyebrow{color:var(--sky)}
.page-hero h1{color:#fff;font-size:clamp(30px,4vw,46px);max-width:20ch}
.page-hero .lede{color:#BBD0E0;margin-top:16px}
.crumbs{font-size:13px;color:#9FB6C8;margin-bottom:16px}
.crumbs a{color:#9FB6C8;text-decoration:underline}
.section{padding:64px 0}
.prose{max-width:760px}
.prose h2{font-size:26px;margin:36px 0 12px}
.prose h3{font-size:19px;margin:26px 0 8px}
.prose p{margin:0 0 14px}
.prose ul{margin:0 0 16px;padding-left:20px}.prose li{margin:6px 0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tile{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px;display:flex;flex-direction:column;gap:8px;transition:transform .16s,box-shadow .16s}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.tile h3{font-size:19px}.tile p{font-size:15px;color:var(--slate)}
.tile.link{text-decoration:none}
.kt{background:var(--travertine);border:1px solid var(--line);border-radius:14px;padding:22px 24px;margin:8px 0 8px}
.kt h4{margin:0 0 10px;font:600 13px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--sky-2)}
.kt ul{margin:0;padding-left:18px}.kt li{margin:6px 0}
.flag{display:inline-block;font:600 11px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#7a5b12;background:#FBF1D9;border:1px solid #EAD9A8;border-radius:8px;padding:4px 10px;margin:2px 0}
.disc{background:var(--travertine);border-top:1px solid var(--line)}
.disc p{font-size:12.5px;color:var(--muted);line-height:1.6;margin:0 0 10px}
.disc strong{color:var(--deep)}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{font:600 17px var(--serif);color:var(--deep);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--sky-2);font-weight:700}
.faq details[open] summary::after{content:"–"}
.faq p{margin:12px 0 0;color:var(--slate)}
.gl-nav{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.96);backdrop-filter:saturate(180%) blur(6px);display:flex;flex-wrap:wrap;gap:6px;padding:12px 0;margin:0 0 20px;border-bottom:1px solid var(--line)}
.gl-nav a{font:600 13px var(--sans);color:var(--deep);border:1px solid var(--line);border-radius:8px;padding:5px 10px;text-decoration:none}
.gl-term{border-top:1px solid var(--line);padding:18px 0}
.gl-term h3{font-size:19px;margin:0 0 6px}
.gl-term p{margin:0;color:var(--slate)}
.mk-filters{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 26px}
.mk-filters button{font:600 13px/1 Inter,Arial,sans-serif;color:var(--deep);background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 16px;cursor:pointer;transition:all .12s}
.mk-filters button:hover{border-color:var(--sky-2)}
.mk-filters button[aria-pressed="true"]{background:var(--deep);color:#fff;border-color:var(--deep)}
.mk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.mk-card{border:1px solid var(--line);border-radius:12px;padding:20px;background:#fff;display:flex;flex-direction:column}
.mk-card .mk-cat{font:700 10px/1 Inter,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--sky-2);margin-bottom:9px}
.mk-card h3{margin:0 0 6px;font-size:16px;color:var(--deep)}
.mk-card p{margin:0 0 14px;font-size:13.5px;color:var(--slate);flex:1}
.mk-card .mk-go{font:600 13px/1 Inter,Arial,sans-serif;color:var(--deep-2);background:none;border:0;padding:0;cursor:pointer;text-align:left}
.mk-card .mk-go:hover{text-decoration:underline}
.mk-logo{width:44px;height:44px;border-radius:9px;background:linear-gradient(135deg,var(--sky),var(--sky-2));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:19px;margin-bottom:14px}
.mk-card .mk-cat{line-height:1.4}
.mk-act{padding-top:14px;border-top:1px solid var(--line)}
.mk-count{font-size:13px;color:#8A8578;margin:0 0 18px}
.mk-disc{background:var(--travertine);border-top:1px solid var(--line);border-radius:10px;padding:30px 32px;margin-top:44px}
.mk-disc h2{font-family:'Source Serif 4',Georgia,serif;color:var(--deep);font-size:22px;margin:0 0 14px;font-weight:700}
.mk-disc p{font-size:13px;color:var(--slate);margin:0 0 12px;max-width:920px;line-height:1.62}
.mk-disc p:last-child{margin-bottom:0}
.mk-card .mk-pending{font:600 12px/1 Inter,Arial,sans-serif;color:var(--slate);background:var(--travertine);border:1px solid var(--line);border-radius:999px;padding:7px 12px;display:inline-block}
.mk-slot{border:1px dashed var(--line);border-radius:12px;padding:20px;background:var(--travertine);display:flex;align-items:center;justify-content:center;text-align:center;color:var(--slate);font-size:13px;min-height:150px}
.mk-note{border-left:3px solid var(--sky-2);background:var(--travertine);padding:14px 18px;border-radius:0 8px 8px 0;margin:22px 0;font-size:13.5px;color:var(--slate)}
.mk-modal{position:fixed;inset:0;background:rgba(14,36,68,.62);display:none;align-items:center;justify-content:center;z-index:100;padding:20px}
.mk-modal.on{display:flex}
.mk-modal .mk-box{background:#fff;border-radius:14px;max-width:560px;padding:28px;box-shadow:0 24px 60px rgba(0,0,0,.28)}
.mk-modal h3{margin:0 0 10px;color:var(--deep);font-size:20px}
.mk-modal p{font-size:13.5px;color:var(--slate);margin:0 0 12px}
.mk-modal .mk-actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}

.legal-banner{background:#FBF1D9;border:1px solid #EAD9A8;border-radius:12px;padding:14px 18px;color:#6b5115;font-size:14px;margin-bottom:26px}
.legal-doc h2{font-size:19px;margin-top:30px}
.legal-doc h3{font-size:16px;margin-top:18px}
.legal-doc p,.legal-doc li{font-size:15.5px}
.legal-meta{font-size:12.5px;color:var(--muted);margin:0 0 18px}
.article-meta{font:600 12px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--sky-2);margin:0 0 18px}
.article-disc{margin-top:26px;padding-top:16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);line-height:1.6}
.lede-p{font-size:19px;line-height:1.6;color:var(--slate);margin:0 0 6px}
.dl-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.media-figs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin:14px 0 6px}
.media-figs figure{margin:0}
.media-figs img{width:100%;display:block;border:1px solid var(--line);border-radius:12px;background:#fff}
.media-figs figcaption{font-size:12.5px;color:var(--muted);margin-top:7px;text-align:center}
@media(max-width:820px){.media-figs{grid-template-columns:1fr}}
.dl-chip{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--deep);font-size:14px;font-weight:600;text-decoration:none;transition:border-color .15s,background .15s}
.dl-chip:hover{border-color:var(--sky-2);background:var(--travertine)}
.dl-chip svg{width:14px;height:14px;fill:var(--sky-2);flex:none}
.dl-chip.req{color:var(--muted);font-weight:500;cursor:default}
.dl-chip.req:hover{border-color:var(--line);background:#fff}
.media-sec h2{font-family:var(--serif);color:var(--deep);font-size:23px;margin:36px 0 4px}
.media-sec>p{color:var(--slate);max-width:72ch;margin:0}
.keynums{display:flex;flex-wrap:wrap;gap:30px;margin:16px 0 6px;padding:18px 24px;background:var(--deep);border-radius:14px}
.keynums div{display:flex;flex-direction:column}
.keynums b{font-family:var(--serif);color:#fff;font-size:26px;line-height:1.05}
.keynums span{font-size:12.5px;color:var(--sky);margin-top:5px;letter-spacing:.02em}
.media-boiler{margin-top:12px;padding:18px 22px;background:var(--travertine);border:1px solid var(--line);border-radius:14px}
.media-boiler p{color:var(--slate);font-size:15px;margin:0}
@media(max-width:640px){.keynums{gap:18px}}
.pt-tool{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 26px 24px;margin:6px 0}
.pt-q{margin:0 0 16px}
.pt-q label{display:block;font-weight:600;color:var(--deep);font-size:15px;margin-bottom:7px}
.pt-q select{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:15px;color:var(--ink,#0E2444);font-family:inherit}
.pt-q select:focus{outline:2px solid var(--sky-2);border-color:var(--sky-2)}
.pt-run{margin-top:4px}
.pt-result{display:none;margin-top:22px}
.pt-verdict{border-radius:14px;padding:18px 22px;display:flex;flex-direction:column;gap:4px}
.pt-verdict b{font-family:var(--serif);font-size:19px}
.pt-verdict span{font-size:14px}
.pt-verdict.stop{background:#FBEDEC;border:1px solid #E7C3BE;color:#7C2D26}
.pt-verdict.caution{background:#FBF4EA;border:1px solid #EAD9BE;color:#7A5A22}
.pt-verdict.clear{background:#EDF6EF;border:1px solid #C3E0CC;color:#26603F}
.pt-flags{list-style:none;padding:0;margin:16px 0 0}
.pt-flags li{position:relative;padding:12px 14px 12px 16px;margin:9px 0;border-radius:11px;font-size:14.5px;line-height:1.55;border-left:4px solid}
.pt-flags li.stop{background:#FBEDEC;border-left-color:#C0483C;color:#5F2822}
.pt-flags li.caution{background:#FBF4EA;border-left-color:#C79A44;color:#5E4720}
.pt-rule{display:block;font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;opacity:.75;margin-bottom:3px}
.pt-note{font-size:13px;color:var(--muted);margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
.exp-filter{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 22px}
.exp-filter button{border:1px solid var(--line);background:#fff;padding:8px 16px;border-radius:999px;font-size:14px;color:var(--deep);cursor:pointer;font-family:inherit;font-weight:600}
.exp-filter button.on{background:var(--deep);color:#fff;border-color:var(--deep)}
.exp-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.exp-card{border:1px solid var(--line);border-radius:14px;padding:18px 18px 16px;background:#fff;display:flex;flex-direction:column}
.exp-card h3{font-family:var(--serif);color:var(--deep);font-size:18px;margin:0 0 5px}
.exp-card p{color:var(--slate);font-size:14px;margin:0 0 12px;flex:1;line-height:1.5}
.exp-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:13px}
.exp-tag{font-size:11px;font-weight:600;color:var(--deep-2);background:var(--travertine);border:1px solid var(--line);padding:3px 9px;border-radius:999px}
.exp-links{display:flex;gap:16px;font-size:13.5px}
.redflag-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:12px 0 6px}
.redflag{background:#FBF4EE;border:1px solid #EAD9C6;border-left:4px solid #C79A44;border-radius:12px;padding:15px 18px}
.redflag h3{margin:0 0 5px;color:#7A5A22;font-size:15.5px}
.redflag p{margin:0;color:var(--slate);font-size:14px;line-height:1.5}
.tool-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin:12px 0}
.tool-card{border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:#fff}
.tool-card h3{margin:0 0 4px;font-size:15px;color:var(--deep)}
.tool-card p{margin:0 0 8px;font-size:13.5px;color:var(--slate);line-height:1.5}
@media(max-width:820px){.exp-grid,.redflag-grid,.tool-row{grid-template-columns:1fr}}
.worked{background:var(--travertine);border:1px solid var(--line);border-left:4px solid var(--sky-2);border-radius:12px;padding:16px 20px;margin:10px 0 6px}
.worked p{margin:0;color:var(--slate)}
.mistakes{background:#FBF4EE;border:1px solid #EAD9C6;border-radius:12px;padding:4px 20px 12px;margin:10px 0 6px}
.mistakes .checklist li:before{border-color:#B4854B}
.authorities{list-style:none;padding:0;margin:8px 0;font-size:13.5px;color:var(--muted)}
.authorities li{position:relative;padding-left:20px;margin:6px 0;line-height:1.55}
.authorities li:before{content:"";position:absolute;left:4px;top:8px;width:5px;height:5px;background:var(--sky-2);border-radius:50%}
.forms-list li:before{border-color:var(--sky-2)}
.checklist{list-style:none;padding:0;margin:10px 0 4px}
.checklist li{position:relative;padding-left:28px;margin:11px 0;color:var(--slate);font-size:15.5px;line-height:1.6}
.checklist li:before{content:"";position:absolute;left:3px;top:7px;width:9px;height:5px;border:2px solid var(--sky-2);border-top:0;border-right:0;transform:rotate(-45deg)}
.checklist.warn li:before{border-color:#B4854B}
.rel-links{display:flex;flex-wrap:wrap;gap:9px 20px;margin-top:10px}
.rel-links a{color:var(--deep);font-weight:600;font-size:14.5px;text-decoration:none;border-bottom:1px solid var(--sky-2);padding-bottom:1px}
.rel-links a:hover{border-bottom-width:2px}
.asset-tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sky-2);margin-bottom:2px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pathcards .tile{gap:6px}
.cblock{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px}
.cblock h4{font-family:var(--serif);color:var(--deep);font-size:16px;margin:0 0 6px}
.cblock p{font-size:14.5px;color:var(--slate);margin:2px 0}
.cblock .meta{font-size:12.5px;color:var(--muted);margin-top:6px}
.tagrow{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.tag{display:inline-block;padding:8px 14px;border:1px solid var(--line-deep);border-radius:999px;background:var(--deep);color:var(--sky);font-size:13px;font-weight:600}
@media(max-width:900px){.grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.grid-4{grid-template-columns:1fr}}
.faq-nav{display:flex;flex-wrap:wrap;gap:8px 10px;margin:0 0 28px}
.faq-nav a{font-size:13.5px;font-weight:600;color:var(--deep);text-decoration:none;padding:7px 13px;border:1px solid var(--line);border-radius:999px;background:#fff;transition:border-color .15s,background .15s}
.faq-nav a:hover{border-color:var(--sky-2);background:var(--travertine)}
.related{margin-top:32px;padding:20px 22px;background:var(--travertine);border:1px solid var(--line);border-radius:14px}
.related h4{margin:0 0 12px;font-family:var(--serif);color:var(--deep);font-size:15px}
.related a{display:inline-block;margin:0 16px 8px 0;color:var(--deep);font-weight:600;font-size:14px;border-bottom:1px solid var(--sky)}
.acct-cta{margin-top:26px}
.form{display:grid;gap:14px;max-width:560px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field label{display:block;font:600 13px var(--sans);color:var(--deep);margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font:400 15px var(--sans);background:#fff;color:var(--ink)}
.field textarea{min-height:120px;resize:vertical}
.offices-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.office2{border:1px solid var(--line);border-radius:12px;padding:18px}
.office2 b{color:var(--deep);font-size:15px}.office2 a{display:block;color:var(--slate);font-size:14px;margin-top:4px;text-decoration:none}
.calc{background:var(--travertine);border:1px solid var(--line);border-radius:16px;padding:26px;max-width:640px}
.calc .row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:14px}
.calc .out{font-family:var(--serif);font-size:40px;color:var(--deep);font-weight:600;margin-top:8px}
.yr{display:inline-block;font:600 11px var(--sans);color:var(--sky-2);background:#EEF4FB;border:1px solid #D6E6F5;border-radius:8px;padding:3px 9px;margin-left:6px;vertical-align:middle}
.calc-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.calc-tab{font:600 14px var(--sans);color:var(--deep);background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 18px;cursor:pointer}
.calc-tab.on{background:var(--deep);color:#fff;border-color:var(--deep)}
.calc-panel{display:none}.calc-panel.on{display:block}
.req{color:#b8860b;margin-left:2px}
.consent{display:flex;align-items:flex-start;gap:10px;margin-top:4px;color:var(--slate);font-size:14px;line-height:1.45;cursor:pointer}
.consent input{width:16px;height:16px;margin-top:3px;accent-color:var(--deep);flex:none}
.msg{display:none;margin-top:18px;padding:14px 16px;border-radius:12px;font-size:14px;line-height:1.5}
.msg.show{display:block}
.msg.ok{background:#E9F7F0;border:1px solid #9BD7BB;color:#1c6b45}
.msg.info{background:#FBF1D9;border:1px solid #EAD9A8;color:#6b5115}
.msg.err{background:#FBEBEB;border:1px solid #E6B4B4;color:#8a2b2b}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-note{color:var(--muted);font-size:12.5px;margin-top:10px}
.foot-disclaimer{padding-top:22px;margin-top:18px;border-top:1px solid var(--line-deep)}
.foot-disclaimer p{font-size:11px;color:#7E97A6;line-height:1.6;margin:0 0 8px}
.foot-social{display:flex;gap:11px;margin-top:16px}
.foot-social a{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(166,215,240,.12);border:1px solid var(--line-deep)}
.foot-social a:hover{background:rgba(166,215,240,.22)}
.foot-social svg{width:16px;height:16px;fill:var(--sky)}
@media(max-width:820px){.grid-2,.grid-3,.calc .row,.form .row,.offices-list{grid-template-columns:1fr}}

.nda-form{margin:10px 0 6px;max-width:660px}
.nda-check{display:flex;gap:10px;align-items:flex-start;margin:8px 0 16px;font-size:14px;color:var(--slate)}
.nda-check input{margin-top:3px;flex:none}
.nda-actions{display:flex;gap:12px;flex-wrap:wrap}
.nda-accepted{margin-top:12px;padding:22px 24px;border:1px solid var(--line);border-left:4px solid var(--deep);border-radius:12px;background:#F7FAFC}
.nda-accepted h2{margin-top:0}
.nda-eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--sky-2);font-weight:600;margin-bottom:10px}
.nda-fine{font-size:12px;color:var(--muted);margin-top:16px;line-height:1.6}
#ndaDoc h3{font-family:var(--serif);color:var(--deep);font-size:17px;margin:22px 0 4px}
@media print{.ribbon,header,footer.site,.disclosures,.foot-disclaimer,.nda-actions,.nda-check{display:none!important}}


/* ============================================================
   ==============  UI/UX UPGRADE LAYER  (v1)  =================
   Appended to the theme's single site-wide stylesheet.
   Enhances existing theme classes across every page; the base
   styles above are untouched. Tune the whole site from here.
   (Once this is live, retire the temporary WPCode CSS snippet
   so there is a single source of truth.)
   ============================================================ */
:root{
  --u-mono: ui-monospace,"SF Mono","Cascadia Code","Roboto Mono",Menlo,Consolas,monospace;
  --u-tint:#F5FAFD; --u-tint-2:#EAF3FB;
  --u-shadow-soft:0 1px 2px rgba(6,20,40,.04),0 18px 44px -22px rgba(6,20,40,.22);
  --u-shadow-lift:0 2px 6px rgba(6,20,40,.06),0 34px 60px -26px rgba(6,20,40,.34);
}

/* 1 · Section width + rhythm (folds in the WPCode fix) */
.section{padding:88px 0}
.section > .wrap.prose{max-width:var(--wrap,1200px)}
.section > .wrap.prose > h2,
.section > .wrap.prose > h3,
.section > .wrap.prose > p,
.section > .wrap.prose > ul,
.section > .wrap.prose > .kt,
.section > .wrap.prose > .acct-cta{max-width:900px}
.prose h2{font-size:clamp(26px,2.6vw,34px);margin:40px 0 14px}
.prose h2:first-child{margin-top:0}
.prose p{font-size:16.5px;line-height:1.7}

/* 2 · Typography polish */
h1,h2,h3{letter-spacing:-.02em}
.lede{font-size:20px;line-height:1.55}

/* 3 · Eyebrow -> monospace "record" tag (signature motif) */
.eyebrow{font-family:var(--u-mono);font-size:12px;font-weight:500;letter-spacing:.16em;
  display:inline-flex;align-items:center;gap:9px}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--sky-2);
  box-shadow:0 0 8px rgba(91,143,199,.7)}
.on-deep .eyebrow::before,.page-hero .eyebrow::before{background:var(--sky);box-shadow:0 0 9px rgba(166,215,240,.85)}

/* 4 · Hero upgrade + subtle "open rails" atmosphere */
.page-hero{position:relative;overflow:hidden;padding:92px 0 82px;
  background:radial-gradient(1100px 520px at 82% -12%,rgba(43,80,124,.55),transparent 60%),
    linear-gradient(158deg,#143257 0%,#10294a 62%,#0e2340 100%)}
.page-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.6;
  background:repeating-linear-gradient(0deg,transparent 0 71px,rgba(166,215,240,.05) 71px 72px)}
.page-hero::after{content:"";position:absolute;right:-140px;top:-140px;width:560px;height:560px;
  border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(43,80,124,.5),transparent 70%)}
.page-hero .wrap{position:relative;z-index:1}
.page-hero h1{font-size:clamp(36px,5vw,60px);line-height:1.05}
.page-hero .lede{color:#C8DAEC;max-width:42ch}

/* 5 · Cards */
.tile,.mk-card{border-radius:16px;box-shadow:var(--u-shadow-soft);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.tile:hover,.mk-card:hover{transform:translateY(-5px);box-shadow:var(--u-shadow-lift);border-color:#CFE0F0}
.mk-cat{font-family:var(--u-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sky-2)}
.acard{border-radius:18px}
.acard:hover,.lcard:hover{box-shadow:var(--u-shadow-lift)}

/* 6 · Callout boxes -> cool, on-brand (was warm beige) */
.kt{background:var(--sky-soft);border-color:#D3E6F4;border-radius:16px;box-shadow:var(--u-shadow-soft)}

/* 7 · Buttons */
.btn{border-radius:999px;padding:13px 24px}
.btn-deep{box-shadow:0 12px 26px -12px rgba(23,51,89,.55)}
.btn-sky{box-shadow:0 12px 26px -12px rgba(166,215,240,.9)}

/* 8 · Nav scroll state */
header.site{transition:box-shadow .25s ease,background .25s ease}
header.site.scrolled{box-shadow:0 6px 24px -12px rgba(6,20,40,.28)}

/* 9 · Flagship "Select to Secure" band (home, first section after hero) */
.home .page-hero + .section{background:linear-gradient(180deg,var(--u-tint) 0%,var(--u-tint-2) 100%);
  border-bottom:1px solid var(--line)}
.home .page-hero + .section h2{font-size:clamp(30px,3.4vw,42px)}
.home .page-hero + .section h2 + p{font-size:18px;color:var(--slate)}
.home .page-hero + .section .kt{max-width:100%;background:#fff}
.home .page-hero + .section .kt ul{display:grid;grid-template-columns:repeat(3,1fr);
  gap:22px 30px;margin:6px 0 0;padding-left:0;list-style:none}
.home .page-hero + .section .kt li{margin:0}

/* 10 · Motion: reveal on scroll (enabled by JS; safe if JS is off) */
.has-reveal .section{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.has-reveal .section.in{opacity:1;transform:none}

/* 11 · Responsive + reduced motion */
@media (max-width:820px){
  .section{padding:60px 0}
  .page-hero{padding:64px 0 54px}
  .home .page-hero + .section .kt ul{grid-template-columns:1fr}
}
@media (max-width:600px){
  /* phones: the hamburger menu already carries these, so drop the crowding header button */
  .nav .actions{display:none}
}
@media (prefers-reduced-motion:reduce){
  .has-reveal .section{opacity:1;transform:none}
  .page-hero::after{display:none}
}
/* ==================  END UI/UX UPGRADE LAYER  ================== */


/* ==================  ESTIMATORS + 3-UP STEPS  (added 2026-07-23)  ==================
   .steps-3 replaces the scoped <style> block that previously lived inside the
   InvestNow home page content, so site.css is again the single source of truth.
   The .calc-* base styles already exist above; these only add what the
   private-market estimators need.
   ================================================================================= */
.steps-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){.steps-3{grid-template-columns:1fr}}

.calc{max-width:720px}
.calc .out.sm{font-size:20px;font-family:var(--sans);line-height:1.4;font-weight:600}
.calc .out .unit{font-family:var(--sans);font-size:14px;font-weight:500;color:var(--slate);margin-left:8px;letter-spacing:.01em}
.calc .row.row-3{grid-template-columns:1fr 1fr 1fr}
.calc .breakdown{margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line);list-style:none}
.calc .breakdown li{display:flex;justify-content:space-between;align-items:baseline;gap:18px;font:400 14px var(--sans);color:var(--slate);padding:5px 0}
.calc .breakdown li b{font-weight:600;color:var(--deep);font-variant-numeric:tabular-nums;white-space:nowrap}
.calc .breakdown li.total{border-top:1px solid var(--line);margin-top:8px;padding-top:11px}
.calc .breakdown li.total b{font-size:15.5px}
.calc .hint{font:400 12.5px var(--sans);color:var(--muted);margin:-6px 0 12px}
@media (max-width:620px){
  .calc .row.row-3{grid-template-columns:1fr}
  .calc .breakdown li{flex-direction:column;gap:1px;padding:7px 0}
}


/* ==================  PASS 4 (2026-07-23)  ==================
   1. Rules migrated out of per-page <style> blocks so site.css is the only stylesheet.
   2. Larger numerals for the three-up Select to Secure steps.
   =========================================================== */

/* migrated from /partners/, /contact/, /legal/ - form honeypot, must stay hidden */
.hp-field{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* migrated from both glossaries. The two sites previously used #F5F8FC and #F4F8FB;
   standardised on one value here - the difference was imperceptible. */
.gl-nav{position:sticky;top:70px;z-index:40;background:#F4F8FB;padding:10px 0;border-bottom:1px solid #DCE6EE}

/* migrated from the Investor Services /marketplace/ provider grid */
.mk-logo img{width:32px;height:32px;object-fit:contain;display:block}

/* Select to Secure: the numeral carries the sequence, so make it unmistakable.
   .steps-3 is an <ol>; reset list affordances and keep the numerical order on stack. */
ol.steps{list-style:none;margin:0;padding:0}
.steps-3 .step{padding:30px 26px}
.steps-3 .n{width:56px;height:56px;font-size:26px;margin-bottom:18px;
  box-shadow:0 6px 18px rgba(23,51,89,.18)}
.steps-3 .step h3{font-size:22px}
@media (max-width:860px){
  .steps-3 .n{width:48px;height:48px;font-size:23px;margin-bottom:14px}
  .steps-3 .step{padding:26px 22px}
}


/* ==================  PASS 5 (2026-07-23) - navigation breakpoint  ==================
   Hamburger now takes over below 1320px on this site. See the note in build5.py: the
   primary nav does not fit below that width, and previously overflowed from 901px up.
   The original 900px block is left untouched; this later rule wins by source order.
   =================================================================================== */
/* SUPERSEDED BY LAUNCH PASS 3 -- this block hid the nav below
   max-width:1319px. The live value is the MEASURED one at the end of
   this file. Kept as a comment for the audit trail. */

/* Very narrow phones: the Investor Services wordmark is 259px wide, so brand + burger
   exceeded a 320px viewport by 34px. Shrinking the wordmark at <=380px fixes it on both
   sites and is harmless on InvestNow, whose wordmark is shorter. */
@media (max-width:380px){
  .brand .wm{font-size:15px}
  .nav{gap:14px}
}


/* ==========================================================================
   PASS 3 - IMAGERY LAYER
   Inline-SVG icon system, figure wrapper, record-tag label and the faceted
   hexagon motif. Appended to site.css so there is still ONE stylesheet.
   All colour comes from existing :root tokens - no new literals.
   ========================================================================== */

/* One new value, and it is NAMED rather than left as a bare literal - the
   sky-family border for a soft panel. A value with no name cannot be governed,
   which is the lesson from the B5 brand work. */
:root{--sky-line:#D6E7F4}

/* --- record tag: small letter-spaced label with a sky dot ---------------- */
.rtag{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);
  font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sky-2);margin:0 0 10px}
.rtag::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--sky);box-shadow:0 0 0 3px var(--sky-soft);flex:none}
.rtag.on-deep{color:var(--sky)}
.rtag.on-deep::before{box-shadow:0 0 0 3px rgba(166,215,240,.18)}

/* --- icon badge: glyph in a circle -------------------------------------- */
.icn{display:inline-grid;place-items:center;flex:none;border-radius:50%;
  width:46px;height:46px;background:var(--deep);color:var(--sky);
  box-shadow:0 1px 2px rgba(6,20,40,.10)}
.icn svg{width:22px;height:22px;display:block}
.icn.sm{width:34px;height:34px}
.icn.sm svg{width:17px;height:17px}
.icn.lg{width:60px;height:60px}
.icn.lg svg{width:28px;height:28px}
.icn.soft{background:var(--sky-soft);color:var(--deep)}
/* .icn.stepmark replaces the .steps-3 numeral circle and must match it exactly:
   56px desktop / 48px at <=860px, same margin-bottom, same shadow.
   NAMED `stepmark`, NOT `step`: the theme already owns `.step` for the step
   CARDS (.step{border:1px solid var(--line);padding:26px 22px}), so a modifier
   called `step` was also matched by `.steps-3 .step` -- which made this box
   56x62 with border-radius:50%, i.e. an ellipse, and pushed the glyph
   12.5px right and 13.5px down. Never reuse an existing theme token as a
   modifier class. */
.icn.stepmark{width:56px;height:56px;padding:0;border:0;background:var(--deep);
  border-radius:50%;margin-bottom:18px;
  box-shadow:0 6px 18px rgba(23,51,89,.18)}
.icn.stepmark svg{width:26px;height:26px}
@media (max-width:860px){
  .icn.stepmark{width:48px;height:48px;margin-bottom:14px}
  .icn.stepmark svg{width:23px;height:23px}
}
.icn.ring{background:var(--white);color:var(--deep);
  box-shadow:inset 0 0 0 1.5px var(--sky-2)}

/* --- figure wrapper for a diagram --------------------------------------- */
.fig{margin:26px 0;padding:22px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.fig svg{display:block;width:100%;height:auto}
.fig figcaption,.fig .cap{margin-top:14px;font-size:.86rem;line-height:1.5;
  color:var(--muted)}
.fig.on-soft{background:var(--sky-soft);border-color:var(--sky-line)}
@media(max-width:620px){.fig{padding:14px}}

/* --- faceted hexagon motif, decorative only ----------------------------- */
.hexmark{width:38px;height:38px;color:var(--sky-2)}
.hexmark svg{width:100%;height:100%;display:block}

/* --- icons inside the existing step component --------------------------- */
.steps .step .sicn{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.steps .step .sicn .n{margin:0}

/* --- icon + heading row, for category sections -------------------------- */
.ihead{display:flex;align-items:center;gap:14px;margin:0 0 6px}
.ihead h2,.ihead h3{margin:0}
@media(max-width:520px){.ihead{gap:10px}.icn{width:38px;height:38px}
  .icn svg{width:19px;height:19px}}

/* --- icon grid for a tile row ------------------------------------------- */
.iconrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:18px;margin:22px 0}
.iconrow .item{display:flex;flex-direction:column;gap:10px}
.iconrow .item h4{margin:0;font-size:1rem;color:var(--deep)}
.iconrow .item p{margin:0;font-size:.9rem;color:var(--slate);line-height:1.55}

/* --- the stack diagram, as HTML rather than hand-computed SVG ------------
   Two earlier SVG versions failed for the same reason: I was computing text
   widths from character counts and glyph positions by hand. The browser already
   knows text metrics. So the LAYOUT is HTML/CSS and inline SVG is used only for
   the icons, which is what it is actually good at. Nothing can overflow a pill
   again because no width is guessed. */
.stk{display:flex;flex-direction:column}
.stk-glabel{margin:0 0 10px;font-family:var(--sans);font-size:.66rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--sky-2)}
.stk-group{background:var(--white);border:1.5px solid var(--line);
  border-radius:18px;padding:6px 20px}
.stk-group.is-core{background:var(--sky-soft);border-color:var(--sky-line)}
.stk-row{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;
  align-items:center;gap:18px;padding:18px 0}
.stk-row + .stk-row{border-top:1px solid var(--line)}
.stk-group.is-core .stk-row + .stk-row{border-top-color:var(--sky-line)}
.stk-n{width:28px;height:28px;flex:none;border-radius:50%;display:grid;
  place-items:center;background:var(--white);border:1.5px solid var(--sky-2);
  color:var(--deep);font-family:var(--sans);font-size:.78rem;font-weight:700}
.stk-row.is-me .stk-n{background:var(--deep);border-color:var(--deep);color:var(--white)}
.stk-t{min-width:0}
.stk-t b{display:block;font-family:var(--sans);font-size:1.05rem;font-weight:700;
  color:var(--deep);line-height:1.25}
.stk-t span{display:block;margin-top:3px;font-size:.8rem;color:var(--slate);
  line-height:1.45}
.stk-pill{justify-self:end;white-space:nowrap;border-radius:999px;
  padding:7px 17px;background:var(--white);border:1.5px solid var(--sky-2);
  color:var(--deep);font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.01em}
.stk-row.is-me .stk-pill{background:var(--deep);border-color:var(--deep);color:var(--sky)}
.stk-joint{display:flex;align-items:center;gap:14px;margin:0;padding:16px 4px;
  font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sky-2)}
.stk-joint::before,.stk-joint::after{content:"";flex:1;height:1.5px;
  background:var(--sky-2);opacity:.4}
@media(max-width:640px){
  .stk-group{padding:4px 14px}
  .stk-row{grid-template-columns:auto auto minmax(0,1fr);row-gap:12px;padding:16px 0}
  .stk-pill{grid-column:1 / -1;justify-self:start}
  .stk-t b{font-size:1rem}
}

@media(prefers-reduced-motion:no-preference){
  .fig svg .pulse{animation:figpulse 2.8s ease-in-out infinite}
  @keyframes figpulse{0%,100%{opacity:.35}50%{opacity:1}}
}
/* ===================== end imagery layer ============================== */

/* --- the invest / raise fork ---------------------------------------------
   Two goals, made structural. Everything else on the page explains; these two
   cards ask. Built from tokens, no new colour. */
.fork{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;
  margin:26px 0 0}
.fork a{display:flex;flex-direction:column;gap:10px;padding:26px 24px;
  background:var(--white);border:1.5px solid var(--line);border-radius:18px;
  text-decoration:none;transition:border-color .16s,transform .16s,box-shadow .16s}
.fork a:hover{border-color:var(--sky-2);transform:translateY(-2px);
  box-shadow:0 14px 30px -18px rgba(23,51,89,.30)}
.fork b{font-family:var(--sans);font-size:1.14rem;font-weight:700;color:var(--deep);
  line-height:1.25}
.fork span{font-size:.9rem;color:var(--slate);line-height:1.55}
.fork em{margin-top:auto;font-style:normal;font-family:var(--sans);font-size:.8rem;
  font-weight:600;color:var(--sky-2)}
@media(max-width:700px){.fork{grid-template-columns:1fr}}


/* --- delegation comparison table -----------------------------------------
   A four-column comparison with a highlighted "ours" column. Scrolls
   horizontally on narrow screens rather than shrinking the type, and the
   wrapper is focusable so a keyboard user can reach the scroll. */
.cmp-wrap{overflow-x:auto;margin:22px 0;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--white)}
.cmp-wrap:focus-visible{outline:2px solid var(--sky-2);outline-offset:2px}
table.cmp{width:100%;min-width:720px;border-collapse:collapse;font-size:.88rem}
table.cmp th,table.cmp td{padding:12px 14px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line)}
table.cmp thead th{font-family:var(--sans);font-size:.72rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  background:var(--travertine)}
table.cmp thead th.is-us{color:var(--deep);background:var(--sky-soft)}
table.cmp tbody th{font-weight:600;color:var(--deep);width:26%}
table.cmp td{color:var(--slate)}
table.cmp td.is-us{background:var(--sky-soft);color:var(--deep)}
table.cmp tbody tr:last-child th,table.cmp tbody tr:last-child td{border-bottom:0}
@media(max-width:620px){table.cmp th,table.cmp td{padding:10px 11px}}


/* ==========================================================================
   LAUNCH PASS 1 -- 2026-08-01
   Appended block. Every rule below is additive and scoped; delete this whole
   block to revert the CSS half of this pass with no other change.
   ========================================================================== */

/* --- 1. Containment (uncontained overflow at 320px) ----------------------
   The primary CTA carried `white-space:nowrap` from the `.btn` base rule, so
   it rendered ~310-325px inside a ~288px column and pushed past the viewport.
   NOTE ON WHAT IS DELIBERATELY *NOT* USED HERE: `overflow-wrap:anywhere` was
   the obvious fix and it is wrong. Unlike `break-word`, `anywhere` lowers a
   box's MIN-CONTENT contribution to a single character, which lets automatic
   table layout shrink a column below the width of its own heading. That exact
   mechanism produced a measured column-collapse defect on A8 Core. `break-word`
   prevents the overflow without touching intrinsic sizing. */
.btn{white-space:normal}
.nav .actions,.hero-cta,.acct-cta,.btn-row,.foot-top,.foot-col{min-width:0}
.prose,.prose p,.prose li,.prose h1,.prose h2,.prose h3,.prose h4,
.prose h5,.prose dd,.prose dt,td,th{overflow-wrap:break-word}

/* Narrow-width containment, scoped to below 414px where the remaining cases
   live (measured: 34 overflows on 3 Investor Services pages at 320px, 9 on 1
   page at 390px, all of them a 342px grid tile or a 375px table row).
   `table-layout:fixed` rather than `display:block` -- the display:block
   responsive-table hack decouples the painted box from the anonymous inner
   table, which is what made B5's bordered table over-run its own rows. */
@media (max-width:413px){
  /* NOTE: the class vocabulary carries BOTH hyphenated and unhyphenated grid
     names -- `.grid-2` AND `.grid2`. Targeting only one form left a 132px
     over-run on /142/ that looked like a different defect entirely. */
  /* `!important` is load-bearing here and ONLY here: one Investor Services
     page carries an inline style="display:grid;grid-template-columns:1fr 1fr"
     on its .grid2, and an inline declaration outranks every stylesheet rule.
     Scoped to <=413px, so it cannot reach any desktop layout. The alternative
     is editing post_content, which needs an explicit instruction under
     retain-all -- this achieves the same result without touching content. */
  .grid-2,.grid-3,.grid-4,.grid2,.grid3,.grid4,.tiles,.acct-grid,.cards-3,
  .learn-grid,.sec-grid,.split{grid-template-columns:1fr!important}
  .prose table,.prose .kt table{table-layout:fixed;width:100%}
  /* `.textlink` is nowrap, so its trailing arrow glyph pushed out of a tile
     that was itself correctly contained. */
  /* `.textlink` is a non-wrapping flex row, so at 320px its trailing arrow was
     laid out 59px beyond its own right edge -- the CONTAINER fitted and the
     flex item did not, which is why a width check on the parent found nothing. */
  .textlink{white-space:normal;flex-wrap:wrap}
  .textlink,.tile,.mk-card{max-width:100%}
}
.grid-2,.grid-3,.grid-4,.grid2,.grid3,.grid4,.tiles,.acct-grid{min-width:0}
.tile,a.tile,.mk-card,.textlink{min-width:0}

/* --- 2. WCAG 2.5.8 target size (24 x 24 CSS px) -------------------------- */
input[type=checkbox],input[type=radio]{width:24px;height:24px}
/* Carousel dots were 8x8 (22x8 when active). Give the BUTTON a 24x24 hit area
   and draw the visible dot with a pseudo-element, so the affordance is
   unchanged and only the target grows. */
.c-dot{width:24px;height:24px;padding:0;border:0;background:transparent;
  display:inline-grid;place-items:center}
.c-dot::after{content:"";width:8px;height:8px;border-radius:999px;
  background:rgba(166,215,240,.35);transition:width .2s ease,background .2s ease}
.c-dot.is-active{width:24px;background:transparent}
.c-dot.is-active::after{width:12px;height:12px;background:var(--sky)}

/* --- 3. The mobile panel's primary CTA was unreadable -------------------
   MEASURED at 1.28:1 (rgb(32,32,32) on rgb(23,51,89)) on every page of both
   sites. Mechanism: `.mobile-menu a` is specificity (0,1,1) and sets
   `color:var(--ink)`; `.btn-deep` is (0,1,0) and sets `color:#fff`, so the
   panel rule won and painted near-black text on the deep navy button. Only a
   visitor who opened the menu ever saw it, which is why it survived. */
.mobile-menu a.btn.btn-deep{color:#fff}
.mobile-menu a.btn.btn-sky{color:#0E2036}
.mobile-menu a.btn.btn-ghost-deep{color:var(--deep)}

/* --- 4. State coverage the stylesheet had none of -----------------------
   Measured before this pass: `:focus-visible` 3 rules in 55 KB, `:disabled` 0.
   ONE focus ring for every interactive element, and a real disabled state. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--sky-2);outline-offset:2px;border-radius:4px}
.on-deep :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible,
.sec-deep :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline-color:var(--sky)}
:where(button,input,select,textarea,.btn)[disabled],
:where(button,input,select,textarea,.btn)[aria-disabled=true]{
  opacity:.55;cursor:not-allowed;filter:saturate(.4)}
@media (prefers-reduced-motion:reduce){
  .c-dot::after{transition:none}
}
/* --- end LAUNCH PASS 1 --- */

/* ==========================================================================
   LAUNCH PASS 3 -- 2026-08-01 : grouped navigation + five-column footer.
   Appended block. Everything here is additive except the ONE breakpoint value
   noted below, so deleting this block reverts the pass.
   ========================================================================== */

/* --- 1. Group button ---------------------------------------------------- */
/* Spacing, not type, is what buys the room here: the font-size stays at the
   theme's 15.5px. Six group buttons at 8px horizontal padding and no inter-item
   gap leave 16px between adjacent labels. */
nav.primary{gap:0;margin-left:4px;align-items:stretch}
.ng{position:relative;display:flex;align-items:center}
.ngt{display:inline-flex;align-items:center;gap:3px;height:74px;padding:0 8px;
  margin:0;border:0;background:none;cursor:pointer;font:inherit;
  color:var(--ink);font-weight:500;font-size:15.5px;letter-spacing:-.01em;
  white-space:nowrap;position:relative}
.ngt .cv{width:12px;height:12px;flex:none;opacity:.6;transition:transform .18s ease}
.ngt:hover{color:var(--deep)}
/* The active group is marked by COLOUR AND AN UNDERLINE ONLY -- deliberately not
   by font-weight. A bolder label is WIDER, so weight-as-state made the header row
   reflow per page: measured, the nine pages in the Institutional group (the
   longest label) over-ran by up to 5px at widths where every other page fitted.
   A state indicator must not change layout. Colour alone would also fail WCAG
   1.4.1, which is why the underline carries it. */
.ngt[aria-current="true"]{color:var(--deep)}
/* the active-group underline is drawn on the button, inside the header row, so it
   cannot add height and cannot change the row's measured width */
.ngt[aria-current="true"]::after{content:"";position:absolute;left:8px;right:8px;
  bottom:0;height:2px;background:var(--deep);border-radius:2px 2px 0 0}
.ng.open>.ngt{color:var(--deep)}
.ng.open>.ngt .cv{transform:rotate(180deg)}

/* --- 2. Panel ----------------------------------------------------------- */
.ngp{position:absolute;top:100%;left:0;z-index:60;min-width:330px;max-width:min(92vw,392px);
  display:none;padding:10px;background:#fff;border:1px solid var(--line);
  border-radius:14px;box-shadow:0 26px 60px -24px rgba(6,20,40,.34),0 2px 6px rgba(6,20,40,.06)}
.ng.open>.ngp,.ng:hover>.ngp,.ng:focus-within>.ngp{display:block}
.ngp::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
nav.primary .ngp a{display:block;padding:9px 12px;border-radius:10px;
  text-decoration:none;color:var(--ink)}
nav.primary .ngp a:hover,nav.primary .ngp a:focus-visible{background:var(--u-tint);
  color:var(--deep);text-decoration:none}
.ngp a .t{display:block;font-weight:600;font-size:15px;line-height:1.3}
.ngp a .d{display:block;font-size:13px;line-height:1.4;color:var(--slate);margin-top:2px}
/* the two rightmost groups would leave the viewport; flip their panels */
.ng:nth-last-child(1)>.ngp,.ng:nth-last-child(2)>.ngp{left:auto;right:0}

/* --- 3. Mobile panel groups --------------------------------------------- */
.mobile-menu .mm-g{padding:2px 0 10px}
.mobile-menu .mm-g+.mm-g{border-top:1px solid var(--line);padding-top:10px}
.mobile-menu .mm-g h4{margin:0 0 4px;font-size:12px;letter-spacing:.10em;
  text-transform:uppercase;color:var(--deep);font-weight:700}
.mobile-menu .mm-g a{padding:8px 0;border-bottom:0}

/* --- 4. Five-column footer --------------------------------------------- */
/* The grid was authored for brand + 3 columns. Five columns plus the brand
   lockup cannot share one row at this wrap width, so the brand spans the full
   width and the five columns sit under it. */
.foot-top{grid-template-columns:repeat(5,1fr);gap:30px 26px}
.foot-brand{grid-column:1/-1;padding-bottom:6px;border-bottom:1px solid var(--line-deep);
  margin-bottom:6px}
.foot-brand p{max-width:52ch}
.foot-col a{display:block}
@media (max-width:1100px){.foot-top{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.foot-top{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.foot-top{grid-template-columns:1fr}}

/* --- 5. THE BREAKPOINT (the only non-additive line in this block) -------
   MEASURED IN CHROMIUM 141, nav forced visible, real stylesheet, per-element
   ground truth (NOT document.scrollWidth -- see the InvestNow pass, where
   scrollWidth said a row fitted 20px before it did):
       base, 7 flat links    brand 259 + nav 598 + actions 319 + 3 gaps 66 = 1242
       new, 6 grouped        brand 259 + nav 537 + actions 319 + 3 gaps 66 = 1181
   Fit points: 1358 (base) -> 1218 (new). The live value below is 1217.
   TWO THINGS THIS EXPOSED. (a) THE 1319px BREAKPOINT WAS ALREADY 39px TOO
   GENEROUS: the flat nav needs 1358px, so on the live site every page overflows
   between 1320 and 1357px. (b) THE REAL CONSTRAINT IS THE 1200px .wrap, NOT THE
   VIEWPORT -- the content box is 1148px and even the flat row needs 1242, so the
   header has always spilled into the centred wrap's outer margin.
   The room came from SPACING, NOT TYPE: font-size stays 15.5px; the saving is
   one fewer group, 8px button padding, no inter-item gap, a 12px caret.
   1023px remains unreachable: it would need a 700px row.
   ----------------------------------------------------------------------- */
@media (max-width:1217px){
  nav.primary,.nav .actions .login{display:none}
  .navtoggle{display:inline-flex}
}
/* --- end LAUNCH PASS 3 --- */

/* ==========================================================================
   PUNCH-LIST PASS -- 2026-08-01. Reported defects plus the sitewide button
   audit that was asked for. Appended block; deleting it reverts the pass.
   ========================================================================== */

/* --- 1. ICON GLYPHS WERE INVISIBLE ON DARK CIRCLES -----------------------
   REPORTED on the home page ("What brings you here?"), and measurement found
   it in more places than that.
   `.icn` is a <span>, and it sets `color:var(--sky)` at specificity (0,1,0).
   Its container sets `.fork span{color:var(--slate)}` at (0,1,1) -- an element
   selector beats nothing -- so the SVG, which paints `fill:currentColor`,
   rendered slate #3D4A54 on a deep-navy #173359 circle. Effectively invisible.
   Six container rules colour a bare `span`: .fork .stk-t .acct .keynums
   .c-stat .proof -- every one of them can capture an icon. All six are
   answered here rather than only the one that was reported, and the .soft and
   .ring variants keep their own colours. */
.fork span.icn,.stk-t span.icn,.acct span.icn,
.keynums span.icn,.c-stat span.icn,.proof span.icn{color:var(--sky)}
.fork span.icn.soft,.stk-t span.icn.soft,.acct span.icn.soft,
.keynums span.icn.soft,.c-stat span.icn.soft,.proof span.icn.soft,
.fork span.icn.ring,.stk-t span.icn.ring,.acct span.icn.ring,
.keynums span.icn.ring,.c-stat span.icn.ring,.proof span.icn.ring{color:var(--deep)}

/* --- 2. THE STACKED-PADDING VOID ----------------------------------------
   REPORTED as "way too much extra white space" before the section that
   follows the platform-figures band.
   MEASURED at 1440px: the band is `section.sec-tight` (66px bottom padding)
   and the next block is `section.section` (88px top). Both sit on white, so
   the 154px of stacked padding reads as one void -- 138px of it between the
   last line of the disclaimer and the next eyebrow, against 54px from that
   eyebrow to its own heading. Two-and-a-half times the internal rhythm.
   Only the same-background case is tightened; a section that changes colour
   still gets its full padding, because there the padding is doing work. */
section.sec-tight + section.section{padding-top:44px}
section.sec-tight:has(+ section.section){padding-bottom:44px}

/* --- 3. `.api-tbl` WAS NEVER DEFINED ON THIS SITE ------------------------
   REPORTED as a chart that needed beautifying. The cause is not taste: an
   undefined-class audit over all page content found `.api-tbl` is the ONLY
   class used in InvestNow's content that has no rule anywhere in the
   stylesheet, so the delegation table was rendering as a bare browser table
   inside a rounded wrapper. Defined here to match the site's other tables. */
table.api-tbl{width:100%;border-collapse:collapse;font-size:15px}
table.api-tbl thead th{background:var(--sky-soft);color:var(--deep);
  font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;text-align:left;padding:13px 18px;
  border-bottom:1px solid var(--line);white-space:nowrap}
table.api-tbl tbody td{padding:13px 18px;vertical-align:top;color:var(--slate);
  line-height:1.55;border-bottom:1px solid var(--line)}
table.api-tbl tbody tr:last-child td{border-bottom:0}
table.api-tbl tbody tr:nth-child(even){background:rgba(244,239,231,.45)}
table.api-tbl tbody tr:hover{background:var(--sky-soft)}
/* first column is the property name: make it read as a label, not body copy */
table.api-tbl tbody td:first-child{color:var(--deep);font-weight:600;
  width:30%;white-space:normal}
table.api-tbl tbody td:first-child strong{font-weight:600}
@media (max-width:640px){
  table.api-tbl,table.api-tbl tbody,table.api-tbl tr,table.api-tbl td{display:block;width:auto}
  table.api-tbl thead{display:none}
  table.api-tbl tbody tr{border-bottom:1px solid var(--line);padding:6px 0}
  table.api-tbl tbody td{border:0;padding:5px 16px}
  table.api-tbl tbody td:first-child{width:auto;padding-top:12px}
}

/* --- 4. THE COMPARISON TABLE'S ROW LABELS ------------------------------
   REPORTED: in "The three ways to let someone act for you" the first column
   sat on white while the header row carried a tint, which made the row labels
   read as data rather than as headings. They are already marked up correctly
   as `<th scope="row">`, so they only needed the header treatment. */
table.cmp tbody th[scope="row"]{background:var(--sky-soft);color:var(--deep);
  font-weight:600;text-align:left;vertical-align:top}

/* --- 5. THE BUTTON AUDIT -------------------------------------------------
   ASKED FOR: a sitewide check for call-to-action buttons on a white
   background, to be filled like the header's CTA -- except on a dark section,
   where they should match the sky-filled primary, and except for a secondary
   button sitting beside a primary, which should stay outlined.

   MEASURED across all published pages:
     .btn .btn-deep         96  filled primary on light  -- already correct
     .btn .btn-ghost-deep   86  outlined; of these 72 sit BESIDE a filled
                                primary (correct as secondaries) and 12 are
                                ALONE in their container (the reported defect)
     .btn .btn-sky           3  filled primary on dark   -- already correct
     .btn .btn-ghost-sky     2  outlined on dark ("Request info") -- correct
     .btn                    1  NO VARIANT -> transparent background
     .btn .btn-ghost         1  class is undefined anywhere in the stylesheet
   So only 14 buttons on the whole site are wrong, and the 72 correct
   secondaries must not be touched. The rules below change exactly those.

   (a) A first version of this rule filled every outlined button that had no
   filled sibling. Rendering all 130 pages showed that catches 14, and 11 of
   them are the "<- Legal Center" BACK-LINK at the foot of each legal
   sub-document, plus 2 are "see all" links sitting beside a section heading.
   None of those is a call to action, and a navy pill is the wrong affordance
   for going back. So the rule is scoped to `.acct-cta` -- the wrapper the
   theme already uses to mark a section's call-to-action line. The other 13
   are listed in the findings document for a decision rather than changed. */
p.acct-cta:has(> a.btn.btn-ghost-deep):not(:has(> a.btn-deep)):not(:has(> a.btn-sky))
  > a.btn.btn-ghost-deep{background:var(--deep);color:#fff;border-color:var(--deep);
  box-shadow:0 12px 26px -12px rgba(23,51,89,.55)}
p.acct-cta:has(> a.btn.btn-ghost-deep):not(:has(> a.btn-deep)):not(:has(> a.btn-sky))
  > a.btn.btn-ghost-deep:hover{background:#0F2A48;border-color:#0F2A48}

/* (b) A `.btn` with no variant used to render with a transparent background
   and inherited text -- an invisible button. It now defaults to the primary
   treatment, so this class of defect cannot recur silently. */
a.btn:not([class*="btn-"]){background:var(--deep);color:#fff;border-color:var(--deep);
  box-shadow:0 12px 26px -12px rgba(23,51,89,.55)}
a.btn:not([class*="btn-"]):hover{background:#0F2A48;border-color:#0F2A48}

/* (c) `.btn-ghost` is used in content but defined nowhere; it is the outlined
   secondary under a different name. Aliased rather than left unstyled. */
a.btn.btn-ghost{border-color:var(--line);color:var(--deep);background:transparent}
a.btn.btn-ghost:hover{border-color:var(--deep);background:#fff}

/* --- 6. Three more classes used in content and defined nowhere ----------
   Found by the same audit; all were rendering as unstyled defaults. */
.mk-sum{display:block;font-size:14px;line-height:1.55;color:var(--slate);margin-top:6px}
p.lead,.lead{font-size:18px;line-height:1.6;color:var(--slate)}
.narrow{max-width:760px;margin-inline:auto}
/* --- end PUNCH-LIST PASS --- */