/* ── Variant D layer: Pat's cosmology — void → strike → rise ──
   Lands on top of site.css (signed Reference C system). Palette deepens to
   near-black space, gold becomes the only light. Motion is restrained and
   fully disabled under prefers-reduced-motion. */

:root{
  --void:#070d18;        /* the dark before anything */
  --ink:#0a1322;         /* deepened page ground */
  --star:rgba(245,241,232,.55);
}
body{background:var(--ink)}

/* ── the void: hero becomes deep space ── */
.hero{position:relative;isolation:isolate}
.hero::after{ /* full-bleed void (Josef 2026-08-20: hero read boxed-in on wide screens) */
  content:'';position:absolute;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;
  z-index:-2;pointer-events:none;
  background:
    radial-gradient(1100px 620px at 78% 30%, rgba(37,54,92,.55), transparent 62%),
    radial-gradient(800px 500px at 12% 78%, rgba(37,54,92,.35), transparent 60%),
    linear-gradient(180deg, var(--void), var(--ink) 85%);}
.hero::before{ /* stardust — pure CSS decoration, not imagery */
  content:'';position:absolute;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;z-index:-1;opacity:.68;pointer-events:none;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, var(--star), transparent 60%),
    radial-gradient(1.1px 1.1px at 34% 64%, var(--star), transparent 60%),
    radial-gradient(2px 2px at 56% 14%, var(--star), transparent 60%),
    radial-gradient(1.1px 1.1px at 71% 48%, var(--star), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 76%, var(--star), transparent 60%),
    radial-gradient(1.1px 1.1px at 44% 86%, var(--star), transparent 60%),
    radial-gradient(1.8px 1.8px at 23% 45%, var(--star), transparent 60%),
    radial-gradient(1.1px 1.1px at 65% 90%, var(--star), transparent 60%),
    radial-gradient(1.4px 1.4px at 94% 30%, var(--star), transparent 60%),
    radial-gradient(1.1px 1.1px at 6% 68%, var(--star), transparent 60%),
    radial-gradient(1.3px 1.3px at 40% 34%, var(--star), transparent 60%),
    radial-gradient(1px 1px at 80% 12%, var(--star), transparent 60%),
    radial-gradient(1.2px 1.2px at 18% 84%, var(--star), transparent 60%),
    radial-gradient(1px 1px at 52% 52%, var(--star), transparent 60%);
}
.hero-fig{position:relative}
.hero-fig::after{ /* the cube bathed in the strike's gold light */
  content:'';position:absolute;inset:0;border-radius:3px;pointer-events:none;
  background:linear-gradient(200deg, rgba(232,181,69,.14), transparent 45%),
             linear-gradient(20deg, rgba(7,13,24,.55), transparent 55%);
  mix-blend-mode:normal;
}

/* ── the Phoenix Path: program label on the Marketing family ── */
.phoenix-tag{display:inline-flex;align-items:center;gap:10px;margin-bottom:14px;
  font:600 12px/1 'Schibsted';letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.phoenix-tag::before{content:'';width:34px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.phoenix-tag::after{content:'';width:34px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}

/* rising motif behind the ladder — light returning, bottom → top */
#marketing{position:relative;isolation:isolate}
#marketing::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.6;
  background:radial-gradient(900px 480px at 50% 108%, rgba(232,181,69,.10), transparent 65%)}

/* ── Blitz: the strike ── */
.card.flagship{box-shadow:0 0 0 1px rgba(232,181,69,.35), 0 12px 44px -18px rgba(232,181,69,.28)}

/* ── scroll arc: sections rise out of the void ── */
@keyframes d-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes d-drift{from{transform:translateY(0)}to{transform:translateY(-14px)}}
.js .d-reveal{opacity:0}
.d-reveal.d-in{animation:d-rise .7s cubic-bezier(.2,.7,.2,1) forwards}
.hero::before{animation:d-drift 14s ease-in-out infinite alternate}

@media (prefers-reduced-motion: reduce){
  .d-reveal{opacity:1 !important;animation:none !important}
  .hero::before{animation:none !important}
  *{scroll-behavior:auto !important}
}

/* packages: an open expand grows only its own card */

/* D packages: an open <details> grows only its own card, no sibling stretch */
.cards{align-items:start}

/* ── E-merge layer (2026-08-20, Josef's direction: the good of E into approved D) ──
   Struck "puzzle" + one-time bolt · embers in the lights-off spaces.
   Everything stops under prefers-reduced-motion. */
.struck{position:relative;display:inline-block}
.struck::after{content:'';position:absolute;left:-4%;top:52%;width:108%;height:5px;
  background:linear-gradient(90deg,transparent,#f5d491 12%,#e8b545 50%,#f5d491 88%,transparent);
  transform:scaleX(0) rotate(-1.5deg);transform-origin:left center;border-radius:3px;
  box-shadow:0 0 18px rgba(232,181,69,.8),0 0 42px rgba(232,181,69,.35)}
.struck.struck-fire::after{animation:d-strike .6s cubic-bezier(.7,0,.2,1) .9s forwards}
@keyframes d-strike{0%{transform:scaleX(0) rotate(-1.5deg)}55%{transform:scaleX(1.06) rotate(-1.5deg)}100%{transform:scaleX(1) rotate(-1.5deg)}}
.embers{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ember{position:absolute;bottom:-12px;width:4px;height:4px;border-radius:50%;
  background:radial-gradient(circle,#f5d491,rgba(232,181,69,.15) 70%,transparent);
  animation:d-ember-rise linear infinite;opacity:0}
@keyframes d-ember-rise{
  0%{transform:translateY(0) translateX(0) scale(1);opacity:0}
  8%{opacity:.85}
  85%{opacity:.35}
  100%{transform:translateY(-105vh) translateX(3vw) scale(.55);opacity:0}}
@media (prefers-reduced-motion: reduce){
  .struck::after{transform:scaleX(1) rotate(-1.5deg) !important;animation:none !important}
  .ember{animation:none !important;opacity:0 !important}
}

/* the stardust itself breathes — one slow drift, imperceptible as mechanism */
.hero::before{animation:d-star-drift 90s linear infinite alternate}
@keyframes d-star-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-28px,-18px,0)}}
@media (prefers-reduced-motion: reduce){ .hero::before{animation:none !important} }
html,body{overflow-x:clip} /* the 100vw bleed layers must never create a horizontal scrollbar */

/* closing proof row (Richard 2026-08-20): BBB under "presence", social under "growth" */
.closing-proof{display:flex;justify-content:center;align-items:center;gap:40px;flex-wrap:wrap;margin-top:34px}
.closing-bbb img{display:block;height:42px;width:auto}
.closing-bbb{display:inline-flex;align-items:center;min-height:44px}
.closing-social{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--paper);
  font:600 13px/1 'Schibsted';letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  border:1px solid var(--rule);border-radius:2px;padding:12px 18px;transition:border-color .2s,color .2s}
.closing-social:hover{border-color:var(--gold);color:var(--gold)}

/* expander open state: the preview list yields to the full list (Richard's
   duplicate-text catch, 2026-08-20). :has() is in all evergreen browsers;
   without it the fallback is today's behavior (full list repeats preview). */
.card-body:has(> details[open]) > ul:first-of-type{display:none}

/* expander styles promoted from packages page-scope — homepage now has expanders too */
  .card details{margin:2px 0 4px;border-top:1px solid var(--rule);padding-top:10px}
  .card details summary{list-style:none;cursor:pointer;font:600 13px/1.2 'Schibsted';letter-spacing:.03em;color:var(--gold-soft);min-height:44px;padding:11px 0;display:flex;align-items:center;justify-content:space-between;gap:8px}
  .card details summary::-webkit-details-marker{display:none}
  .card details summary .chev{transition:transform .2s ease}
  .card details[open] summary .chev{transform:rotate(90deg)}
  .card details ul{margin-top:10px}
  .card details .fineprint{font:400 12px/1.55 'Schibsted';font-style:italic;color:var(--paper-dim);opacity:.8;margin-top:12px}
  @media (prefers-reduced-motion:reduce){.card details summary .chev{transition:none}}