/* The first screen's globe (RFC 0042 D29, D34): eight teammates on a turning
   globe on Spruce, handing work to each other in four stories. People wear the
   cast's portraits, AI teammates wear their marks (their letters on their
   colour). The page supplies tokens.css and site.css. */
/* The light sits behind the globe: deep Spruce at the top, the selected green where the globe turns.
   The band is the globe's blend group, so cobe's dark body drops away against the light itself. */
.hero-band { isolation: isolate; background: radial-gradient(42% 58% at 70% 64%, var(--band-selected), transparent 72%), linear-gradient(180deg, var(--palette-spruce-ink) 0%, var(--band) 62%); }
#duly-hero-globe {
  --dh-line: color-mix(in srgb, var(--band-ink) 22%, transparent);
  --dh-ease-out: cubic-bezier(.23, 1, .32, 1);
  color: var(--band-ink);
  padding: var(--space-xxl) 0; container-type: inline-size; overflow-x: clip;
}
/* Copy owns the left column, where reading starts; the map owns the right, clear of every word. */
#duly-hero-globe .dh-main { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; column-gap: var(--space-xxl); }
#duly-hero-globe h1 { grid-column: 1; grid-row: 1; align-self: end; position: relative; z-index: 2; font-size: clamp(2.25rem, 5cqw, 3.5rem); line-height: 1.06; }
#duly-hero-globe .dh-line { display: block; }
#duly-hero-globe .dh-line-answer { margin-top: var(--space-s); }
#duly-hero-globe .dh-phrase { white-space: nowrap; }
#duly-hero-globe .dh-copy { grid-column: 1; grid-row: 2; align-self: start; position: relative; z-index: 2; padding-top: var(--space-l); }
#duly-hero-globe .dh-lede { max-width: 400px; color: var(--band-ink-2); font-size: var(--type-body-size); line-height: 1.6; }
#duly-hero-globe .dh-cta { margin-top: var(--space-xl); }
#duly-hero-globe .dh-stage { grid-column: 2; grid-row: 1 / span 2; position: relative; height: clamp(520px, 66vh, 620px); min-width: 0; user-select: none; }
/* Screened onto the band: cobe's dark body drops away and only its dots light it.
   The map fades out before the stage's edge instead of stopping at a hard line. */
#duly-hero-globe .dh-globe { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; mask-image: radial-gradient(closest-side, var(--band) 72%, transparent); }
#duly-hero-globe .dh-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#duly-hero-globe .dh-edge { fill: none; stroke: var(--dh-line); stroke-width: 1.35; opacity: .72; transition: stroke 240ms var(--dh-ease-out); }
#duly-hero-globe .dh-active { fill: none; stroke: var(--band-ink); stroke-width: 1.8; }
#duly-hero-globe .dh-node { position: absolute; left: 50%; top: 50%; width: 136px; display: flex; flex-direction: column; align-items: center; pointer-events: none; will-change: transform; transform: translate(-50%, -50%); }
/* A readable roster remains in place before the enhancement script runs. */
#duly-hero-globe .dh-node[data-key="sansa"] { left: 13%; top: 48%; }
#duly-hero-globe .dh-node[data-key="scout"] { left: 40%; top: 34%; }
#duly-hero-globe .dh-node[data-key="quill"] { left: 60%; top: 40%; }
#duly-hero-globe .dh-node[data-key="robin"] { left: 80%; top: 42%; }
#duly-hero-globe .dh-node[data-key="enid"] { left: 76%; top: 88%; }
#duly-hero-globe .dh-node[data-key="ledger"] { left: 42%; top: 73%; }
#duly-hero-globe .dh-node[data-key="jon"] { left: 19%; top: 20%; }
#duly-hero-globe .dh-node[data-key="pager"] { left: 51%; top: 54%; }
#duly-hero-globe .dh-avatar { width: 64px; height: 64px; position: relative; border-radius: var(--radius-pill); background: var(--band); }
/* The ring: lit while a message is on its way. An AI teammate's ring turns. */
#duly-hero-globe .dh-avatar::after { content: ""; position: absolute; inset: -6px; border: 2px solid var(--band-ink); border-radius: inherit; opacity: calc(var(--dh-lit, 0) * .8); transform: scale(calc(.9 + var(--dh-lit, 0) * .1)); }
#duly-hero-globe .dh-ai .dh-avatar::after { border-color: var(--dh-line); border-top-color: var(--band-ink); border-radius: var(--radius-large); }
#duly-hero-globe .dh-ai[data-lit] .dh-avatar::after { animation: dh-turn 1.1s linear infinite; }
@keyframes dh-turn { to { transform: rotate(360deg); } }
#duly-hero-globe .dh-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
#duly-hero-globe .dh-mark { width: 100%; height: 100%; border-radius: var(--radius-large); display: grid; place-items: center; background: var(--mark); color: var(--palette-teammate-letters); font-weight: 720; font-size: 1.5rem; line-height: 1; }
#duly-hero-globe [data-key="scout"] { --mark: var(--palette-teammate-cobalt); }
#duly-hero-globe [data-key="quill"] { --mark: var(--palette-teammate-plum); }
#duly-hero-globe [data-key="ledger"] { --mark: var(--palette-teammate-teal); }
#duly-hero-globe [data-key="pager"] { --mark: var(--palette-teammate-ember); }
#duly-hero-globe .dh-label { display: flex; flex-direction: column; align-items: center; gap: 5px; position: relative; z-index: 1; margin-top: 6px; }
#duly-hero-globe .dh-role { padding: 2px 6px; border-radius: var(--radius-small); background: var(--card); color: var(--ink); font-size: var(--type-meta-size); line-height: 17px; font-weight: 650; white-space: nowrap; }
#duly-hero-globe .dh-name { padding: 0 3px; border-radius: var(--radius-small); background: color-mix(in srgb, var(--band) 92%, transparent); color: var(--band-ink-2); font-size: var(--type-meta-size); line-height: 16px; white-space: nowrap; }
#duly-hero-globe .dh-name small { margin-left: 3px; font-size: var(--type-tag-size); font-weight: 650; }
#duly-hero-globe .dh-packet, #duly-hero-globe .dh-result { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; will-change: transform, opacity; }
#duly-hero-globe .dh-packet { z-index: 20; width: 31px; height: 24px; display: flex; align-items: center; justify-content: center; gap: 3px; border-radius: 8px 8px 8px 2px; background: var(--band-ink); color: var(--band); }
#duly-hero-globe .dh-packet b { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
#duly-hero-globe .dh-result { z-index: 21; transform-origin: 0 100%; max-width: min(184px, 85%); padding: 9px 12px; border-radius: 11px 11px 11px 2px; background: var(--card); color: var(--action); font-size: var(--type-small-size); line-height: 18px; font-weight: 650; }
#duly-hero-globe[data-ready="true"] .dh-node { left: 0; top: 0; }
@media (prefers-reduced-motion: reduce) {
  #duly-hero-globe .dh-edge { transition: none; }
  #duly-hero-globe .dh-ai[data-lit] .dh-avatar::after { animation: none; }
}
@container (max-width: 860px) {
  #duly-hero-globe .dh-main { grid-template-columns: minmax(0, 1fr); }
  #duly-hero-globe h1 { font-size: clamp(1.75rem, 9.5cqw, 2.875rem); line-height: 1.1; }
  #duly-hero-globe .dh-copy { padding-top: var(--space-xl); }
  #duly-hero-globe .dh-lede { max-width: 400px; font-size: var(--site-lead-size-phone); line-height: var(--site-lead-line-height-phone); }
  #duly-hero-globe .dh-stage { grid-column: 1; grid-row: 3; height: 430px; }
  #duly-hero-globe .dh-avatar { width: 46px; height: 46px; }
  #duly-hero-globe .dh-mark { font-size: 1.125rem; }
  #duly-hero-globe .dh-node { width: 112px; }
}
@container (max-width: 370px) {
  #duly-hero-globe .dh-line-answer { margin-top: var(--space-m); }
  #duly-hero-globe .dh-line .dh-phrase { display: block; }
  #duly-hero-globe .dh-stage { height: 414px; }
  #duly-hero-globe .dh-avatar { width: 42px; height: 42px; }
  #duly-hero-globe .dh-node { width: 104px; }
}