/* Delegus redesign layer (held on the redesign branch until the owner approves the full preview).
   The demo video's visual language: deep navy → cobalt grounds, a slow-breathing glow, the Delegus seal,
   Bricolage + Plex Mono, Lucide icons, calm motion. Loaded after each page's own styles; pages opt in with
   body.rd and mark dark bands with .rd-band. Reduced motion shows the final state. */
:root{
  --rd-navy:#10243A;--rd-navy-2:#0A1624;--rd-navy-3:#0A1827;--rd-line:#22406A;
  --rd-on:#EEF3F9;--rd-on-2:#B3C4D4;--rd-on-3:#8199AE;--rd-cob:#2447F0;--rd-cob-l:#8FA6FF;--rd-ok:#7CE0A8;
  --rd-ground:linear-gradient(160deg,var(--rd-navy-2) 0%,var(--rd-navy) 52%,var(--rd-navy-3) 100%);
  --rd-glow:radial-gradient(900px 620px at 82% -6%,rgba(36,71,240,.38),rgba(36,71,240,0) 62%),radial-gradient(640px 520px at -6% 108%,rgba(110,139,255,.14),rgba(0,0,0,0) 60%);
  --rd-ease:cubic-bezier(.2,.7,.2,1);
}

/* header: dark glass */
body.rd header{background:rgba(10,22,36,.94);backdrop-filter:blur(14px);border-bottom:1px solid rgba(110,139,255,.16)}
body.rd header .brand{color:#fff}
body.rd header .brand svg path{fill:#fff}
body.rd header nav a{color:var(--rd-on-2)}
body.rd header nav a:hover,body.rd header nav a[aria-current]{color:#fff}
body.rd header nav .cta{background:#fff;color:var(--rd-navy)}
body.rd header nav .cta:hover{background:#E8EDF1}
body.rd .menu-btn{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}

/* dark band with breathing glow and a faint grid */
.rd-band{position:relative;color:var(--rd-on);background:var(--rd-ground);overflow:hidden;isolation:isolate}
.rd-band::before{content:"";position:absolute;inset:-10%;background:var(--rd-glow);z-index:-1;animation:rd-breathe 16s ease-in-out infinite alternate}
.rd-band::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.35;background-image:linear-gradient(rgba(110,139,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(110,139,255,.06) 1px,transparent 1px);background-size:40px 40px;-webkit-mask-image:radial-gradient(ellipse at 70% 30%,#000 20%,transparent 70%);mask-image:radial-gradient(ellipse at 70% 30%,#000 20%,transparent 70%)}
@keyframes rd-breathe{from{opacity:.85;transform:scale(1)}to{opacity:1;transform:scale(1.04)}}
.rd-band h1,.rd-band h2,.rd-band h3{color:#fff}
.rd-band p,.rd-band li{color:var(--rd-on-2)}
.rd-band strong,.rd-band b{color:#fff}
.rd-band a:not(.btn){color:var(--rd-cob-l)}
.rd-band .kicker,.rd-band .category{color:var(--rd-cob-l)}
.rd-band .kicker:before{background:var(--rd-cob-l)}
.rd-band .btn-primary,.rd-panel .btn-primary{background:#fff;color:var(--rd-navy)}
.rd-band .btn-primary:hover,.rd-panel .btn-primary:hover{background:#E8EDF1}
.rd-band .btn-secondary,.rd-panel .btn-secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.rd-band .btn-secondary:hover,.rd-panel .btn-secondary:hover{background:rgba(255,255,255,.08);border-color:#fff}

/* buttons everywhere: a touch softer and a gentle lift */
body.rd .btn{border-radius:10px;transition:transform .2s var(--rd-ease),background .2s,border-color .2s}
body.rd .btn:hover{transform:translateY(-1px)}

/* entry motion: slow eased fade + gentle rise, staggered with --i */
.rd-rise{opacity:0;transform:translateY(14px);animation:rd-rise .7s var(--rd-ease) forwards;animation-delay:calc(var(--i,0)*90ms + 80ms)}
@keyframes rd-rise{to{opacity:1;transform:none}}

/* eyebrow */
.rd-kick{display:inline-flex;align-items:center;gap:10px;margin:0 0 14px;font:500 12.5px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--rd-cob)}
.rd-kick::before{content:"";width:22px;height:2px;background:currentColor}
.rd-band .rd-kick{color:var(--rd-cob-l)}

/* three cards: the thesis */
.rd-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}
.rd-col{border-radius:16px;padding:24px;background:#fff;border:1px solid var(--steel-2,#C9D5DE)}
.rd-col .ic{width:26px;height:26px;color:#5B7186}
.rd-col h3{margin:14px 0 4px;font-size:20px;letter-spacing:-.01em}
.rd-col p{margin:0;color:var(--ink-2,#3A4E63);font-size:16px}
.rd-col.me{position:relative;overflow:hidden;color:var(--rd-on);background:var(--rd-ground);border-color:var(--rd-line);box-shadow:0 30px 70px -40px rgba(36,71,240,.7)}
.rd-col.me::before{content:"";position:absolute;inset:0;background:radial-gradient(400px 260px at 90% 0%,rgba(36,71,240,.45),transparent 65%)}
.rd-col.me>*{position:relative}.rd-col.me .ic{color:var(--rd-cob-l)}.rd-col.me h3{color:#fff}.rd-col.me p{color:var(--rd-on-2)}
@media (max-width:860px){.rd-cols{grid-template-columns:minmax(0,1fr)}}

/* a dark card on a light page */
.rd-panel{position:relative;overflow:hidden;isolation:isolate;color:var(--rd-on);background:var(--rd-ground);border:1px solid var(--rd-line);border-radius:18px;box-shadow:0 40px 90px -46px rgba(16,36,58,.6)}
.rd-panel::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(600px 380px at 92% 0%,rgba(36,71,240,.38),transparent 62%)}
.rd-panel h2,.rd-panel h3{color:#fff}.rd-panel p{color:var(--rd-on-2)}

/* page hero: a full-bleed dark band at the top of an inner page (use with .rd-band; the page needs html,body{overflow-x:clip}) */
section.rd-page-hero{margin:0 calc(50% - 50vw);padding:64px max(24px,calc((100vw - 1120px)/2 + 24px));border-top:0}
.rd-page-hero h1{font-size:clamp(40px,5.4vw,64px);letter-spacing:-.034em;line-height:1.02;margin:6px 0 16px;max-width:18ch}
.rd-page-hero .lede{max-width:44em;color:var(--rd-on-2)}
.rd-page-hero .muted{color:var(--rd-on-3)}
@media (max-width:760px){section.rd-page-hero{padding:44px 24px}}

/* closing call to action: a dark panel just above the footer */
.rd-endcta{padding:40px;margin:40px 0 50px}
.rd-endcta h2{margin:0 0 10px}.rd-endcta p{margin:0 0 18px}.rd-endcta a:not(.btn){color:var(--rd-cob-l)}
.rd-endcta .go{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:760px){.rd-endcta{padding:28px 22px}}

/* a measured fact line (filled from scripts/facts.mjs): the figure, then how it was measured */
.ttfr{margin:12px 0 0;font-size:14.5px;line-height:1.45;color:var(--ink-2)}
/* the same breathing room everywhere the fact renders, whatever the page resets p to (e.g. .freebar2 p{margin:0}) */
p.ttfr,body.rd p.ttfr{margin-top:14px}
.ttfr b{font-weight:600;color:var(--ink)}
.ttfr small{display:block;margin-top:2px;font-size:12.5px;color:var(--ink-3)}
.rd-band .ttfr,.rd-panel .ttfr{color:var(--rd-on-2)}.rd-band .ttfr b,.rd-panel .ttfr b{color:#fff}.rd-band .ttfr small,.rd-panel .ttfr small{color:var(--rd-on-3)}

@media (prefers-reduced-motion:reduce){.rd-band::before{animation:none}.rd-rise{opacity:1;transform:none;animation:none}body.rd .btn{transition:none}body.rd .btn:hover{transform:none}}