/* RoomFlow, SnapRender and Auto3D marketing pages (4 languages each), on body.apps-mkt; linked last in the head of
   those 12 templates, after brand-footer.css and wb-type.css (type: Inter to read, Space Grotesk 700 for titles).
   Light: the home page's ink and the brand footer's AA fix; everything else stays the templates'.
   Dark: the Workbench dark palette of the new home page (home-v2-wip.css; same block as info-pages.css). dark-theme.css
   (common.js injects it after this file) paints these pages with !important fallbacks, so every dark rule starts with
   html, names body.apps-mkt and takes !important; light mode and every other page are untouched. */

/* ---------- Light ---------- */
/* Titles in the home's ink (#111827), not the templates' #0a0a0a. */
body.apps-mkt { --foreground: #111827; }
/* Grey text on the pale-blue cards and hero glows was 4.3:1; the home's app-row grey (#4b5563) passes AA. */
body.apps-mkt > section :is(.feature-card-large, .feature-card-small, .step-item) :is(.feature-description, .step-description) { color: #4b5563; }
body.apps-mkt .a3h { --muted: #4b5563; }
body.apps-mkt .a3h .a3h-badge { color: #0a46eb; }
/* The brand footer's two small light-blue lines (#eaf0ff on #2664ff, 4.2:1) are white here, for AA (4.8:1). */
html body.apps-mkt .tools-brand-footer :is(.dt-footer-brand-desc, .dt-footer-copyright-v0) { color: #fff !important; }

/* ---------- Dark: palette and page ---------- */
html body.apps-mkt.dark-mode {
    --wb-shell: #111316;
    --wb-panel: #16181c;
    --wb-surface: #1d2025;
    --wb-soft: #22262c;
    --wb-line: #2b3038;
    --wb-border: #343a44;
    --wb-hover: #2a2f37;
    --wb-text: #e7e9ed;
    --wb-body: #c9ced6;
    --wb-muted: #a0a7b2;
    --wb-faint: #7b8390;
    --wb-primary: #2664ff;
    --wb-primary-hover: #0a46eb; /* white text keeps AA on hover */
    --wb-accent: #99b6ff;
    --wb-divider: rgba(255, 255, 255, .07);
    --wb-icon-well: rgba(38, 100, 255, .16);
    /* The RoomFlow / SnapRender templates' own tokens, in the same palette. */
    --background: var(--wb-shell);
    --foreground: var(--wb-text);
    --card: var(--wb-panel);
    --muted: var(--wb-surface);
    --muted-foreground: var(--wb-muted);
    --border: var(--wb-line);
    background: var(--wb-shell) !important;
    color: var(--wb-text);
}
html.dark-mode:has(> body.apps-mkt) { background-color: #111316 !important; }
html body.apps-mkt.dark-mode ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); }
html body.apps-mkt.dark-mode ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .28); }

/* Header: as on the new home page. */
html body.apps-mkt.dark-mode .header { background-color: var(--wb-shell) !important; border-bottom-color: var(--wb-divider) !important; }
html body.apps-mkt.dark-mode .header-text-title { color: var(--wb-text); }
html body.apps-mkt.dark-mode .head_left :is(.plugins, .tools, .pricing, .tutorial, .canvas).head_rnav .hr-text,
html body.apps-mkt.dark-mode .head_left .canvas.head_rnav [data-i18n="canvas"],
html body.apps-mkt.dark-mode .head_left [data-i18n="navSketchup"],
html body.apps-mkt.dark-mode .head_left [data-i18n="navRhino"],
html body.apps-mkt.dark-mode .head_left [data-i18n="sidebarHome"] { color: var(--wb-text) !important; }
html body.apps-mkt.dark-mode .nav-dropdown-menu,
html body.apps-mkt.dark-mode .lang-dropdown { background-color: var(--wb-surface); border-color: var(--wb-line); box-shadow: 0 12px 32px rgba(0, 0, 0, .45); }
html body.apps-mkt.dark-mode .nav-dropdown-item,
html body.apps-mkt.dark-mode .nav-dropdown-item a,
html body.apps-mkt.dark-mode .lang-option,
html body.apps-mkt.dark-mode .globe-icon,
html body.apps-mkt.dark-mode .dropdown-arrow { color: var(--wb-text); }
html body.apps-mkt.dark-mode .lang-switch-container .hr-text,
html body.apps-mkt.dark-mode .lang-current-text { color: var(--wb-text) !important; }
html body.apps-mkt.dark-mode .nav-dropdown-item:hover,
html body.apps-mkt.dark-mode .lang-option:hover,
html body.apps-mkt.dark-mode .lang-option.active { background-color: var(--wb-hover); }
html body.apps-mkt.dark-mode .login-register-btn,
html body.apps-mkt.dark-mode .try-tools-btn { background-color: var(--wb-primary) !important; border-color: var(--wb-primary); }
html body.apps-mkt.dark-mode .login-register-btn:hover,
html body.apps-mkt.dark-mode .try-tools-btn:hover { background-color: var(--wb-primary-hover) !important; }
html body.apps-mkt.dark-mode .mobile-nav-menu,
html body.apps-mkt.dark-mode #mobileMenu,
html body.apps-mkt.dark-mode .mobile-nav-panel { background-color: var(--wb-shell); border-color: var(--wb-line); color: var(--wb-text); }
html body.apps-mkt.dark-mode .mobile-nav-item { color: var(--wb-text); border-bottom-color: var(--wb-line); }

/* ---------- Dark: RoomFlow and SnapRender (one template family) ---------- */
/* The dotted backdrop: a faint light dot instead of brand blue. */
html body.apps-mkt.dark-mode::before { color: rgba(255, 255, 255, .06) !important; }
html body.apps-mkt.dark-mode > section { background: transparent !important; color: var(--wb-text); }
html body.apps-mkt.dark-mode > section :is(h1, h2, h3, h4, .hero-title, .features-title, .how-it-works-main-title, .cta-title, .feature-title, .step-title) { color: var(--wb-text) !important; }
html body.apps-mkt.dark-mode > section :is(p, .hero-subtitle, .how-it-works-main-subtitle, .feature-description, .step-description, .upload-subtitle, .users-info, .trusted-text) { color: var(--wb-muted) !important; }
/* Blue words in titles and the hero line: the home's dark accent. */
html body.apps-mkt.dark-mode > section :is(.hero-subtitle-text, .hero-title-ai, .text-primary, [style*="#2664ff"], [style*="rgb(38, 100, 255)"]) { color: var(--wb-accent) !important; }
html body.apps-mkt.dark-mode > section :is(h1, h2) span:not([class*="text-white"]) { color: var(--wb-accent) !important; }

/* Upload card: the panel surface, a quiet blue edge, a grey dashed inset. */
html body.apps-mkt.dark-mode > section .card {
    background-color: var(--wb-panel) !important;
    background-image: linear-gradient(var(--wb-panel), var(--wb-panel)), linear-gradient(var(--gradient-angle, 135deg), #2b3038, #2664ff, #2b3038) !important;
    box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .7) !important;
}
html body.apps-mkt.dark-mode > section .card::before { border-color: var(--wb-border) !important; }
html body.apps-mkt.dark-mode > section .card:hover { box-shadow: 0 22px 44px -22px rgba(0, 0, 0, .8) !important; }
html body.apps-mkt.dark-mode > section .upload-icon-wrapper { background-color: var(--wb-icon-well) !important; border-color: rgba(153, 182, 255, .25) !important; }
html body.apps-mkt.dark-mode > section :is(.upload-icon, .upload-title) { color: var(--wb-accent) !important; }
html body.apps-mkt.dark-mode > section .image-preview::before { background: var(--wb-surface) !important; }
html body.apps-mkt.dark-mode > section .or-text { color: var(--wb-muted) !important; }

/* Template gallery. */
html body.apps-mkt.dark-mode > section .template-container {
    background: linear-gradient(var(--wb-panel), var(--wb-panel)) padding-box, linear-gradient(to bottom, rgba(38, 100, 255, .25), rgba(38, 100, 255, .7)) border-box !important;
}
html body.apps-mkt.dark-mode > section .category-btn:not(.active) { background-color: var(--wb-surface) !important; color: var(--wb-body) !important; box-shadow: inset 0 0 0 1px var(--wb-line) !important; }
html body.apps-mkt.dark-mode > section .category-btn:not(.active):hover,
html body.apps-mkt.dark-mode > section .category-btn.active { background-color: var(--wb-primary) !important; color: #fff !important; box-shadow: none !important; }
html body.apps-mkt.dark-mode > section .template-item { background-color: var(--wb-surface) !important; border-color: var(--wb-line) !important; }
html body.apps-mkt.dark-mode > section .template-item:hover { border-color: rgba(153, 182, 255, .35) !important; box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .7) !important; }
html body.apps-mkt.dark-mode > section .template-info :is(span, p, div) { color: #fff !important; }

/* Partner names: the home's faint grey, light on hover. */
html body.apps-mkt.dark-mode > section :is(.partner-name, .brokerage-name) { color: var(--wb-faint) !important; }
html body.apps-mkt.dark-mode > section .partner-name:hover { color: var(--wb-text) !important; }

/* Feature cards: the panel surface with a hairline. */
html body.apps-mkt.dark-mode > section :is(.feature-card-large, .feature-card-small, .feature-card) {
    background-color: var(--wb-panel) !important;
    border: 1px solid var(--wb-line) !important;
}
html body.apps-mkt.dark-mode > section .feature-card-small:hover { border-color: var(--wb-border) !important; box-shadow: 0 16px 34px -20px rgba(0, 0, 0, .8) !important; }
html body.apps-mkt.dark-mode > section :is(.feature-image-large, .feature-image-small) { background-color: var(--wb-surface) !important; }

/* How it works: the chosen step in a faint blue well, its number and title in the accent. */
html body.apps-mkt.dark-mode > section .step-item { background-color: transparent !important; border-color: transparent !important; }
html body.apps-mkt.dark-mode > section .step-item:hover { background-color: var(--wb-surface) !important; border-color: var(--wb-line) !important; }
html body.apps-mkt.dark-mode > section .step-item.active { background-color: rgba(38, 100, 255, .1) !important; border-color: rgba(153, 182, 255, .3) !important; }
html body.apps-mkt.dark-mode > section .step-number { color: var(--wb-faint) !important; }
html body.apps-mkt.dark-mode > section .step-item.active :is(.step-number, .step-title) { color: var(--wb-accent) !important; }

/* Buttons. */
html body.apps-mkt.dark-mode > section .btn-primary { background-color: var(--wb-primary) !important; color: #fff !important; }
html body.apps-mkt.dark-mode > section .btn-primary:hover { background-color: var(--wb-primary-hover) !important; }
/* The closing band sits on the blue brand footer: one step up from the page, as on the info pages. */
html body.apps-mkt.dark-mode > section.cta-section { background: var(--wb-panel) !important; border-top: 1px solid var(--wb-line); }

/* ---------- Dark: Auto3D (auto3d-home.css tokens) ---------- */
html body.apps-mkt.dark-mode .a3h {
    --ink: var(--wb-text);
    --muted: var(--wb-muted);
    --line: var(--wb-line);
    --soft: var(--wb-panel);
    --soft2: var(--wb-surface);
    color: var(--wb-text);
}
html body.apps-mkt.dark-mode .a3h :is(h1, h2, h3, summary) { color: var(--wb-text) !important; }
html body.apps-mkt.dark-mode .a3h :is(p, .a3h-sub, .a3h-lead, .a3h-q-a, .a3h-hero-note, .a3h-gallery-note, .a3h-upload-s, .a3h-trust-item) { color: var(--wb-muted) !important; }
html body.apps-mkt.dark-mode .a3h :is(.a3h-h1 .grad, .a3h-eyebrow) { color: var(--wb-accent) !important; }
html body.apps-mkt.dark-mode .a3h :is(.a3h-sec, .a3h-trust, .a3h-sec.alt) { background: var(--wb-shell) !important; }
html body.apps-mkt.dark-mode .a3h .a3h-sec.alt { background: var(--wb-panel) !important; }
html body.apps-mkt.dark-mode .a3h .a3h-trust { background: var(--wb-panel) !important; border-color: var(--wb-line) !important; }

/* Hero: the page colour with a faint blue glow; the orbit drawings quieter. */
html body.apps-mkt.dark-mode .a3h .a3h-hero {
    background: radial-gradient(1100px 520px at 80% -8%, rgba(38, 100, 255, .16) 0%, rgba(38, 100, 255, 0) 60%),
        radial-gradient(900px 480px at 0% 0%, rgba(38, 100, 255, .08) 0%, rgba(38, 100, 255, 0) 55%), var(--wb-shell) !important;
}
html body.apps-mkt.dark-mode .a3h .a3h-orbit-scene { opacity: .35; }
html body.apps-mkt.dark-mode .a3h .a3h-badge { background: rgba(153, 182, 255, .12) !important; border-color: rgba(153, 182, 255, .25) !important; color: var(--wb-accent) !important; }

/* Upload window: the panel surface, a blue edge, a grey dashed inset. */
html body.apps-mkt.dark-mode .a3h .a3h-upload {
    background: linear-gradient(var(--wb-panel), var(--wb-panel)) padding-box, linear-gradient(135deg, #2b3038 0%, #2664ff 60%, #99b6ff 100%) border-box !important;
    box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .75) !important;
}
html body.apps-mkt.dark-mode .a3h .a3h-upload::before { background: var(--wb-panel) !important; border-color: var(--wb-border) !important; }
html body.apps-mkt.dark-mode .a3h .a3h-upload:hover::before { background: #1a1d22 !important; border-color: #4a5260 !important; }
html body.apps-mkt.dark-mode .a3h .a3h-upload.drag::before { background: rgba(38, 100, 255, .08) !important; border-color: var(--wb-primary) !important; }
html body.apps-mkt.dark-mode .a3h .a3h-upload-ic { background: var(--wb-icon-well) !important; }
html body.apps-mkt.dark-mode .a3h .a3h-upload-ic svg { color: var(--wb-accent) !important; }
html body.apps-mkt.dark-mode .a3h .a3h-upload-error { color: #f97066 !important; }

/* Hero gallery frame: dark, the tiles stay light because the models are lit for a light ground. */
html body.apps-mkt.dark-mode .a3h .a3h-hero-gallery { background: rgba(22, 24, 28, .86) !important; border-color: var(--wb-line) !important; box-shadow: 0 18px 44px -30px rgba(0, 0, 0, .8) !important; }
html body.apps-mkt.dark-mode .a3h .a3h-gv { border-color: var(--wb-line) !important; }
html body.apps-mkt.dark-mode .a3h .a3h-gv-tag { color: #111827 !important; }

/* Cards, use cases, questions. */
html body.apps-mkt.dark-mode .a3h :is(.a3h-card, .a3h-use, .a3h-q, .a3h-stage) { background: var(--wb-panel) !important; border-color: var(--wb-line) !important; }
html body.apps-mkt.dark-mode .a3h :is(.a3h-card, .a3h-use):hover { border-color: var(--wb-border) !important; box-shadow: 0 16px 34px -20px rgba(0, 0, 0, .8) !important; }
html body.apps-mkt.dark-mode .a3h .a3h-card-media { border-color: var(--wb-line) !important; }
html body.apps-mkt.dark-mode .a3h .a3h-card-ic { background: rgba(22, 24, 28, .9) !important; border-color: var(--wb-border) !important; }
html body.apps-mkt.dark-mode .a3h :is(.a3h-card-ic, .a3h-use-top, .a3h-q-ic, .a3h-trust-item) svg,
html body.apps-mkt.dark-mode .a3h .a3h-q summary .a3h-q-ic { color: var(--wb-accent) !important; }
html body.apps-mkt.dark-mode .a3h .a3h-use-top { background: radial-gradient(circle at 50% 35%, #22262c, #1a1d22) !important; border-color: var(--wb-line) !important; }
html body.apps-mkt.dark-mode .a3h .a3h-chip { background: rgba(29, 32, 37, .92) !important; border-color: var(--wb-border) !important; color: var(--wb-text) !important; }
html body.apps-mkt.dark-mode .a3h .a3h-btn.ghost { background: var(--wb-surface) !important; color: var(--wb-accent) !important; border-color: var(--wb-border) !important; }

/* Closing band: one step up from the page, above the blue brand footer. */
html body.apps-mkt.dark-mode .a3h .a3h-cta {
    background: radial-gradient(800px 360px at 50% 0%, rgba(38, 100, 255, .16) 0%, rgba(38, 100, 255, 0) 70%), var(--wb-panel) !important;
    border-top: 1px solid var(--wb-line);
}