/* Shared visual language of the homepage, scoped to the help and integration pages. */
body.marketing-page{--ink:#073b61;--muted:#526572;--line:#deddd8;--bg:#f6f5f2;--accent:#0056b3;--accent-soft:#e8f0fb;--paper:#f6f5f2;--page-shadow:inset 0 1px 0 #ffffffcc,0 2px 4px #0f1f4b14,0 16px 36px -10px #0f1f4b33;color:#344955;font-family:Inter,Arial,sans-serif;line-height:1.7}
.marketing-page h1,.marketing-page h2,.marketing-page h3{color:var(--ink);font-weight:800;letter-spacing:-.02em;text-wrap:balance}
.marketing-page a{color:var(--accent)}
.marketing-page .hero{background:var(--paper);color:var(--ink);padding:64px 0 56px;border-bottom:1px solid var(--line)}
.marketing-page .hero h1{font-size:clamp(2.1rem,4vw,3.6rem);line-height:1.12;max-width:900px}
.marketing-page .hero p,.marketing-page .hero .lead{color:#526572;font-size:1.08rem;max-width:65ch;line-height:1.8}
.marketing-page .hero-badge,.marketing-page .hero .badge{color:var(--accent);background:#fff;border:1px solid var(--line);border-radius:10px;white-space:normal;line-height:1.6}
.marketing-page .navbar{background:#fff;box-shadow:var(--page-shadow)!important;border-bottom:1px solid var(--line)}
.marketing-page .navbar .nav-link{color:var(--ink)!important;font-weight:600}
.marketing-page .navbar .nav-link:hover,.marketing-page .navbar .nav-link[aria-current]{color:var(--accent)!important}
.marketing-page .navbar .btn-login{color:var(--ink)!important;background:#fff;border:1px solid #78b6db;border-radius:14px!important;box-shadow:0 3px 0 #79abc5!important}
.marketing-page .lang-btn{opacity:1;display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:36px;padding:5px;border-radius:7px}
.marketing-page .lang-btn.active{background:var(--accent-soft)}
.marketing-page .lang-btn img{width:22px;height:15px;object-fit:contain}
.marketing-page :is(.tutorial-register-3d,.hero .btn-light,.integration-content .btn,.cta-final .btn){color:var(--ink)!important;background:#f5c438!important;border:1px solid #d5a727!important;border-radius:16px!important;font-weight:800;box-shadow:inset 0 1px 0 #ffffffb3,0 5px 0 #be9220,0 16px 26px -9px #0f1f4b40!important;transition:transform .18s!important}
.marketing-page :is(.tutorial-register-3d,.hero .btn-light,.integration-content .btn,.cta-final .btn):hover{transform:translateY(-2px)}
.marketing-page :is(.tutorial-register-3d,.hero .btn-light,.integration-content .btn,.cta-final .btn):active{transform:translateY(3px)}
.marketing-page .hero .btn-outline-light,.marketing-page .btn-ghost{color:var(--accent);border-color:var(--line);background:#fff;border-radius:16px}
.marketing-page a:focus-visible,.marketing-page button:focus-visible,.marketing-page summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.marketing-page .layout{background:var(--paper)}
.marketing-page .sidebar{top:100px;max-height:calc(100dvh - 120px);overflow:auto;border-radius:18px;border:1px solid var(--line);box-shadow:var(--page-shadow)}
.marketing-page .sidebar a[aria-current]{background:var(--accent-soft);color:var(--accent)}
.marketing-page .guide-index summary{color:var(--ink);font-weight:800;padding:12px 8px;cursor:pointer}
@media(min-width:992px){.marketing-page .guide-index summary{display:none}}
.marketing-page .guide-card{padding:32px;border:1px solid var(--line);border-radius:18px;box-shadow:var(--page-shadow);scroll-margin-top:110px}
.marketing-page .guide-card h2{font-size:clamp(1.35rem,2.2vw,1.8rem);line-height:1.35}
.marketing-page .guide-card p,.marketing-page .guide-card li{max-width:70ch}
.marketing-page .text-muted{color:var(--muted)!important}
.marketing-page .tip,.marketing-page .problem,.marketing-page .guide-note,.marketing-page .danger-note{background:var(--paper);color:#344955;border-left:4px solid #f5c438;border-radius:10px;padding:16px;margin-top:18px}
.marketing-page .tag,.marketing-page .tag.green,.marketing-page .tag.orange{color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:8px}
.marketing-page .guide-visual{margin:24px 0}
.marketing-page .guide-visual a{display:block;border-radius:14px;background:var(--paper);overflow:hidden}
.marketing-page .guide-visual img{display:block;width:100%;height:auto;max-height:none}
.marketing-page .guide-visual img[width="430"]{max-width:430px;margin-inline:auto}
.marketing-page .guide-visual figcaption{color:var(--muted);font-size:.8rem;margin-top:8px;line-height:1.6}
.marketing-page .integration-content .wrap{max-width:1120px;text-align:left}
.marketing-page .integration-content p{margin-left:0}
.marketing-page .integration-content .hero{text-align:left}
.marketing-page .integration-content .hero h1{max-width:1000px;font-size:clamp(2rem,3.6vw,3.25rem)}
.marketing-page .integration-content .cta-row{justify-content:flex-start}
.marketing-page .integration-content .crumbs{text-align:left}
.marketing-page .integration-content section{padding:64px 0}
.marketing-page .integration-content section:nth-of-type(even){background:var(--paper)}
.marketing-page .integration-content .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.marketing-page .integration-content .step{align-items:flex-start;text-align:left}
.marketing-page .integration-content .step::before{background:#f5c438;color:var(--ink);border-radius:14px;box-shadow:0 3px 0 #be9220}
.marketing-page .grid2{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.marketing-page .grid2 .card{background:#fff;padding:28px;border-radius:18px;border:1px solid var(--line);box-shadow:var(--page-shadow)}
.marketing-page .card h3{margin-top:0}
.marketing-page .table-scroll{overflow-x:auto}
.marketing-page table.cmp{min-width:520px}
.marketing-page .integration-bridge{display:flex;align-items:center;justify-content:flex-start;gap:24px;margin:28px 0}
.marketing-page .integration-bridge img{width:150px;max-width:32%;height:56px;object-fit:contain}
.marketing-page .integration-bridge span{font-weight:800;color:var(--accent)}
.marketing-page .cta-final{background:var(--paper);color:var(--ink)}
.marketing-page footer:not(.cta-final){background:#073b61;color:#e0e7ef;padding:30px 0}
.marketing-page footer:not(.cta-final) a{color:#fff}
.marketing-page footer:not(.cta-final) h5{color:#fff}
.marketing-page .image-lightbox{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;background:#0f172ad9;padding:24px}
.marketing-page .image-lightbox.is-open{display:flex}
.marketing-page .image-lightbox img{width:auto;max-width:min(1180px,96vw);max-height:88dvh;background:#fff;border-radius:14px}
.marketing-page .lightbox-close{position:absolute;top:18px;right:18px;width:44px;height:44px;border:0;background:#fff;border-radius:12px;font-size:26px}
.marketing-page .search-results{display:none;max-height:320px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:16px}
.marketing-page .search-results.is-open{display:block}
.marketing-page .search-result{display:block;width:100%;text-align:left;padding:12px;background:#fff;border:0;border-bottom:1px solid var(--line);color:#344955}
.marketing-page .search-result:hover,.marketing-page .search-result.is-active{background:var(--accent-soft)}
.marketing-page .search-result-title{display:block;font-weight:700;font-size:.88rem}
.marketing-page .search-result-snippet,.marketing-page .search-empty{font-size:.8rem;padding:8px}
.marketing-page .skip-link{position:fixed;top:8px;left:8px;z-index:2100;background:#fff;padding:12px;border-radius:8px;transform:translateY(-160%)}
.marketing-page .skip-link:focus{transform:none}
@media(max-width:991px){.marketing-page .sidebar{position:static;max-height:none}.marketing-page .integration-content .steps{grid-template-columns:1fr}.marketing-page .hero{padding:44px 0}.marketing-page .guide-card{padding:24px}.marketing-page .navbar-brand img{height:44px!important}}
@media(max-width:575px){.marketing-page .grid2{grid-template-columns:1fr}.marketing-page .guide-card{padding:22px 18px}.marketing-page .integration-content section{padding:44px 0}.marketing-page .hero h1{font-size:2rem}.marketing-page .hero .btn{width:100%}.marketing-page .integration-bridge{gap:16px}.marketing-page .integration-content .hero .badge{font-size:.75rem}.marketing-page .guide-visual figcaption{font-size:.75rem}}
@media(prefers-reduced-motion:reduce){.marketing-page *{scroll-behavior:auto!important;transition:none!important}}
/* Let phone users pan full-resolution screenshots rather than shrinking the UI text. */
@media(max-width:575px){.marketing-page .image-lightbox{padding:64px 12px 12px;align-items:flex-start;justify-content:flex-start;overflow:auto;overscroll-behavior:contain}.marketing-page .image-lightbox img{max-width:none;max-height:none;width:auto}.marketing-page .lightbox-close{position:fixed;z-index:1}}