/* website-black.css: the Black theme's rules for the public website (cs/website-light); its tokens are in theme.css.
   Loaded after website.css and website-light.css on every website page, and every rule is scoped html.website-black.
   Black is built on the site's own dark design (website.css is dark-native): the tokens turn it black and white, and
   the dBoss feel is laid on top, as in the approved mock. The page carries website-light too, which only the scanner
   card's and pop-up's shared rules (scan-flow.css) read; Light's own rules skip Black. */

/* Type */
html.website-black body { font-family: var(--db-f-ui); background: #000000; }   /* text keeps website.css's white */
/* Geist where website.css names Inter, and on the cookie banner, which sets Inter in its own <style> */
html.website-black h1,
html.website-black .huly-headline,
html.website-black .ch-title,
html.website-black #cookie-consent-banner,
html.website-black #cookie-consent-banner .cc-btn { font-family: var(--db-f-ui); }
html.website-black .section-title { color: #FFFFFF; }
/* website.css puts white text on the accent in these; the accent is white here, so their text turns black */
html.website-black :is(.modal-submit, .vp2-req, .vp2-hub-out, .st-am-cta, .kb-page-current, .kb-cta-btn) { color: #000000; }
/* the timeline's numbers sit on the accent only on a reached step, and on every step on phones */
html.website-black .sp-timeline-step.active .sp-step-num { color: #000000; }
@media (max-width: 768px) {
    html.website-black .sp-timeline-step .sp-step-num { color: #000000; }
}
html.website-black button,
html.website-black input,
html.website-black select,
html.website-black textarea { font-family: inherit; }
html.website-black ::selection { background: rgb(255 107 44 / .45); color: #FFFFFF; }
html.website-black :focus-visible { outline: 2px solid var(--db-focus); outline-offset: 2px; }
html.website-black .huly-headline { font-weight: 600; letter-spacing: -0.055em; line-height: 1.02; }
/* A plain white fill, not the site's white background clipped to the letters: that layer also lay under the coloured
   words and left a white rim round them. Light has the same fix. */
html.website-black .huly-headline { background: none; color: var(--text-primary); -webkit-text-fill-color: var(--text-primary); }
html.website-black .section-title,
html.website-black .st-headline,
html.website-black .vp2-title,
html.website-black .bookend-headline,
html.website-black .ch-title,
html.website-black h1,
html.website-black h2,
html.website-black h3 { letter-spacing: -0.04em; }
html.website-black .section-title,
html.website-black .bookend-headline,
html.website-black .ch-title,
html.website-black .st-headline { font-weight: 600; line-height: 1.05; }
html.website-black .gradient-text,
html.website-black .ch-accent,
html.website-black .hero-grow {
    background: var(--db-spectrum);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
html.website-black .hero-typing-cursor { color: #FFFFFF; }
html.website-black .section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--db-f-mono);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .02em;
    text-transform: none;
    color: var(--db-ink-3);
}
html.website-black .section-tag::before { content: ''; width: 18px; height: 2px; border-radius: 2px; background: var(--db-spectrum); flex: none; }

/* Buttons: white on black */
html.website-black .cta-primary { background: #FFFFFF; color: #000000; border: 0; border-radius: 10px; box-shadow: none; }
html.website-black .cta-primary:hover { background: #E4E4E7; }
html.website-black .faq-pill { border-radius: 999px; background: #0B0B0D; border: 1px solid var(--db-line-2); color: var(--db-ink-2); }
html.website-black .faq-pill:hover { color: #FFFFFF; border-color: var(--db-line-3); }
html.website-black .faq-pill.active { background: #FFFFFF; border-color: #FFFFFF; color: #000000; }
html.website-black .logo span { color: #CCFF00; }
/* The theme menus: Black and Light, which have no vote button, sit above the vote's header, as on Light */
html.website-black .theme-option-row:is([data-theme="website-black"], [data-theme="website-light"]) { order: -1; }
html.website-black .theme-option-row[data-theme="website-light"] { margin-bottom: 6px; }
html.website-black .theme-vote-header { box-shadow: inset 0 1px 0 var(--db-line); }

/* The hero: black, the spectrum washed in from the top; no WebGL mesh */
html.website-black #mesh-gradient-canvas,
html.website-black #mesh-gradient-canvas-bottom { display: none; }
html.website-black .hero-v1 { background: #000000; box-shadow: inset 0 -1px 0 var(--db-line); overflow: hidden; }
html.website-black .hero-v1::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: -360px;
    left: 50%;
    width: max(1500px, 80vw);
    height: 620px;
    transform: translateX(-50%);
    background: var(--db-spectrum);
    filter: blur(140px);
    opacity: .16;
    border-radius: 50%;
    pointer-events: none;
}
html.website-black .hero-v1-layout { position: relative; z-index: 1; }

/* Sections and cards */
html.website-black .section,
html.website-black .st-section,
html.website-black .faq-section { background: #000000; }
html.website-black .vp2-card,
html.website-black .st-card,
html.website-black .faq-item {
    background: #0B0B0D;
    border: 1px solid var(--db-line-2);
    border-radius: 22px;
    box-shadow: none;
}
html.website-black .faq-item { border-radius: 16px; }
html.website-black .vp2-card,
html.website-black .st-card { overflow: hidden; }
html.website-black .vp2-visual,
html.website-black .st-card-visual { position: relative; isolation: isolate; }
html.website-black .vp2-visual::after,
html.website-black .st-card-visual::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0 -20% -30%;
    background:
        radial-gradient(52% 58% at 78% 78%, color-mix(in srgb, var(--h, #FF6B2C) 60%, transparent), transparent 72%),
        radial-gradient(46% 52% at 18% 100%, color-mix(in srgb, var(--h2, #FF2F87) 52%, transparent), transparent 72%);
    filter: blur(30px);
    opacity: .22;
    pointer-events: none;
}
html.website-black .vp2-card:nth-child(4n+1),
html.website-black .st-card:nth-child(4n+1) { --h: #FF6B2C; --h2: #FF2F87; }
html.website-black .vp2-card:nth-child(4n+2),
html.website-black .st-card:nth-child(4n+2) { --h: #FF2F87; --h2: #8B5CFF; }
html.website-black .vp2-card:nth-child(4n+3),
html.website-black .st-card:nth-child(4n+3) { --h: #8B5CFF; --h2: #1AA8FF; }
html.website-black .vp2-card:nth-child(4n+4),
html.website-black .st-card:nth-child(4n+4) { --h: #1AA8FF; --h2: #12C29B; }
html.website-black .st-mock,
html.website-black .vp2-hub-device { border-radius: 16px; border-color: var(--db-line-2); box-shadow: 0 30px 60px -24px rgb(0 0 0 / .9); }
html.website-black .st-step-badge { font-family: var(--db-f-mono); }

/* The closing band: black, the spectrum glowing up from below */
html.website-black .bookend-cta { background: #000000; position: relative; overflow: hidden; border-top: 1px solid var(--db-line); }
html.website-black .bookend-cta::after {
    content: '';
    position: absolute;
    z-index: 0;
    inset: auto -10% -60% 10%;
    height: 120%;
    background: var(--db-spectrum);
    filter: blur(110px);
    opacity: .28;
    border-radius: 50%;
    pointer-events: none;
}
html.website-black .bookend-cta > * { position: relative; z-index: 1; }

/* The footer */
html.website-black .site-footer { background: #050506; border-top: 1px solid var(--db-line); }
/* the small print is white at 40-45% in website.css: too faint on black */
html.website-black .footer-trust-label,
html.website-black .footer-prefs-label,
html.website-black .footer-legal { color: var(--text-muted); }

/* The cookie banner: Accept All is the accent with white text, so its text turns black */
html.website-black #cookie-consent-banner .cc-btn-accept { color: #000000; }

/* The site modal's and the contact page's send buttons: white on black, as every button here */
html.website-black .modal-submit { background: #FFFFFF; }
html.website-black .modal-submit:hover { background: #E4E4E7; }
html.website-black #contact-submit-btn { color: #000000 !important; }   /* !important: inline white text, contact.html */
html.website-black #contact-submit-btn:disabled {
    background: var(--db-line-2) !important;   /* inline accent and opacity, contact.html: a plain disabled fill */
    color: var(--db-ink-2) !important;
    opacity: 1 !important;
}

/* Careers: Apply and the job modal's Submit Application keep their green, whose white text is 2.7:1; black text on it
   is 7.6:1 (6.2:1 on its hover green), as on the accent buttons above */
html.website-black .role-card button[onclick^="applyForJob"] { color: #000000 !important; }   /* !important: inline white, job_card.html */
html.website-black .job-submit-btn { color: #000000; }

/* Phones: the carousel's 44px touch targets keep their size but draw a 10px dot, as on Light */
@media (max-width: 768px) {
    html.website-black .st-dot { background: radial-gradient(circle, rgb(255 255 255 / .28) 0 4.5px, rgb(255 255 255 / 0) 5px); box-shadow: none; }
    html.website-black .st-dot.st-dot-active { background: radial-gradient(circle, #FFFFFF 0 4.5px, rgb(255 255 255 / 0) 5px); box-shadow: none; }
    /* "Swipe to explore": website.css draws the muted grey at 60%, 2.7:1 on black; the grey itself is 6.1:1, as on Light */
    html.website-black .fc-swipe-hint { opacity: 1; }
}