:root {
  --purple: #2a1248;
  --purple-deep: #14081f;
  --purple-mid: #3d1c68;
  --gold: #d4a017;
  --gold-lt: #f0d78c;
  --parchment: #f6ead0;
  --ink: #1c1228;
  --cream: #faf4e8;
  --serif: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box }
html, body { margin: 0; min-height: 100% }
body.dg-body {
  font-family: var(--sans);
  color: var(--cream);
  background: radial-gradient(1200px 600px at 80% 10%, #4a2278 0%, transparent 50%),
              linear-gradient(180deg, var(--purple-deep), var(--purple) 40%, #1a0b2e);
}
a { color: var(--gold-lt) }
.dg-wrap { width: min(1180px, calc(100% - 40px)); margin: 0 auto }

/* header */
.dg-sat-bar {
  background: linear-gradient(180deg, rgba(20,8,32,.92), rgba(42,18,72,.88));
  border-bottom: 1px solid rgba(240,215,140,.35);
  backdrop-filter: blur(8px);
  position: relative;
  z-index: 50000;
  overflow: visible;
}
.dg-sat-bar.compact { position: sticky; top: 0; z-index: 100000 }
.dg-bar-inner { display: flex; align-items: center; gap: 18px; padding: 10px 0; flex-wrap: wrap }
.dg-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--gold-lt) }
.dg-brand b { display: block; font-family: var(--serif); font-size: 1.35rem; font-weight: 400; letter-spacing: .01em }
.dg-brand small { display: block; color: #cbb8e8; font-size: 11.5px; letter-spacing: .02em }
.dg-nav { display: flex; gap: 4px; align-items: center; flex: 1 }
.dg-nav > a, .dg-drop > a {
  color: var(--cream); text-decoration: none; padding: 8px 12px; border-radius: 999px; font-size: 15px
}
.dg-nav > a:hover, .dg-drop > a:hover, .dg-nav > a[aria-current] { background: rgba(240,215,140,.12); color: var(--gold-lt) }
.dg-drop { position: relative; z-index: 3 }
.dg-drop i { display: inline-block; width: 0; height: 0; border: 4px solid transparent; border-top-color: currentColor; margin-left: 4px; transform: translateY(2px) }
.dg-menu {
  display: none; position: absolute; top: 100%; left: 0; min-width: 200px;
  background: #2a1548; border: 1px solid var(--gold); border-radius: 12px; padding: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,.4); z-index: 50001
}
.dg-drop:hover .dg-menu, .dg-drop:focus-within .dg-menu { display: grid }
.dg-menu a { display: block; padding: 8px 12px; color: var(--cream); text-decoration: none; border-radius: 8px }
.dg-menu a:hover { background: rgba(240,215,140,.15) }
.dg-tools { display: flex; align-items: center; gap: 8px; margin-left: auto }
.dg-lamp-btn, .dg-join, .dg-who, .dg-out, .dg-go, .dg-btn {
  font: inherit; cursor: pointer; border: 0; text-decoration: none
}
.dg-lamp-btn {
  width: 40px; height: 40px; border-radius: 50%; background: transparent; color: var(--gold-lt);
  border: 1px solid rgba(240,215,140,.4)
}
.dg-join, .dg-btn.gold, .dg-go {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px;
  background: linear-gradient(180deg, #f0d78c, #c48a0a); color: #2a1248; font-weight: 700
}
.dg-btn.ghost { padding: 10px 18px; border-radius: 999px; border: 1px solid var(--gold-lt); color: var(--gold-lt) }
.dg-who {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gold); color: var(--purple-deep); font-weight: 700
}
.dg-out { color: #cbb8e8; font-size: 13px }

/* hero */
.dg-hero { padding: 28px 0 10px }
.dg-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 24px; align-items: center }
.dg-hero-copy h1 { font-family: var(--serif); font-size: clamp(40px, 6vw, 64px); color: var(--gold-lt); margin: 0 0 8px; font-weight: 400 }
.dg-sub { font-family: var(--serif); font-size: 22px; color: #e8d5ff; margin: 0 0 14px }
.dg-hero-copy p { max-width: 48ch; line-height: 1.55; color: #eadff6 }
.dg-hero-cta { display: flex; gap: 12px; flex-wrap: wrap }
.dg-hero-art { position: relative; min-height: 420px }
.dg-hero-art img { position: absolute }
.dg-hero-art .dg-cushion { bottom: 8%; left: 18%; width: 46%; z-index: 1 }
.dg-hero-art .dg-hero-lamp { bottom: 22%; left: 28%; width: 28%; z-index: 2 }
.dg-hero-art .dg-genie { bottom: 28%; left: 22%; width: 55%; z-index: 3 }
.dg-hero-art .dg-smoke { top: 0; right: 4%; width: 70%; opacity: .7; z-index: 0 }
.dg-hero-art .dg-float-card { top: 8%; right: 2%; width: 42%; z-index: 4; filter: drop-shadow(0 12px 24px rgba(0,0,0,.35)) }
.dg-orb { position: absolute; font-size: 12px; letter-spacing: .12em; color: var(--gold-lt); z-index: 5 }
.dg-orb.pdf { top: 18%; left: 8% }
.dg-orb.txt { top: 36%; right: 8% }

/* parchment cards */
.dg-cards { padding: 20px 0 40px }
.dg-card-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px }
.dg-parchment {
  background: var(--parchment); color: var(--ink); border-radius: 8px; padding: 26px 24px 22px;
  box-shadow: 0 0 0 3px #c9a227, 0 0 0 6px var(--parchment), 0 0 0 8px #8a6a12, 0 18px 40px rgba(0,0,0,.28);
  font-family: var(--serif)
}
.dg-parchment h2 { margin: 0 0 8px; font-size: 28px; font-weight: 400; color: #5a3b00 }
.dg-parchment p { margin: 0 0 12px; line-height: 1.45 }
.dg-parchment ul { margin: 0 0 16px; padding-left: 1.1em }
.dg-parchment .dg-btn { font-family: var(--sans) }
.dg-tiny { font-size: 12px; color: #6a5428 }
.dg-price { font-size: 28px; margin: 0 }

.dg-info { padding: 10px 0 50px }
.dg-info-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px }
.dg-info-row h3 { font-family: var(--serif); color: var(--gold-lt); font-weight: 400; font-size: 26px; margin: 8px 0 }
.dg-info-row p { color: #eadff6; line-height: 1.5 }
.dg-info-row a { color: var(--gold) }

.dg-inner { padding: 36px 0 60px; max-width: 820px }
.dg-inner h1 { font-family: var(--serif); color: var(--gold-lt); font-weight: 400; font-size: 42px }
.dg-lede { font-size: 19px; color: #eadff6; max-width: 60ch }
.dg-steps { padding-left: 1.2em; color: #eadff6; line-height: 1.6 }
.dg-form label { display: block; margin: 12px 0 4px }
.dg-form input, .dg-form textarea { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid #c9a227; font: inherit }
.dg-ok { color: #b6f0c2 }
.dg-ask { display: flex; gap: 8px; margin: 22px 0 }
.dg-ask input { flex: 1; padding: 12px 16px; border-radius: 999px; border: 1px solid var(--gold); background: #fff; color: var(--ink); font: inherit }
.dg-hit { display: block; background: rgba(246,234,208,.12); border: 1px solid rgba(240,215,140,.3); border-radius: 12px; padding: 16px 18px; margin-bottom: 10px; text-decoration: none; color: var(--cream) }
.dg-hit b { display: block; font-family: var(--serif); font-size: 20px; color: var(--gold-lt) }
.dg-hit.gated { border-style: dashed }
.dg-gate { background: rgba(240,215,140,.12); border: 1px solid var(--gold); border-radius: 14px; padding: 22px }
.dg-art .dg-body { max-width: 68ch; line-height: 1.65 }

/* footer */
.dg-foot { border-top: 1px solid rgba(240,215,140,.25); padding: 28px 0 20px; background: #100616 }
.dg-flourish { height: 18px; background: radial-gradient(circle at 50% 0, var(--gold-lt), transparent 60%); opacity: .5; margin-bottom: 18px }
.dg-foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr auto; gap: 22px }
.dg-foot h6 { font-family: var(--serif); color: var(--gold-lt); margin: 0 0 10px; font-size: 16px; font-weight: 400 }
.dg-foot a { display: block; color: #d5c6ea; text-decoration: none; margin: 4px 0; font-size: 14px }
.dg-foot p { color: #cbb8e8; font-size: 14px; line-height: 1.5; max-width: 36ch }
.dg-know label { display: block; color: var(--gold-lt); margin-bottom: 6px }
.dg-know div { display: flex; gap: 6px }
.dg-know input { flex: 1; padding: 8px 10px; border-radius: 8px; border: 1px solid #c9a227 }
.dg-know button { padding: 8px 12px; border-radius: 8px; border: 0; background: var(--gold); color: var(--purple-deep); font-weight: 700 }
.dg-legal { text-align: center; color: #8e7aa8; font-size: 12px; margin: 22px 0 0 }

/* lamp + join */
.dg-lamp, .dg-join-ov { position: fixed; inset: 0; z-index: 200000; background: rgba(10,4,18,.62); display: grid; place-items: start center; padding: 8vh 16px 16px }
.dg-lamp[hidden], .dg-join-ov[hidden] { display: none !important }
.dg-lamp-box, .dg-join-box {
  width: min(640px, 100%); background: #2a1548; border: 1px solid var(--gold); border-radius: 18px;
  padding: 22px; color: var(--cream); box-shadow: 0 24px 80px rgba(0,0,0,.5)
}
.dg-lamp-head { display: flex; gap: 12px; align-items: flex-start }
.dg-lamp-head span { display: block; color: #cbb8e8; font-size: 13px }
.dg-lamp-x { margin-left: auto; background: transparent; border: 0; color: var(--gold-lt); font-size: 28px; cursor: pointer }
.dg-lamp-box input[type=search] {
  width: 100%; margin: 16px 0 10px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--gold);
  font: inherit; background: #fff; color: var(--ink)
}
.dg-lamp-out a { display: block; padding: 10px 8px; color: var(--cream); text-decoration: none; border-radius: 8px }
.dg-lamp-out a:hover, .dg-lamp-out a.on { background: rgba(240,215,140,.12) }
.dg-lamp-out b { display: block; color: var(--gold-lt) }
.dg-lamp-hint { font-size: 12px; color: #8e7aa8 }
.dg-join-box h2 { font-family: var(--serif); color: var(--gold-lt); font-weight: 400; margin: 0 32px 8px 0 }
.dg-join-box label { display: block; margin: 10px 0 4px }
.dg-join-box input[type=email], .dg-join-box input[name=code] {
  width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--gold); font: inherit
}
.dg-join-err { color: #ffb4a8 }
.dg-text { background: none; border: 0; color: var(--gold-lt); cursor: pointer; display: block; margin-top: 8px }

.dg-sat-bar { position: relative }
.dg-nav { overflow: visible }
.dg-mega-layer {
  position: absolute; left: 0; right: 0; top: 100%;
  z-index: 50; pointer-events: none;
}
.dg-mega { display: none; pointer-events: auto }
.dg-mega.is-open, .dg-mega:not([hidden]) { display: block }
.dg-mega[hidden] { display: none !important }
.dg-mega-inner {
  width: min(90vw, 1280px); margin: 0 auto;
  background: var(--navy, #0e2240); color: var(--cream, #f4ead8);
  border: 1px solid color-mix(in srgb, var(--gold, #c9a227) 45%, transparent);
  border-radius: 0 0 16px 16px; box-shadow: 0 18px 40px rgba(0,0,0,.35);
  padding: 22px 24px 28px;
}
.dg-mega-grid {
  display: grid; grid-template-columns: 1.1fr 1.1fr 1.1fr minmax(220px, 0.85fr);
  gap: 18px 22px; align-items: start;
}
.dg-mega-head {
  display: block; margin: 0 0 10px; font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold, #c9a227);
}
.dg-mega-item { display: block; padding: 8px 10px; border-radius: 10px; text-decoration: none; color: inherit }
.dg-mega-item:hover, .dg-mega-item:focus-visible { background: color-mix(in srgb, var(--gold, #c9a227) 14%, transparent) }
.dg-mega-item b { display: block; font-weight: 600; font-size: 15px; line-height: 1.25 }
.dg-mega-item em { display: block; font-style: normal; font-size: 12px; opacity: .8; margin-top: 2px; line-height: 1.4 }
.dg-mega-item.fav b::after { content: " ★"; font-size: 11px; color: var(--gold, #c9a227) }
.dg-mega-widget { background: color-mix(in srgb, var(--gold, #c9a227) 10%, transparent); border-radius: 12px; padding: 12px }
.dg-mega-card-cta { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--gold, #c9a227) }
.dg-mega-card-sub { display: block; margin-top: 10px; font-size: 13px; color: var(--gold-lt, #e6d48a) }
.dg-nav [data-dg-menu] { cursor: pointer }
.dg-nav [data-dg-menu].is-pinned, .dg-prog-btn.is-pinned { color: var(--gold, #c9a227) }
.dg-prog-btn svg, .dg-prog-btn .dg-ico { pointer-events: none }

.dg-mega-explore {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
  padding: 18px 16px 16px;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  isolation: isolate;
  background:
    radial-gradient(140px 90px at 110% -10%, color-mix(in srgb, var(--gold, #d4a017) 70%, transparent), transparent 72%),
    linear-gradient(165deg, color-mix(in srgb, var(--gold, #d4a017) 28%, transparent), rgba(0,0,0,.28));
  border: 1px solid color-mix(in srgb, var(--gold, #d4a017) 58%, transparent);
  box-shadow: 0 10px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.12);
  animation: dg-explore-glow 3.4s ease-in-out infinite;
}
.dg-mega-explore:hover, .dg-mega-explore:focus-visible {
  transform: translateY(-2px);
  border-color: var(--gold-lt, #f0d78c);
}
.dg-mega-explore-kicker {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-lt, #f0d78c);
}
.dg-mega-explore-count {
  font-family: var(--serif);
  font-size: clamp(40px, 4vw, 52px);
  line-height: .9;
  color: var(--gold-lt, #f0d78c);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px color-mix(in srgb, var(--gold, #d4a017) 55%, transparent);
}
.dg-mega-explore strong { font-family: var(--serif); font-size: 22px; font-weight: 400; color: var(--cream, #faf4e8) }
.dg-mega-explore p { margin: 0; font-size: 13.5px; line-height: 1.4; opacity: .9 }
.dg-mega-explore-spark {
  position: absolute; inset: -40% -20% auto auto; width: 140px; height: 140px;
  background: conic-gradient(from 80deg, transparent 0 62%, color-mix(in srgb, var(--gold-lt, #f0d78c) 55%, transparent) 68%, transparent 78%);
  animation: dg-explore-spin 8s linear infinite;
  opacity: .55; pointer-events: none; z-index: -1;
}
@keyframes dg-explore-glow {
  0%, 100% { box-shadow: 0 10px 28px rgba(0,0,0,.22), 0 0 0 0 color-mix(in srgb, var(--gold, #d4a017) 0%, transparent); }
  50% { box-shadow: 0 14px 32px rgba(0,0,0,.28), 0 0 28px color-mix(in srgb, var(--gold, #d4a017) 35%, transparent); }
}
@keyframes dg-explore-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .dg-mega-explore, .dg-mega-explore-spark { animation: none }
  .dg-mega-explore:hover { transform: none }
}

/* Word — brass, ink, laid paper */
body.dg-brand-docketword {
  --purple: #3a2714;
  --purple-deep: #1a1208;
  --purple-mid: #5a3d1c;
  --gold: #b8860b;
  --gold-lt: #f0d9a0;
  --parchment: #f3e6c8;
  --ink: #1c140c;
  --cream: #f7f0e0;
}
body.dg-brand-docketword.dg-body {
  background: radial-gradient(1100px 520px at 12% 0%, #6a4a22 0%, transparent 55%),
              linear-gradient(180deg, #1a1208, #3a2714 42%, #24180c);
}
body.dg-brand-docketword .dg-sat-bar {
  background: linear-gradient(180deg, rgba(26,18,8,.94), rgba(58,39,20,.9));
  border-bottom-color: rgba(184,134,11,.45);
}
body.dg-brand-docketword .dg-foot { background: #140e08 }
body.dg-brand-docketword .dg-mega-inner { background: #2a1c10 }

/* Evidence — slate, manila tabs */
body.dg-brand-docketevidence {
  --purple: #1a2d3c;
  --purple-deep: #0b151c;
  --purple-mid: #2a4458;
  --gold: #c4a574;
  --gold-lt: #ead7b4;
  --parchment: #efe4cc;
  --ink: #101820;
  --cream: #f3eee4;
}
body.dg-brand-docketevidence.dg-body {
  background: radial-gradient(1000px 480px at 88% 8%, #2c4a60 0%, transparent 52%),
              linear-gradient(180deg, #0b151c, #1a2d3c 40%, #12202a);
}
body.dg-brand-docketevidence .dg-sat-bar {
  background: linear-gradient(180deg, rgba(11,21,28,.95), rgba(26,45,60,.9));
  border-bottom-color: rgba(196,165,116,.4);
}
body.dg-brand-docketevidence .dg-foot { background: #0a1218 }
body.dg-brand-docketevidence .dg-mega-inner { background: #152430 }
body.dg-brand-docketevidence .dg-mega-item { border-left: 3px solid transparent }
body.dg-brand-docketevidence .dg-mega-item:hover { border-left-color: var(--gold) }

/* DocketBS — noir bronze, no palace purple */
body.dg-brand-docketbs {
  --purple: #14120e;
  --purple-deep: #0b0a09;
  --purple-mid: #1a1713;
  --gold: #e0a94b;
  --gold-lt: #f2c878;
  --parchment: #ede6d8;
  --ink: #0b0a09;
  --cream: #ede6d8;
}
body.dg-brand-docketbs.dg-body {
  background: #0b0a09;
  color: #ede6d8;
}
body.dg-brand-docketbs .dg-sat-bar {
  background: rgba(20,18,14,.92);
  border-bottom: 1px solid rgba(232,222,203,.12);
}
body.dg-brand-docketbs .dg-foot { background: #0b0a09; border-top-color: rgba(232,222,203,.12) }
body.dg-brand-docketbs .dg-mega-inner { background: #14120e; color: #ede6d8 }
body.dg-brand-docketbs .dg-mega-explore { animation-duration: 2.4s }

@media (max-width: 980px) {
  .dg-hero-grid, .dg-info-row, .dg-foot-grid { grid-template-columns: 1fr }
  .dg-nav { display: none }
  .dg-hero-art { min-height: 280px }
  .dg-sat-bar.is-open .dg-nav { display: flex; flex-direction: column; width: 100% }
  .dg-mega-layer { position: static; left: auto; right: auto; top: auto; pointer-events: auto; width: 100% }
  .dg-mega-inner { width: 100%; border-radius: 12px; margin: 8px 0; box-shadow: none }
  .dg-mega-grid { grid-template-columns: 1fr }
}
