/* Sentinel CCTV app inspired control room styling for the BatchPrep site. */
:root {
  --ink: #e9f2ec;
  --muted: #93a39a;
  --green: #a9f548;
  --green-dark: #8bd833;
  --mint: #14201a;
  --cream: #090d0c;
  --line: #26342d;
  --yellow: #ffc957;
  --coral: #ff7468;
  --sans: 'DM Sans', Arial, sans-serif;
  --display: 'Manrope', 'DM Sans', Arial, sans-serif;
}

html { scroll-behavior: smooth; }
body { background: #090d0c; color: #e9f2ec; }
.announcement { background: #111a15; color: #d8e4db; border-bottom: 1px solid #2a392f; }
.announcement a { color: var(--green); }
.announce-dot, .tiny-dot { background: var(--green); box-shadow: 0 0 10px #a9f54880; }
.site-header { background: rgba(9,13,12,.96); border-color: #25322b; }
.brand { color: #f0f7f2; }
.brand-mark, .mini-mark { color: #a9f548; background: #18261b; border: 1px solid #3b5828; border-radius: 6px; }
.brand-period { color: var(--green); }
.main-nav a { color: #9eaea4; }
.main-nav a:hover, .footer-links a:hover { color: var(--green); }
.header-cta { color: #d8e5dc; border-color: #3a4b3f; border-radius: 4px; }
.header-cta span { color: var(--green); }
.header-cta:hover { background: var(--green); color: #0a100b; border-color: var(--green); }
.menu-toggle { background: #111916; border-color: #34453a; border-radius: 4px; }
.menu-toggle span { background: var(--green); }

.hero {
  background-image: linear-gradient(#a9f54808 1px, transparent 1px), linear-gradient(90deg, #a9f54808 1px, transparent 1px);
  background-size: 42px 42px;
  background-position: center 4px;
}
.eyebrow, .feature-number, .plan-label, .dash-kicker, .preview-label, .photo-badge, .product-meta, .step-foot {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .11em;
}
.eyebrow { color: #a8b8ad; }
.sparkle { color: var(--green); }
.hero h1, .section-intro h2, .before-after h2, .how-heading h2, .health-copy h2, .pricing-heading h2, .control-copy h2, .faq-intro h2, .final-cta h2 { color: #f0f5f1; }
.serif-accent { color: var(--green); font-family: var(--display); font-weight: 700; font-style: normal; }
.hero-lede, .section-intro>p, .pricing-heading>p, .faq-intro>p, .how-heading>p, .ba-copy>p, .control-copy>p { color: #a3b2a8; }
.button { border-radius: 4px; }
.button-primary { background: var(--green); color: #10160c; box-shadow: 0 0 24px #a9f54820; }
.button-primary:hover { background: #c4ff79; }
.text-link { color: #d1ddd5; }
.text-link span { color: var(--green); }
.hero-proof p { color: #8d9d93; }
.hero-proof strong { color: #d5e1d8; }
.avatar-stack span { border-color: #090d0c; }

.hero-visual { background: radial-gradient(ellipse at 55% 48%, #a9f54814, transparent 65%); }
.visual-orbit { border-color: #a9f5481c; border-radius: 4px; transform: rotate(-8deg); }
.orbit-one { width: 590px; height: 368px; }
.orbit-two { width: 675px; height: 430px; }
.dashboard-window, .health-dashboard {
  background: #0d1310;
  border: 1px solid #34463a;
  border-radius: 5px;
  box-shadow: 0 24px 65px #0009, 0 0 28px #a9f5480a;
}
.dash-top, .dash-sidebar { border-color: #27352d; }
.dash-brand { color: #edf5ef; }
.dash-profile { color: #9aaba0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; }
.dash-profile:before { content: '● LIVE'; color: #ff6259; font-size: 7px; font-weight: 800; letter-spacing: .1em; margin-right: 7px; animation: live-pulse 1.8s infinite; }
.profile-avatar { background: #26382a; color: var(--green); border-radius: 4px; }
.dash-sidebar>span { color: #8d9c92; }
.dash-sidebar .side-active { color: var(--green); background: #192519; border-radius: 3px; }
.side-divider { background: #26352c; }
.side-help { background: #121b16; border: 1px solid #26352b; border-radius: 3px; }
.help-icon { background: #22321d; color: var(--green); }
.side-help b { color: #e0ebe3; }
.side-help small { color: #94a398; }
.dash-main { color: #e3ede6; }
.dash-kicker, .metric-card>span { color: #97a89d; }
.dash-heading h3 { color: #f0f6f1; }
.export-small { background: #131b16; border-color: #3b4d40; color: #d4e1d8; border-radius: 3px; }
.export-small span { color: var(--green); }
.metric-card { background: #101814; border-color: #2c3b31; border-radius: 3px; }
.metric-card strong { color: #f0f5f1; }
.metric-card strong small, .metric-card em { color: #91a095; }
.progress { background: #26342a; border-radius: 1px; }
.progress i { background: var(--green); box-shadow: 0 0 9px #a9f54876; border-radius: 1px; }
.health-card { background: #142018; border-color: #405433; }
.health-card .up-label { color: var(--green); }
.out-of { color: #91a095; }
.dash-section-title { color: #e4ede6; }
.dash-section-title a { color: var(--green); }
.suggestion { border-color: #27352d; }
.sug-text b { color: #dce8df; }
.sug-text small { color: #96a69c; }
.sug-count { background: #1b251e; color: #c6d3c9; border-radius: 3px; }
.sug-arrow { color: #a4b2a8; }
.amber { background: #322816; color: #ffd273; }
.coral { background: #321e1c; color: #ff8b7d; }
.mint { background: #1c2d1d; color: var(--green); }
.floating-note { background: #131b16; border-color: #3b4d40; border-radius: 4px; box-shadow: 0 10px 28px #0009; }
.floating-note b { color: #edf4ef; }
.floating-note small { color: #9aa99f; }
.note-check { background: #22331b; color: var(--green); border-radius: 4px; }
.visual-caption { color: #9aaa9f; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .08em; }
.caption-line { background: #89b84a; }
.hero-bottom { color: #85958b; }
.shopify-wordmark { color: #b6c6bb; }
.shopify-bag { background: #3e6731; }
.bottom-divider { background: #344238; }

.trust-strip { background: #101713; border-color: #26352c; }
.trust-inner>div { border-color: #2b3a30; }
.trust-icon { background: #1a271c; color: var(--green); border-radius: 4px; }
.trust-inner b { color: #e0ebe3; }
.trust-inner small { color: #98a79d; }
.feature-card { background: #0e1511; border-color: #2b3930; border-radius: 4px; }
.feature-wide, .creation-card { background: #121b15; }
.feature-number { color: #91a197; }
.feature-icon { border: 1px solid #34453a; border-radius: 4px; }
.icon-green { background: #1b2b1d; color: var(--green); }
.icon-yellow { background: #332919; color: #ffd273; }
.icon-coral { background: #321e1c; color: #ff8b7d; }
.icon-lilac { background: #282237; color: #c6b4ff; }
.feature-card h3 { color: #e9f2eb; }
.feature-card>p { color: #a0afa5; }
.seo-preview, .draft-tile { border-color: #334238; }
.preview-label { color: #91a197; }
.title-before { color: #99a69d; text-decoration-color: #ff7468; }
.title-after { color: #c5f68d; }
.check-small, .file-check { color: var(--green); }
.file-chip { background: #111a15; border-color: #2f3d33; border-radius: 4px; }
.file-thumb { background: #1e2d1e; color: var(--green); border-radius: 3px; }
.file-chip b { color: #dce8df; }
.file-chip small, .draft-tile small { color: #96a69b; }
.product-swatch { position: relative; overflow: hidden; border-color: #0e1511; border-radius: 3px; }
.product-swatch:after { position: absolute; top: 3px; left: 4px; color: #e7f2e8; font: 700 6px/1 ui-monospace, monospace; text-shadow: 0 1px 3px #000; }
.swatch-a:after { content: '01'; }
.swatch-b:after { content: '02'; }
.swatch-c:after { content: '03'; }
.swatch-a { box-shadow: 0 0 0 1px #a9f54880; }
.swatch-c { outline: 2px solid #ff7468; }
.issue-pill { background: #321e1c; color: #ff978c; border-radius: 3px; }
.upload-tile { background: #101814; color: #b3df84; border-color: #627a48; border-radius: 3px; }
.draft-tile { background: #0e1611; border-radius: 3px; }
.draft-tile b { color: #e0ebe2; }
.draft-badge { background: #263619; color: #c0f57c; border-radius: 2px; }

.before-after-section, .pricing-section { background: #0b100e; }
.ba-controls { background: #18221b; border-radius: 4px; }
.ba-tab { color: #9daea2; border-radius: 3px; }
.ba-tab.active { background: #27351e; color: var(--green); box-shadow: 0 0 0 1px #617d38; }
.ba-hint { color: #8d9e93; }
.product-compare { background: #101713; border-color: #344339; border-radius: 4px; box-shadow: 0 16px 42px #0007; }
.product-photo { background: #151d18; }
.product-photo:before { background-image: linear-gradient(#a9f5480a 1px, transparent 1px), linear-gradient(90deg, #a9f5480a 1px, transparent 1px), radial-gradient(ellipse at 50% 58%, #30382c 0, #1b241e 58%, #111814 100%); background-size: 24px 24px, 24px 24px, cover; }
.photo-badge, .photo-corner { color: #aab7ad; }
.product-info, .product-compare[data-view="after"] .product-info { background: #101713; }
.product-meta { color: #9baaa0; }
.status-tag { background: #322816; color: #ffd273; border-radius: 2px; }
.product-info h3 { color: #eaf2ec; }
.product-info>p { color: #9aa99f; }
.product-specs, .product-specs>div { border-color: #29372e; }
.product-specs small, .compare-footer { color: #93a399; }
.product-specs b { color: #c7d4ca; }
.compare-state i { background: #ffbd4a; }
.compare-score { color: #ffd273; }
.product-compare[data-view="after"] .status-tag { background: #22331b; color: var(--green); }
.product-compare[data-view="after"] .compare-title, .product-compare[data-view="after"] .compare-description, .product-compare[data-view="after"] .compare-alt, .product-compare[data-view="after"] .compare-filename { color: #c7eea1; }
.product-compare[data-view="after"] .compare-score { color: var(--green); }

.steps { border-color: #2b3a30; }
.steps article { border-color: #2b3a30; }
.steps h3 { color: #e4eee7; }
.steps p { color: #9dada3; }
.step-num, .step-foot { color: #8e9e94; }
.upload-icon, .review-icon { background: #1b2b1d; color: var(--green); }
.scan-icon { background: #332919; color: #ffd273; }
.export-icon { background: #321e1c; color: #ff8b7d; }

.health-section, .final-cta { background: #111b14; border-color: #35462f; }
.health-section:before, .health-section:after, .final-cta:before, .final-cta:after { border-color: #a9f54816; }
.health-copy h2 { color: #f0f5f1; }
.health-copy .serif-accent, .final-cta .serif-accent { color: var(--green); }
.health-copy>p, .health-note small, .final-cta>p { color: #a6b5aa; }
.button-light { background: var(--green); color: #10160c; }
.button-light:hover { background: #c4ff79; }
.health-note { border-color: #34443a; }
.note-star, .cta-decoration { color: var(--green); }
.health-note b { color: #e1ebe4; }
.health-dash-header, .health-score-row, .health-checks>div { border-color: #29372e; }
.health-dash-header>div>span, .updated-tag { color: #99a89e; }
.health-dash-header h3 { color: #e9f2eb; }
.updated-tag i { background: var(--green); box-shadow: 0 0 8px #a9f54880; }
.score-ring { background: conic-gradient(var(--green) 0 82%, #29362c 82% 100%); }
.score-ring:after { background: #0d1310; }
.score-ring strong, .health-score-row>div:nth-child(2) b { color: #eef5f0; }
.score-ring small, .health-score-row>div:nth-child(2) p { color: #99a99e; }
.score-trend, .check-status { color: var(--green); }
.health-checks b { color: #e0ebe3; }
.health-checks small, .check-chevron { color: #97a69c; }
.green-check { background: #1b2b1d; color: var(--green); }
.yellow-check { background: #332919; color: #ffd273; }
.blue-check { background: #1b2c31; color: #8dd7e3; }
.status-review { color: #ffd273; }
.health-dash-bottom { color: #9baaa0; }
.health-dash-bottom>span:last-child { color: var(--green); }
.legend-green { background: var(--green); }
.legend-yellow { background: #ffd273; }

.billing-note { color: #9eadA3; }
.billing-dot { background: var(--green); box-shadow: 0 0 7px #a9f54880; }
.price-card { background: #101713; border-color: #2c3b32; border-radius: 4px; }
.price-featured { border-color: #8ecf45; box-shadow: 0 0 32px #a9f54812; }
.popular-badge { background: var(--green); color: #10160c; }
.plan-label { color: #99a99e; }
.price-card h3, .price strong { color: #eff5f0; }
.price-card>p, .price span { color: #9aa99f; }
.products-included { background: #1a251d; color: #b5c4b9; border-radius: 3px; }
.products-included span { color: var(--green); }
.products-included b { color: #e1ece4; }
.button-outline { border-color: #475a4b; color: #d4e3d8; }
.button-outline:hover { background: #202d22; }
.price-card li { color: #bdc9c0; }
.price-card li:before { color: var(--green); }
.pricing-footnote { color: #8e9e94; }
.pricing-footnote a { color: var(--green); }

.control-section { background: #0d1310; border-color: #26352d; }
.control-art:before { border-color: #344339; border-radius: 4px; }
.control-card { background: #121a15; border-color: #324137; border-radius: 3px; box-shadow: 0 8px 22px #0005; }
.control-icon { background: #1d2b1d; color: var(--green); border-radius: 3px; }
.control-check { background: #20321b; color: var(--green); }
.control-download { background: #332919; color: #ffd273; }
.control-card b { color: #e0ebe3; }
.control-card small, .control-arrow { color: #96a69b; }
.control-circle { background: var(--green); color: #0c1309; box-shadow: 0 8px 24px #0008; border-radius: 4px; }
.control-circle span { color: #30491b; }
.control-copy h2 { color: #e9f1eb; }
.control-copy .text-link { color: #c6d4ca; }
.faq-list details, .faq-list details:first-child { border-color: #2b3a30; }
.faq-list summary { color: #e1ebe4; }
.faq-plus { background: #1b291e; border-radius: 3px; }
.faq-plus:before, .faq-plus:after { background: var(--green); }
.faq-list details p { color: #a3b1a7; }
.final-cta { background: #17251a; }
.final-cta .eyebrow { color: #c0d0c4; }
.final-cta>p { color: #c0cfc4; }
.site-footer { color: #e7f0e9; }
.footer-brand { color: #e7f0e9; }
.footer-copy, .footer-links a, .copyright { color: #9aa99f; }
.copyright { border-color: #344238; }

@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (max-width: 760px) {
  .main-nav { background: #0c120f; border-color: #2b3a30; }
  .main-nav a { color: #cfdbd2; border-color: #26352c; }
  .menu-toggle { background: #111916; }
  .trust-inner>div, .trust-inner>div:first-child { border-color: #2b3a30; }
  .steps article:nth-child(3), .steps article:nth-child(4) { border-color: #2b3a30; }
}
@media (max-width: 460px) {
  .health-dashboard, .product-compare { border-color: #344339; }
}
