/* First-visit mission pop-up (inc/intro.php). Hub colors; motion-free. */
.ncd-intro { max-width: min(640px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: var(--r-card); background: var(--sec-deep); color: #fff; box-shadow: var(--shadow-2); }
.ncd-intro::backdrop { background: rgba(14, 26, 20, .72); }
.ncd-intro-body { padding: clamp(24px, 4vw, 40px); display: grid; gap: 14px; }
.ncd-intro .eyebrow { color: var(--sec-accent); }
.ncd-intro-title { font: var(--sec-display-weight) clamp(1.8rem, 4vw, 2.5rem)/1.05 var(--sec-display); color: #fff; }
.ncd-intro-title em { color: var(--sec-accent); }
.ncd-intro p:not(.eyebrow) { color: var(--sec-mist); font-size: 16px; line-height: 1.55; }
.ncd-intro-pillars { list-style: none; display: grid; gap: 10px; padding: 0; margin: 4px 0; }
.ncd-intro-pillars li { padding: 12px 14px; border: 1px solid rgba(255,255,255,.22); border-radius: var(--r-ctl); color: var(--sec-mist); }
.ncd-intro-pillars li { display: flow-root; padding-left: 74px; position: relative; }
.ncd-intro-pillars .fd-ico { position: absolute; left: 14px; top: 12px; width: 48px; height: 48px; padding: 6px; border-radius: 14px; background: rgba(255,255,255,.1); }
.ncd-intro-pillars .fd-ico .i-s { stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ncd-intro-pillars .fd-ico .i-s:not(.i-p):not(.i-a):not(.i-g) { fill: none; }
.ncd-intro-pillars .fd-ico .i-p { fill: rgba(255,255,255,.12); }
.ncd-intro-pillars .fd-ico .i-a { fill: #C9A557; }
.ncd-intro-pillars .fd-ico .i-g { fill: var(--sec-accent); }
.ncd-intro-pillars b { display: block; color: #fff; font-size: 15px; margin-bottom: 2px; }
.ncd-intro-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.ncd-intro-actions form { margin: 0; }
.ncd-intro .btn--primary { background: var(--sec-accent); color: var(--sec-deep); }
.ncd-intro .btn--ghost-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.ncd-intro .btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ncd-intro { position: relative; }
.ncd-intro-x { position: absolute; top: 8px; right: 8px; margin: 0; }
.ncd-intro-x button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.ncd-intro-x button:hover { background: rgba(255,255,255,.12); }
.ncd-intro-x button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* buttons stay side by side, also on phones (user, 2026-10-11) */
.ncd-intro-actions { flex-wrap: nowrap; }
.ncd-intro-actions > * { flex: 1 1 0; }
.ncd-intro-actions .btn { width: 100%; min-height: 48px; padding: 8px 14px; text-align: center; line-height: 1.2; white-space: normal; }
.ncd-intro-pillars a { color: var(--sec-accent); text-decoration: underline; text-underline-offset: .2em; }
.ncd-intro-pillars a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }