/* Site-wide light blue/pastel palette inspired by the reference site's calm product UI. */
:root{--ink:#20364b;--paper:#f5f8fc;--muted:#718398;--line:#e1e8f0;--accent:#478fc1;--accent-deep:#3479aa;--green:#35546b;--cream:#eef4fa;--axi-red:#df7b7b;--axi-gold:#e8c875;--axi-orange:#df9b73;--axi-blue:#438fc1;--axi-ivory:#f5f8fc}
html,body{background:#f5f8fc;color:#20364b}.topline{background:#eaf1f8;color:#5c7185}.nav{background:rgba(255,255,255,.96);border-bottom-color:#e3eaf1;box-shadow:0 3px 18px rgba(50,82,111,.035)}.brand-mark,.primary,.side i{background:#4c94c3;color:#fff}.primary:hover{background:#3479aa}.nav-cta{border-color:#c9d8e6;background:#fff;color:#385770}.nav-cta span,.links a:hover,.links a.active{color:#438fc1}.links a.active:after{background:#65a9d0}.eyebrow,.eyebrow i{color:#62829b}.eyebrow i{background:#6baaca}.hero{background:#f5f8fc}.hero h1,.page-hero h1{color:#20364b}.hero h1 em{color:#5482a1}.hero-art{background:#eaf1f7}.art-grid{background-image:linear-gradient(rgba(77,125,161,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(77,125,161,.07) 1px,transparent 1px)}.blueprint,.feature.wide,.dark-band,footer{background:#29465d}.blueprint{color:#eaf4fa}.float-note{background:#fff;color:#38536a}.float-note b{color:#df8580}.ticker{background:#f7f9fc;border-color:#e2e9f0;color:#587087}.ticker b{color:#5b9fc7}.section{background:#f7f9fc}.feature,.contact-card,.contact-form,.resource-grid>article{background:#fff;border:1px solid #e5ebf2;border-radius:12px;box-shadow:0 10px 30px rgba(43,71,96,.045)}.feature:not(.wide){background:linear-gradient(145deg,#fff,#f3f8fc)}.feature.wide{background:#35556d}.feature.wide h3{color:#fff}.feature.wide .feature-number{color:#c4d7e4}.feature.wide p{color:#e2edf4}.feature-number{color:#7e9bb0}.feature h3,.section h2,.section h3{color:#20384d}.feature p,.section-head>p{color:#728395}.feature.wide p{color:#e2edf4}.feature.wide .rule-lines{color:#eef6fb}.feature.wide .rule-lines span{color:#eef6fb;border-color:#91adc0}.feature.wide .rule-lines i{color:#f2cb73}.chips{background:#f1f6fa;color:#5b7082;border-radius:7px}.feature-controls .chips{margin-top:14px;padding:8px 10px}.feature-controls .accessory-control{border-top:1px solid #dce5ed;margin-top:12px;padding-top:10px}.feature-controls .accessory-control h3{font-size:16px;margin:0 0 4px}.feature-controls .accessory-control p{margin:0;font-size:12px;line-height:1.55;color:#728395}.feature-controls .accessory-control .chips{margin-top:7px;padding:6px 0;background:transparent;border-top:1px solid #e1e8ee;border-radius:0;line-height:1.5}.chips b{color:#df8580}.door-icons i{border-color:#93acbd}.door-icons i:after{background:#df8580}.dark-inner .eyebrow{color:#b8d6e8}.dark-inner p{color:#d0dee8}.dark-inner img{border-color:#8fb8d1;box-shadow:0 18px 38px rgba(15,35,50,.2)}.text-link,.contact-card a,.listing article>a,.resource-item>a{color:#4289b8}.cta-strip{background:#4b91bf;color:#fff}.cream{background:#edf4fa;color:#29465d}.page-hero{background-color:#edf4fa;background-image:linear-gradient(90deg,rgba(245,249,252,.97) 0%,rgba(245,249,252,.88) 45%,rgba(245,249,252,.28) 100%),url('/public/assets/banners/home-banner.png');border-bottom-color:#e1e9f0}.page-hero>p{color:#63788b}.page-hero .eyebrow{color:#52758e}.banner-features,.banner-start,.banner-videos,.banner-craft,.banner-resources,.banner-updates,.banner-faq,.banner-contact{background-color:#edf4fa}.spec-grid article{border-top-color:#d5e0e9}.spec-grid small,.resource-grid small{color:#6790aa}.spec-grid p,.listing p,.timeline-card p,.contact-card p{color:#6c8092}.listing article{border-top-color:#d6e0e8}.thumb{background:#edf4fa;color:#557f9a}.empty{background:#eff4f8;color:#687f91;border-radius:8px}.empty.small{background:transparent}.resource-item{border-top-color:#dce5ed}.contact-form input,.contact-form textarea{background:#fbfdff;border-color:#d7e2eb;border-radius:6px}.contact-form input:focus,.contact-form textarea:focus{border-color:#5b9bc1}.contact-success{background:#eff8f6;border-color:#cce5df;color:#355f5b}.faq-list details{border-top-color:#d7e1e9}.faq-list summary b{color:#528fb7}.timeline:before{background:linear-gradient(to bottom,transparent,#9cc5d9 8%,#9cc5d9 92%,transparent)}.timeline-item:before{background:#5b9fc4;box-shadow:0 0 0 2px #bed8e4}.timeline-card{border-color:#e3eaf0;box-shadow:0 8px 26px rgba(46,74,96,.06)}.timeline-version,.timeline-card h3 span{color:#528fb7}.timeline-card:before{border-color:#e3eaf0}.gallery-stage{background:#edf4fa;border-color:#dfe8ef}.gallery-arrow{border-color:#d3e1e9;color:#456982}.gallery-arrow:hover{color:#438fc1}.gallery-dot{background:#c9d8e2}.gallery-dot.is-active{background:#4c94c3}.video-lazy{background:linear-gradient(135deg,#35556d,#20384d)}.video-load{background:radial-gradient(ellipse at center,rgba(112,184,214,.22),transparent 55%);color:#f6fbff}.video-play-icon,.video-load:hover .video-play-icon{background:#4f9bc3}.video-lazy:before{color:#d9e9f2}.video-help{color:#8a555b;background:#fff3f2}.footer-main p{color:#d3e0e9}.footer-main a:not(.brand){color:#d9e7ef}.copyright{border-color:#526f84;color:#c0d1dc}.brand-logo{border-color:#a9c9dc}.brand.light .brand-logo{border-color:#d9c08a}
@media(max-width:760px){.links{background:#fff;border-color:#e1e9f0}.page-hero{background-image:linear-gradient(90deg,rgba(245,249,252,.96) 0%,rgba(245,249,252,.87) 70%,rgba(245,249,252,.6) 100%),url('/public/assets/banners/home-banner.png')}.banner-features,.banner-start,.banner-videos,.banner-craft,.banner-resources,.banner-updates,.banner-faq,.banner-contact{background-image:linear-gradient(90deg,rgba(245,249,252,.96) 0%,rgba(245,249,252,.87) 70%,rgba(245,249,252,.6) 100%),url('/public/assets/banners/home-banner.png')}}
/* Compact brand strip above the navigation; use system fonts only. */
.topline{height:auto;min-height:36px;padding:10px 6%;display:flex;align-items:center;justify-content:flex-start;font-family:Arial,'Microsoft YaHei','Noto Sans CJK SC',sans-serif;font-size:12px;font-weight:500;line-height:20px;letter-spacing:.04em;background:#eaf1f8;color:#42637d}
@media(max-width:760px){.topline{min-height:36px;padding:10px 5%;font-size:12px;line-height:16px;white-space:nowrap}}
/* Make the logo-row brand name a single prominent line. */
header.nav .brand{flex:0 0 auto;gap:11px;white-space:nowrap}
header.nav .brand-name{display:block;white-space:nowrap;font-family:Arial,'Microsoft YaHei','Noto Sans CJK SC',sans-serif;font-size:17px;font-weight:700;line-height:1.25;letter-spacing:.02em;color:#29465d}
@media(max-width:760px){header.nav .brand{gap:8px}header.nav .brand-name{font-size:clamp(12px,3.7vw,16px);letter-spacing:0}}
/* Video tutorial cards: two columns on desktop; cover with an overlay play control. */
.video-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%;max-width:none;margin-inline:0;gap:28px;padding-inline:7.5%}
.video-list>article{display:flex;flex-direction:column;justify-self:stretch;min-width:0;width:100%;max-width:none;padding:0;overflow:hidden;background:#fff;border:1px solid #e2eaf1;border-radius:12px;box-shadow:0 10px 26px rgba(43,71,96,.05)}
.video-list>article h3,.video-list>article>p{margin-inline:20px}
.video-list>article h3{margin:18px 20px 8px}
.video-list>article>p{margin:0 20px 18px}
.video-list>article h3{font-size:19px;line-height:1.5;color:#20384d}
.video-list>article>p{color:#6c8092;font-size:13px;line-height:1.75}
.video-list .video-lazy{position:relative;width:100%;aspect-ratio:16/9;margin:0;overflow:hidden;border-radius:0;background-color:#eaf1f7;background-image:var(--video-cover),linear-gradient(135deg,#dfeaf2,#edf4fa);background-position:center;background-size:cover;background-repeat:no-repeat}
.video-list .video-lazy:before{content:none}
.video-list .video-lazy:not([style*="--video-cover"]) {background-image:linear-gradient(135deg,#dfeaf2,#edf4fa)}
.video-list .video-load{position:absolute;inset:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border:0;background:linear-gradient(0deg,rgba(19,42,61,.28),rgba(19,42,61,.03));color:#fff;cursor:pointer;font-size:13px}
.video-list .video-play-icon{width:62px;height:62px;display:grid;place-items:center;padding-left:5px;border:1px solid rgba(255,255,255,.85);border-radius:50%;background:#4b91bf;color:#fff;font-size:24px;box-shadow:0 5px 20px rgba(15,35,50,.28);transition:transform .2s}
.video-list .video-load:hover .video-play-icon{transform:scale(1.08);background:#3479aa}
.video-list .video-lazy iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-pagination{grid-column:1/-1;display:flex;justify-content:center;align-items:center;gap:24px;padding-top:16px;color:#6c8092;font-size:14px}.video-pagination a{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 16px;border:1px solid #d7e3ec;border-radius:7px;background:#fff;color:#397ca7}.video-pagination a:hover{background:#edf5fa;border-color:#9fc2d7}
@media(max-width:760px){.video-list{grid-template-columns:1fr!important;gap:18px}.video-list>article h3{margin:16px 17px 8px}.video-list>article>p{margin:0 17px 16px}.video-pagination{gap:14px;padding-top:8px}}
@media(prefers-reduced-motion:reduce){.workflow-card{transition:none}}