html[data-theme="dark"]{
  --ink: #e8eefc;
  --ink-dim: #c7d2ff;
  --card: #0e162e;
  --edge: #3a52a0;
  --bg-0: #0b1020;
  --bg-1: #101735;
  --glow: #5b7bff;
}

html{scroll-behavior:smooth}
body{
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Wider canvas with breathing room */
.wrap{max-width: 1200px; margin-inline:auto; padding-inline: 28px}

/* Sticky, translucent header with pill nav */
header[role="banner"]{
  position: sticky; top: 0; z-index: 80;
  backdrop-filter: saturate(130%) blur(10px);
  background: linear-gradient(180deg, rgba(10,16,40,.75), rgba(10,16,40,.45));
  border-bottom: 1px solid rgba(120,160,255,.12);
}
.masthead{display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:12px}
.brand{display:flex; align-items:center; gap:10px}
.brand img{height:34px; width:auto; filter: drop-shadow(0 2px 10px rgba(80,120,255,.25))}

nav[aria-label="Primary"] ul{display:flex; gap:18px; margin:0; padding:0; list-style:none; flex-wrap:wrap}
nav[aria-label="Primary"] a{
  display:inline-block; padding:10px 12px; border-radius:999px;
  text-decoration:none; color:inherit; opacity:.96;
  transition: transform .12s ease, background-color .12s ease, opacity .12s ease;
}
nav[aria-label="Primary"] a:hover{opacity:1; transform: translateY(-1px); background: rgba(120,160,255,.10)}
nav[aria-label="Primary"] a.active{background: rgba(120,160,255,.16); box-shadow: inset 0 0 0 1px rgba(120,160,255,.25)}

/* Typography */
h1{font-size: clamp(30px, 2.2vw + 1rem, 44px); line-height:1.14; margin: 18px 0 10px}
h2{font-size: clamp(20px, 1.1vw + .9rem, 26px); line-height:1.22; margin: 12px 0 8px}
p, li{color: var(--ink); line-height:1.7}
.muted{color: var(--ink-dim)}

/* Free‑flowing sections: remove heavy card boxes */
.card{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Instead, use gentle separators and spacing */
.grid{display: grid; gap: 26px}
@media (min-width: 760px){
  .grid{grid-template-columns: repeat(12, minmax(0,1fr))}
  .grid > * {grid-column: span 6}
}
/* Each item gets a soft halo and bottom divider, not a box */
.grid > * > .pair{
  padding: 14px 0 20px;
  border-bottom: 1px solid rgba(140,180,255,.18);
}
.grid > *:last-child > .pair{border-bottom: 0}

.pair{display:flex; gap:14px; align-items:flex-start}
.pair img{width:32px; height:32px; filter: drop-shadow(0 0 10px rgba(120,160,255,.28))}

/* Document tiles and modal: lighten surfaces, keep readability */
[class*="tile"], [data-pdf], .doc, .document-card{
  background: linear-gradient(180deg, rgba(18,26,52,.35), rgba(16,22,44,.25)) !important;
  border: 0 !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.40) !important;
  border-radius: 16px !important;
}
.modal[open]{backdrop-filter: blur(3px)}

/* Subtle section glow on first block only */
main.wrap > :first-child{
  background: radial-gradient(1000px 500px at 120% -10%, rgba(120,160,255,.10), transparent 40%), transparent;
  padding: clamp(6px, 1vw, 12px);
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(120,160,255,.06);
}

/* Links */
a:not([class]){color: inherit; text-decoration-color: rgba(160,200,255,.6); text-underline-offset: 2px}
a:not([class]):hover{opacity:.96}

/* HR divider */
hr{border:0; height:1px; background:linear-gradient(90deg, transparent, rgba(120,160,255,.22), transparent); margin:24px 0}



/* === Home page layout (no borders, arcane bands) === */
.home .hero{
  position: relative;
  padding: clamp(40px, 6vw, 120px) 0 clamp(24px, 3vw, 48px);
  background:
    radial-gradient(1200px 600px at 120% -20%, rgba(120,160,255,.16), transparent 40%),
    radial-gradient(1000px 500px at -10% 20%, rgba(80,140,255,.12), transparent 40%);
  border-radius: 20px;
}
.hero .sub{font-size: clamp(16px, .9vw + .8rem, 20px); color: var(--ink-dim); max-width: 62ch}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top: 14px}
.btn{cursor:pointer; text-decoration:none}
.btn.pill{
  border-radius:999px; padding:12px 16px;
  background: radial-gradient(120% 120% at 120% -20%, rgba(120,160,255,.26), rgba(120,160,255,.18));
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(140,180,255,.28), 0 10px 24px rgba(0,0,0,.35);
  transition: transform .12s ease;
}
.btn.pill:hover{transform: translateY(-1px)}
.btn.ghost{
  border-radius:999px; padding:12px 16px;
  background: rgba(120,160,255,.08);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(140,180,255,.22);
}

/* Bands: full-bleed feel without boxes */
.band{margin-top: clamp(26px, 4vw, 48px)}
.band .band-inner{
  padding: clamp(16px, 2vw, 28px);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(18,26,52,.60), rgba(16,22,44,.55)),
    radial-gradient(1200px 600px at 120% -20%, rgba(120,160,255,.10), transparent 40%);
  box-shadow: 0 20px 48px rgba(0,0,0,.45);
}
.features .band-inner{display:grid; gap:22px}
@media (min-width: 840px){
  .features .band-inner{grid-template-columns: repeat(3, minmax(0,1fr))}
}
.f{display:flex; gap:14px}
.f img{width:36px; height:36px; filter: drop-shadow(0 0 12px rgba(120,160,255,.32))}
.f h2{margin:2px 0 6px}

/* Quick links — flowing tiles without borders */
.grid-3{display:grid; gap:16px}
@media (min-width: 840px){ .grid-3{grid-template-columns: repeat(3, minmax(0,1fr))} }
.q{
  display:flex; flex-direction:column; gap:4px; padding:16px 18px; border-radius:16px;
  text-decoration:none; color:var(--ink);
  background: linear-gradient(180deg, rgba(18,26,52,.45), rgba(16,22,44,.35));
  box-shadow: 0 16px 40px rgba(0,0,0,.40);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.q .kicker{font-size:12px; letter-spacing:.3px; text-transform:uppercase; color: var(--ink-dim)}
.q .hint{color: var(--ink-dim); font-size: 14px}
.q:hover{transform: translateY(-2px); filter: drop-shadow(0 0 10px rgba(120,160,255,.22))}

/* Callout */
.callout .band-inner{ text-align:center }
.callout .cta-row{ justify-content:center }


/* Legacy content smoothing on Home */
.home.legacy .card,
.home.legacy [class*="card"]{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.home.legacy section, 
.home.legacy .section, 
.home.legacy .wrap-inner{
  border: 0 !important;
}



/* === Home Rev3: restructure with original content preserved === */
.home.rev3 .hero--rev3{
  padding: clamp(44px, 6vw, 128px) 0 clamp(24px, 3vw, 48px);
  background:
    radial-gradient(1200px 600px at 120% -20%, rgba(120,160,255,.18), transparent 40%),
    radial-gradient(1000px 500px at -10% 20%, rgba(80,140,255,.12), transparent 40%);
  border-radius: 20px;
}
.home.rev3 .features--rev3 .band-inner{display:grid; gap:22px}
@media (min-width: 880px){
  .home.rev3 .features--rev3 .band-inner{grid-template-columns: repeat(3, minmax(0,1fr))}
}
.home.rev3 .content-flow{
  /* strip borders/boxes from legacy nodes and create breathing rhythm */
  --flow: 18px;
}
.home.rev3 .content-flow > * + *{margin-top: var(--flow)}
.home.rev3 .content-flow h1,
.home.rev3 .content-flow h2,
.home.rev3 .content-flow h3{margin-top: calc(var(--flow) * 1.2)}
.home.rev3 .content-flow .card,
.home.rev3 .content-flow [class*="card"],
.home.rev3 .content-flow [class*="box"],
.home.rev3 .content-flow [class*="panel"]{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.home.rev3 .legacy-content .band-inner{
  background:
    linear-gradient(180deg, rgba(18,26,52,.58), rgba(16,22,44,.50)),
    radial-gradient(1200px 600px at 120% -20%, rgba(120,160,255,.08), transparent 40%);
  box-shadow: 0 20px 48px rgba(0,0,0,.45);
  border-radius: 20px;
  padding: clamp(16px, 2vw, 28px);
}
/* Keep readable ink */
.home.rev3 .content-flow, 
.home.rev3 .content-flow p, 
.home.rev3 .content-flow li{color: var(--ink)}

/* Spacing + hover affordances for quicklinks remain from v2 */



/* === Immersive Narrative Homepage (no CTAs/links added) === */
.home.immersive .story{
  display:block;
  margin-top: clamp(18px, 3vw, 36px);
}
.home.immersive .slice{
  position: relative;
  margin: clamp(12px, 2.6vw, 28px) 0;
  padding: 0;
  border: 0;
}
.home.immersive .slice-inner{
  padding: clamp(10px, 2vw, 18px) clamp(8px, 1.8vw, 16px);
  border-radius: 18px;
  background:
    radial-gradient(900px 420px at 110% -10%, rgba(120,160,255,.10), transparent 40%),
    linear-gradient(180deg, rgba(18,26,52,.55), rgba(16,22,44,.45));
  box-shadow: 0 16px 40px rgba(0,0,0,.38);
}
/* Alternate glow intensity to avoid a repetitive feel */
.home.immersive .slice:nth-of-type(2n) .slice-inner{
  background:
    radial-gradient(900px 420px at -10% 10%, rgba(120,160,255,.08), transparent 40%),
    linear-gradient(180deg, rgba(18,26,52,.48), rgba(16,22,44,.40));
}
/* Typography & readability */
.home.immersive .slice-inner p{ 
  color: var(--ink);
  line-height: 1.75;
  margin: 0;
}
/* First paragraph gets a lede treatment (styling only) */
.home.immersive .slice:first-of-type .slice-inner p{
  font-size: clamp(18px, 1.1vw + .95rem, 22px);
}
/* Optional drop cap for the very first paragraph */
.home.immersive .slice:first-of-type .slice-inner p::first-letter{
  float: left;
  font-size: 2.6em;
  line-height: .9;
  padding-right: .06em;
  color: var(--glow);
  font-weight: 700;
  filter: drop-shadow(0 0 8px rgba(120,160,255,.3));
}
/* Headings & other blocks preserved if present */
.home.immersive .slice-inner h1,
.home.immersive .slice-inner h2,
.home.immersive .slice-inner h3{margin: 0 0 8px; color: var(--ink)}
.home.immersive .slice-inner ul, 
.home.immersive .slice-inner ol{margin: 6px 0 0 1.2em}
.home.immersive .slice-inner img{max-width:100%; height:auto; display:block; margin: 6px 0}

/* Remove any residual borders from legacy classes inside */
.home.immersive .slice-inner .card,
.home.immersive .slice-inner [class*="card"],
.home.immersive .slice-inner [class*="box"],
.home.immersive .slice-inner [class*="panel"]{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}



/* === Immersive (Strict) — No extra CTAs/links injected === */
.home.immersive.strict .story{margin-top: clamp(18px, 3vw, 36px)}
.home.immersive.strict .slice{position:relative; margin: clamp(12px, 2.6vw, 28px) 0}
.home.immersive.strict .slice-inner{
  padding: clamp(10px, 2vw, 18px) clamp(8px, 1.8vw, 16px);
  border-radius: 18px;
  background:
    radial-gradient(900px 420px at 110% -10%, rgba(120,160,255,.10), transparent 40%),
    linear-gradient(180deg, rgba(18,26,52,.55), rgba(16,22,44,.45));
  box-shadow: 0 16px 40px rgba(0,0,0,.38);
}
.home.immersive.strict .slice:nth-of-type(2n) .slice-inner{
  background:
    radial-gradient(900px 420px at -10% 10%, rgba(120,160,255,.08), transparent 40%),
    linear-gradient(180deg, rgba(18,26,52,.48), rgba(16,22,44,.40));
}
.home.immersive.strict .slice-inner p,
.home.immersive.strict .slice-inner li{color: var(--ink); line-height:1.75; margin:0}
.home.immersive.strict .slice-inner h1,
.home.immersive.strict .slice-inner h2,
.home.immersive.strict .slice-inner h3{margin: 0 0 8px; color: var(--ink)}
.home.immersive.strict .slice-inner img{max-width:100%; height:auto; display:block; margin: 6px 0}

/* Remove any legacy borders/shadows that might sneak in */
.home.immersive.strict .slice-inner .card,
.home.immersive.strict .slice-inner [class*="card"],
.home.immersive.strict .slice-inner [class*="box"],
.home.immersive.strict .slice-inner [class*="panel"]{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}


/* Subtle marker styling for retained headings */
.home.immersive.strict.curated .slice-inner h2{
  opacity:.9;
  letter-spacing:.2px;
}
.home.immersive.strict.curated .slice-inner h2:after{
  content:"";
  display:block;
  margin-top:8px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(120,160,255,.22), transparent);
}


/* === Site-wide immersive narrative wrappers === */
main.wrap.immersive.site-wide .story{margin-top: clamp(18px, 3vw, 36px)}
main.wrap.immersive.site-wide .slice{position:relative; margin: clamp(12px, 2.6vw, 28px) 0}
main.wrap.immersive.site-wide .slice-inner{
  padding: clamp(10px, 2vw, 18px) clamp(8px, 1.8vw, 16px);
  border-radius: 18px;
  background:
    radial-gradient(900px 420px at 110% -10%, rgba(120,160,255,.10), transparent 40%),
    linear-gradient(180deg, rgba(18,26,52,.55), rgba(16,22,44,.45));
  box-shadow: 0 16px 40px rgba(0,0,0,.38);
}
main.wrap.immersive.site-wide .slice:nth-of-type(2n) .slice-inner{
  background:
    radial-gradient(900px 420px at -10% 10%, rgba(120,160,255,.08), transparent 40%),
    linear-gradient(180deg, rgba(18,26,52,.48), rgba(16,22,44,.40));
}
main.wrap.immersive.site-wide .slice-inner p,
main.wrap.immersive.site-wide .slice-inner li{color: var(--ink); line-height:1.75; margin:0}
main.wrap.immersive.site-wide .slice-inner h1,
main.wrap.immersive.site-wide .slice-inner h2,
main.wrap.immersive.site-wide .slice-inner h3{margin: 0 0 8px; color: var(--ink)}
main.wrap.immersive.site-wide .slice-inner img{max-width:100%; height:auto; display:block; margin: 6px 0}