/* website-light.css: the Light theme's rules for the public website (cs/website-light); its tokens are in theme.css.
   Loaded after website.css on every website page. Every rule is scoped html.website-light:not(.website-black): a
   Black page carries website-light too (Black is built on Light) and has its own rules in website-black.css, and the
   five older themes never match, so they look as before. The scanner card and pop-up are scan-flow.css's.
   Two layers, as in the approved mock: a light conversion of the site (a white page, #FAFAFB bands meeting on
   hairlines, ink text, layered ink shadows, no glows), then the dBoss feel over it (Geist, headlines at 600 with tight
   tracking, mono eyebrows, colour only as light). An !important beats an inline style or one of website.css's own. */

/* The page, selection, caret, scrollbar and focus */
html.website-light:not(.website-black) body {
    background-color: #FFFFFF;
    color: var(--lt-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* Text a view writes with an inline colour (submit_enquiry's htmx "Request Received" and the bot-check line's
   Refresh, views.py) uses var(--enquiry-done-ink, white): ink on Light; Black and the older five keep white. */
html.website-light:not(.website-black) {
    --enquiry-done-ink: var(--lt-ink);
}
/* A cool studio light at the top of every page (the home hero paints its own). A pseudo-element, so the body
   background stays a flat colour that contrast tools can read. */
html.website-light:not(.website-black) body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 560px;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(60% 520px at 50% -180px, #FAFAFB 0%, rgba(250, 250, 251, 0) 100%);
}
html.website-light:not(.website-black) input,
html.website-light:not(.website-black) textarea {
    caret-color: #0A0A0F;
}
html.website-light:not(.website-black),
html.website-light:not(.website-black) * {
    scrollbar-color: rgba(10, 10, 15, 0.22) transparent;
}
html.website-light:not(.website-black) ::-webkit-scrollbar { width: 10px; height: 10px; }
html.website-light:not(.website-black) ::-webkit-scrollbar-track { background: transparent; }
html.website-light:not(.website-black) ::-webkit-scrollbar-thumb {
    background: rgba(10, 10, 15, 0.18);
    border-radius: 10px;
    border: 3px solid transparent;
    background-clip: padding-box;
}
html.website-light:not(.website-black) ::-webkit-scrollbar-thumb:hover { background-color: rgba(10, 10, 15, 0.32); }
html.website-light:not(.website-black) input:focus-visible,
html.website-light:not(.website-black) textarea:focus-visible,
html.website-light:not(.website-black) select:focus-visible {
    outline: none;                            /* fields draw their own ring (below) */
}
html.website-light:not(.website-black) input[type="checkbox"],
html.website-light:not(.website-black) input[type="radio"] {
    accent-color: #0A0A0F;
}

/* Typography & layout */
html.website-light:not(.website-black) h1 { color: var(--lt-ink); }
html.website-light:not(.website-black) .section-title { color: var(--lt-ink); }

/* Animations & keyframes: light-only pulses (spread rings, no blur) */
@keyframes lt-approve-pulse {
    0%, 100% { box-shadow: 0 1px 2px rgba(10, 10, 15, 0.12), 0 0 0 0 rgba(4, 120, 87, 0.30); }
    50%      { box-shadow: 0 1px 2px rgba(10, 10, 15, 0.12), 0 0 0 6px rgba(4, 120, 87, 0); }
}
@keyframes lt-node-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(10, 10, 15, 0.28); }
    50%      { box-shadow: 0 0 0 5px rgba(10, 10, 15, 0); }
}

/* Nav */
html.website-light:not(.website-black) .nav.scrolled {
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    box-shadow: 0 1px 0 rgba(10, 10, 15, 0.08), 0 6px 20px -10px rgba(10, 10, 15, 0.14);
}
html.website-light:not(.website-black) .logo { color: var(--lt-ink); }
html.website-light:not(.website-black) .nav-links a.text-link { color: var(--lt-body); }
html.website-light:not(.website-black) .nav-links a.text-link:hover { color: var(--lt-ink); }
html.website-light:not(.website-black) .client-hub-btn {
    background: #FFFFFF;
    border: 1px solid var(--lt-ink-12);
    color: var(--lt-ink);
    box-shadow: var(--lt-shadow-xs);
}
html.website-light:not(.website-black) .client-hub-btn:hover {
    background: #FAFAFB;
    border-color: var(--lt-ink-20);
}
html.website-light:not(.website-black) .lang-btn {
    background: #FFFFFF;
    border: 1px solid var(--lt-ink-12);
    box-shadow: var(--lt-shadow-xs);
}
html.website-light:not(.website-black) .lang-btn:hover,
html.website-light:not(.website-black) .lang-btn.active {
    background: #FAFAFB;
    border-color: var(--lt-ink-20);
}
html.website-light:not(.website-black) .lang-flag,
html.website-light:not(.website-black) .footer-lang-flag {
    box-shadow: 0 0 0 1px rgba(10, 10, 15, 0.14);   /* flags with white fields keep an edge */
}
html.website-light:not(.website-black) .lang-arrow { fill: var(--lt-secondary); }
html.website-light:not(.website-black) .lang-menu {
    background: #FFFFFF;
    border: 1px solid var(--lt-line-strong);
    box-shadow: var(--lt-shadow-lg);
    scrollbar-color: rgba(10, 10, 15, 0.2) transparent;
}
html.website-light:not(.website-black) .lang-option { color: var(--lt-body); }
html.website-light:not(.website-black) .lang-option:hover { background: #F4F4F6; color: var(--lt-ink); }
html.website-light:not(.website-black) .lang-option.active {
    background: var(--lt-success-fill);
    color: var(--lt-success-ink);
}
html.website-light:not(.website-black) .theme-btn {
    background: #FFFFFF;
    border: 1px solid var(--lt-ink-12);
    color: var(--lt-secondary);
    box-shadow: var(--lt-shadow-xs);
}
html.website-light:not(.website-black) .theme-btn:hover,
html.website-light:not(.website-black) .theme-btn.active {
    background: #FAFAFB;
    border-color: var(--lt-ink-20);
    color: var(--lt-ink);
}
html.website-light:not(.website-black) .theme-hint { color: var(--lt-body); }
html.website-light:not(.website-black) .theme-menu {
    background: #FFFFFF;
    border: 1px solid var(--lt-line-strong);
    box-shadow: var(--lt-shadow-lg);
}
html.website-light:not(.website-black) .theme-option { color: var(--lt-body); }
html.website-light:not(.website-black) .theme-option:hover { background: #F4F4F6; color: var(--lt-ink); }
html.website-light:not(.website-black) .theme-option.active,
html.website-light:not(.website-black) .theme-option-row.active {
    background: var(--lt-accent-50);
}
html.website-light:not(.website-black) .theme-option-row.active .theme-option,
html.website-light:not(.website-black) .theme-option.active {
    color: var(--lt-accent-ink);
    font-weight: 600;
}
/* Black and Light, which have no vote button, sit above the vote's header: it then reads as the title of the vote rows */
html.website-light:not(.website-black) .theme-option-row:is([data-theme="website-black"], [data-theme="website-light"]) { order: -1; }
html.website-light:not(.website-black) .theme-option-row[data-theme="website-light"] { margin-bottom: 6px; }
html.website-light:not(.website-black) .theme-vote-header {
    color: var(--lt-muted);
    border-bottom-color: var(--lt-line);
    box-shadow: inset 0 1px 0 var(--lt-line);   /* separates Black and Light from the vote rows */
}
html.website-light:not(.website-black) .theme-vote-btn { color: var(--lt-muted); }
html.website-light:not(.website-black) .theme-vote-btn:hover { background: #F4F4F6; color: var(--lt-accent-ink); }
html.website-light:not(.website-black) .theme-vote-btn.voted { color: var(--lt-accent-ink); }
html.website-light:not(.website-black) .theme-vote-btn.voted .vote-thumb { fill: var(--lt-accent); }
/* CMYK yellow ring: nav.html, footer.html */
html.website-light:not(.website-black) circle[stroke="#fff200"] { stroke: #CA8A04; }
html.website-light:not(.website-black) .nav-toggle span { background: var(--lt-ink); }

/* The hero: no WebGL mesh on Light */
html.website-light:not(.website-black) #mesh-gradient-canvas,
html.website-light:not(.website-black) #mesh-gradient-canvas-bottom {
    display: none;
}
/* Review pills in the hero (hero_v1_test.html) */
html.website-light:not(.website-black) .hero-review-pills .footer-review-pill {
    background: #FFFFFF;
    border: 1px solid var(--lt-line-strong);
    box-shadow: var(--lt-shadow-xs);
}
html.website-light:not(.website-black) .hero-review-pills .footer-review-pill:hover {
    border-color: var(--lt-ink-20);
    box-shadow: var(--lt-shadow-sm);
}
html.website-light:not(.website-black) .hero-review-pills .footer-review-count { color: var(--lt-secondary); }

/* The portal explorer */
html.website-light:not(.website-black) .channel-bar { background: #F4F4F6; border-color: var(--lt-line); }
html.website-light:not(.website-black) .channel-option input:checked + span {
    background: #FFFFFF;
    box-shadow: var(--lt-shadow-sm);
}
html.website-light:not(.website-black) .inventory-item {
    background: #FFFFFF;
    border-color: var(--lt-line-strong);
    box-shadow: var(--lt-shadow-xs);
}
html.website-light:not(.website-black) .inventory-item:hover {
    background: #FFFFFF;
    border-color: var(--lt-accent-line);
    box-shadow: var(--lt-shadow-md);
}
html.website-light:not(.website-black) .inventory-search { background: #FFFFFF; border-color: var(--lt-field); }
/* Redacted teaser values in the explorer cards stay blurred, but print at the full meta colour: at 70% they read as
   dirt rather than as redacted figures */
html.website-light:not(.website-black) span[style*="filter: blur"][style*="opacity: 0.7"] {
    opacity: 1 !important;                   /* !important: inline opacity on the unified_explorer cards */
}

/* The unified explorer */
html.website-light:not(.website-black) #unified-explorer-root {
    --brand-primary-soft: var(--lt-accent-50);
}
html.website-light:not(.website-black) #unified-explorer-root .crm-search-input { background: #FFFFFF; border-color: var(--lt-field); }
html.website-light:not(.website-black) #unified-explorer-root .crm-select { background: #FFFFFF; border-color: var(--lt-field); }
html.website-light:not(.website-black) #unified-explorer-root .channel-bar {
    background: #F4F4F6 !important;          /* unified_explorer/filters.html inline rgba(0,0,0,.3) */
}
html.website-light:not(.website-black) #unified-explorer-root .crm-card[style*="grid-column: span 2"] {
    background: var(--lt-accent-50) !important;   /* unified_explorer/gate_card.html inline blue 10% */
    border-color: rgba(10, 10, 15, 0.35) !important;   /* same: gate_card.html */
}
html.website-light:not(.website-black) #unified-explorer-root .crm-card[style*="grid-column: span 2"] > div:first-child {
    color: var(--lt-ink) !important;         /* unified_explorer/gate_card.html inline white "+950" */
}
html.website-light:not(.website-black) #unified-explorer-root .crm-card[style*="grid-column: span 2"] > div:nth-child(2) {
    color: var(--lt-accent-ink) !important;  /* unified_explorer/gate_card.html brand-primary as small text */
}

/* Testimonials (testimonials.html, review_card.html) */
html.website-light:not(.website-black) #testimonials {
    background: var(--lt-band) !important;   /* !important: inline style, testimonials.html */
    box-shadow: inset 0 1px 0 var(--lt-line), inset 0 -1px 0 var(--lt-line);
}
html.website-light:not(.website-black) .review-card {
    box-shadow: var(--lt-shadow-sm);
}
html.website-light:not(.website-black) .review-header > div:first-child {
    background: var(--lt-well) !important;   /* !important: inline style, reviews/review_card.html */
    color: var(--lt-secondary) !important;   /* same: reviews/review_card.html */
    box-shadow: inset 0 0 0 1px var(--lt-line);
}
html.website-light:not(.website-black) .review-short button,
html.website-light:not(.website-black) .review-content button {
    color: var(--lt-accent-ink) !important;  /* !important: inline style, review_card.html */
}
html.website-light:not(.website-black) #review-load-more-container button {
    background: #FFFFFF !important;          /* !important: inline style + onmouseout handler, testimonials.html */
    border-color: var(--lt-ink-12) !important;   /* same: testimonials.html */
    box-shadow: var(--lt-shadow-xs);
}
html.website-light:not(.website-black) #review-load-more-container button:hover {
    background: #FAFAFB !important;          /* beats the onmouseover inline style, testimonials.html */
    border-color: var(--lt-ink-20) !important;   /* same: testimonials.html */
}
/* Gold stars and the half star on light */
html.website-light:not(.website-black) svg[fill="#fbbf24"] { fill: var(--lt-gold); }
html.website-light:not(.website-black) stop[stop-color="#d4d4d4"] { stop-color: #D0D5DD; }

/* Footer: light, on the band, hairline top */
html.website-light:not(.website-black) .site-footer {
    background: #FAFAFB;
    box-shadow: inset 0 1px 0 var(--lt-line);
    color: var(--lt-body);
}
html.website-light:not(.website-black) .site-footer .logo { color: var(--lt-ink); }
html.website-light:not(.website-black) .footer-col h4 { color: var(--lt-ink); }
html.website-light:not(.website-black) .footer-blurb { color: var(--lt-secondary); }
html.website-light:not(.website-black) .footer-link { color: var(--lt-body); }
html.website-light:not(.website-black) .footer-link:hover { color: var(--lt-accent-ink); }
html.website-light:not(.website-black) .footer-social { color: var(--lt-secondary); }
html.website-light:not(.website-black) .footer-social:hover { color: var(--lt-ink); }
html.website-light:not(.website-black) .footer-input {
    background: #FFFFFF;
    border: 1px solid var(--lt-field);
    color: var(--lt-ink);
    box-shadow: var(--lt-shadow-xs);
}
html.website-light:not(.website-black) .footer-input::placeholder { color: #6B6E79; }
html.website-light:not(.website-black) .footer-input:focus {
    border-color: var(--lt-accent);
    box-shadow: var(--lt-focus);
}
html.website-light:not(.website-black) .footer-subscribe-btn {
    background: #0A0A0F;
    color: #FFFFFF;
    box-shadow: 0 1px 2px rgba(10, 10, 15, 0.18);
}
html.website-light:not(.website-black) .footer-subscribe-btn:hover { background: #1F2633; opacity: 1; }
html.website-light:not(.website-black) .footer-subscribe-btn[style*="16, 185, 129"] { background: var(--lt-success-ink) !important; }   /* "Subscribed!", set inline by footer.html */
html.website-light:not(.website-black) .footer-trust {
    border-top-color: var(--lt-line);
    border-bottom-color: var(--lt-line);        /* colour only: phones drop this line */
}
html.website-light:not(.website-black) .footer-trust-divider { background: var(--lt-ink-12); }
html.website-light:not(.website-black) .footer-trust-label { color: var(--lt-muted); }
html.website-light:not(.website-black) .footer-review-pill {
    background: #FFFFFF;
    border: 1px solid var(--lt-line-strong);
    box-shadow: var(--lt-shadow-xs);
}
html.website-light:not(.website-black) .footer-review-pill:hover {
    background: #FFFFFF;
    border-color: var(--lt-ink-20);
    box-shadow: var(--lt-shadow-sm);
}
html.website-light:not(.website-black) .footer-review-count { color: var(--lt-secondary); }
html.website-light:not(.website-black) .footer-review-pill span[style*="#00b67a"] {
    color: #007A52 !important;               /* !important: inline style, footer.html */
}
html.website-light:not(.website-black) .footer-pay-icon {
    opacity: 1;
    box-shadow: 0 0 0 1px rgba(10, 10, 15, 0.12);
}
/* one divider, not two: the trust row above already closes with a hairline; colour only, so nothing moves */
html.website-light:not(.website-black) .footer-prefs { border-top-color: transparent; }
html.website-light:not(.website-black) .footer-prefs-label { color: var(--lt-muted); }
html.website-light:not(.website-black) .footer-prefs-divider { background: var(--lt-ink-12); }
html.website-light:not(.website-black) .footer-lang-btn {
    background: #FFFFFF;
    border: 1px solid var(--lt-ink-12);
    color: var(--lt-body);
    box-shadow: var(--lt-shadow-xs);
}
html.website-light:not(.website-black) .footer-lang-btn:hover {
    background: #FFFFFF;
    border-color: var(--lt-ink-20);
    color: var(--lt-ink);
}
html.website-light:not(.website-black) .footer-lang-menu {
    background: #FFFFFF;
    border: 1px solid var(--lt-line-strong);
    box-shadow: var(--lt-shadow-lg);
}
html.website-light:not(.website-black) .footer-lang-option { color: var(--lt-body); }
html.website-light:not(.website-black) .footer-lang-option:hover { background: #F4F4F6; color: var(--lt-ink); }
html.website-light:not(.website-black) .footer-lang-option.active { color: var(--lt-accent-ink); }
html.website-light:not(.website-black) .footer-legal { color: var(--lt-muted); }
html.website-light:not(.website-black) .footer-legal-name { color: var(--lt-body); }
html.website-light:not(.website-black) .footer-legal a,
html.website-light:not(.website-black) .footer-legal-link {
    color: var(--lt-body);
    text-decoration: underline;
    text-decoration-color: var(--lt-ink-20);
    text-underline-offset: 2px;
}

/* The site modal and the enquiry forms: ink scrim, white card */
html.website-light:not(.website-black) .modal-overlay,
html.website-light:not(.website-black) #job-modal-overlay {
    background: rgba(15, 23, 42, 0.35);       /* cool ink at 35% and a 10px blur, not a flat grey slab */
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
}
html.website-light:not(.website-black) .modal-content,
html.website-light:not(.website-black) #job-modal-content {
    background: #FFFFFF;
    border: 1px solid var(--lt-line);
    box-shadow: var(--lt-shadow-xl);
}
html.website-light:not(.website-black) #modal-header h3 {
    color: var(--lt-ink) !important;         /* !important: inline style and the JS string in modal.html */
}
html.website-light:not(.website-black) #modal-success > div:first-child {
    background: var(--lt-success-fill) !important;   /* !important: inline style, modal.html */
    color: var(--lt-success-ink) !important;   /* same: modal.html */
    box-shadow: inset 0 0 0 1px var(--lt-success-line);
}
html.website-light:not(.website-black) #modal-success h4 {
    color: var(--lt-ink) !important;         /* !important: inline style, modal.html */
}
/* modal.html inline #ef4444 */
html.website-light:not(.website-black) #modal-phone-error { color: var(--lt-error-ink) !important; }
/* the phone check's tick or cross and the field's edge, written inline by modal.html's script */
html.website-light:not(.website-black) #modal-phone-icon span[style*="#10b981"] { color: var(--lt-success-ink) !important; }
html.website-light:not(.website-black) #modal-phone-icon span[style*="#ef4444"] { color: var(--lt-error-ink) !important; }
html.website-light:not(.website-black) #modal-phone[style*="16, 185, 129"] { border-color: var(--lt-success-ink) !important; }
html.website-light:not(.website-black) #modal-phone[style*="239, 68, 68"] { border-color: var(--lt-error) !important; }
html.website-light:not(.website-black) .modal-close { color: var(--lt-muted); }
html.website-light:not(.website-black) .modal-close:hover { color: var(--lt-ink); }
html.website-light:not(.website-black) .modal-form input,
html.website-light:not(.website-black) .modal-form textarea,
html.website-light:not(.website-black) .job-input {
    background: #FFFFFF;
    border: 1px solid var(--lt-field);
    color: var(--lt-ink);
    box-shadow: var(--lt-shadow-xs);
}
html.website-light:not(.website-black) .modal-form input::placeholder,
html.website-light:not(.website-black) .modal-form textarea::placeholder,
html.website-light:not(.website-black) .job-input::placeholder,
html.website-light:not(.website-black) .contact-input::placeholder,
html.website-light:not(.website-black) .contact-textarea::placeholder { color: #6B6E79; }
html.website-light:not(.website-black) .modal-form input:hover,
html.website-light:not(.website-black) .modal-form textarea:hover,
html.website-light:not(.website-black) .job-input:hover { border-color: var(--lt-field-hover); }
html.website-light:not(.website-black) .modal-form input:focus,
html.website-light:not(.website-black) .modal-form textarea:focus,
html.website-light:not(.website-black) .job-input:focus {
    border-color: var(--lt-accent);
    background: #FFFFFF;
    box-shadow: var(--lt-focus);
}
html.website-light:not(.website-black) .modal-submit {
    background: var(--lt-accent);
    box-shadow: 0 1px 2px rgba(10, 10, 15, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
html.website-light:not(.website-black) .modal-submit:hover { background: var(--lt-accent-hover); }
html.website-light:not(.website-black) .file-upload-wrapper { border-color: var(--lt-field); }
html.website-light:not(.website-black) .file-label { color: var(--lt-body); }
html.website-light:not(.website-black) input[type="file"] { color: var(--lt-muted); }
/* Job modal */
html.website-light:not(.website-black) .cv-upload-box { border-color: var(--lt-field); background: #FAFAFB; }
html.website-light:not(.website-black) .cv-upload-box:hover { border-color: var(--lt-accent); background: var(--lt-accent-50); }
html.website-light:not(.website-black) .job-submit-btn { background: var(--lt-accent); }
html.website-light:not(.website-black) .job-submit-btn:hover { background: var(--lt-accent-hover); }
/* careers/job_application_modal.html inline white */
html.website-light:not(.website-black) #job-modal-title { color: var(--lt-ink) !important; }
/* job_application_modal.html inline white */
html.website-light:not(.website-black) #job-modal-success h4 { color: var(--lt-ink) !important; }
html.website-light:not(.website-black) #job-modal-success > div:first-child {
    background: var(--lt-success-fill) !important;   /* job_application_modal.html inline green tint */
    color: var(--lt-success-ink) !important;   /* same: job_application_modal.html */
    box-shadow: inset 0 0 0 1px var(--lt-success-line);
}
/* Contact form success, inline HTML returned by views.py (submit_enquiry) */
/* views.py inline white */
html.website-light:not(.website-black) #contact-form-main h3[style*="color: white"] { color: var(--lt-ink) !important; }
html.website-light:not(.website-black) #contact-form-main div[style*="16, 185, 129"] {
    background: var(--lt-success-fill) !important;   /* views.py inline green tint */
    color: var(--lt-success-ink) !important;   /* same: views.py */
    border-color: var(--lt-success-line) !important;   /* same: views.py */
}

/* Contact page */
/* The form and the info column sit on the band (full-bleed, hairline top), so the page reads white header, then the
   working area: a raised white form card on #FAFAFB. Border-image outsets on the grid (not a fade-in element): 44px
   up into the header's margin, 88px down through the container's padding to the footer. Nothing moves. */
html.website-light:not(.website-black) .contact-grid {
    border-image: linear-gradient(to bottom,
        rgba(10, 10, 15, 0.08) 0, rgba(10, 10, 15, 0.08) 1px,
        #FAFAFB 1px, #FAFAFB 100%) fill 0 / 0 / 44px 100vmax 5rem;
}
html.website-light:not(.website-black) .contact-card {
    background: #FFFFFF;
    border: 1px solid var(--lt-line-strong);
    box-shadow: var(--lt-shadow-lg);
}
html.website-light:not(.website-black) .contact-input,
html.website-light:not(.website-black) .contact-select,
html.website-light:not(.website-black) .contact-textarea {
    background: #FFFFFF;
    border: 1px solid var(--lt-field);
    color: var(--lt-ink);
    box-shadow: var(--lt-shadow-xs);
}
html.website-light:not(.website-black) .contact-input:hover,
html.website-light:not(.website-black) .contact-select:hover,
html.website-light:not(.website-black) .contact-textarea:hover { border-color: var(--lt-field-hover); }
html.website-light:not(.website-black) .contact-input:focus,
html.website-light:not(.website-black) .contact-select:focus,
html.website-light:not(.website-black) .contact-textarea:focus {
    border-color: var(--lt-accent);
    background: #FFFFFF;
    box-shadow: var(--lt-focus);
}
html.website-light:not(.website-black) #contact-submit-btn {
    box-shadow: 0 1px 2px rgba(10, 10, 15, 0.12);
}
html.website-light:not(.website-black) #contact-submit-btn:disabled {
    background: #EAECF0 !important;          /* !important: inline style, contact.html (faded blue -> neutral disabled) */
    color: var(--lt-secondary) !important;   /* same: contact.html */
    opacity: 1 !important;   /* same: contact.html */
    box-shadow: none;
}
html.website-light:not(.website-black) .dept-card {
    background: #FFFFFF;
    border: 1px solid var(--lt-line-strong);
    box-shadow: var(--lt-shadow-xs);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
html.website-light:not(.website-black) .dept-card:hover {
    background: #FFFFFF;
    border-color: var(--lt-ink-20);
    box-shadow: var(--lt-shadow-md);
}
html.website-light:not(.website-black) .dept-title { color: var(--lt-ink); }
html.website-light:not(.website-black) .dept-title svg { color: var(--lt-muted); }
html.website-light:not(.website-black) .dept-card:hover .dept-title svg { color: var(--lt-accent-ink); }
html.website-light:not(.website-black) .dept-desc { color: var(--lt-muted); }
html.website-light:not(.website-black) .dept-email { color: var(--lt-accent-ink); }
html.website-light:not(.website-black) .map-wrapper {
    border: 1px solid var(--lt-line-strong);
    box-shadow: var(--lt-shadow-md);
}
html.website-light:not(.website-black) .dark-map-iframe {
    filter: grayscale(0.35) contrast(0.96) brightness(1.02);
}
html.website-light:not(.website-black) .map-wrapper > div {
    display: none;                            /* the darkening overlay, contact.html */
}

/* Careers and legal */
/* The open roles sit on the band, like the contact form and the team grid: 40px up into the header's 4rem margin and
   100px down through the section's padding to the footer (border-image outsets on the grid, nothing moves) */
html.website-light:not(.website-black) .role-grid {
    border-image: linear-gradient(to bottom,
        rgba(10, 10, 15, 0.08) 0, rgba(10, 10, 15, 0.08) 1px,
        #FAFAFB 1px, #FAFAFB 100%) fill 0 / 0 / 40px 100vmax 100px;
}
/* Job cards (careers/job_card.html) are styled inline for dark; every !important below beats one of those inline
   styles */
html.website-light:not(.website-black) .role-card {
    background: #FFFFFF !important;          /* job_card.html inline #0f1623 */
    border-color: var(--lt-line-strong) !important;   /* same: job_card.html */
    box-shadow: var(--lt-shadow-sm) !important;   /* job_card.html inline shadow */
}
html.website-light:not(.website-black) .role-card > div:first-child > div:first-child {
    background: var(--lt-accent-50) !important;   /* job_card.html icon tile, white 5% */
    border-color: rgba(10, 10, 15, 0.16) !important;   /* same: job_card.html */
}
html.website-light:not(.website-black) .role-card h3 { color: var(--lt-ink) !important; }   /* job_card.html inline #ffffff */
html.website-light:not(.website-black) .role-card h3 + div > span:first-child {
    background: #F4F4F6 !important;          /* job_card.html job type badge */
    color: var(--lt-body) !important;   /* same: job_card.html */
}
html.website-light:not(.website-black) .role-card span[style*="239, 68, 68"] {
    background: var(--lt-error-fill) !important;   /* job_card.html urgent badge */
    color: var(--lt-error-ink) !important;   /* same: job_card.html */
}
/* job_card.html #cbd5e1 */
html.website-light:not(.website-black) .role-card > div[style*="flex-direction: column"] { color: var(--lt-body) !important; }
html.website-light:not(.website-black) .role-card > p { color: var(--lt-body) !important; }   /* job_card.html #e2e8f0 */
html.website-light:not(.website-black) .role-card span[style*="border-radius: 20px"] {
    color: var(--lt-secondary) !important;   /* job_card.html skills #94a3b8 */
    background: #FAFAFB !important;   /* same: job_card.html */
}
html.website-light:not(.website-black) .role-card a[target="_blank"] {
    color: var(--lt-ink) !important;         /* job_card.html inline white */
    border-color: var(--lt-ink-12) !important;   /* same: job_card.html */
}
html.website-light:not(.website-black) .role-card a[target="_blank"]:hover {
    background: #FAFAFB !important;          /* beats the onmouseover inline style, job_card.html */
}
html.website-light:not(.website-black) .role-card button[onclick^="applyForJob"] {
    background: var(--lt-accent) !important;   /* job_card.html inline green: the primary fill, like every primary action */
}
html.website-light:not(.website-black) .role-card button[onclick^="applyForJob"]:hover {
    background: var(--lt-accent-hover) !important;   /* beats the onmouseover inline style, job_card.html */
}
html.website-light:not(.website-black) .legal-container a[style*="var(--accent)"] {
    color: var(--lt-accent-ink) !important;  /* !important: inline links, terms.html, privacy.html, modern_slavery.html */
}
html.website-light:not(.website-black) .last-updated { border-bottom: 1px solid var(--lt-line); }

/* FAQ accordion */
html.website-light:not(.website-black) .faq-section {
    background: var(--lt-band);
    box-shadow: inset 0 1px 0 var(--lt-line), inset 0 -1px 0 var(--lt-line);
}
html.website-light:not(.website-black) .faq-item { border-bottom-color: var(--lt-line-strong); }
html.website-light:not(.website-black) .faq-question { color: var(--lt-ink); }
html.website-light:not(.website-black) .faq-question:hover { color: var(--lt-accent-ink); }
html.website-light:not(.website-black) .faq-question::after {
    border-right-color: var(--lt-secondary);
    border-bottom-color: var(--lt-secondary);
}
html.website-light:not(.website-black) .faq-answer { color: var(--lt-body); }
html.website-light:not(.website-black) .faq-pill:hover {
    background: #FFFFFF;
    border-color: var(--lt-ink-20);
    color: var(--lt-ink);
}
html.website-light:not(.website-black) .faq-pill.active {
    background: #0A0A0F;
    border: 1px solid #0A0A0F;
    color: #FFFFFF;
    box-shadow: 0 1px 2px rgba(10, 10, 15, 0.18), 0 2px 6px -2px rgba(10, 10, 15, 0.20);
}

/* The closing band: the one deliberate inverse moment, an ink card inset in the page. The section itself is ink;
   ::before cuts the rounded card out of a white frame (a huge white spread shadow, clipped by the section's overflow)
   and carries the card's layered shadow. */
html.website-light:not(.website-black) .bookend-cta {
    background-color: #0A0A0F;
    background-image: radial-gradient(60% 80% at 50% 0%, rgba(10, 10, 15, 0.06) 0%, rgba(10, 10, 15, 0) 100%);
    --text-primary: #FFFFFF;
    --text-secondary: #B9BBC1;
    --text-muted: #93959B;
}
html.website-light:not(.website-black) .bookend-cta::before,
html.website-light:not(.website-black) .bookend-cta::after {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
    top: clamp(16px, 3.2vw, 48px);
    bottom: clamp(16px, 3.2vw, 48px);
    left: max(16px, calc((100% - var(--max-width)) / 2));
    right: max(16px, calc((100% - var(--max-width)) / 2));
    border-radius: 28px;
}
html.website-light:not(.website-black) .bookend-cta::before {
    background: transparent;
    box-shadow:
        0 0 0 1px rgba(10, 10, 15, 0.10),
        0 32px 64px -24px rgba(10, 10, 15, 0.35),
        0 12px 24px -12px rgba(10, 10, 15, 0.16),
        0 0 0 200vmax #FFFFFF;
}
html.website-light:not(.website-black) .bookend-cta::after {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);   /* one top highlight edge, no grid, no glow */
}
html.website-light:not(.website-black) .bookend-headline { color: #FFFFFF; }

/* Buttons */
html.website-light:not(.website-black) .cta-primary:hover {
    background: var(--lt-accent-hover);
    box-shadow:
        0 4px 12px -2px rgba(10, 10, 15, 0.16),
        0 2px 4px -2px rgba(10, 10, 15, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* Bento grids, services and channels index */
html.website-light:not(.website-black) .bento-card {
    background: #FFFFFF;
    border: 1px solid var(--lt-line-strong);
    box-shadow: var(--lt-shadow-sm);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
html.website-light:not(.website-black) .bento-card:hover,
html.website-light:not(.website-black) a.bento-card:hover {
    border-color: var(--lt-ink-20);
    box-shadow: var(--lt-shadow-lg);
}
/* No per-channel pastel washes on light (they read as smudges): every card is the same clean white key */
html.website-light:not(.website-black) .bento-card[data-accent] { background: #FFFFFF; }
/* The ghost watermark becomes a crisp 40px icon tile, top right: the channel's one mark of identity. Absolutely
   positioned, so resizing it moves nothing. */
html.website-light:not(.website-black) .bento-watermark {
    width: 40px;
    height: 40px;
    padding: 9px;
    border-radius: 10px;
    background: var(--lt-accent-50);
    color: var(--lt-accent-ink);
    box-shadow: inset 0 0 0 1px rgba(10, 10, 15, 0.14);
    opacity: 1;
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
html.website-light:not(.website-black) a.bento-card:hover .bento-watermark {
    background: var(--lt-accent);
    color: #FFFFFF;
    box-shadow: none;
}
/* The bento sits on the band (full-bleed, hairline-edged), so the index pages have rhythm: white hero, band, white
   close. Painted with border-image outsets on the grid wrapper (not a fade-in element), so nothing moves. */
html.website-light:not(.website-black) .sp-router-grid {
    border-image: linear-gradient(to bottom,
        rgba(10, 10, 15, 0.08) 0, rgba(10, 10, 15, 0.08) 1px,
        #FAFAFB 1px, #FAFAFB calc(100% - 1px),
        rgba(10, 10, 15, 0.08) calc(100% - 1px)) fill 0 / 0 / 40px 100vmax 0;
}
html.website-light:not(.website-black) .bento-title { color: var(--lt-ink); }
html.website-light:not(.website-black) .bento-sizzle { color: var(--lt-body); }
html.website-light:not(.website-black) .bento-detail { color: var(--lt-muted); }
@media (max-width: 768px) {
    /* Stacked cards put the title at the top, where the tile would sit on it (as the dark watermark does today) */
    html.website-light:not(.website-black) .bento-watermark { display: none; }
    html.website-light:not(.website-black) .bento-card:hover { border-color: var(--lt-line-strong); box-shadow: var(--lt-shadow-sm); }
}

/* Value props */
html.website-light:not(.website-black) #value-props {
    background: var(--lt-band);
    box-shadow: inset 0 -1px 0 var(--lt-line);   /* the hero above draws the top hairline */
}
html.website-light:not(.website-black) .vp2-card:hover {
    border-color: var(--lt-ink-20);
    box-shadow: var(--lt-shadow-lg);
}
html.website-light:not(.website-black) .vp2-visual {
    background-color: #FAFAFB;
    background-image: radial-gradient(rgba(10, 10, 15, 0.07) 1px, transparent 1px);
    background-size: 14px 14px;
    background-position: 7px 7px;
    border-bottom: 1px solid var(--lt-line);
}
html.website-light:not(.website-black) .vp2-title { color: var(--lt-ink); }
/* Card 2: fan */
html.website-light:not(.website-black) .vp2-fan-stack {
    background: #FFFFFF;
    border: 1px solid rgba(10, 10, 15, 0.25);
    color: var(--lt-accent);
    box-shadow: var(--lt-shadow-md), 0 0 0 5px rgba(10, 10, 15, 0.06);
}
html.website-light:not(.website-black) .vp2-fan-icon {
    background: #FFFFFF;
    border: 1px solid var(--lt-line-strong);
    color: var(--lt-secondary);
    box-shadow: var(--lt-shadow-xs);
}
html.website-light:not(.website-black) .vp2-fan-icon:hover {
    border-color: rgba(10, 10, 15, 0.45);
    background: var(--lt-accent-50);
    color: var(--lt-accent-ink);
    box-shadow: var(--lt-shadow-sm);
}
html.website-light:not(.website-black) .vp2-fan-icon::after { color: var(--lt-secondary); }
/* Card 3: brickwork, crisp white keys with deep green labels */
html.website-light:not(.website-black) .vp2-brick {
    background: linear-gradient(180deg, #FFFFFF 0%, #F1FAF6 100%);
    border: 1px solid rgba(4, 120, 87, 0.16);
    box-shadow: 0 1px 2px rgba(10, 10, 15, 0.06), inset 0 -2px 0 rgba(4, 120, 87, 0.14);
}
html.website-light:not(.website-black) .vp2-brick span { color: var(--lt-success-ink); }
html.website-light:not(.website-black) .vp2-card:hover .vp2-brick {
    border-color: var(--lt-success-line);
    box-shadow: 0 1px 3px rgba(10, 10, 15, 0.08), inset 0 -2px 0 rgba(4, 120, 87, 0.18);
}
html.website-light:not(.website-black) .vp2-brick:hover {
    background: var(--lt-success-fill);
    border-color: rgba(4, 120, 87, 0.45);
    box-shadow: 0 1px 2px rgba(10, 10, 15, 0.06), inset 0 -2px 0 rgba(4, 120, 87, 0.25);
}
/* Card 4: candelabra */
html.website-light:not(.website-black) .vp2-req {
    background: var(--lt-accent);
    box-shadow: var(--lt-shadow-sm);
}
html.website-light:not(.website-black) .vp2-am-avi {
    background: var(--lt-accent-50);
    border-color: var(--lt-accent);
    color: var(--lt-accent);
}
html.website-light:not(.website-black) .vp2-am-reply {
    background: #FFFFFF;
    border: 1px solid var(--lt-line-strong);
    color: var(--lt-ink);
    box-shadow: var(--lt-shadow-sm);
}
html.website-light:not(.website-black) .vp2-net-path { stroke: rgba(10, 10, 15, 0.18); }
html.website-light:not(.website-black) .vp2-net-lit { stroke: var(--lt-accent); filter: none; }
html.website-light:not(.website-black) .vp2-expert {
    background: #FFFFFF;
    border-color: rgba(10, 10, 15, 0.16);
    color: var(--lt-secondary);
    box-shadow: var(--lt-shadow-xs);
}
html.website-light:not(.website-black) .vp2-expert.vp2-expert-lit {
    border-color: var(--lt-accent);
    background: var(--lt-accent-50);
    color: var(--lt-accent-ink);
    animation-name: lt-node-pulse;
}
html.website-light:not(.website-black) .vp2-expert-name { color: var(--lt-accent-ink); }
/* Card 5: client hub */
html.website-light:not(.website-black) .vp2-hub-device {
    background: #FFFFFF;
    border: 1px solid var(--lt-line-strong);
    box-shadow: var(--lt-shadow-md);
}
html.website-light:not(.website-black) .vp2-card:hover .vp2-hub-device { border-color: var(--lt-ink-20); }
html.website-light:not(.website-black) .vp2-hub-in { background: #F4F4F6; color: var(--lt-body); }
html.website-light:not(.website-black) .vp2-hub-row { color: var(--lt-body); border-bottom-color: var(--lt-line); }
html.website-light:not(.website-black) .vp2-hub-total { color: var(--lt-ink); border-top-color: var(--lt-line-strong); }
html.website-light:not(.website-black) .vp2-hub-inv-num { color: var(--lt-muted); }
html.website-light:not(.website-black) .vp2-hub-inv-amount { color: var(--lt-ink); }
html.website-light:not(.website-black) .vp2-hub-inv-badge { background: var(--lt-success-fill); color: var(--lt-success-ink); }
@media (max-width: 768px) {
    html.website-light:not(.website-black) .vp2-hub-device {
        border-color: var(--lt-line-strong) !important;   /* beats website.css !important */
    }
}

/* Chapter heading */
html.website-light:not(.website-black) .ch-title { color: var(--lt-ink); }
html.website-light:not(.website-black) .ch-sub { color: var(--lt-body); }

/* Scrollytelling: tinted cards on white, white product windows inside */
/* Story numerals 01-04 on an ink pill. The pill is a pseudo-element behind the text (the badge becomes its own
   stacking context), so the badge's box and the text do not move. */
html.website-light:not(.website-black) .st-step-badge {
    color: #FF4D1F;
    position: relative;
    z-index: 0;
    /* The ink is also set on the badge itself, clipped to the glyphs: nothing extra shows, but contrast tools, which
       cannot see the ::before pill, then measure the numerals against ink, which is what is on screen */
    background-color: #0A0A0F;
    -webkit-background-clip: text;
            background-clip: text;
}
html.website-light:not(.website-black) .st-step-badge::before {
    content: '';
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: -9px;
    width: calc(2ch + 0.3em + 16px);          /* the badge is a stretched flex item: size the pill to "01", not the box */
    z-index: -1;
    border-radius: 999px;
    background: #0A0A0F;
}
html.website-light:not(.website-black) .st-headline { color: var(--lt-ink); }
html.website-light:not(.website-black) .st-pill {
    background: #FFFFFF;
    border: 1px solid var(--lt-line-strong);
    color: var(--lt-body);
}
html.website-light:not(.website-black) .st-mock {
    background: #FFFFFF;
    border: 1px solid var(--lt-line-strong);
}
html.website-light:not(.website-black) .st-card.st-in-view .st-mock {
    border-color: var(--lt-line-strong);
    box-shadow:
        0 0 0 1px rgba(10, 10, 15, 0.02),
        0 24px 48px -16px rgba(10, 10, 15, 0.20),
        0 8px 16px -8px rgba(10, 10, 15, 0.08);
}
html.website-light:not(.website-black) .st-mock-chrome {
    background: #FAFAFB;
    border-bottom: 1px solid var(--lt-line);
}
html.website-light:not(.website-black) .st-mock-dots span:nth-child(1) { background: #FF5F57; opacity: 1; box-shadow: inset 0 0 0 0.5px rgba(10, 10, 15, 0.12); }
html.website-light:not(.website-black) .st-mock-dots span:nth-child(2) { background: #FEBC2E; opacity: 1; box-shadow: inset 0 0 0 0.5px rgba(10, 10, 15, 0.12); }
html.website-light:not(.website-black) .st-mock-dots span:nth-child(3) { background: #28C840; opacity: 1; box-shadow: inset 0 0 0 0.5px rgba(10, 10, 15, 0.12); }
html.website-light:not(.website-black) .st-mock-title { color: var(--lt-muted); }
html.website-light:not(.website-black) .st-arrow {
    background: #FFFFFF;
    border: 1px solid var(--lt-ink-12);
    color: var(--lt-secondary);
    box-shadow: var(--lt-shadow-xs);
}
html.website-light:not(.website-black) .st-arrow:hover {
    background: #FFFFFF;
    border-color: var(--lt-ink-20);
    color: var(--lt-ink);
    box-shadow: var(--lt-shadow-sm);
}
html.website-light:not(.website-black) .st-dot { background: rgba(10, 10, 15, 0.16); }
html.website-light:not(.website-black) .st-dot.st-dot-active {
    background: var(--lt-accent);
    box-shadow: 0 0 0 3px rgba(10, 10, 15, 0.14);
}
/* Panel 1: quote */
html.website-light:not(.website-black) .st-quote-row { border-bottom: 1px solid var(--lt-line); }
html.website-light:not(.website-black) .st-quote-item { color: var(--lt-ink); }
html.website-light:not(.website-black) .st-quote-sub { color: var(--lt-muted); }
html.website-light:not(.website-black) .st-quote-price { color: var(--lt-ink); }
html.website-light:not(.website-black) .st-quote-total { color: var(--lt-ink); }
html.website-light:not(.website-black) .st-quote-monthly { color: var(--lt-accent-ink); }
/* Panel 2: account manager */
html.website-light:not(.website-black) .st-am-card {
    background: #FFFFFF;
    border: 1px solid var(--lt-line-strong);
    box-shadow: var(--lt-shadow-sm);
}
html.website-light:not(.website-black) .st-am-avatar { background: var(--lt-accent-50); color: var(--lt-accent); box-shadow: inset 0 0 0 1px rgba(10, 10, 15, 0.16); }
html.website-light:not(.website-black) .st-am-info strong { color: var(--lt-ink); }
html.website-light:not(.website-black) .st-am-info span { color: var(--lt-muted); }
html.website-light:not(.website-black) .st-am-cta { background: var(--lt-accent); box-shadow: 0 1px 2px rgba(10, 10, 15, 0.12); }
html.website-light:not(.website-black) .st-am-specialist {
    background: #FAFAFB;
    border: 1px solid var(--lt-line);
}
html.website-light:not(.website-black) .st-am-specialist span { color: var(--lt-body); }
/* Specialist hues set inline (scrollytelling.html): deepened for light */
/* !important beats the inline custom property, scrollytelling.html */
html.website-light:not(.website-black) .st-am-specialist[style*="#ec4899"] { --spec-color: var(--lt-spec-1) !important; }
/* scrollytelling.html */
html.website-light:not(.website-black) .st-am-specialist[style*="#8b5cf6"] { --spec-color: var(--lt-spec-2) !important; }
/* scrollytelling.html */
html.website-light:not(.website-black) .st-am-specialist[style*="#3b82f6"] { --spec-color: var(--lt-spec-3) !important; }
/* scrollytelling.html */
html.website-light:not(.website-black) .st-am-specialist[style*="#10b981"] { --spec-color: var(--lt-spec-4) !important; }
html.website-light:not(.website-black) .st-specialist-icon {
    background: color-mix(in srgb, var(--spec-color, var(--accent)) 10%, #FFFFFF);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--spec-color, var(--accent)) 18%, transparent);
}
html.website-light:not(.website-black) .st-am-connector line { stroke: rgba(10, 10, 15, 0.20); }
/* Panel 3: production */
html.website-light:not(.website-black) .st-dropzone {
    border-color: rgba(10, 10, 15, 0.18);
    color: var(--lt-muted);
    background: #FBFBFC;
}
html.website-light:not(.website-black) .st-dropzone svg { opacity: 0.8; }
html.website-light:not(.website-black) .st-upload-bar { background: #EEF0F3; }
html.website-light:not(.website-black) .st-chat-bubble { color: var(--lt-body); }
html.website-light:not(.website-black) .st-chat-them { background: #FAFAFB; border: 1px solid var(--lt-line); }
html.website-light:not(.website-black) .st-chat-you { background: var(--lt-accent-50); color: var(--lt-ink); box-shadow: inset 0 0 0 1px rgba(10, 10, 15, 0.12); }
html.website-light:not(.website-black) .st-chat-name { color: var(--lt-accent-ink); }
html.website-light:not(.website-black) .st-output-item {
    background: #FFFFFF;
    border: 1px solid var(--lt-line-strong);
    color: var(--lt-body);
    box-shadow: var(--lt-shadow-xs);
}
html.website-light:not(.website-black) .st-output-item svg { opacity: 0.7; }
html.website-light:not(.website-black) .st-output-check { color: var(--lt-success-ink); }
/* Panel 4: approvals */
html.website-light:not(.website-black) .st-proof-image { background: #FAFAFB; border: 1px solid var(--lt-line); }
html.website-light:not(.website-black) .st-proof-line-thick { background: rgba(10, 10, 15, 0.18); }
html.website-light:not(.website-black) .st-proof-line { background: rgba(10, 10, 15, 0.09); }
html.website-light:not(.website-black) .st-proof-block { background: var(--lt-accent-100); }
html.website-light:not(.website-black) .st-revision-bubble {
    background: #FFFFFF;
    border: 1px solid rgba(10, 10, 15, 0.35);
    color: var(--lt-body);
    box-shadow: var(--lt-shadow-lg);
}
html.website-light:not(.website-black) .st-revision-author { color: var(--lt-accent-ink); }
html.website-light:not(.website-black) .st-pipeline-stage {
    background: #FFFFFF;
    border: 1px solid var(--lt-line-strong);
    color: var(--lt-muted);
}
html.website-light:not(.website-black) .st-pipeline-connector { background: rgba(10, 10, 15, 0.14); }
html.website-light:not(.website-black) .st-stage-done {
    background: var(--lt-accent-50);
    border-color: rgba(10, 10, 15, 0.35);
    color: var(--lt-accent-ink);
}
html.website-light:not(.website-black) .st-connector-done { background: var(--lt-accent); }
html.website-light:not(.website-black) .st-stage-active {
    background: var(--lt-success-fill);
    border-color: rgba(4, 120, 87, 0.4);
    color: var(--lt-success-ink);
}
html.website-light:not(.website-black) .st-connector-active { background: linear-gradient(90deg, var(--lt-accent), var(--lt-success-ink)); }
html.website-light:not(.website-black) .st-approve-btn {
    background: var(--lt-success-ink);
    box-shadow: 0 1px 2px rgba(10, 10, 15, 0.12);
}
html.website-light:not(.website-black) .st-card.st-in-view .st-approve-btn { animation-name: lt-approve-pulse; }
@media (max-width: 768px) {
    html.website-light:not(.website-black) .st-swipe-hint { color: var(--lt-muted); }
    /* The 44px touch targets keep their size; what shows is a 10px dot at their centre, not a 44px disc (the active
       one is scaled 1.3 by website.css, like the desktop dot) */
    html.website-light:not(.website-black) .st-dot {
        background: radial-gradient(circle, rgba(10, 10, 15, 0.22) 0 4.5px, rgba(10, 10, 15, 0) 5px);
        box-shadow: none;
    }
    html.website-light:not(.website-black) .st-dot.st-dot-active {
        background: radial-gradient(circle, #0A0A0F 0 4.5px, rgba(10, 10, 15, 0) 5px);
        box-shadow: none;
    }
}

/* Featured content carousel */
html.website-light:not(.website-black) .fc-card {
    background: #FFFFFF;
    border: 1px solid var(--lt-line-strong);
    box-shadow: var(--lt-shadow-sm);
}
html.website-light:not(.website-black) .fc-card:hover {
    border-color: var(--lt-ink-20);
    box-shadow: var(--lt-shadow-lg);
}
html.website-light:not(.website-black) .fc-card-image { background: #F4F4F6; }
html.website-light:not(.website-black) .fc-card-placeholder { background: linear-gradient(135deg, #F4F4F6 0%, #ECECF0 100%); }
html.website-light:not(.website-black) .fc-category-badge {
    background: var(--lt-accent-50);
    color: var(--lt-accent-ink);
    box-shadow: inset 0 0 0 1px rgba(10, 10, 15, 0.16);
}
html.website-light:not(.website-black) .fc-card-title { color: var(--lt-ink); }
html.website-light:not(.website-black) .fc-card-excerpt { color: var(--lt-body); }
html.website-light:not(.website-black) .fc-card-meta { color: var(--lt-muted); }
html.website-light:not(.website-black) .fc-read-link { color: var(--lt-accent-ink); }
html.website-light:not(.website-black) .fc-card-cta {
    background: #FAFAFB;
    border: 1px dashed rgba(10, 10, 15, 0.20);
    box-shadow: none;
}
html.website-light:not(.website-black) .fc-card-cta:hover { border-color: rgba(10, 10, 15, 0.45); box-shadow: none; }
html.website-light:not(.website-black) .fc-cta-icon { color: var(--lt-accent); opacity: 1; }
html.website-light:not(.website-black) .fc-cta-title { color: var(--lt-ink); }
html.website-light:not(.website-black) .fc-cta-sub { color: var(--lt-body); }
html.website-light:not(.website-black) .fc-cta-label { color: var(--lt-muted); }
html.website-light:not(.website-black) .fc-cta-btn {
    background: var(--lt-accent);
    color: #FFFFFF;                           /* was black on the old accent */
    box-shadow: 0 1px 2px rgba(10, 10, 15, 0.12);
}
html.website-light:not(.website-black) .fc-cta-btn:hover {
    background: var(--lt-accent-hover);
    box-shadow: var(--lt-shadow-md);
}
@media (max-width: 768px) {
    html.website-light:not(.website-black) .fc-swipe-hint { color: var(--lt-muted); opacity: 1; }
}

/* Nav mega-menu */
html.website-light:not(.website-black) .nav-mega-menu {
    background: #FFFFFF;
    border: 1px solid var(--lt-line-strong);
    box-shadow: var(--lt-shadow-lg);
}
html.website-light:not(.website-black) .nav-mega-item { color: var(--lt-body); }
html.website-light:not(.website-black) .nav-mega-item:hover { color: var(--lt-ink); background: #F4F4F6; }
html.website-light:not(.website-black) .nav-mega-all { color: var(--lt-accent-ink); border-top-color: var(--lt-line); }
html.website-light:not(.website-black) .nav-mega-all:hover { color: var(--lt-accent-hover); }
@media (max-width: 768px) {
    html.website-light:not(.website-black) .nav-mega-menu { background: transparent; border: none; box-shadow: none; }
}

/* Knowledge base / content platform */
html.website-light:not(.website-black) .kb-sidebar {
    border-right: 1px solid var(--lt-line);
    scrollbar-color: rgba(10, 10, 15, 0.16) transparent;
}
html.website-light:not(.website-black) .kb-sidebar::-webkit-scrollbar-thumb { background: rgba(10, 10, 15, 0.14); }
html.website-light:not(.website-black) .kb-sidebar-toggle { color: var(--lt-ink); }
/* colour only: <=1100px removes it */
html.website-light:not(.website-black) .kb-toc-inner { border-left-color: var(--lt-line); }
html.website-light:not(.website-black) .kb-toc-inner h4 { color: var(--lt-muted); }
html.website-light:not(.website-black) .kb-toc-link { color: var(--lt-body); }
html.website-light:not(.website-black) .kb-toc-link:hover { color: var(--lt-accent-ink); }
html.website-light:not(.website-black) .kb-tree-depth-0 + .kb-tree-depth-0 { border-top: 1px solid var(--lt-line); }
html.website-light:not(.website-black) .kb-tree-label { color: var(--lt-body); }
html.website-light:not(.website-black) .kb-tree-depth-0 > .kb-tree-node-row > .kb-tree-label { color: var(--lt-ink); }
html.website-light:not(.website-black) .kb-tree-label:hover { background: rgba(10, 10, 15, 0.04); color: var(--lt-ink); }
html.website-light:not(.website-black) .kb-tree-label.active,
html.website-light:not(.website-black) .kb-tree-depth-0 > .kb-tree-node-row > .kb-tree-label.active { color: var(--lt-accent-ink); }
html.website-light:not(.website-black) .kb-tree-label.on-path { color: var(--lt-ink); }
html.website-light:not(.website-black) .kb-tree-toggle { color: var(--lt-muted); }
html.website-light:not(.website-black) .kb-tree-toggle:hover { background: rgba(10, 10, 15, 0.04); color: var(--lt-ink); }
html.website-light:not(.website-black) .kb-tree-branch { border-left: 1px solid var(--lt-line); }
html.website-light:not(.website-black) .kb-tree-page { color: var(--lt-muted); }
html.website-light:not(.website-black) .kb-tree-page:hover { color: var(--lt-ink); background: rgba(10, 10, 15, 0.04); }
html.website-light:not(.website-black) .kb-tree-page.active {
    color: var(--lt-accent-ink);
    background: var(--lt-accent-50);
}
html.website-light:not(.website-black) .kb-breadcrumbs a { color: var(--lt-secondary); }
html.website-light:not(.website-black) .kb-breadcrumbs a:hover { color: var(--lt-accent-ink); }
html.website-light:not(.website-black) .kb-breadcrumb-current { color: var(--lt-ink); }
html.website-light:not(.website-black) .kb-breadcrumb-sep { color: #98A2B3; }
html.website-light:not(.website-black) .kb-index-header h1 { color: var(--lt-ink); }
html.website-light:not(.website-black) .kb-index-header p { color: var(--lt-body); }
html.website-light:not(.website-black) .kb-search-form {
    background: #FFFFFF;
    border: 1px solid var(--lt-field);
    box-shadow: var(--lt-shadow-xs);
}
html.website-light:not(.website-black) .kb-search-form:focus-within {
    border-color: var(--lt-accent);
    box-shadow: var(--lt-focus);
}
html.website-light:not(.website-black) .kb-search-input { color: var(--lt-ink); }
html.website-light:not(.website-black) .kb-search-input::placeholder { color: #6B6E79; }
html.website-light:not(.website-black) .kb-search-btn { color: var(--lt-secondary); }
html.website-light:not(.website-black) .kb-search-btn:hover { color: var(--lt-accent-ink); }
html.website-light:not(.website-black) .kb-letter { color: var(--lt-body); }
html.website-light:not(.website-black) .kb-letter:hover { color: var(--lt-ink); background: rgba(10, 10, 15, 0.05); }
html.website-light:not(.website-black) .kb-letter.active {
    color: #FFFFFF;
    border-color: #0A0A0F;
    background: #0A0A0F;
}
html.website-light:not(.website-black) .kb-chip {
    color: var(--lt-body);
    background: #FFFFFF;
    border: 1px solid var(--lt-ink-12);
    box-shadow: var(--lt-shadow-xs);
}
html.website-light:not(.website-black) .kb-chip:hover { color: var(--lt-ink); border-color: var(--lt-ink-20); }
html.website-light:not(.website-black) .kb-chip.active {
    color: #FFFFFF;
    border-color: #0A0A0F;
    background: #0A0A0F;
}
/* Badges: 700-level ink on 50-level tints */
html.website-light:not(.website-black) .badge-glossary { background: var(--lt-accent-50); color: var(--lt-accent-ink); box-shadow: inset 0 0 0 1px rgba(10, 10, 15, 0.14); }
html.website-light:not(.website-black) .badge-guide { background: #ECFDF5; color: #047857; box-shadow: inset 0 0 0 1px rgba(4, 120, 87, 0.14); }
html.website-light:not(.website-black) .badge-service { background: #FFFBEB; color: #B45309; box-shadow: inset 0 0 0 1px rgba(180, 83, 9, 0.16); }
html.website-light:not(.website-black) .badge-blog { background: #FDF2F8; color: #BE185D; box-shadow: inset 0 0 0 1px rgba(190, 24, 93, 0.14); }
html.website-light:not(.website-black) .badge-media { background: #ECFEFF; color: #0E7490; box-shadow: inset 0 0 0 1px rgba(14, 116, 144, 0.16); }
html.website-light:not(.website-black) .badge-category,
html.website-light:not(.website-black) .badge-default { background: #F4F4F6; color: #475569; box-shadow: inset 0 0 0 1px rgba(10, 10, 15, 0.08); }
html.website-light:not(.website-black) .badge-beginner { background: #ECFDF5; color: #047857; box-shadow: inset 0 0 0 1px rgba(4, 120, 87, 0.14); }
html.website-light:not(.website-black) .badge-intermediate { background: #FFFBEB; color: #B45309; box-shadow: inset 0 0 0 1px rgba(180, 83, 9, 0.16); }
html.website-light:not(.website-black) .badge-advanced { background: #FEF2F2; color: #B91C1C; box-shadow: inset 0 0 0 1px rgba(185, 28, 28, 0.14); }
html.website-light:not(.website-black) .kb-glossary-item { border-bottom: 1px solid var(--lt-line); }
html.website-light:not(.website-black) .kb-glossary-item:hover { background: #FAFAFB; }
html.website-light:not(.website-black) .kb-glossary-term h3 { color: var(--lt-ink); }
html.website-light:not(.website-black) .kb-glossary-excerpt { color: var(--lt-body); }
html.website-light:not(.website-black) .kb-content-card {
    background: #FFFFFF;
    border: 1px solid var(--lt-line-strong);
    box-shadow: var(--lt-shadow-xs);
}
html.website-light:not(.website-black) .kb-content-card:hover {
    border-color: var(--lt-ink-20);
    box-shadow: var(--lt-shadow-md);
}
html.website-light:not(.website-black) .kb-card-category,
html.website-light:not(.website-black) .kb-card-readtime,
html.website-light:not(.website-black) .kb-readtime { color: var(--lt-muted); }
html.website-light:not(.website-black) .kb-card-title { color: var(--lt-ink); }
html.website-light:not(.website-black) .kb-card-excerpt { color: var(--lt-body); }
html.website-light:not(.website-black) .kb-service-card { background: #FFFFFF; border-color: var(--lt-line-strong); box-shadow: var(--lt-shadow-xs); }
html.website-light:not(.website-black) .kb-service-child-pill { background: var(--lt-accent-50); color: var(--lt-accent-ink); }
html.website-light:not(.website-black) .kb-article-header h1 { color: var(--lt-ink); }
html.website-light:not(.website-black) .kb-article-lead { color: var(--lt-body); }
html.website-light:not(.website-black) .kb-blog-byline { color: var(--lt-secondary); }
html.website-light:not(.website-black) .kb-article-body { color: #232A38; }   /* long-form: a softer ink */
html.website-light:not(.website-black) .kb-article-body h2 {
    color: var(--lt-ink);
    border-top: 1px solid var(--lt-line);
}
html.website-light:not(.website-black) .kb-article-body h3 { color: var(--lt-ink); }
html.website-light:not(.website-black) .kb-article-body a {
    color: var(--lt-accent-ink);
    text-decoration-color: rgba(29, 78, 216, 0.35);
    text-underline-offset: 2px;
}
html.website-light:not(.website-black) .kb-article-body a:hover { text-decoration-color: currentColor; }
html.website-light:not(.website-black) .kb-article-body code {
    background: #F4F4F6;
    color: #0A0A0F;
    box-shadow: inset 0 0 0 1px var(--lt-line);
}
html.website-light:not(.website-black) .kb-article-body pre {
    background: #FAFAFB;
    box-shadow: inset 0 0 0 1px var(--lt-line);
}
html.website-light:not(.website-black) .kb-article-body pre code { box-shadow: none; background: transparent; }
html.website-light:not(.website-black) .kb-article-body blockquote {
    border-left-color: var(--lt-accent);
    color: var(--lt-body);
    background: #F7F9FF;
}
html.website-light:not(.website-black) .kb-article-body th,
html.website-light:not(.website-black) .kb-article-body td { border: 1px solid var(--lt-line-strong); }
html.website-light:not(.website-black) .kb-article-body th { background: #FAFAFB; color: var(--lt-ink); }
html.website-light:not(.website-black) .kb-aliases {
    background: #FAFAFB;
    box-shadow: inset 0 0 0 1px var(--lt-line);
    color: var(--lt-body);
}
html.website-light:not(.website-black) .kb-aliases strong { color: var(--lt-ink); }
html.website-light:not(.website-black) .kb-alias-pill {
    background: #FFFFFF;
    color: var(--lt-accent-ink);
    box-shadow: inset 0 0 0 1px rgba(10, 10, 15, 0.22);
}
html.website-light:not(.website-black) .glossary-link {
    color: var(--lt-accent-ink);
    border-bottom: 1px dotted rgba(29, 78, 216, 0.6);
}
html.website-light:not(.website-black) .kb-faq-item {
    border: 1px solid var(--lt-line-strong);
    background: #FFFFFF;
    box-shadow: var(--lt-shadow-xs);
}
html.website-light:not(.website-black) .kb-faq-item summary { color: var(--lt-ink); }
html.website-light:not(.website-black) .kb-faq-item summary::before { color: var(--lt-secondary); }
html.website-light:not(.website-black) .kb-faq-answer { color: var(--lt-body); }
html.website-light:not(.website-black) .kb-feature-card,
html.website-light:not(.website-black) .kb-service-child-card,
html.website-light:not(.website-black) .kb-subcategory-card,
html.website-light:not(.website-black) .kb-media-card,
html.website-light:not(.website-black) .kb-related-card {
    background: #FFFFFF;
    border: 1px solid var(--lt-line-strong);
    box-shadow: var(--lt-shadow-xs);
}
html.website-light:not(.website-black) .kb-subcategory-card:hover,
html.website-light:not(.website-black) .kb-media-card:hover,
html.website-light:not(.website-black) .kb-related-card:hover,
html.website-light:not(.website-black) .kb-service-child-card:hover {
    border-color: var(--lt-ink-20);
    box-shadow: var(--lt-shadow-md);
}
/* white-stencil logos become ink stencils */
html.website-light:not(.website-black) .kb-media-logo img { filter: brightness(0); opacity: 0.82; }
html.website-light:not(.website-black) .kb-media-stats { background: #FAFAFB; border: 1px solid var(--lt-line); }
html.website-light:not(.website-black) .kb-stat-label { color: var(--lt-muted); }
html.website-light:not(.website-black) .kb-search-result { border-bottom: 1px solid var(--lt-line); }
html.website-light:not(.website-black) .kb-search-result-path { color: var(--lt-muted); }
html.website-light:not(.website-black) .kb-cta-banner {
    background:
        radial-gradient(60% 120% at 50% 0%, rgba(10, 10, 15, 0.08) 0%, rgba(10, 10, 15, 0) 100%),
        #FFFFFF;
    border: 1px solid rgba(10, 10, 15, 0.18);
    box-shadow: var(--lt-shadow-sm);
}
html.website-light:not(.website-black) .kb-cta-banner h3 { color: var(--lt-ink); }
html.website-light:not(.website-black) .kb-cta-banner p { color: var(--lt-body); }
html.website-light:not(.website-black) .kb-cta-btn {
    background: var(--lt-accent);
    color: #FFFFFF;
    box-shadow: 0 1px 2px rgba(10, 10, 15, 0.12);
}
html.website-light:not(.website-black) .kb-cta-btn:hover { background: var(--lt-accent-hover); filter: none; }
/* "Learn How to Apply This": a tinted #FAFAFB panel behind the guide cards, so the white cards have a surface and the
   reading page gets one change of tone. A pseudo-element 24px outside the section (the column has room), behind its
   content; the divider above becomes the panel's own edge (colour only). Full-bleed on phones. */
html.website-light:not(.website-black) .kb-funnel-section {
    border-top: 1px solid transparent;
    position: relative;
    isolation: isolate;
}
html.website-light:not(.website-black) .kb-funnel-section::before {
    content: '';
    position: absolute;
    inset: 8px -24px -24px;                   /* starts 8px inside the section: even padding round the heading */
    z-index: -1;
    pointer-events: none;
    border-radius: 20px;
    background: #FAFAFB;
    box-shadow: inset 0 0 0 1px var(--lt-line);
}
@media (max-width: 600px) {
    html.website-light:not(.website-black) .kb-funnel-section::before {
        left: -5vw;
        right: -5vw;
        border-radius: 0;
        box-shadow: inset 0 1px 0 var(--lt-line), inset 0 -1px 0 var(--lt-line);
    }
}
html.website-light:not(.website-black) .kb-page-btn { color: var(--lt-body); border-color: var(--lt-ink-12); background: #FFFFFF; }
html.website-light:not(.website-black) .kb-page-btn:hover { color: var(--lt-ink); border-color: var(--lt-ink-20); }
html.website-light:not(.website-black) .kb-page-current { color: #FFFFFF; background: var(--lt-accent); border-color: var(--lt-accent); }
html.website-light:not(.website-black) .kb-related { border-top: 1px solid var(--lt-line); }
html.website-light:not(.website-black) .kb-related-group h4 { color: var(--lt-muted); }
html.website-light:not(.website-black) .kb-related-title { color: var(--lt-ink); }
html.website-light:not(.website-black) .kb-related-excerpt { color: var(--lt-body); }
html.website-light:not(.website-black) .kb-empty-state { color: var(--lt-body); }
html.website-light:not(.website-black) .kb-empty-state a { color: var(--lt-accent-ink); }
html.website-light:not(.website-black) .kb-not-found h1 { color: var(--lt-ink); }
html.website-light:not(.website-black) .kb-not-found p { color: var(--lt-body); }
html.website-light:not(.website-black) .kb-cta-secondary {
    background: #FFFFFF !important;          /* beats website.css !important */
    border: 1px solid var(--lt-ink-12) !important;   /* same: website.css */
    color: var(--lt-ink) !important;   /* same: website.css */
}
html.website-light:not(.website-black) .kb-cta-secondary:hover {
    border-color: var(--lt-ink-20) !important;   /* beats website.css !important */
    color: var(--lt-accent-ink) !important;   /* beats website.css !important */
}
@media (max-width: 1100px) {
    html.website-light:not(.website-black) .kb-toc { border-bottom: 1px solid var(--lt-line); }
    html.website-light:not(.website-black) .kb-sidebar {
        background: #FFFFFF;
        border-right: 1px solid var(--lt-line);
        box-shadow: var(--lt-shadow-xl);
    }
    html.website-light:not(.website-black) .kb-sidebar-backdrop {
        background: rgba(15, 23, 42, 0.35);
        -webkit-backdrop-filter: blur(8px) saturate(120%);
        backdrop-filter: blur(8px) saturate(120%);
    }
    html.website-light:not(.website-black) .kb-sidebar-toggle {
        background: #FFFFFF;
        border: 1px solid var(--lt-ink-12);
        color: var(--lt-ink);
        box-shadow: var(--lt-shadow-sm);
    }
}

/* Service and channel landing pages, .sp-* */
/* The hero mock-up sits on a precise grid under a soft cool light */
html.website-light:not(.website-black) .sp-hero { isolation: isolate; }
html.website-light:not(.website-black) .sp-hero::before,
html.website-light:not(.website-black) .sp-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
html.website-light:not(.website-black) .sp-hero::before {
    background-image:
        linear-gradient(to right, rgba(10, 10, 15, 0.065) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(10, 10, 15, 0.065) 1px, transparent 1px);
    background-size: 56px 56px;
    background-position: center center;
    -webkit-mask-image: radial-gradient(ellipse 36% 62% at 74% 52%, #000 0%, rgba(0, 0, 0, 0.6) 45%, transparent 100%);
            mask-image: radial-gradient(ellipse 36% 62% at 74% 52%, #000 0%, rgba(0, 0, 0, 0.6) 45%, transparent 100%);
}
html.website-light:not(.website-black) .sp-hero::after {
    background: radial-gradient(34% 50% at 74% 52%, rgba(10, 10, 15, 0.07) 0%, rgba(10, 10, 15, 0) 100%);
}
@media (max-width: 768px) {
    html.website-light:not(.website-black) .sp-hero::before,
    html.website-light:not(.website-black) .sp-hero::after { display: none; }
}
/* Index heroes (services, channels): the grid fades out behind the headline */
html.website-light:not(.website-black) .sp-router-hero {
    position: relative;
    isolation: isolate;
}
html.website-light:not(.website-black) .sp-router-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(10, 10, 15, 0.055) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(10, 10, 15, 0.055) 1px, transparent 1px);
    background-size: 56px 56px;
    background-position: center top;
    -webkit-mask-image: radial-gradient(ellipse 46% 70% at 50% 40%, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 100%);
            mask-image: radial-gradient(ellipse 46% 70% at 50% 40%, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 100%);
}
html.website-light:not(.website-black) .sp-hero-sub { color: var(--lt-body); }
html.website-light:not(.website-black) .sp-relief-section { background: #FFFFFF; }
/* "How it works" and "What we handle" are both white: a hairline (inset, takes no space) separates them */
html.website-light:not(.website-black) .sp-process-section + .sp-relief-section { box-shadow: inset 0 1px 0 var(--lt-line); }
html.website-light:not(.website-black) .sp-relief-col h3 { color: var(--lt-ink); }
html.website-light:not(.website-black) .sp-relief-handles h3 svg { color: #059669; }
html.website-light:not(.website-black) .sp-relief-avoids h3 svg { color: #6B6E79; }
html.website-light:not(.website-black) .sp-relief-item {
    background: #FFFFFF;
    border: 1px solid var(--lt-line-strong);
    box-shadow: var(--lt-shadow-xs);
}
html.website-light:not(.website-black) .sp-relief-item:hover,
html.website-light:not(.website-black) .sp-relief-item.active {
    border-color: var(--lt-ink-20);
    box-shadow: var(--lt-shadow-md);
}
html.website-light:not(.website-black) .sp-relief-handles .sp-relief-item::before { color: var(--lt-success-ink); }
html.website-light:not(.website-black) .sp-relief-avoids .sp-relief-item::before { color: #98A2B3; }
html.website-light:not(.website-black) .sp-relief-item h4 { color: var(--lt-ink); }
html.website-light:not(.website-black) .sp-relief-item h4::after { border-color: var(--lt-secondary); }
html.website-light:not(.website-black) .sp-relief-item p { color: var(--lt-muted); }
html.website-light:not(.website-black) .sp-relief-avoids .sp-relief-item h4 { color: var(--lt-body); }
html.website-light:not(.website-black) .sp-relief-avoids .sp-relief-item p { color: var(--lt-muted); opacity: 1; }
html.website-light:not(.website-black) .sp-caps-section { background: var(--lt-band); }
/* Bands set inline with var(--bg-tertiary) (_base_deep_dive.html) get the same hairline edges */
html.website-light:not(.website-black) .sp-caps-section,
html.website-light:not(.website-black) section[style*="--bg-tertiary"] {
    box-shadow: inset 0 1px 0 var(--lt-line), inset 0 -1px 0 var(--lt-line);
}
html.website-light:not(.website-black) .sp-faq details {
    background: #FFFFFF;
    border: 1px solid var(--lt-line-strong);
    box-shadow: var(--lt-shadow-xs);
}
html.website-light:not(.website-black) .sp-faq details[open] {
    border-color: rgba(10, 10, 15, 0.35);
    box-shadow: var(--lt-shadow-md);
}
html.website-light:not(.website-black) .sp-faq summary { color: var(--lt-ink); }
html.website-light:not(.website-black) .sp-faq summary::after { color: var(--lt-secondary); }
html.website-light:not(.website-black) .sp-faq details[open] summary::after { color: var(--lt-accent-ink); }
html.website-light:not(.website-black) .sp-faq details > p { color: var(--lt-body); }
html.website-light:not(.website-black) .sp-close-inner p,
html.website-light:not(.website-black) .sp-final-cta-inner p { color: var(--lt-body); }
/* Closing CTAs bookend the hero: the same precise ink grid, fading out around the headline under a soft light.
   Service and channel pages (.sp-close) put it on the band after their white FAQ; the index pages (.sp-final-cta)
   follow the bento band, so theirs stays white. Pseudo-elements behind the content: nothing moves. */
html.website-light:not(.website-black) .sp-close,
html.website-light:not(.website-black) .sp-final-cta {
    position: relative;
    isolation: isolate;
}
html.website-light:not(.website-black) .sp-close {
    background: var(--lt-band);
    box-shadow: inset 0 1px 0 var(--lt-line);
}
html.website-light:not(.website-black) .sp-close::before,
html.website-light:not(.website-black) .sp-final-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(10, 10, 15, 0.065) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(10, 10, 15, 0.065) 1px, transparent 1px);
    background-size: 56px 56px;
    background-position: center center;
    -webkit-mask-image: radial-gradient(ellipse 40% 72% at 50% 50%, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 100%);
            mask-image: radial-gradient(ellipse 40% 72% at 50% 50%, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 100%);
}
html.website-light:not(.website-black) .sp-close::after,
html.website-light:not(.website-black) .sp-final-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(44% 62% at 50% 46%, rgba(10, 10, 15, 0.05) 0%, rgba(10, 10, 15, 0) 100%);
}
@media (max-width: 768px) {
    html.website-light:not(.website-black) .sp-close::before,
    html.website-light:not(.website-black) .sp-final-cta::before {
        background-size: 44px 44px;
        -webkit-mask-image: radial-gradient(ellipse 85% 60% at 50% 50%, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 100%);
                mask-image: radial-gradient(ellipse 85% 60% at 50% 50%, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 100%);
    }
}
/* Deep-dive pages (_base_deep_dive.html) */
html.website-light:not(.website-black) .sp-familiar-card {
    background: #FFFFFF;
    border: 1px solid var(--lt-line-strong);
    box-shadow: var(--lt-shadow-xs);
}
html.website-light:not(.website-black) .sp-familiar-card:hover { border-color: var(--lt-line-strong); }
html.website-light:not(.website-black) .sp-familiar-card h4 { color: var(--lt-ink); }
html.website-light:not(.website-black) .sp-familiar-card p { color: var(--lt-body); }
/* "How it works" markers: flame numerals on ink discs */
html.website-light:not(.website-black) .sp-step .sp-step-num,
html.website-light:not(.website-black) .sp-how-step .sp-how-num,
html.website-light:not(.website-black) .sp-how-step .sp-step-num {
    background: #0A0A0F;
    color: #FF4D1F;
    box-shadow: 0 0 0 4px #FFFFFF, 0 0 0 5px rgba(10, 10, 15, 0.08), var(--lt-shadow-sm);
}
html.website-light:not(.website-black) .sp-step h4,
html.website-light:not(.website-black) .sp-how-step h4 { color: var(--lt-ink); }
html.website-light:not(.website-black) .sp-step p,
html.website-light:not(.website-black) .sp-how-step p { color: var(--lt-body); }
html.website-light:not(.website-black) .sp-cap-card {
    background: #FFFFFF;
    border: 1px solid var(--lt-line-strong);
    box-shadow: var(--lt-shadow-xs);
}
html.website-light:not(.website-black) .sp-cap-card:hover,
html.website-light:not(.website-black) .sp-cap-card.active {
    border-color: var(--lt-ink-20);
    box-shadow: var(--lt-shadow-md);
}
html.website-light:not(.website-black) .sp-cap-card h4 { color: var(--lt-ink); }
html.website-light:not(.website-black) .sp-cap-card h4::after { border-color: var(--lt-secondary); }
html.website-light:not(.website-black) .sp-cap-card p { color: var(--lt-body); }
html.website-light:not(.website-black) .sp-cap-details li { color: var(--lt-muted); }
html.website-light:not(.website-black) .sp-cap-details li svg { color: var(--lt-accent); opacity: 1; }
/* Process pages (_base_landing_page.html) */
html.website-light:not(.website-black) .sp-headache-inner p { color: var(--lt-body); }
html.website-light:not(.website-black) .sp-timeline-track { background: #ECECF0; }
html.website-light:not(.website-black) .sp-timeline-step .sp-step-num {
    background: #FFFFFF;
    border-color: #D0D5DD;
    color: var(--lt-muted);
}
html.website-light:not(.website-black) .sp-timeline-step.active .sp-step-num {
    background: #0A0A0F;
    border-color: #0A0A0F;
    color: #FF4D1F;                           /* the reached step: flame on ink, like the other step markers */
    box-shadow: 0 0 0 5px rgba(10, 10, 15, 0.07);
}
/* not-yet-reached steps stay dimmed but legible */
html.website-light:not(.website-black) .sp-timeline-step h4 { opacity: 0.6; }
html.website-light:not(.website-black) .sp-timeline-step p { opacity: 0.75; }
html.website-light:not(.website-black) .sp-timeline-step.active h4,
html.website-light:not(.website-black) .sp-timeline-step.active p { opacity: 1; }
html.website-light:not(.website-black) .sp-cap-grid-item h4 { color: var(--lt-ink); }
html.website-light:not(.website-black) .sp-cap-grid-item p { color: var(--lt-body); }
/* Spotlight pages (_base_spotlight.html) */
html.website-light:not(.website-black) .sp-hero-sub--spotlight { color: var(--lt-accent-ink); }
html.website-light:not(.website-black) .sp-benefit { border-left-color: var(--lt-accent); }
html.website-light:not(.website-black) .sp-benefit h4 { color: var(--lt-ink); }
html.website-light:not(.website-black) .sp-benefit p { color: var(--lt-body); }
html.website-light:not(.website-black) .sp-how-strip {
    background: var(--lt-band);
    border-top: 1px solid var(--lt-line);
    border-bottom: 1px solid var(--lt-line);
}
html.website-light:not(.website-black) .sp-accordion-item { border-bottom: 1px solid var(--lt-line-strong); }
html.website-light:not(.website-black) .sp-accordion-item summary { color: var(--lt-ink); }
html.website-light:not(.website-black) .sp-accordion-item summary::after { color: var(--lt-secondary); }
html.website-light:not(.website-black) .sp-accordion-item[open] summary::after { color: var(--lt-accent-ink); }
html.website-light:not(.website-black) .sp-accordion-item p { color: var(--lt-body); }
@media (max-width: 768px) {
    html.website-light:not(.website-black) .sp-timeline-step .sp-step-num { background: #0A0A0F; border-color: #0A0A0F; color: #FF4D1F; }
    html.website-light:not(.website-black) .sp-timeline-step h4,
    html.website-light:not(.website-black) .sp-timeline-step p { opacity: 1; }
}

/* Hero animation mock-ups, .ha-* */
html.website-light:not(.website-black) .ha-mock {
    background: #FFFFFF;
    border: 1px solid var(--lt-line-strong);
}
html.website-light:not(.website-black) .ha-active .ha-mock {
    border-color: var(--lt-line-strong);
    box-shadow:
        0 0 0 6px rgba(10, 10, 15, 0.04),
        0 24px 48px -16px rgba(10, 10, 15, 0.20),
        0 8px 16px -8px rgba(10, 10, 15, 0.08);
}
html.website-light:not(.website-black) .ha-chrome {
    background: #FAFAFB;
    border-bottom: 1px solid var(--lt-line);
}
html.website-light:not(.website-black) .ha-title { color: var(--lt-muted); }
html.website-light:not(.website-black) .ha-data-row { border-bottom-color: var(--lt-line); }
html.website-light:not(.website-black) .ha-label { color: var(--lt-body); }
html.website-light:not(.website-black) .ha-value { color: var(--lt-ink); }
html.website-light:not(.website-black) .ha-value[style*="#10b981"],
html.website-light:not(.website-black) .ha-value [style*="#10b981"] {
    color: var(--lt-success-ink) !important; /* !important: inline style, services/performance-marketing.html, seo-aeo-search.html, web-technology.html */
}
html.website-light:not(.website-black) .ha-badge--green { background: #ECFDF5; color: #047857; box-shadow: inset 0 0 0 1px rgba(4, 120, 87, 0.16); }
html.website-light:not(.website-black) .ha-badge--amber { background: #FFFBEB; color: #B45309; box-shadow: inset 0 0 0 1px rgba(180, 83, 9, 0.18); }
html.website-light:not(.website-black) .ha-badge--blue { background: var(--lt-accent-50); color: var(--lt-accent-ink); box-shadow: inset 0 0 0 1px rgba(10, 10, 15, 0.16); }
html.website-light:not(.website-black) .ha-progress { background: #EEF0F3; }
html.website-light:not(.website-black) .ha-section-label { color: var(--lt-muted); }
html.website-light:not(.website-black) .ha-doc-line { background: rgba(10, 10, 15, 0.10); }
html.website-light:not(.website-black) .ha-pip-stage {
    background: #FFFFFF;
    border: 1px solid var(--lt-line-strong);
    color: var(--lt-muted);
}
html.website-light:not(.website-black) .ha-pip-conn { background: rgba(10, 10, 15, 0.14); }
html.website-light:not(.website-black) .ha-pip-done {
    background: var(--lt-accent-50);
    border-color: rgba(10, 10, 15, 0.35);
    color: var(--lt-accent-ink);
}
html.website-light:not(.website-black) .ha-pip-active {
    background: var(--lt-success-fill);
    border-color: rgba(4, 120, 87, 0.4);
    color: var(--lt-success-ink);
}
html.website-light:not(.website-black) .ha-post-img { background: linear-gradient(135deg, #F4F4F6, #E0F2FE); box-shadow: inset 0 0 0 1px var(--lt-line); }
html.website-light:not(.website-black) .ha-post-caption { color: var(--lt-muted); }
html.website-light:not(.website-black) .ha-pub-headline-block { background: rgba(10, 10, 15, 0.18); }
html.website-light:not(.website-black) .ha-pub-img-block { background: var(--lt-accent-100); }
html.website-light:not(.website-black) .ha-map-area { background: #FAFAFB; border-color: var(--lt-line); }
html.website-light:not(.website-black) .ha-cinema-screen { background: #EEF0F3; }
html.website-light:not(.website-black) .ha-screen-glow { background: linear-gradient(135deg, rgba(10, 10, 15, 0.12), rgba(14, 165, 233, 0.08)); }
@media (max-width: 768px) {
    html.website-light:not(.website-black) .ha-active .ha-mock { box-shadow: var(--lt-shadow-lg); }
}

/* Phones */
@media (max-width: 768px) {
    html.website-light:not(.website-black) .nav.scrolled {
        background: #FFFFFF !important;       /* beats website.css !important */
        box-shadow: 0 1px 0 rgba(10, 10, 15, 0.08), 0 6px 16px -10px rgba(10, 10, 15, 0.18);
    }
    /* phones: the ink card runs edge to edge, so the 5% gutter stays the text's breathing room */
    html.website-light:not(.website-black) .bookend-cta::before,
    html.website-light:not(.website-black) .bookend-cta::after {
        top: 0; bottom: 0; left: 0; right: 0;
        border-radius: 0;
    }
    /* beats website.css !important */
    html.website-light:not(.website-black) .vp2-hub-device { border-color: var(--lt-line-strong) !important; }
}
@media (max-width: 900px) {
    /* The full-screen phone menu is opaque white: the page behind ghosted through the glass as grey and yellow
       smudges */
    html.website-light:not(.website-black) .mobile-menu-overlay {
        background: #FFFFFF;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    html.website-light:not(.website-black) .mobile-menu-x {
        background: #FFFFFF;
        border: 1px solid var(--lt-ink-12);
        color: var(--lt-ink);
        box-shadow: var(--lt-shadow-xs);
    }
    html.website-light:not(.website-black) .mobile-menu-x:hover { background: #FAFAFB; }
    html.website-light:not(.website-black) .mobile-nav-group { border-bottom: 1px solid var(--lt-line-strong); }
    html.website-light:not(.website-black) .mobile-nav-trigger { color: var(--lt-ink); }
    html.website-light:not(.website-black) .mobile-nav-chevron { opacity: 0.6; }
    html.website-light:not(.website-black) .mobile-nav-children a {
        color: var(--lt-body);
        border-left: 2px solid var(--lt-line-strong);
    }
    html.website-light:not(.website-black) .mobile-nav-children a:hover,
    html.website-light:not(.website-black) .mobile-nav-children a:active {
        color: var(--lt-ink);
        border-left-color: var(--lt-accent);
    }
    html.website-light:not(.website-black) .mobile-nav-children a.mobile-nav-all { color: var(--lt-accent-ink); }
    html.website-light:not(.website-black) .mobile-nav-utils .client-hub-btn.mobile-full-width {
        background: #0A0A0F;
        border-color: #0A0A0F;
        color: #FFFFFF;
        box-shadow: 0 1px 2px rgba(10, 10, 15, 0.18);
    }
    html.website-light:not(.website-black) .mobile-theme-label { color: var(--lt-secondary); }
    html.website-light:not(.website-black) .mobile-theme-dot {
        background: #FFFFFF;
        border: 1px solid var(--lt-ink-12);
        color: var(--lt-secondary);
        box-shadow: var(--lt-shadow-xs);
    }
    html.website-light:not(.website-black) .mobile-theme-dot:hover,
    html.website-light:not(.website-black) .mobile-theme-dot:active {
        background: #FAFAFB;
        border-color: var(--lt-accent);
        color: var(--lt-ink);
    }
    html.website-light:not(.website-black) .mobile-theme-dot[data-theme="website-light"] {
        background: var(--lt-accent-50);
        border-color: rgba(10, 10, 15, 0.45);
        color: var(--lt-accent-ink);
    }
    html.website-light:not(.website-black) .mobile-menu-close-text { color: var(--lt-body); }
    html.website-light:not(.website-black) .mobile-menu-close-text:hover span { color: var(--lt-ink); }
}

/* Meet the team */
html.website-light:not(.website-black) .team-header .section-desc { color: var(--lt-body); }
html.website-light:not(.website-black) .team-empty { border-color: var(--lt-field); color: var(--lt-muted); }
html.website-light:not(.website-black) .team-empty-link { color: var(--lt-accent-ink); }
html.website-light:not(.website-black) .team-card {
    background: #FFFFFF;
    border: 1px solid var(--lt-line-strong);
    box-shadow: var(--lt-shadow-sm);
}
html.website-light:not(.website-black) .team-card:hover {
    border-color: var(--lt-ink-20);
    box-shadow: var(--lt-shadow-lg);
}
html.website-light:not(.website-black) .team-card-photo-wrap {
    background: #F4F4F6;
}
html.website-light:not(.website-black) .team-card-photo-placeholder {
    background: linear-gradient(135deg, #F4F4F6 0%, #E1E6ED 100%);
    color: #555864;
}
html.website-light:not(.website-black) .team-card-name { color: var(--lt-ink); }
html.website-light:not(.website-black) .team-card-role { color: var(--lt-accent-ink); }
html.website-light:not(.website-black) .team-card-bio { color: var(--lt-muted); }
html.website-light:not(.website-black) .team-card-action {
    border: 1px solid var(--lt-ink-12);
    color: var(--lt-ink);
    background: #FFFFFF;
    box-shadow: var(--lt-shadow-xs);
}
html.website-light:not(.website-black) .team-card-action:hover { border-color: rgba(10, 10, 15, 0.45); color: var(--lt-accent-ink); }
html.website-light:not(.website-black) .team-card-book {
    background: var(--lt-accent);
    border-color: var(--lt-accent);
    color: #FFFFFF;
    box-shadow: 0 1px 2px rgba(10, 10, 15, 0.12);
}
html.website-light:not(.website-black) .team-card-book:hover {
    background: var(--lt-accent-hover);
    color: #FFFFFF;
    opacity: 1;
}
/* The grid of people sits on the band (full-bleed, hairline-edged): white header, band, white close, light footer.
   Border-image outsets on the grid: 40px up into the header's 3rem margin, 4rem down through the grid's own margin to
   the CTA, whose divider the band's bottom hairline replaces (colour only). The band fades in with the grid. */
html.website-light:not(.website-black) .team-grid {
    border-image: linear-gradient(to bottom,
        rgba(10, 10, 15, 0.08) 0, rgba(10, 10, 15, 0.08) 1px,
        #FAFAFB 1px, #FAFAFB calc(100% - 1px),
        rgba(10, 10, 15, 0.08) calc(100% - 1px)) fill 0 / 0 / 40px 100vmax 4rem;
}
html.website-light:not(.website-black) .team-cta { border-top: 1px solid transparent; }
html.website-light:not(.website-black) .team-cta-text { color: var(--lt-body); }
html.website-light:not(.website-black) .team-cta-link { color: var(--lt-accent-ink); }

/* The cookie banner (cookie_consent.html has its own <style>; the id beats it) */
html.website-light:not(.website-black) #cookie-consent-banner {
    background: #FFFFFF;
    border-top: 1px solid var(--lt-line-strong);
    box-shadow: 0 -1px 0 rgba(10, 10, 15, 0.04), 0 -12px 32px -12px rgba(10, 10, 15, 0.22);   /* a sheet lifted off the page */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
html.website-light:not(.website-black) #cookie-consent-banner .cc-text { color: var(--lt-body); }
html.website-light:not(.website-black) #cookie-consent-banner .cc-btn-reject {
    background: #FFFFFF;
    border: 1px solid var(--lt-ink-12);
    color: var(--lt-ink);
    box-shadow: var(--lt-shadow-xs);
}
html.website-light:not(.website-black) #cookie-consent-banner .cc-btn-accept {
    background: var(--lt-accent);
    color: #FFFFFF;
    box-shadow: 0 1px 2px rgba(10, 10, 15, 0.12);
}
html.website-light:not(.website-black) #cookie-consent-banner,
html.website-light:not(.website-black) #cookie-consent-banner .cc-btn { font-family: var(--db-f-ui); }

/* The dBoss feel, over the conversion above. Type */
html.website-light:not(.website-black) body { font-family: var(--db-f-ui); background: var(--db-bg); color: var(--db-ink-2); }
/* buttons were falling back to Arial */
html.website-light:not(.website-black) button,
html.website-light:not(.website-black) input,
html.website-light:not(.website-black) select,
html.website-light:not(.website-black) textarea { font-family: inherit; }
html.website-light:not(.website-black) ::selection { background: #FFD9CC; color: var(--db-ink); }
html.website-light:not(.website-black) :focus-visible { outline: 2px solid var(--db-focus); outline-offset: 2px; }
html.website-light:not(.website-black) .bookend-cta :focus-visible { outline-color: #FFFFFF; }
html.website-light:not(.website-black) .huly-headline {
    font-family: var(--db-f-ui);
    font-weight: 600;
    letter-spacing: -0.055em;
    line-height: 1.02;
    /* A plain fill, not the site's background clipped to the letters: that clipped layer also lies under the coloured
       words, so their edges showed a thin rim of it. A fill paints only the headline's own letters. */
    background: none;
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
}
html.website-light:not(.website-black) .section-title,
html.website-light:not(.website-black) .st-headline,
html.website-light:not(.website-black) .vp2-title,
html.website-light:not(.website-black) .bookend-headline,
html.website-light:not(.website-black) .ch-title,
html.website-light:not(.website-black) h1,
html.website-light:not(.website-black) h2,
html.website-light:not(.website-black) h3 {
    font-family: var(--db-f-ui);
    letter-spacing: -0.04em;
}
html.website-light:not(.website-black) .section-title,
html.website-light:not(.website-black) .bookend-headline,
html.website-light:not(.website-black) .ch-title { font-weight: 600; line-height: 1.05; }
html.website-light:not(.website-black) .section-desc,
html.website-light:not(.website-black) .st-copy,
html.website-light:not(.website-black) .vp2-text { color: var(--db-ink-2); }

/* the words that were blue-to-violet now carry the one spectrum */
html.website-light:not(.website-black) .gradient-text,
html.website-light:not(.website-black) .ch-accent,
html.website-light:not(.website-black) .gradient-text.hero-grow,
html.website-light:not(.website-black) .hero-grow {
    background: var(--db-spectrum);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    padding: 0;
    margin: 0;
    box-shadow: none;
}
html.website-light:not(.website-black) .hero-typing-cursor { color: var(--db-s3); }

/* eyebrows: small mono labels led by a spectrum bar */
html.website-light:not(.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-light:not(.website-black) .section-tag::before {
    content: '';
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--db-spectrum);
    flex: none;
}

/* buttons */
html.website-light:not(.website-black) .cta-primary {
    background: var(--db-ink);
    color: #FFFFFF;
    border: 0;
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 0 1px 2px rgb(10 10 15 / .2);
}
html.website-light:not(.website-black) .cta-primary:hover { background: var(--db-ink-hover); }
html.website-light:not(.website-black) .modal-submit { border-radius: 10px; }
html.website-light:not(.website-black) .faq-pill {
    border-radius: 999px;
    background: var(--db-bg);
    border: 1px solid var(--db-line-2);
    color: var(--db-ink-2);
    box-shadow: var(--db-sh-1);
}
html.website-light:not(.website-black) .faq-pill:hover { color: var(--db-ink); border-color: var(--db-line-3); }
html.website-light:not(.website-black) .faq-pill.active {
    background: var(--db-ink);
    border-color: var(--db-ink);
    color: #FFFFFF;
}

/* logo: the lime square stays */
html.website-light:not(.website-black) .logo span { color: #CCFF00; text-shadow: 1.5px 1.5px 0 var(--db-ink); }

/* the hero: white, with the spectrum washed in from the top */
html.website-light:not(.website-black) .hero-v1 {
    background: var(--db-bg);
    box-shadow: inset 0 -1px 0 var(--db-line);
    overflow: hidden;
}
html.website-light:not(.website-black) .hero-v1::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: auto;
    top: -340px;
    left: 50%;
    width: max(1500px, 80vw);
    height: 600px;
    transform: translateX(-50%);
    background: var(--db-spectrum);
    background-size: auto;
    filter: blur(130px);
    opacity: .13;
    border-radius: 50%;
    -webkit-mask-image: none;
            mask-image: none;
    pointer-events: none;
}
html.website-light:not(.website-black) .hero-v1-layout { position: relative; z-index: 1; }

/* cards: white, hairline, soft lift, larger radius */
html.website-light:not(.website-black) .vp2-card,
html.website-light:not(.website-black) .st-card,
html.website-light:not(.website-black) .faq-item {
    background: var(--db-bg);
    border: 1px solid var(--db-line-2);
    border-radius: 22px;
    box-shadow: var(--db-sh-1);
}
html.website-light:not(.website-black) .faq-item { border-radius: 16px; }
html.website-light:not(.website-black) .vp2-visual,
html.website-light:not(.website-black) .st-card-visual { position: relative; isolation: isolate; }
/* each card's picture sits in its own colour of the spectrum */
html.website-light:not(.website-black) .vp2-visual::after,
html.website-light:not(.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(26px);
    opacity: .35;
    pointer-events: none;
}
html.website-light:not(.website-black) .vp2-card:nth-child(4n+1),
html.website-light:not(.website-black) .st-card:nth-child(4n+1) { --h: #FF6B2C; --h2: #FF2F87; }
html.website-light:not(.website-black) .vp2-card:nth-child(4n+2),
html.website-light:not(.website-black) .st-card:nth-child(4n+2) { --h: #FF2F87; --h2: #8B5CFF; }
html.website-light:not(.website-black) .vp2-card:nth-child(4n+3),
html.website-light:not(.website-black) .st-card:nth-child(4n+3) { --h: #8B5CFF; --h2: #1AA8FF; }
html.website-light:not(.website-black) .vp2-card:nth-child(4n+4),
html.website-light:not(.website-black) .st-card:nth-child(4n+4) { --h: #1AA8FF; --h2: #12C29B; }
html.website-light:not(.website-black) .vp2-card,
html.website-light:not(.website-black) .st-card { overflow: hidden; }
html.website-light:not(.website-black) .st-mock,
html.website-light:not(.website-black) .vp2-hub-device {
    border-radius: 16px;
    box-shadow: var(--db-sh-2);
}
html.website-light:not(.website-black) .st-headline { font-weight: 600; }

/* story numerals: mono on an ink pill */
html.website-light:not(.website-black) .st-step-badge { color: #FFFFFF; font-family: var(--db-f-mono); }

/* the closing band: ink, with the spectrum glowing up from below */
html.website-light:not(.website-black) .bookend-cta { background-color: var(--db-ink); background-image: none; }
html.website-light:not(.website-black) .bookend-cta::after {
    background:
        radial-gradient(55% 90% at 78% 115%, rgb(255 47 135 / .42), transparent 70%),
        radial-gradient(45% 80% at 30% 120%, rgb(139 92 255 / .38), transparent 70%),
        radial-gradient(40% 70% at 95% 110%, rgb(255 107 44 / .35), transparent 70%);
}
html.website-light:not(.website-black) .bookend-sub { color: rgb(255 255 255 / .68); }

/* footer */
html.website-light:not(.website-black) .site-footer { background: var(--db-bg-2); border-top: 1px solid var(--db-line); }