/* Stripe/DocuSign-inspired light theme + fast nav dropdowns (no heavy JS) */
:root{
  --d365-dropdown-bg: #0b1220;
  --d365-dropdown-border: rgba(255,255,255,.10);

  --bg:#ffffff;
  --fg:#0b1220;
  --muted:#51606f;
  --border:rgba(15,23,42,.12);
  --card:#ffffff;
  --shadow:0 12px 35px rgba(15,23,42,.10);
  --shadow2:0 8px 20px rgba(15,23,42,.08);
  --radius:16px;
  --radius2:12px;
  --accent:#635bff; /* Stripe-ish purple */
  --accent2:#0ea5e9; /* soft blue */
  --link:#0b1220;
}

.service-matrix .center-col{
  text-align:center;
  font-weight:500;
  position:relative;
  left:-5ch;
}

/* Mobile: slightly smaller left shift to avoid wrapping */
@media (max-width: 600px){
  .service-matrix .center-col{
    left:-3ch;
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--fg);
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(99,91,255,.14), transparent 60%),
    radial-gradient(900px 500px at 85% 0%, rgba(14,165,233,.12), transparent 55%),
    #fff;
  font-size: var(--d365-body);

}

/* Layout helpers */
a{color:inherit}

/* Header (smaller, cleaner) */
header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.82); backdrop-filter:saturate(160%) blur(10px); border-bottom:none;}
.topbar{display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:14px 0; flex-wrap:nowrap;}
.navwrap{min-width:0;}
.brand .name{font-weight:800; letter-spacing:.2px; font-size:20px; line-height:1.1}
.brand .tag{color:var(--muted); font-size:13px; line-height:1.25; margin-top:4px}
.brand{max-width:480px; flex:0 1 480px;}

/* Desktop nav */
.navwrap{display:flex; align-items:center; gap:12px; flex-wrap:nowrap;}
.navlinks{display:flex; align-items:center; gap:10px; flex-wrap:nowrap; justify-content:flex-end; white-space:nowrap;}
.navtop{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 10px;
  white-space:nowrap;
  border-radius:10px;
  text-decoration:none;
  color:var(--link);
  font-weight:600;
  font-size:13.5px;
}
.navtop:hover{background:rgba(15,23,42,.05)}
.navitem{position:relative; display:inline-flex; align-items:center}
.navitem::after{
  content:"";
  position:absolute;
  left:-6px;
  right:-6px;
  top:100%;
  height:14px;
}


/* Invisible hover bridge between the top link and the menu panel */

.dropdown::before{
  /* Invisible hover bridge between the top link and the menu panel */
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-12px;
  height:12px;
}
.ddcol{padding:6px 8px; border-radius:14px}
.navcta:hover{filter:brightness(.97)}

/* Existing details "Menu" becomes mobile-only */
.menu{display:none}
.menu-btn{cursor:pointer}

/* Cards / sections (gentle polish without breaking your layout) */
main .card, .card, .panel, .box{
  background:rgba(255,255,255,.9);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow2);
}

/* Links list (if present) */
.navlink{color:var(--fg); text-decoration:none}
.navlink:hover{text-decoration:underline}

/* Mobile */
@media (max-width: 980px){
  .navlinks{display:none;}
  .menu{display:block}
  .topbar{align-items:flex-start; flex-wrap:nowrap;}
  .dropdown{position:static; display:block; min-width:unset; border:none; box-shadow:none; padding:0; transform:none}
  header{backdrop-filter:none; background:#fff}
}

/* Improve tap targets + avoid overflow */
@media (max-width: 520px){
  .brand .name{font-size:18px}
  .brand .tag{font-size:12px}
}

/* Mobile menu panel sections */
.menu-panel{padding:12px; background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow2); margin-top:10px}
.menusec{padding:10px 6px}
.menutitle{font-size:12px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:6px 4px}
.menu-panel .navlink{display:block; padding:10px 10px; border-radius:12px; font-weight:700; text-decoration:none}
.menu-panel .navlink:hover{background:rgba(15,23,42,.05)}

/* --- Start Intake (navcta) text color override --- */
.navcta{
  color:#e7eef8;
 border: 1px solid rgba(127,182,255,.22); box-shadow:none;}
.navcta:hover,
.navcta:focus,
.navcta:active{
  color:#e7eef8 !important;
  text-decoration:none;
}
/* Table annotations / legal qualifiers */
td.legal-note {
  padding-left: 5.0rem;
}


/* Documentation note (legal optics) */
.documentation-note{font-size:13px; color:var(--muted); opacity:1; margin-top:1rem; line-height:1.5;}
.documentation-note strong{color:var(--text); font-weight:650;}


/* Article byline (Insights) */
.article-byline{
  margin-top:.35rem;
  margin-bottom:1.05rem;
  color:var(--muted);
  font-size:.95rem;
  line-height:1.35;
}
.article-byline .dot{
  margin:0 .45rem;
  opacity:.7;
}


/* === D365 Layout System Hardening (v12) === */
/* Ensure content column is truly centered (prevents right-shift / "blank left") */
/* Deterministic grid (no auto-fit/minmax collapse) */
.cards-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

@media (max-width: 1024px){
  .cards-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .cards-grid{ grid-template-columns: 1fr; }
}

.cards-grid > .card{ height: 100%; }

/* Standard card sections: consistent internal padding and rhythm */
.card-section{
  padding: 32px;
}
@media (max-width: 640px){
  .card-section{ padding: 20px; }
}

/* CTA rows under grids */
.btnbar,
.cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top: 16px;
}

/* Related guides alignment safeguard */
.related-guides{ max-width:1120px; margin-left:auto; margin-right:auto; }

/* Override legacy wrap constraint (ensure modern laptop width) */

/* ===== Canonical Wrap Definition (Single Source of Truth) ===== */
.wrap {
  width: min(1600px, calc(100% - 64px));
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
}

/* === Authority width restore vA13 (fix narrow centered layout regressions) === */
.wrap{
  width: min(1560px, calc(100% - 64px)) !important;
  max-width: 1560px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
}
.site-main{
  max-width: none !important;
}
@media (max-width: 720px){
  .wrap{
    width: calc(100% - 32px) !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}



/* === TYPOGRAPHY SYSTEM (uniform across all pages) === */
:root{
  --d365-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --d365-body: 16px;
  --d365-h1: clamp(2.05rem, 2.3vw, 2.55rem);
  --d365-h2: clamp(1.45rem, 1.6vw, 1.75rem);
  --d365-h3: 1.2rem;
}
html{ font-size: var(--d365-body); }
body{
  font-family: var(--d365-font);
  line-height: 1.55;
}
h1{ font-size: var(--d365-h1); line-height: 1.14; letter-spacing: -0.2px; }
h2{ font-size: var(--d365-h2); line-height: 1.2; letter-spacing: -0.15px; }
h3{ font-size: var(--d365-h3); line-height: 1.25; }
p, li{ font-size: 1rem; }

/* Home page should not override typography sizing */
.home-authority .home-hero h1{ font-size: var(--d365-h1) !important; }
.home-authority .home-hero .lead{ font-size: 1rem !important; }


/* === D365 Typography System (uniform across pages incl. index) === */
:root{
  --d365-body-size: 16px;
  --d365-body-line: 1.6;
  --d365-h1-size: clamp(30px, 4vw, 42px);
  --d365-h2-size: clamp(22px, 2.4vw, 28px);
  --d365-h3-size: 18px;
  --d365-small-size: 13px;
}
html{ font-size: var(--d365-body-size); }
body{ line-height: var(--d365-body-line); }
main p, main li{ font-size: 1rem; }
main h1{ font-size: var(--d365-h1-size); line-height: 1.15; letter-spacing: -0.3px; }
main h2{ font-size: var(--d365-h2-size); line-height: 1.2; }
main h3{ font-size: var(--d365-h3-size); line-height: 1.25; }
.small, .muted.small{ font-size: var(--d365-small-size); }

/* === Dropdown density (tighter, law-firm feel) === */
header .ddgrid{ gap: 10px !important; }
header .ddcol{ padding: 4px 6px !important; }
header .ddh{ margin-bottom: 6px !important; }
header