/* Shared visual language from the approved "Your app starts here" design. */
.header { background: rgba(8, 10, 9, .96); }
.main-content :is(h1, h2, h3, h4) { font-family: var(--font-sans); }
.main-content :is(h1, h2) { letter-spacing: -.03em; }
.main-content :is(button, select), .main-content a[class*="btn"], .nav-link {
    font-family: var(--font-mono);
}
.main-content :is(.app-name, .finder-row-name, .related-app-name, .initial-app-link strong) {
    font-family: var(--font-sans);
}
.bg-circuit { background-size: 40px 40px; }

/* Homepage: readable editorial copy beside useful, directly linked chart paths. */
.mission-brief {
    display: block;
    max-width: 1200px;
    padding: 48px 38px 28px;
    border: 1px solid var(--border-default);
    border-radius: 10px;
    box-shadow: none;
    background: radial-gradient(ellipse at 85% 50%, #10341e70, transparent 58%),
        linear-gradient(#18312033 1px, transparent 1px),
        linear-gradient(90deg, #18312033 1px, transparent 1px), var(--bg-primary);
    background-size: auto, 40px 40px, 40px 40px, auto;
}
.mission-brief::after { content: none; }
.mission-columns { display: grid; grid-template-columns: 1.2fr 1fr; gap: 34px; align-items: center; }
.mission-columns > * { min-width: 0; }
.mission-kicker { margin-bottom: 21px; font: 500 11px var(--font-mono); letter-spacing: 1.2px; }
.mission-brief .mission-title { font-size: clamp(36px, 4.4vw, 56px); line-height: 1.04; letter-spacing: -1px; font-weight: 700; margin: 0 0 21px; }
.mission-title > span { color: var(--accent-green); }
.mission-description { max-width: 430px; margin: 0 0 25px; font-size: 16px; line-height: 1.65; color: var(--text-secondary); }
.mission-browse-actions { gap: 12px 17px; }
.mission-brief .mission-action-primary { min-height: 48px; padding: 14px 19px; border-radius: 5px; border-color: #2bdf79; background: #2bdf79; color: #041309; font: 500 13px var(--font-mono); }
.mission-brief .mission-action-primary::after { color: inherit; }
.mission-brief .mission-action-primary:hover { background: #50ed98; border-color: #50ed98; box-shadow: var(--shadow-glow-sm); }
.mission-help { display: inline-flex; gap: 10px; align-items: center; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: 5px; color: #d1dad4; font: 500 12px var(--font-mono); text-decoration: none; }
.mission-help:hover { color: var(--accent-green); border-color: var(--accent-green); background: var(--accent-green-glow); }
.mission-brief .mission-proof { margin-top: 23px; gap: 12px 21px; font: 11px var(--font-mono); color: #95a49a; }
.mission-proof-item strong { color: #e2eae5; }
.opportunity-scanner { background: #0c110e; border: 1px solid #2c4535; border-radius: 9px; box-shadow: 0 18px 55px #0006; overflow: hidden; }
.scanner-heading { padding: 16px 18px; border-bottom: 1px solid #243229; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; color: #9bab9f; font: 11px var(--font-mono); }
.scanner-heading > span:last-child { color: var(--accent-green); }
.opportunity-scanner h2 { margin: 23px 20px 17px; font-size: 20px; font-weight: 600; letter-spacing: -.5px; }
.scanner-mode { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 15px 18px; border-top: 1px solid #1e2c23; border-left: 2px solid transparent; color: #aab8ae; font: 13px/1.5 var(--font-sans); text-decoration: none; }
.scanner-mode strong { display: block; font-size: 14px; font-weight: 600; color: #f1f6f2; margin-bottom: 5px; }
.scanner-mode:first-of-type { background: #10291a; border-left-color: var(--accent-green); }
.opportunity-scanner:has(.scanner-mode:hover, .scanner-mode:focus-visible) .scanner-mode:first-of-type { background: transparent; border-left-color: transparent; }
.opportunity-scanner .scanner-mode:hover, .opportunity-scanner .scanner-mode:focus-visible { background: #10291a; border-left-color: var(--accent-green); }
.scanner-chevron { color: var(--accent-green); font: 18px var(--font-mono); }
.mission-bottom { margin-top: 35px; padding-top: 20px; border-top: 1px solid #213025; display: flex; justify-content: space-between; gap: 15px; flex-wrap: wrap; color: #91a498; font: 11px/1.6 var(--font-mono); }
.mission-bottom strong { font: 600 14px/1.6 var(--font-sans); color: #e3ebe6; }
.mission-bottom > span > span { margin: 0 5px; }
.mission-brief .finder-disclosure { margin-top: 20px; scroll-margin-top: 110px; }
.mission-brief .finder-disclosure:not([open]) { border: 0; }
.hero-enhanced .finder-disclosure:not([open]) { display: none; }
.mission-help:focus-visible, .scanner-mode:focus-visible { outline: 2px solid var(--accent-green); outline-offset: -3px; }

@media (max-width: 850px) {
    .mission-brief { padding: 36px 26px 24px; }
    .mission-columns { gap: 26px; grid-template-columns: 1.1fr 1fr; }
    .mission-brief .mission-title { font-size: 42px; }
}
@media (max-width: 650px) {
    .mission-brief { padding: 32px 22px 23px; }
    .mission-columns { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .mission-brief .mission-title { font-size: clamp(34px, 8.8vw, 42px); }
    .mission-description { font-size: 15px; }
    .mission-bottom { gap: 10px; }
    .mission-bottom > span { font-size: 10px; }
    .mission-kicker { font-size: 10px; }
}

/* Small, decorative previews; each row remains one chart link. */
.opportunity-scanner { container-type: inline-size; }
.scanner-mode-copy { min-width: 0; }
.scanner-mode-with-icons { display: grid; grid-template-columns: minmax(0, 1fr) 116px 12px; gap: 10px; }
.scanner-icons { display: block; width: 116px; height: 32px; overflow: hidden; mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent); }
.scanner-icon-track, .scanner-icon-group { display: flex; width: max-content; align-items: center; }
.scanner-icon-group { gap: 8px; padding-right: 8px; flex: none; }
.scanner-icon-group img { display: block; width: 32px; height: 32px; flex: none; border-radius: 7px; background: var(--bg-secondary); }
.scanner-icons-loop .scanner-icon-track { animation: scanner-drift 38s linear infinite; }
.scanner-mode[data-chart-type="velocity"] .scanner-icon-track { animation-duration: 43s; }
.scanner-mode[data-chart-type="zombie"] .scanner-icon-track { animation-duration: 48s; }
.scanner-mode:hover .scanner-icon-track, .scanner-mode:focus-visible .scanner-icon-track,
.scanner-paused .scanner-icon-track, .scanner-offscreen .scanner-icon-track,
.scanner-background .scanner-icon-track { animation-play-state: paused; }
@keyframes scanner-drift { to { transform: translateX(-50%); } }
@container (max-width: 380px) {
    .scanner-mode-with-icons { grid-template-columns: minmax(0, 1fr) 92px 12px; gap: 8px; padding: 15px 12px; }
    .scanner-icons { width: 92px; }
    .scanner-icon-group img { width: 28px; height: 28px; }
}
@container (max-width: 285px) {
    .scanner-mode-with-icons { grid-template-columns: minmax(0, 1fr) 12px; }
    .scanner-icons { grid-row: 2; width: 116px; margin-top: 2px; }
    .scanner-chevron { grid-column: 2; grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .scanner-icons-loop .scanner-icon-track { animation: none; }
}

.scanner-icons[hidden] { display: none; }
/* Direct workspace navigation keeps account actions on the account page. */
.header [hidden] { display: none !important; }
.header-nav { position: relative; gap: 20px; flex-shrink: 0; white-space: nowrap; }
.header .header-text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; color: var(--text-secondary); font: 12px var(--font-mono); text-decoration: none; }
.header .header-text-link:hover { background: transparent; color: var(--text-primary); box-shadow: none; }
.header .header-faq { color: var(--text-muted); }
.header .header-mcp[aria-current="page"] { color: var(--accent-green-light); }
.header .nav-pro, .header .header-workspace-link.is-pro, .header .header-workspace-link[aria-current="page"] { color: var(--accent-green-light); }
.header .nav-pro:hover, .header .header-workspace-link.is-pro:hover { color: #72efa9; }
.header .header-workspace-link { padding-left: 18px; border-left: 1px solid var(--border-subtle); }
.header .header-workspace-link[aria-current="page"] { text-decoration: underline; text-decoration-color: #3e7855; text-decoration-thickness: 1px; text-underline-offset: 7px; }
.header-nav :is(a,button):focus-visible { outline: 2px solid var(--accent-green-light); outline-offset: 4px; }
@media(min-width:769px) and (max-width:1100px) { .header-nav { gap: 12px; } .header .search-container { min-width: 140px; } .header .search-bar .shortcut { display: none; } }
@media(max-width:768px) {
    .header .header-content { grid-template-columns: minmax(0,1fr); gap: 6px; }
    .header .logo { grid-column: 1; grid-row: 1; }
    .header .logo-text { display: block; font-size: 16px; }
    .header .header-nav { grid-row: 2; grid-column: 1; width: 100%; gap: 16px; flex-wrap: wrap; }
    .header .header-search-toggle { position: absolute; right: 0; bottom: calc(100% + 6px); background: transparent; border-color: transparent; }
    .header .header-free { margin-right: auto; }
    .header .header-text-link { font-size: 11px; }
    .header .header-workspace-link { padding-left: 12px; }
    .header .search-container { grid-row: 3; grid-column: 1; }
}
@media(max-width:360px) { .header .header-nav { gap: 10px; } .header .header-workspace-link { padding-left: 8px; } }
