/* =========================================================
   Freya interactive demo — presentation layer adapted from the
   Nordlys Command Center (app/globals.css: freya-immersive,
   freya-shell-top, freya-live-feed, freya-center-logo, universe,
   lead drawer). Colours, glass, radii and animations are the
   product's own; type is scaled ~1.45x (the product's 6–9px labels
   assume a full-screen app) and the stage is embedded, not 100dvh.
   Everything is scoped under .fd or the #freya heading.

   Tuning:
     --fd-max        widest stage width
     --fd-h          stage height on desktop
     --fd-feed-w     activity feed width
     --fd-drawer-w   lead drawer width
     --fd-top-h      height of the Freya shell bar
   ========================================================= */

/* ── introduction ─────────────────────────────────────────────────── */

#freya .fd-head { margin-bottom: 44px; }
#freya .fd-head .nr-eyebrow { margin-bottom: 18px; }
#freya .fd-title {
  margin: 0 0 18px;
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: clamp(32px, 3.6vw, 50px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -.045em;
  color: #f2f7f5;
}
#freya .fd-head > p:last-child { margin-top: 0; }

/* ── stage ────────────────────────────────────────────────────────── */

.fd {
  --fd-max: 1320px;
  --fd-h: clamp(660px, 84vh, 800px);
  --fd-feed-w: clamp(290px, 25%, 340px);
  --fd-drawer-w: clamp(320px, 29%, 360px);
  --fd-top-h: 76px;
  --fd-emerald: #23e4ad;
  --fd-blue: #53a9ff;
  --fd-ink: #f6f8f8;
  --fd-ink-2: rgba(239, 246, 245, .65);
  --fd-ink-3: rgba(239, 246, 245, .42);

  position: relative;
  width: min(var(--fd-max), calc(100vw - 48px));
  margin-left: calc((100% - min(var(--fd-max), calc(100vw - 48px))) / 2);
  color: var(--fd-ink);
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-align: left;
}
.fd *, .fd *::before, .fd *::after { box-sizing: border-box; }
/* zero-specificity reset so the component rules below always win */
.fd :where(button, a) { font: inherit; color: inherit; }
.fd :where(button) { cursor: pointer; }
.fd button:focus-visible, .fd a:focus-visible { outline: 2px solid rgba(35, 228, 173, .72); outline-offset: 3px; }
.fd [hidden] { display: none !important; }
.fd-icon { width: 13px; height: 13px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.fd-app {
  position: relative;
  height: var(--fd-h);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(196, 245, 255, .12);
  border-radius: 28px;
  background: #010713;
  box-shadow: 0 40px 120px rgba(0, 0, 0, .5), 0 0 110px rgba(18, 111, 88, .12);
}

/* ── the product's aurora mark (infinity masked over the aurora poster) ── */

.fd-mark {
  display: block;
  background: url('media/freya-aurora-poster.png') center / cover;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100'%3E%3Cpath d='M20 50C20 20 55 15 78 39L122 61C145 85 180 80 180 50S145 15 122 39L78 61C55 85 20 80 20 50Z' fill='none' stroke='white' stroke-width='17' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100'%3E%3Cpath d='M20 50C20 20 55 15 78 39L122 61C145 85 180 80 180 50S145 15 122 39L78 61C55 85 20 80 20 50Z' fill='none' stroke='white' stroke-width='17' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── universe (RevenueUniverse, immersive) ─────────────────────────── */

.fd-universe { position: absolute; inset: 0; z-index: 0; overflow: hidden; isolation: isolate; background: #010713; }
.fd-universe::before { position: absolute; inset: 0; z-index: 1; pointer-events: none; content: ""; background: linear-gradient(180deg, rgba(0,5,18,.67), rgba(0,8,21,.12) 22%, rgba(0,9,20,.05) 63%, rgba(0,4,15,.78)), radial-gradient(circle at 57% 51%, rgba(0,12,27,.02) 10%, rgba(0,9,24,.08) 50%, rgba(0,3,13,.62) 100%); }
.fd-video { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; filter: saturate(1.16) contrast(1.08) brightness(.68); }
.fd-canvas { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; }
.fd-grid { position: absolute; inset: 0; z-index: 2; opacity: .035; pointer-events: none; background-image: linear-gradient(rgba(169,213,255,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(169,213,255,.18) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(circle at center, black, transparent 78%); mask-image: radial-gradient(circle at center, black, transparent 78%); }
.fd-glow { position: absolute; z-index: 2; width: 250px; height: 250px; border-radius: 50%; filter: blur(75px); opacity: .15; pointer-events: none; }
.fd-glow--emerald { top: 17%; left: 30%; background: var(--fd-emerald); }
.fd-glow--blue { right: 4%; bottom: 3%; background: var(--fd-blue); opacity: .08; }

.fd-toolbar { position: absolute; z-index: 8; top: calc(var(--fd-top-h) + 16px); right: 26px; }
.fd-view { display: flex; padding: 3px; border: 1px solid rgba(219,255,246,.08); border-radius: 999px; background: rgba(255,255,255,.025); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.fd-view button { min-width: 86px; height: 30px; border: 0; border-radius: 999px; background: transparent; color: var(--fd-ink-3); font-size: 10px; font-weight: 650; }
.fd-view button.is-active { background: rgba(255,255,255,.075); color: #e7fbf6; box-shadow: inset 0 1px rgba(255,255,255,.06), 0 5px 14px rgba(0,0,0,.18); }

/* sits in the gap between the feed and the drawer */
.fd-strip { position: absolute; z-index: 8; top: calc(var(--fd-top-h) + 20px); right: calc(22px + var(--fd-drawer-w) + 18px); left: calc(22px + var(--fd-feed-w) + 18px); display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.fd-strip span { display: flex; align-items: baseline; justify-content: center; gap: 6px; padding: 7px 4px; border-top: 1px solid rgba(188,235,255,.18); color: rgba(218,242,255,.58); font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.fd-strip b { color: #eefcff; font-size: 13px; font-weight: 600; }

.fd-band { position: absolute; z-index: 2; top: 140px; bottom: 60px; width: 25%; border-right: 1px solid rgba(255,255,255,.018); opacity: 0; pointer-events: none; transition: opacity .3s, background .3s; }
.fd[data-view="pipeline"] .fd-band { background: linear-gradient(180deg, rgba(35,228,173,.03), transparent 42%); opacity: 1; }
.fd-band span { position: absolute; top: 45%; left: 10px; color: rgba(239,246,245,.18); font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; transform: rotate(-90deg); transform-origin: left center; }
.fd-band--discovered { left: 0; opacity: 1; }
.fd-band--qualified { left: 25%; }
.fd-band--booked { left: 50%; }
.fd-band--won { left: 75%; border-right: 0; }

.fd-center-logo { position: absolute; z-index: 9; top: 51%; left: 57%; display: grid; width: 218px; height: 126px; place-items: center; transform: translate(-50%, -50%); pointer-events: none; }
.fd-core-mark { z-index: 2; width: 188px; height: 98px; filter: saturate(1.58) brightness(1.5) drop-shadow(0 0 12px rgba(45,255,198,.9)) drop-shadow(0 0 34px rgba(52,142,255,.48)); animation: fd-logo-breathe 4.8s ease-in-out infinite; }
.fd-orbit { position: absolute; z-index: 1; border: 1px solid rgba(143,255,223,.23); border-radius: 50%; box-shadow: 0 0 28px rgba(32,237,178,.1), inset 0 0 26px rgba(50,146,255,.08); }
.fd-orbit::after { position: absolute; top: 50%; left: -3px; width: 6px; height: 6px; border-radius: 50%; background: #5dffe0; box-shadow: 0 0 12px rgba(93,255,224,.9); content: ""; }
.fd-orbit--one { width: 266px; height: 120px; transform: rotate(-9deg); animation: fd-orbit-one 10s linear infinite; }
.fd-orbit--two { width: 170px; height: 178px; border-color: rgba(91,177,255,.19); transform: rotate(31deg); animation: fd-orbit-two 13s linear infinite reverse; }

/* contact nodes: colour follows the lead's visual (states.ts) */
.fd-nodes { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.fd-node { position: absolute; width: 11px; height: 11px; padding: 0; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; background: #ff4276; transform: translate(-50%, -50%); box-shadow: 0 0 7px rgba(255,66,118,.82), 0 0 17px rgba(255,66,118,.45); pointer-events: auto; transition: transform .2s, box-shadow .2s, left .9s cubic-bezier(.3,.7,.2,1), top .9s cubic-bezier(.3,.7,.2,1), background .4s; }
.fd-node::before { position: absolute; inset: -9px; border-radius: 50%; content: ""; }
.fd-node--blue { background: #60b5ff; box-shadow: 0 0 7px rgba(83,169,255,.8), 0 0 17px rgba(83,169,255,.42); }
.fd-node--green { background: #23e4ad; box-shadow: 0 0 7px rgba(35,228,173,.75), 0 0 17px rgba(35,228,173,.38); }
.fd-node:hover, .fd-node.is-selected { z-index: 2; transform: translate(-50%, -50%) scale(1.65); }
.fd-node.is-focus::after { position: absolute; inset: -9px; border: 1px solid currentColor; border-radius: 50%; color: rgba(236,255,250,.55); content: ""; animation: fd-node-pulse 2.4s ease-out infinite; }
.fd-node-label { position: absolute; z-index: 1; padding: 5px 9px; border: 1px solid rgba(198,244,255,.18); border-radius: 999px; background: rgba(2,14,30,.66); color: rgba(236,250,252,.86); font-size: 10.5px; white-space: nowrap; pointer-events: none; transform: translate(14px, -50%); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: left .9s cubic-bezier(.3,.7,.2,1), top .9s cubic-bezier(.3,.7,.2,1); }

.fd-insight { position: absolute; z-index: 12; right: 24px; bottom: 82px; width: 270px; padding: 15px; border: 1px solid rgba(111,205,255,.21); border-radius: 15px; background: rgba(3,15,40,.72); box-shadow: 0 18px 50px rgba(0,0,0,.36); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.fd-insight > div { display: flex; flex-direction: column; gap: 3px; padding-right: 60px; }
.fd-insight > div span { font-size: 12px; font-weight: 650; }
.fd-insight > div small { color: var(--fd-ink-3); font-size: 9.5px; }
.fd-insight > strong { position: absolute; top: 13px; right: 14px; color: #77f4d2; font-size: 22px; font-weight: 580; letter-spacing: -.04em; }
.fd-insight > strong small { color: var(--fd-ink-3); font-size: 9px; }
.fd-insight p { margin: 10px 0 9px; color: var(--fd-ink-2); font-size: 10.5px; line-height: 1.45; }
.fd-insight button { display: flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: #7cefd0; font-size: 10px; }
.fd-insight--blue { border-color: rgba(83,169,255,.18); }
.fd-insight--blue > strong { color: #8fc9ff; }
.fd-insight--red { border-color: rgba(255,66,118,.2); }
.fd-insight--red > strong { color: #ff9ab6; }
.fd[data-drawer="open"] .fd-insight { display: none; }

.fd-lifecycle { position: absolute; z-index: 18; bottom: 24px; left: 50%; display: flex; min-height: 40px; align-items: center; gap: 12px; padding: 0 18px; border: 1px solid rgba(198,244,255,.13); border-radius: 999px; background: rgba(2,14,30,.52); color: rgba(222,243,245,.66); font-size: 10px; transform: translateX(-50%); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 14px 40px rgba(0,0,0,.24); white-space: nowrap; }
.fd-lifecycle span { display: flex; align-items: center; gap: 7px; }
.fd-lifecycle b { color: rgba(220,244,248,.22); font-weight: 500; }
.fd-dot { display: inline-block; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; }
.fd-dot--red { background: #ff4382; box-shadow: 0 0 8px rgba(255,67,130,.72); }
.fd-dot--blue { background: #4dadff; box-shadow: 0 0 8px rgba(77,173,255,.72); }
.fd-dot--green { background: #22eca9; box-shadow: 0 0 8px rgba(34,236,169,.72); }

/* ── shell top (freya-shell-top) ───────────────────────────────────── */

.fd-top { position: absolute; z-index: 20; top: 0; right: 0; left: 0; display: grid; height: var(--fd-top-h); grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 26px; border-bottom: 1px solid rgba(196,245,255,.1); background: linear-gradient(180deg, rgba(1,8,19,.75), rgba(1,8,19,.25)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.fd-brand { display: flex; align-items: center; gap: 10px; }
.fd-brand-mark { width: 38px; height: 23px; filter: saturate(1.45) brightness(1.35) drop-shadow(0 0 8px rgba(35,228,173,.65)); }
.fd-brand > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.fd-brand strong { font-size: 19px; font-weight: 600; letter-spacing: -.04em; }
.fd-brand small { color: rgba(220,243,249,.42); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.fd-identity { display: flex; min-width: 260px; align-items: center; flex-direction: column; gap: 3px; text-align: center; }
.fd-identity > span { color: rgba(218,245,250,.46); font-size: 9px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.fd-identity strong { font-size: 21px; font-weight: 600; letter-spacing: .28em; text-indent: .28em; }
.fd-identity small { display: flex; align-items: center; gap: 6px; color: rgba(173,255,229,.62); font-size: 9.5px; }
.fd-identity small i { width: 6px; height: 6px; border-radius: 50%; background: #22f0ad; box-shadow: 0 0 9px rgba(34,240,173,.8); }
.fd-top-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
.fd-expand { display: flex; height: 38px; align-items: center; gap: 7px; padding: 0 14px; border: 1px solid rgba(77,244,192,.2); border-radius: 999px; background: linear-gradient(135deg, rgba(31,182,141,.16), rgba(39,100,170,.1)); color: rgba(194,255,237,.8); font-size: 11px; box-shadow: inset 0 1px rgba(255,255,255,.055), 0 0 20px rgba(28,203,151,.05); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.fd-exit { display: flex; height: 38px; align-items: center; gap: 9px; padding: 0 14px; border: 1px solid rgba(196,245,255,.14); border-radius: 999px; background: rgba(3,18,35,.36); color: rgba(236,250,252,.78); font-size: 11px; text-decoration: none; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.fd-exit:hover, .fd-expand:hover { border-color: rgba(116,246,210,.32); }

/* ── activity feed (freya-live-feed) ───────────────────────────────── */


.fd-feed { position: absolute; z-index: 16; top: calc(var(--fd-top-h) + 18px); bottom: 82px; left: 22px; display: flex; width: var(--fd-feed-w); overflow: hidden; flex-direction: column; border: 1px solid rgba(197,245,255,.17); border-radius: 24px; background: linear-gradient(145deg, rgba(3,19,33,.72), rgba(2,10,25,.46)); box-shadow: 0 26px 80px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.07); -webkit-backdrop-filter: blur(24px) saturate(1.25); backdrop-filter: blur(24px) saturate(1.25); }
.fd-feed::before { position: absolute; z-index: -1; inset: 0; content: ""; pointer-events: none; background: radial-gradient(circle at 18% 0%, rgba(36,239,180,.1), transparent 31%), linear-gradient(180deg, rgba(255,255,255,.025), transparent 30%); }
.fd-feed > header { display: flex; min-height: 70px; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid rgba(199,243,255,.1); }
.fd-feed > header div { display: flex; flex-direction: column; gap: 4px; }
.fd-feed > header p { margin: 0; color: rgba(104,248,205,.72); font-size: 9px; font-weight: 760; letter-spacing: .2em; }
.fd-feed > header strong { color: rgba(242,253,253,.9); font-size: 19px; font-weight: 570; letter-spacing: -.035em; }
.fd-feed > header > span { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid rgba(80,244,194,.14); border-radius: 999px; background: rgba(20,118,94,.1); color: rgba(153,255,225,.7); font-size: 9.5px; }
.fd-feed > header > span i { width: 6px; height: 6px; border-radius: 50%; background: #2effb5; box-shadow: 0 0 9px rgba(46,255,181,.9); animation: fd-signal-live 1.8s ease-in-out infinite; }
.fd-feed-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 12px 15px; border-bottom: 1px solid rgba(199,243,255,.075); }
.fd-feed-summary span { display: flex; align-items: baseline; flex-direction: column; gap: 2px; color: rgba(213,238,241,.44); font-size: 9px; text-transform: uppercase; }
.fd-feed-summary b { color: rgba(239,255,251,.88); font-size: 18px; font-weight: 590; }
.fd-feed-list { position: relative; display: flex; min-height: 0; flex: 1; flex-direction: column; gap: 8px; overflow: auto; padding: 9px; scrollbar-width: thin; scrollbar-color: rgba(82,208,174,.18) transparent; }
.fd-feed-list::before { position: sticky; z-index: 3; top: -9px; display: block; flex: 0 0 1px; height: 1px; margin-bottom: -1px; content: ""; background: linear-gradient(90deg, transparent, rgba(75,255,196,.65), transparent); box-shadow: 0 0 13px rgba(75,255,196,.35); animation: fd-feed-scan 5.5s ease-in-out infinite; }
.fd-feed-item { position: relative; display: grid; width: 100%; min-height: 84px; flex: 0 0 auto; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 10px; padding: 13px 12px; border: 1px solid rgba(191,236,255,.09); border-radius: 16px; background: rgba(4,21,38,.52); text-align: left; box-shadow: inset 0 1px rgba(255,255,255,.025); animation: fd-feed-enter .55s ease both; transition: border-color .2s, background .2s, transform .2s; }
.fd-feed-item:hover { border-color: rgba(116,246,210,.25); background: rgba(7,38,53,.7); transform: translateX(2px); }
.fd-feed-state { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: #ff4276; box-shadow: 0 0 9px rgba(255,66,118,.72); }
.fd-feed-item--blue .fd-feed-state { background: #489fff; box-shadow: 0 0 9px rgba(72,159,255,.72); }
.fd-feed-item--green { border-color: rgba(54,245,174,.17); background: linear-gradient(135deg, rgba(19,94,76,.23), rgba(4,21,38,.52)); }
.fd-feed-item--green .fd-feed-state { background: #32f3ab; box-shadow: 0 0 10px rgba(50,243,171,.82); }
.fd-feed-item.is-focus { border-color: rgba(116,246,210,.34); box-shadow: inset 0 1px rgba(255,255,255,.04), 0 0 0 1px rgba(80,244,194,.08), 0 10px 30px rgba(15,160,120,.12); }
.fd-feed-item.is-selected { border-color: rgba(200,250,240,.45); background: rgba(9,46,60,.78); }
.fd-feed-item > div { min-width: 0; }
.fd-feed-item strong { display: block; overflow: hidden; color: rgba(244,253,252,.88); font-size: 12.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.fd-feed-item p { margin: 5px 0 8px; color: rgba(214,237,241,.58); font-size: 10.5px; line-height: 1.45; }
.fd-feed-item span { display: inline-flex; padding: 3px 8px; border: 1px solid rgba(196,240,255,.1); border-radius: 999px; color: rgba(168,222,224,.6); font-size: 9px; }
.fd-feed-item time { color: rgba(204,235,238,.38); font-size: 9.5px; }
.fd-feed-item.is-new { animation: fd-feed-enter .55s ease both, fd-feed-flash 1.6s ease .2s; }
.fd-feed-more { display: none; }
.fd-feed > footer { display: flex; min-height: 42px; align-items: center; justify-content: center; gap: 8px; border-top: 1px solid rgba(199,243,255,.08); color: rgba(183,225,228,.44); font-size: 9.5px; }
.fd-feed > footer i { width: 2px; height: 2px; border-radius: 50%; background: rgba(128,234,204,.35); }

/* ── lead drawer (freya-lead-drawer) ───────────────────────────────── */

.fd-drawer { position: absolute; z-index: 25; top: calc(var(--fd-top-h) + 18px); right: 22px; display: flex; width: var(--fd-drawer-w); max-height: calc(100% - var(--fd-top-h) - 40px); flex-direction: column; overflow-y: auto; padding: 24px 22px 20px; border: 1px solid rgba(196,244,255,.2); border-radius: 24px; background: linear-gradient(145deg, rgba(3,21,35,.9), rgba(2,10,25,.76)); box-shadow: 0 28px 90px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.075); -webkit-backdrop-filter: blur(28px) saturate(1.25); backdrop-filter: blur(28px) saturate(1.25); animation: fd-drawer-enter .28s ease both; scrollbar-width: thin; scrollbar-color: rgba(82,208,174,.18) transparent; }
.fd-drawer-close { position: absolute; top: 14px; right: 14px; display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid rgba(199,242,255,.12); border-radius: 50%; background: rgba(255,255,255,.025); color: rgba(230,248,249,.65); font-size: 19px; line-height: 1; }
.fd-eyebrow { margin: 0 0 8px; color: rgba(93,244,200,.72); font-size: 9px; font-weight: 760; letter-spacing: .19em; text-transform: uppercase; }
.fd-drawer h3 { margin: 0 0 4px; padding-right: 36px; color: rgba(247,255,254,.93); font-size: 27px; font-weight: 560; letter-spacing: -.045em; line-height: 1.1; }
.fd-contact { margin: 0 0 16px; color: rgba(213,238,241,.5); font-size: 11px; }
.fd-score { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid rgba(199,242,255,.09); border-bottom: 1px solid rgba(199,242,255,.09); }
.fd-score strong { color: #75f5d0; font-size: 38px; font-weight: 560; letter-spacing: -.06em; line-height: 1; }
.fd-score span { color: rgba(211,239,240,.5); font-size: 9.5px; line-height: 1.45; text-transform: uppercase; }
.fd-facts { display: flex; margin: 15px 0; flex-direction: column; gap: 10px; }
.fd-facts div { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.fd-facts dt { color: rgba(204,234,236,.46); font-size: 10.5px; }
.fd-facts dd { display: flex; align-items: center; gap: 7px; margin: 0; color: rgba(235,249,248,.8); font-size: 10.5px; text-align: right; }
.fd-quote { margin: 0 0 16px; padding: 12px 13px; border: 1px solid rgba(199,242,255,.08); border-radius: 14px; background: rgba(255,255,255,.02); color: rgba(216,238,240,.66); font-size: 10.5px; line-height: 1.55; }
.fd-sim-label { margin: -6px 0 16px; padding: 7px 10px; border: 1px solid rgba(90,169,255,.13); border-radius: 999px; background: rgba(47,112,185,.08); color: rgba(147,198,255,.68); font-size: 9px; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.fd-block { margin: 0 0 16px; }
.fd-block > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; color: rgba(199,232,234,.5); font-size: 9px; letter-spacing: .09em; text-transform: uppercase; }
.fd-block > header b { color: rgba(114,244,204,.62); font-weight: 600; }
.fd-list { display: flex; margin: 0; padding: 0; flex-direction: column; gap: 7px; list-style: none; }
.fd-list li { position: relative; padding-left: 14px; color: rgba(222,241,242,.68); font-size: 10.5px; line-height: 1.5; }
.fd-list li::before { position: absolute; top: .62em; left: 0; width: 5px; height: 5px; border-radius: 50%; background: rgba(114,244,204,.6); content: ""; }
.fd-next-action { padding: 12px 13px; border: 1px solid rgba(70,242,190,.15); border-radius: 14px; background: linear-gradient(145deg, rgba(21,117,92,.13), rgba(4,22,38,.55)); }
.fd-next-action strong { display: block; color: rgba(236,255,250,.88); font-size: 11.5px; font-weight: 600; }
.fd-next-action p { margin: 5px 0 0; color: rgba(212,238,239,.58); font-size: 10px; line-height: 1.5; }
.fd-convo { display: flex; flex-direction: column; gap: 8px; }
.fd-msg { max-width: 90%; padding: 10px 11px; border: 1px solid rgba(196,242,255,.08); border-radius: 12px 12px 12px 4px; background: rgba(255,255,255,.03); }
.fd-msg--outbound { align-self: flex-end; border-radius: 12px 12px 4px 12px; background: rgba(40,151,121,.12); }
.fd-msg span { color: rgba(122,235,205,.6); font-size: 8.5px; text-transform: uppercase; letter-spacing: .04em; }
.fd-msg p { margin: 4px 0 0; color: rgba(222,241,242,.72); font-size: 10.5px; line-height: 1.45; }
.fd-chip { display: flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid rgba(64,240,182,.14); border-radius: 999px; background: rgba(37,173,132,.08); color: rgba(137,246,213,.75); font-size: 10px; }
.fd-chip--blue { border-color: rgba(90,169,255,.18); background: rgba(47,112,185,.1); color: rgba(160,206,255,.8); }
.fd-card { position: relative; overflow: hidden; padding: 14px; border: 1px solid rgba(70,242,190,.15); border-radius: 16px; background: linear-gradient(145deg, rgba(21,117,92,.13), rgba(4,22,38,.55)); box-shadow: inset 0 1px rgba(255,255,255,.035); }
.fd-card::before { position: absolute; inset: 0; content: ""; pointer-events: none; background: radial-gradient(circle at 100% 0%, rgba(63,244,188,.12), transparent 47%); }
.fd-card > * { position: relative; }
.fd-card > header { display: flex; align-items: center; justify-content: space-between; color: rgba(200,237,237,.5); font-size: 9px; }
.fd-card-live { display: inline-flex; align-items: center; gap: 6px; color: rgba(125,250,213,.78); font-weight: 720; letter-spacing: .11em; }
.fd-card-live i { width: 6px; height: 6px; border-radius: 50%; background: #32f3ab; box-shadow: 0 0 9px rgba(50,243,171,.86); }
.fd-card .fd-facts { margin: 12px 0 0; padding: 11px 0 0; border-top: 1px solid rgba(198,242,255,.07); gap: 8px; }
.fd-card .fd-facts div { align-items: flex-start; }
.fd-card .fd-facts dd { max-width: 62%; line-height: 1.45; }
.fd-card > p { margin: 11px 0 0; color: rgba(212,238,239,.6); font-size: 10.5px; line-height: 1.55; }
.fd-wave { display: flex; height: 27px; margin: 12px 0 0; align-items: center; gap: 3px; }
.fd-wave i { width: 2px; height: 22%; border-radius: 99px; background: linear-gradient(180deg, #72f4ce, #4d9cff); opacity: .72; }
.fd-wave i:nth-child(3n) { height: 72%; }
.fd-wave i:nth-child(4n) { height: 100%; }
.fd-wave i:nth-child(5n) { height: 48%; }
.fd-not-won { padding: 11px 13px; border: 1px dashed rgba(255,214,140,.28); border-radius: 14px; background: rgba(255,190,90,.05); color: rgba(255,232,196,.8); font-size: 10.5px; line-height: 1.5; }
.fd-not-won strong { color: rgba(255,236,206,.95); font-weight: 600; }
.fd-timeline { position: relative; display: flex; margin: 0; padding: 0 0 0 16px; flex-direction: column; gap: 10px; list-style: none; }
.fd-timeline::before { position: absolute; top: 5px; bottom: 5px; left: 3px; width: 1px; background: rgba(199,243,255,.12); content: ""; }
.fd-timeline li { position: relative; display: flex; justify-content: space-between; gap: 10px; color: rgba(222,241,242,.72); font-size: 10.5px; line-height: 1.45; }
.fd-timeline li .fd-dot { position: absolute; top: .4em; left: -16px; width: 7px; height: 7px; }
.fd-timeline time { flex: 0 0 auto; color: rgba(204,235,238,.42); font-size: 9.5px; }
.fd-drawer-actions { display: flex; margin-top: 4px; flex-direction: column; gap: 8px; }
.fd-next { display: flex; width: 100%; height: 40px; align-items: center; justify-content: center; gap: 8px; border: 1px solid rgba(198,237,255,.14); border-radius: 999px; background: rgba(255,255,255,.03); color: rgba(226,245,246,.78); font-size: 11px; }
.fd-next:hover { border-color: rgba(116,246,210,.3); }
.fd-open-crm { display: flex; width: 100%; height: 42px; align-items: center; justify-content: center; gap: 8px; border: 1px solid rgba(85,248,201,.22); border-radius: 999px; background: linear-gradient(135deg, rgba(36,214,164,.2), rgba(54,139,255,.13)); color: rgba(226,255,247,.88); font-size: 11.5px; text-decoration: none; }

/* ── journey controls (capsule / glass, as freya-lifecycle) ────────── */

.fd-controls { display: flex; justify-content: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.fd-step { display: flex; min-height: 50px; align-items: center; gap: 10px; padding: 0 20px 0 17px; border: 1px solid rgba(198,244,255,.13); border-radius: 999px; background: rgba(2,14,30,.52); color: rgba(222,243,245,.72); font-size: 13px; box-shadow: 0 14px 40px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.04); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); transition: border-color .2s, background .2s, color .2s, transform .2s; }
.fd-step b { margin-right: 4px; color: rgba(150,220,205,.6); font-weight: 600; font-variant-numeric: tabular-nums; }
.fd-step:hover { border-color: rgba(116,246,210,.28); transform: translateY(-1px); }
.fd-step[aria-pressed="true"] { border-color: rgba(77,244,192,.34); background: linear-gradient(135deg, rgba(31,182,141,.18), rgba(39,100,170,.12)); color: rgba(236,255,250,.95); box-shadow: inset 0 1px rgba(255,255,255,.07), 0 0 26px rgba(28,203,151,.12), 0 14px 40px rgba(0,0,0,.24); }

.fd-footnote { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: min(var(--fd-max, 1320px), calc(100vw - 48px)); margin: 26px 0 0 calc((100% - min(1320px, calc(100vw - 48px))) / 2); }
.fd-footnote p { max-width: 720px; margin: 0; color: #82928e; font-size: 11px; line-height: 1.7; }

/* ── expanded view ─────────────────────────────────────────────────── */

.fd.is-expanded .fd-app { position: fixed; z-index: 200; inset: 0; height: auto; border: 0; border-radius: 0; }
.fd.is-expanded .fd-controls { position: fixed; z-index: 201; right: 0; bottom: 22px; left: 0; margin: 0; }
.fd.is-expanded .fd-lifecycle { bottom: 90px; }
.fd.is-expanded .fd-feed { bottom: 140px; }
.fd.is-expanded .fd-insight { bottom: 140px; }
.fd.is-expanded .fd-drawer { max-height: calc(100% - var(--fd-top-h) - 110px); }

/* ── responsive ────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .fd { --fd-feed-w: 280px; --fd-drawer-w: 320px; }
  .fd-identity { min-width: 0; }
  .fd-strip span { flex-direction: column; align-items: center; gap: 1px; }
  .fd-center-logo { left: 60%; }
  .fd-expand span { display: none; }
}

/* Phones and tablets: the feed, universe and details are rearranged
   into one column instead of shrinking the desktop composition. */
@media (max-width: 900px) {
  #freya .fd-head { margin-bottom: 30px; }
  .fd { display: flex; width: 100%; margin-left: 0; flex-direction: column; gap: 12px; }
  .fd-app { display: contents; }
  .fd-top { position: relative; order: 1; height: auto; grid-template-columns: 1fr auto; padding: 0 2px; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .fd-identity { align-items: flex-end; text-align: right; }
  .fd-identity > span, .fd-identity strong, .fd-top-actions { display: none; }
  .fd-brand small { display: none; }
  .fd-universe { position: relative; order: 2; height: clamp(420px, 62vw, 520px); border: 1px solid rgba(196,245,255,.12); border-radius: 22px; }
  .fd-toolbar, .fd-band, .fd-insight { display: none; }
  .fd-strip { top: 14px; right: 12px; left: 12px; gap: 4px; }
  .fd-strip span { padding: 6px 2px; font-size: 8.5px; letter-spacing: .02em; }
  .fd-strip b { font-size: 12px; }
  .fd-center-logo { top: 54%; left: 50%; width: 164px; height: 90px; }
  .fd-core-mark { width: 142px; height: 74px; }
  .fd-orbit--one { width: 205px; height: 92px; }
  .fd-orbit--two { width: 132px; height: 138px; }
  .fd-lifecycle { right: 10px; bottom: 12px; left: 10px; flex-wrap: wrap; justify-content: center; gap: 6px 12px; padding: 8px 12px; border-radius: 16px; font-size: 9.5px; transform: none; white-space: normal; }
  .fd-lifecycle b { display: none; }
  .fd-controls { order: 3; flex-direction: column; margin: 0; }
  .fd-step { width: 100%; min-height: 52px; }
  .fd-drawer { position: relative; top: auto; right: auto; order: 4; width: auto; max-height: none; overflow: visible; animation: none; }
  .fd-feed { position: relative; top: auto; bottom: auto; left: auto; order: 5; width: auto; }
  .fd-feed-list { overflow: visible; }
  .fd-feed:not(.is-all) .fd-feed-item:nth-child(n+5) { display: none; }
  .fd-feed-more { display: block; margin: 0 9px 9px; height: 40px; border: 1px solid rgba(196,240,255,.12); border-radius: 999px; background: rgba(255,255,255,.025); color: rgba(213,239,241,.7); font-size: 11px; }
  .fd-footnote { width: 100%; margin-left: 0; flex-direction: column; align-items: flex-start; }
}

/* ── motion ───────────────────────────────────────────────────────── */

@keyframes fd-logo-breathe { 0%,100% { opacity: .9; transform: scale(.98); } 50% { opacity: 1; transform: scale(1.035); } }
@keyframes fd-orbit-one { to { transform: rotate(351deg); } }
@keyframes fd-orbit-two { to { transform: rotate(391deg); } }
@keyframes fd-feed-enter { from { opacity: 0; transform: translateY(11px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fd-feed-scan { 0%,100% { opacity: .25; transform: translateX(-34%); } 50% { opacity: .9; transform: translateX(34%); } }
@keyframes fd-drawer-enter { from { opacity: 0; transform: translateX(18px) scale(.98); } to { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes fd-signal-live { 0%,100% { opacity: .16; transform: scale(.72); } 45% { opacity: .62; transform: scale(1.25); } }
@keyframes fd-node-pulse { from { opacity: .9; transform: scale(.6); } to { opacity: 0; transform: scale(1.8); } }
@keyframes fd-feed-flash { 0% { box-shadow: 0 0 0 1px rgba(116,246,210,.5), 0 0 30px rgba(50,243,171,.25); } 100% { box-shadow: inset 0 1px rgba(255,255,255,.025); } }

/* looping animations stop while the stage is off screen */
.fd.is-paused .fd-core-mark, .fd.is-paused .fd-orbit, .fd.is-paused .fd-feed-list::before,
.fd.is-paused .fd-feed > header > span i, .fd.is-paused .fd-node.is-focus::after { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .fd *, .fd *::before, .fd *::after { animation: none !important; transition: none !important; }
  .fd-feed-item { opacity: 1; }
}