/* ============================================================ DARK MODE — "the worksheet after dark" (index2 only) The page's own night grammar already exists in the FAQ band: warm ink ground, cream rules at low alpha, gold pixel stars. Dark mode extends that treatment to the whole drafting sheet. Everything is gated on html[data-theme="dark"], set by the header toggle (js/theme.js) + the FOUC guard in . Loaded last, after nav.css. Palette (warm umber family — never cool gray): ground #14100c raised #221b14 inset #0f0c09 nested #2b2318 band #211a14 (FAQ/footer, now reads lifted) ink #f2ecdf ink-2 #b3a58f ink-3 #8d7f6a ember #d83a12 fills — hover BRIGHTENS (#f0552a): light emits at night, it doesn't darken. text-ember #ff7040. gold #ffd633 (the night-star color, unchanged) ============================================================ */ /* ── the toggle chip: pixel moon/sun in the sheet's mark grammar ── */ .nv-theme{ width:36px;height:36px;flex:none;padding:0; display:inline-flex;align-items:center;justify-content:center; border:1px solid rgba(33,26,20,.28);border-radius:8px; background:rgba(33,26,20,.04);color:#211a14;cursor:pointer; transition:background-color .2s,border-color .2s,color .2s; } .nv-theme:hover{background:rgba(33,26,20,.10);border-color:rgba(33,26,20,.45)} .nv-theme:focus-visible{outline:2px solid #d83a12;outline-offset:2px} .nv-theme-ic{ width:15px;height:15px;background-color:currentColor; -webkit-mask:url('data:image/svg+xml,') no-repeat center/contain; mask:url('data:image/svg+xml,') no-repeat center/contain; image-rendering:pixelated; } html[data-theme="dark"] .nv-theme{ border-color:rgba(242,236,223,.30);background:rgba(242,236,223,.06);color:#f2ecdf; } html[data-theme="dark"] .nv-theme:hover{background:rgba(242,236,223,.12);border-color:rgba(242,236,223,.5)} html[data-theme="dark"] .nv-theme-ic{ -webkit-mask:url('data:image/svg+xml,') no-repeat center/contain; mask:url('data:image/svg+xml,') no-repeat center/contain; } /* bar-mounted instance is the mobile one; desktop uses the menu one */ .nv-theme--bar{display:none;align-self:center;margin-right:10px} @media (max-width:991px){.nv-theme--bar{display:inline-flex}} /* ============================================================ 0 — ground ============================================================ */ html[data-theme="dark"]{background:#14100c;color-scheme:dark} html[data-theme="dark"] body{background:#14100c} html[data-theme="dark"] ::selection{background:#d83a12;color:#f6f1e8} html[data-theme="dark"] :focus-visible{outline-color:#ff7040} /* ============================================================ 1 — Framer token remap (mirrors theme.css) ============================================================ */ html[data-theme="dark"] body{ --token-c534b380-e14e-4ddc-9802-ad88d1f94f8e: #f6f1e830; --token-5e0b3b72-9a97-43f8-96f2-85d741f3d8ca: #221b14; --token-958e2cd1-b113-4aa3-9235-7a2b959c8feb: #14100c; --token-26e3cb56-8447-4a64-9b7d-37f16a9909d4: #f2ecdf; --token-8f5eb515-7a13-452b-a4ab-f35e2208a3f3: #f2ecdfbf; --token-f5637926-8ee6-41cb-a320-ec3462d62cd5: #f2ecdf99; --token-bd71055c-0a2c-4476-8cc9-4310acba652d: #ff7040; --token-88cad303-8ee5-4c22-877f-e434faf14eee: #d83a12; --token-be530db7-18b2-4273-89ab-17e94ce4aa9f: #ffd633; --token-281f665e-69f0-4f4c-a171-f40f50fe70d5: #86b84e; --token-81eeded8-7d17-49fd-8f9d-4b09d4083be5: #f6f1e81f; --token-5e2a9781-f258-43f3-ae02-0a76276a5519: #0f0c09; --token-94a5bf9a-16a4-4639-b671-271526647eef: #f6f1e824; --token-a1269b3c-6c48-45d9-9f35-32a6df13b5e0: #f6f1e830; --token-5964e09d-3671-4c80-a557-31c1772b6c22: #b3a58f; --token-4a5ab9b5-071f-4390-82c0-81f9558f671f: #f2ecdf; --token-8015ce2b-ef6f-4fe0-944b-b61f872d0501: #b3a58f; --token-e0051992-b662-4a7c-a4c8-9cd5b5125f7a: #0f0c09; --token-1ff51228-9678-411c-9a08-00381f0fc70b: #f2ecdf; --token-70c17056-82cb-4934-97c9-7213cf77c853: #f6f1e830; --token-393d758b-714b-4628-a487-3e2609e109b7: #2b2318; --token-a90119e0-cc91-4f7c-8117-a4827837d154: #2b2318; --token-3211d3ed-e082-412d-bec4-c06fb5bda768: #9c8e79; --token-86436fc2-2fa7-4338-9d69-653ef2fe605e: #2b2318; --token-3636b58d-af99-4283-ab2c-55c8fcdd5b26: #221b14; --token-28fd9ca0-18c8-4b2c-b240-cbd29f83e8a5: #9c8e79; --token-80b6d9ee-6797-4273-85d5-55a0c0e39c2c: #9c8e79; --token-05c8a71b-796d-4e89-a88a-1fd7fb02e1c7: #2b2318; --token-883ec69e-717f-4933-bc04-075e58e23acd: #cbbda6; --token-ded025fa-15dd-4c1c-94f4-aee06d7d238a: #b3a58f40; --token-30fd6b0d-9c3a-4ed1-b7e6-4bdbb9d0fff9: #f6f1e84d; --token-c21e04aa-a0e5-4f4d-853d-09e09aa40d71: #9c8e79; --token-e0633a0d-cf57-4847-a570-b6e3ee41f945: #90837040; /* library/testimonial band bg (undefined in theme.css, falls back #fff) */ --token-f43ee7a6-eb3c-4060-9079-58fa2b6a69a7: #14100c; } /* theme.css attribute-shadow remaps, night variants */ html[data-theme="dark"] [style*="rgba(0, 0, 0, 0.25)"]{box-shadow:0 10px 30px rgba(0,0,0,.55) !important} html[data-theme="dark"] [style*="rgba(0, 0, 0, 0.2)"]{box-shadow:0 8px 24px rgba(0,0,0,.45) !important} html[data-theme="dark"] [style*="rgba(0, 0, 0, 0.15)"]{box-shadow:0 8px 24px rgba(0,0,0,.4) !important} html[data-theme="dark"] [style*="rgb(17, 17, 17) 0px 0px 0px 1.5px"]{box-shadow:#f6f1e81f 0px 0px 0px 1.5px !important} html[data-theme="dark"] [style*="0px 0px 0px 1.5px rgb(17, 17, 17)"]{box-shadow:0px 0px 0px 1.5px #f6f1e81f !important} /* inline-literal text greys inside the console mocks → warm equivalents */ html[data-theme="dark"] [style*="--extracted-r6o4lv:rgb(102, 102, 102)"]{--extracted-r6o4lv:#9c8e79 !important} html[data-theme="dark"] [style*="--framer-text-color:rgb(102, 102, 102)"]{--framer-text-color:#9c8e79 !important} html[data-theme="dark"] [style*="--extracted-r6o4lv:rgb(153, 153, 153)"]{--extracted-r6o4lv:#a09077 !important} html[data-theme="dark"] [style*="--framer-text-color:rgb(153, 153, 153)"]{--framer-text-color:#a09077 !important} html[data-theme="dark"] [style*="--framer-text-color:#211a14"]{--framer-text-color:#f2ecdf !important} html[data-theme="dark"] [style*="--framer-text-color:#211a148c"]{--framer-text-color:#f2ecdf8c !important} html[data-theme="dark"] [style*="--framer-text-color:#7a6200"]{--framer-text-color:#e0bd28 !important} html[data-theme="dark"] [style*="border-color:rgb(238, 238, 238)"]{border-color:rgba(242,236,223,.14) !important} /* trust/company logos were forced to black for the light sheet — flip to cream */ html[data-theme="dark"] [data-framer-name="Companies"] [data-framer-name="Grid"]{filter:brightness(0) invert(.92);opacity:.5} html[data-theme="dark"] [data-framer-name="On"]{filter:brightness(0) invert(.92);opacity:.75} /* ============================================================ 2 — unify.css design tokens ============================================================ */ html[data-theme="dark"]{ --paper:#14100c; --paper-raised:#221b14; --paper-inset:#0f0c09; --white-nested:#2b2318; --ink:#f2ecdf; --ink-2:#b3a58f; --ink-3:#8d7f6a; --on-dark:#f6f1e8; --on-dark-2:#b6a98f; --accent:#d83a12; --accent-hover:#f0552a; --accent-tint:rgba(216,58,18,.16); --gold:#ffd633; --border-hairline:rgba(242,236,223,.13); --border-strong:rgba(242,236,223,.30); --border-on-dark:rgba(246,241,232,.14); --shadow-card:0 8px 24px rgba(0,0,0,.45); /* worksheet line system (feature-lines PART 2) */ --lg-rule-c:rgba(242,236,223,.30); --lg-soft-c:rgba(242,236,223,.15); --lg-rule-d:rgba(247,244,239,.25); --lg-plus:url('data:image/svg+xml,'); } html[data-theme="dark"] .btn--secondary:hover{background:rgba(242,236,223,.08);border-color:rgba(242,236,223,.45)} html[data-theme="dark"] .btn--primary-on-gold{background:#f2ecdf;color:#211a14} html[data-theme="dark"] .btn--primary-on-gold:hover{background:#ffffff} /* ============================================================ 3 — mv-base (Tailwind vars) + FAQ / bottom CTA / footer ============================================================ */ html[data-theme="dark"] .mv-base{ --color-black:#211a14; /* FAQ/footer band: now reads as a lifted panel */ --color-white:#f6f1e8; --color-brand-gold-400:#ffd633; --color-brand-grey-50:#f6f1e8; --color-brand-grey-200:#3a3126; --color-brand-grey-300:#453a2b; --color-brand-grey-400:#b6a98f; --color-brand-grey-600:#8a7c66; --color-brand-warm-grey-800:#393023; --color-red-500:#ff7040; color:#f2ecdf; } html[data-theme="dark"] .mv-base header, html[data-theme="dark"] .mv-base #bottom-cta{color:#f2ecdf} html[data-theme="dark"] .mv-base ::selection{background:#d83a12;color:#f6f1e8} /* FAQ band keeps its ink ground but earns a hairline seam against the night page */ html[data-theme="dark"] .mv-base #faq{box-shadow:inset 0 1px 0 rgba(242,236,223,.08),inset 0 -1px 0 rgba(242,236,223,.08)} /* ember CTA slab: cream text (paper flipped dark, so unhook from var(--paper)) */ html[data-theme="dark"] .mv-base #bottom-cta{background:#d83a12} html[data-theme="dark"] .mv-base #bottom-cta h2{color:#fff6ea} html[data-theme="dark"] .mv-base #bottom-cta .u-link{color:#fff6ea} /* ============================================================ 4 — header / nav (Ditto shell inverted: cream masthead at night) ============================================================ */ /* `.pg-head` is listed alongside `.nv-root` because the wordmark lives in both shells and only the homepage has `.nv-root`. The tile inverts purely through this var swap (`.nv-word` is `color:var(--nv-paper)` on `background:var(--nv-ink)`), so without it the seven secondary pages kept the light-mode DARK tile while the unscoped `.nv-word{color:#14100c}` below darkened the letters too — a dark-on-dark wordmark, invisible. It only surfaced once those pages could reach dark mode at all. */ html[data-theme="dark"] .nv-root, html[data-theme="dark"] .pg-head{ --nv-paper:#14100c; --nv-ink:#f2ecdf; --nv-graphite:#a89a84; --nv-beige:#3a3126; } /* wordmark tile + primary pill invert via the var swap; hovers need night logic */ html[data-theme="dark"] .nv-cta--primary:hover{background:#ffffff} html[data-theme="dark"] .nv-cta--demo:hover{color:#211a14} html[data-theme="dark"] .nv-word{color:#14100c} /* dropdown panel: raised night surface */ html[data-theme="dark"] .nv-grid{background:#241d15;box-shadow:0 12px 32px rgba(0,0,0,.55)} /* pastel icon tiles stay pastel — glyphs stay ink on them */ html[data-theme="dark"] .nv-root .nv-ic svg{color:#211a14;stroke:#211a14} html[data-theme="dark"] .nv-root .nv-ic svg[fill="currentColor"]{fill:#211a14;stroke:none} /* row fills with its pastel on hover → label flips to ink for contrast */ html[data-theme="dark"] .nv-item:hover .nv-item-txt{color:#211a14} html[data-theme="dark"] .nv-item:hover{color:#211a14} /* hover tile flip: cream tile, ink glyph stays legible */ html[data-theme="dark"] .nv-item:hover .nv-ic{background:#f2ecdf} /* header baseline joins the night grid */ html[data-theme="dark"] header.nv-root{border-bottom-color:rgba(242,236,223,.25)} html[data-theme="dark"] .nv-root .nv-cta--demo{border:0} @media (min-width:992px){ html[data-theme="dark"] .nv-root .nv-cta--demo{border:1px solid rgba(242,236,223,.28);background:rgba(242,236,223,.06);color:#f2ecdf} html[data-theme="dark"] .nv-root .nv-cta--demo:hover{background:#f0552a;border-color:#f0552a;color:#f6f1e8} } html[data-theme="dark"] .nv-cta:focus-visible{outline-color:#f2ecdf} /* mobile overlay inherits --nv-paper; burger inverts via vars */ /* ============================================================ 5 — hero (globe canvas re-themes via js/theme.js event) ============================================================ */ html[data-theme="dark"] .dpf2-hero-orbit{background:#14100c;color:#f2ecdf} html[data-theme="dark"] .dpf2-hero-orbit .dho-eyebrow{color:#b3a58f} html[data-theme="dark"] .dpf2-hero-orbit .dho-h1{color:#f6f1e8} html[data-theme="dark"] .dpf2-hero-orbit .dho-sub{color:#b3a58f} html[data-theme="dark"] .dpf2-hero-orbit .dho-cta--secondary{color:#f2ecdf;border-color:rgba(242,236,223,.30)} html[data-theme="dark"] .dpf2-hero-orbit .dho-cta--secondary:hover{border-color:rgba(242,236,223,.5);background:rgba(242,236,223,.08)} html[data-theme="dark"] .dho-v3 .dho3-pill{ background:rgba(24,19,15,.72);color:#ff7040;border-color:rgba(255,112,64,.45); } html[data-theme="dark"] .dho-v3 .dho-cta--secondary{background:rgba(24,19,15,.6)} html[data-theme="dark"] .dho-v3 .dho-chip{ background:#fdfbf7; box-shadow:0 4px 14px rgba(0,0,0,.5); } html[data-theme="dark"] .dpf2-hero-orbit .dho-chip{border-color:rgba(242,236,223,.14)} /* trustband: night strip, logos flip to cream */ html[data-theme="dark"] .dho-v3 .dho2-trustband{ background:#14100c; border-top-color:rgba(242,236,223,.25); border-bottom-color:rgba(242,236,223,.25); } html[data-theme="dark"] .dpf2-hero-orbit .dho-trusted-caption{color:#b3a58f} /* logo PNGs have opaque light grounds: invert them, then screen-blend so the (now black) ground melts into the night strip and only the marks glow */ html[data-theme="dark"] .dpf2-hero-orbit .dho-trusted img{ opacity:.55;filter:invert(1) grayscale(1) contrast(.9);mix-blend-mode:screen; } html[data-theme="dark"] .dpf2-hero-orbit .dho-trusted img:hover{opacity:.9;filter:invert(1) grayscale(1)} html[data-theme="dark"] .dpf2-hero-orbit .dho-stitch, html[data-theme="dark"] .dho-stitch--seam{ background:repeating-linear-gradient(to bottom,#f2ecdf 0 2px,transparent 2px 8px); } /* primary CTA hover brightens at night */ html[data-theme="dark"] .dpf2-hero-orbit .dho-cta--primary:hover{background:#f0552a} /* ============================================================ 6 — library band ("while you slept") ============================================================ */ html[data-theme="dark"] .mv-ui{ --token-3e7d342c-a5e5-4556-ae33-887ada111c73:#f2ecdf; color:#f2ecdf; } html[data-theme="dark"] .mv-ui .framer-22k09h h1.framer-text, html[data-theme="dark"] .mv-ui .framer-iizdml h1.framer-text, html[data-theme="dark"] .mv-ui .framer-qwf4b2 h1.framer-text{color:#f2ecdf} html[data-theme="dark"] .mv-ui .framer-1suct66 h3.framer-text{color:#b3a58f !important} /* scattered app screenshots behind the headline: dim into the night */ html[data-theme="dark"] .mv-ui .framer-1hem6en-container img{ filter:grayscale(1) invert(.88) !important;opacity:.28 !important; } /* ============================================================ 7 — agents section: feature-lines marks + chat fixture + mocks ============================================================ */ html[data-theme="dark"] .framer-PKhsd{ --fl-rule:rgba(242,236,223,.30); --fl-rule-soft:rgba(242,236,223,.16); --fl-plus:url('data:image/svg+xml,'); --fl-plus-soft:url('data:image/svg+xml,'); --fl-star:url('data:image/svg+xml,'); } /* mobile/tablet visual outlines */ @media (max-width:1199.98px){ html[data-theme="dark"] .framer-PKhsd .framer-fkayhg, html[data-theme="dark"] .framer-PKhsd .framer-igszz5, html[data-theme="dark"] .framer-PKhsd .framer-1k4t5g8, html[data-theme="dark"] .framer-PKhsd .framer-1s6q07n{outline-color:rgba(242,236,223,.14)} } /* chat panel frame */ html[data-theme="dark"] .framer-XhG7C.framer-o3jmk3{ background-color:#221b14 !important; --border-color:rgba(242,236,223,.22) !important; } html[data-theme="dark"] .framer-XhG7C .u-winhead{border-bottom-color:rgba(242,236,223,.12)} html[data-theme="dark"] .u-agents-rail{border-top-color:rgba(242,236,223,.12)} /* chat bubbles: literal warm-browns flip to warm creams */ html[data-theme="dark"] .u-chat-user{border-color:rgba(255,112,64,.30)} html[data-theme="dark"] .u-chat-tool{border-color:rgba(242,236,223,.13);color:#cbbda6} html[data-theme="dark"] .u-chat-reply{color:#cbbda6} html[data-theme="dark"] .u-rail-row.is-done .u-rail-label, html[data-theme="dark"] html:not(.js-agents) .u-rail-row .u-rail-label{color:#cbbda6} html[data-theme="dark"] .framer-XhG7C .framer-sn63o p.framer-text{--framer-text-color:#cbbda6;color:#cbbda6} html[data-theme="dark"] .framer-XhG7C .framer-1c3nizm{--border-color:rgba(242,236,223,.10) !important} html[data-theme="dark"] .framer-XhG7C .framer-psov2u{--border-color:rgba(242,236,223,.10) !important} html[data-theme="dark"] .framer-XhG7C .framer-3m96t7{--border-color:rgba(255,112,64,.35) !important} html[data-theme="dark"] .framer-XhG7C .framer-ziiuu5 p.framer-text{--framer-text-color:#ff8256;color:#ff8256} html[data-theme="dark"] .framer-oosF9.framer-oollii{--border-color:rgba(242,236,223,.16) !important} /* mono status kickers under each feature */ html[data-theme="dark"] .framer-p36991 .framer-jf3srl p.framer-text{--framer-text-color:#ff8256;color:#ff8256} html[data-theme="dark"] .framer-p36991 .framer-jl5jfx p.framer-text{--framer-text-color:#e0bd28;color:#e0bd28} /* quote cell */ html[data-theme="dark"] .mv-feat-quote blockquote{color:#f2ecdf} html[data-theme="dark"] .mv-feat-quote figcaption{color:#b3a58f} html[data-theme="dark"] .mv-feat-quote figcaption::before{filter:saturate(1.1) brightness(1.3)} /* "See it on your site" proof-chip (Framer button) */ html[data-theme="dark"] .framer-PKhsd .framer-lt5xhr{ background-color:rgba(242,236,223,.06) !important; border-color:rgba(242,236,223,.28); } html[data-theme="dark"] .framer-PKhsd .framer-lt5xhr .framer-text{ --framer-text-color:#f2ecdf !important;color:#f2ecdf !important; } html[data-theme="dark"] .framer-PKhsd .framer-lt5xhr::after{background-color:#f2ecdf} html[data-theme="dark"] .framer-PKhsd .framer-lt5xhr:hover{background-color:rgba(242,236,223,.12) !important;border-color:rgba(242,236,223,.45)} /* console/citation mock cards: hairlines + timeline bars */ html[data-theme="dark"] .framer-PKhsd .framer-9m42i9{ border-color:rgba(242,236,223,.10); box-shadow:0 1px 2px rgba(0,0,0,.4); } html[data-theme="dark"] .framer-PKhsd .framer-1bgmoyz, html[data-theme="dark"] .framer-PKhsd .framer-vgdjgl, html[data-theme="dark"] .framer-PKhsd .framer-1reoiru{background-color:#3a3126} html[data-theme="dark"] .framer-PKhsd .framer-zx3j1r{background-color:rgba(134,184,78,.16)} html[data-theme="dark"] .framer-PKhsd .framer-9m42i9 p.framer-text[style*="bd71055c"]{--framer-text-color:#ff8256 !important} html[data-theme="dark"] .framer-PKhsd .framer-491w6e{border-color:rgba(242,236,223,.10)} html[data-theme="dark"] .framer-PKhsd .framer-xul1d{ background-color:rgba(216,58,18,.16);border-color:rgba(255,112,64,.35); } /* light screenshots keep their glow but dim a notch */ html[data-theme="dark"] .u-cit-shot, html[data-theme="dark"] .u-audit-shot{filter:brightness(.9);border-color:rgba(242,236,223,.16)} html[data-theme="dark"] .u-demo-video{filter:brightness(.9)} /* fade-out gradients over scrolling mock lists */ html[data-theme="dark"] .framer-PKhsd .framer-1odi7vb, html[data-theme="dark"] .framer-PKhsd .framer-19q3xd0{ background:linear-gradient(90deg,rgba(34,27,20,0),#221b14 90%) !important; } /* feature-4 console: send chip stays a dark fixture with cream glyph */ html[data-theme="dark"] .framer-4S4gt .framer-1ef7umo{background-color:#3a2d1f !important} html[data-theme="dark"] .framer-4S4gt .framer-qojw04{--border-color:rgba(242,236,223,.10) !important} html[data-theme="dark"] .framer-4S4gt .framer-qojw04 svg{--1l3yetw:#b3a58f !important;--17kkcf8:rgba(242,236,223,.14) !important} html[data-theme="dark"] .framer-7K83X .framer-13bbzcb .framer-text{--framer-text-color:#cbbda6;color:#cbbda6} html[data-theme="dark"] .framer-7K83X .framer-1d8erss{--1l3yetw:#b3a58f !important;--17kkcf8:rgba(242,236,223,.14) !important} /* bento: the ink stat card must stay a dark card (not flip cream) */ html[data-theme="dark"] .framer-PKhsd .framer-ripoi .framer-17au8ff{ background-color:#262017 !important; border-color:rgba(242,236,223,.16); } html[data-theme="dark"] .framer-PKhsd .framer-ripoi .framer-17au8ff:hover{border-color:rgba(242,236,223,.3)} /* ember-tint highlight mark: night ink stays light, tint reads a notch stronger */ html[data-theme="dark"] .framer-p36991 mark.framer-text{color:#f2ecdf !important;background:rgba(216,58,18,.26)!important} html[data-theme="dark"] .framer-PKhsd .framer-7ubwi2{ --token-f5637926-8ee6-41cb-a320-ec3462d62cd5:#b3a58f; --token-86436fc2-2fa7-4338-9d69-653ef2fe605e:rgba(242,236,223,.10); --token-3211d3ed-e082-412d-bec4-c06fb5bda768:#b3a58f; } html[data-theme="dark"] .framer-PKhsd .framer-7ubwi2 .framer-v-k5113i p.framer-text{--framer-text-color:#9ac96a !important} /* kickers' pixel star: lift the ember for night */ html[data-theme="dark"] .u-kicker::before{filter:saturate(1.1) brightness(1.3)} /* ============================================================ 8 — mv-sections (platform / shift / personas / proof / CTA) ============================================================ */ html[data-theme="dark"] .mv-sections{background:#14100c;color:#f2ecdf} /* personas sticky track carries its own literal paper fill */ html[data-theme="dark"] .mv-sections .css-1kq4kq6{background-color:#14100c} /* headings + body copy literals */ html[data-theme="dark"] .mv-sections .css-1xedsha, html[data-theme="dark"] .mv-sections .css-e3yfba, html[data-theme="dark"] .mv-sections .css-1xikrsd, html[data-theme="dark"] .mv-sections .css-1alo1hb, html[data-theme="dark"] .mv-sections .css-1j7f7xs, html[data-theme="dark"] .mv-sections .css-1sqdo3d, html[data-theme="dark"] .mv-sections .css-1nqm36y, html[data-theme="dark"] .mv-sections .css-5q5lf4, html[data-theme="dark"] .mv-sections .css-1b4sz54, html[data-theme="dark"] .mv-sections .css-2jv3d, html[data-theme="dark"] .mv-sections .css-99cxkp{color:#f2ecdf} /* persona rows keep their inactive/active contrast at night */ html[data-theme="dark"] .mv-sections [data-persona] .css-99cxkp, html[data-theme="dark"] .mv-sections [data-persona] .css-1th258e{color:#9a8a72} html[data-theme="dark"] .mv-sections [data-persona].is-active .css-99cxkp, html[data-theme="dark"] .mv-sections [data-persona].is-active .css-1th258e{color:#f2ecdf} html[data-theme="dark"] .mv-sections .css-dp5l71, html[data-theme="dark"] .mv-sections .css-v5tx12, html[data-theme="dark"] .mv-sections .css-1kwus3d, html[data-theme="dark"] .mv-sections .css-3bn61a, html[data-theme="dark"] .mv-sections .css-9a0qzn{color:#b3a58f} html[data-theme="dark"] .mv-sections .css-1ndrq4c{color:#9c8e79} html[data-theme="dark"] .mv-sections .css-10h5kv3{background:rgba(242,236,223,.06);color:#9c8e79} html[data-theme="dark"] .mv-sections .css-18vyrvz, html[data-theme="dark"] .mv-sections .css-qklbzz{color:#f2ecdf} /* secondary buttons (proof-chip recipe lives in feature-lines with literals) */ html[data-theme="dark"] .dpf2-hero-orbit .dho-cta--secondary, html[data-theme="dark"] .mv-sections .css-1t2groz{ background:rgba(242,236,223,.06);border:1px solid rgba(242,236,223,.28);color:#f2ecdf; } html[data-theme="dark"] .dpf2-hero-orbit .dho-cta--secondary:hover, html[data-theme="dark"] .mv-sections .css-1t2groz:hover, html[data-theme="dark"] .mv-sections .css-1t2groz:focus-visible{ background:rgba(242,236,223,.12);border-color:rgba(242,236,223,.45);color:#f2ecdf; } html[data-theme="dark"] .dpf2-hero-orbit .dho-cta--primary{border-color:#a02a08} html[data-theme="dark"] .mv-sections .css-1iqlf8q{background:#d83a12;border-color:#a02a08} html[data-theme="dark"] .mv-sections .css-1iqlf8q:hover, html[data-theme="dark"] .mv-sections .css-1iqlf8q:focus-visible{background:#f0552a} /* platform boxed table: solid night hairlines */ @media (min-width:810px){ html[data-theme="dark"] .mv-sections .css-1gzsdyh{ border-top-color:rgba(242,236,223,.18); border-bottom-color:rgba(242,236,223,.18); } html[data-theme="dark"] .mv-sections .css-1gzsdyh > .css-klisov{ border-left-color:rgba(242,236,223,.13); border-top-color:rgba(242,236,223,.13); } } /* platform media wells are frameless now — components float on the band */ html[data-theme="dark"] .mv-sections .css-1n1s56s{ background:transparent;border-color:transparent; } /* platform vignettes: the cream palette they were drawn in */ html[data-theme="dark"] .pc{ --pc-ink:#f2ecdf; --pc-mut:#b3a58f; --pc-dim:#8a7c67; --pc-line:rgba(242,236,223,.12); --pc-bd:rgba(242,236,223,.22); --pc-card:rgba(242,236,223,.045); --pc-soft:rgba(242,236,223,.05); --pc-ghostbg:rgba(242,236,223,.02); --pc-acc:#e8845e; --pc-cursor:#f2ecdf; } html[data-theme="dark"] .mv-sections .css-1n1s56s img{filter:brightness(.92) contrast(1.02)} html[data-theme="dark"] .mv-sections img[src*="guardrail"]{filter:brightness(.92) contrast(1.02)} /* Learn more chips */ html[data-theme="dark"] .lg-learn{ border-color:rgba(242,236,223,.28); background:rgba(242,236,223,.06);color:#f2ecdf; } html[data-theme="dark"] .lg-learn:hover{background:rgba(242,236,223,.12);border-color:rgba(242,236,223,.45)} /* proof band */ html[data-theme="dark"] .mv-sections .mv-proof-title{color:#f2ecdf} html[data-theme="dark"] .mv-sections .mv-proof-card{color:#f2ecdf} html[data-theme="dark"] .mv-sections .mv-proof-card.is-ember{background:#d83a12;color:#fff6ea} html[data-theme="dark"] .mv-sections .mv-proof-card.is-ink{background:#2b2318;color:#f6f1e8} html[data-theme="dark"] .mv-sections .mv-proof-cta{background:rgba(242,236,223,.08);color:#f2ecdf} html[data-theme="dark"] .mv-sections .mv-proof-card:hover .mv-proof-cta{background:rgba(242,236,223,.14)} html[data-theme="dark"] .mv-sections .mv-proof-card.is-ember .mv-proof-cta, html[data-theme="dark"] .mv-sections .mv-proof-card.is-ink .mv-proof-cta{background:#f6f1e8;color:#211a14} html[data-theme="dark"] .mv-sections .mv-proof-card.is-ember:hover .mv-proof-cta, html[data-theme="dark"] .mv-sections .mv-proof-card.is-ink:hover .mv-proof-cta{background:#ffffff} html[data-theme="dark"] .mv-sections .mv-proof-voices{background:#1d1712;border-color:rgba(242,236,223,.30)} html[data-theme="dark"] .mv-sections .mv-proof-slide-left{border-right-color:rgba(242,236,223,.15)} html[data-theme="dark"] .mv-sections .mv-proof-count{color:#b3a58f;background:rgba(242,236,223,.07)} html[data-theme="dark"] .mv-sections .mv-proof-name{color:#f2ecdf} html[data-theme="dark"] .mv-sections .mv-proof-role{color:#b3a58f;background:rgba(242,236,223,.07)} html[data-theme="dark"] .mv-sections .mv-proof-quote{color:#ff8256} html[data-theme="dark"] .mv-sections .mv-proof-slide-img.is-tan{background:#3a3126} html[data-theme="dark"] .mv-sections .mv-proof-tabs{border-top-color:rgba(242,236,223,.30)} html[data-theme="dark"] .mv-sections .mv-proof-tab{border-left-color:rgba(242,236,223,.15);color:#9c8e79} html[data-theme="dark"] .mv-sections .mv-proof-tab:hover, html[data-theme="dark"] .mv-sections .mv-proof-tab:focus-visible, html[data-theme="dark"] .mv-sections .mv-proof-tab.is-active{color:#f2ecdf} @media (max-width:809.98px){ html[data-theme="dark"] .mv-sections .mv-proof-tab:nth-child(n+3){border-top-color:rgba(242,236,223,.15)} } /* solid boundary rules already flow through --lg-rule-c */ /* ============================================================ 9 — respect the user's motion settings on the theme swap ============================================================ */ @media (prefers-reduced-motion: reduce){ .nv-theme,.nv-theme-ic{transition:none} }