/* Light surfaces below the hero; brand blue and hero styling stay unchanged. */
.surface-product{background:#f0f2f6;border-bottom:1px solid #dce2eb}
.surface-experience{background:#e8efff;border-bottom:1px solid #d3def5}
.surface-pricing{background:#eef1f5;border-block:1px solid #dce2eb}
.surface-faq{background:#fff}
.surface-product,.surface-experience,.surface-pricing,.surface-faq,.connection-section{--ink:#18263e;--secondary:#4b5c73;--line:#cfd8e7;color:var(--ink)}
.surface-product .proof-copy>p,.surface-product .app-shots figcaption{color:#4b5c73}
.surface-product .app-shots img{box-shadow:0 14px 32px #263a5b12;border:1px solid #d8dfeb}
.surface-product .app-shots figcaption span{color:#294dc4}
.surface-product .proof-note{color:#52627a}
.surface-experience .step{background:transparent;border-color:transparent;transition:background .18s ease,border-color .18s ease,box-shadow .18s ease}
.surface-experience .step:hover{background:#ffffff4d}
.surface-experience .step.active{background:#fff;border-color:#96adeb;box-shadow:0 4px 14px #3159bf08}
.surface-experience .step-num{background:#d7e2fa;color:#405879}
.surface-experience .step.active .step-num{background:#305cf3;color:#fff}
.surface-experience .step p{color:#4b5c73}
.surface-experience .demo-window{background:#fff;border-color:#bdcbea;box-shadow:0 14px 36px #2d4f9710}
.surface-experience .window-bar{background:#f8faff;border-bottom-color:#d5deef}
.surface-experience .demo-foot{background:#f8faff;color:#4b5c73;border-top-color:#d5deef}
.surface-experience .trademark{color:#52627a}
.connection-section{background:#fff}
.connection-section .network{max-width:none;margin:48px 0 0;padding:44px 72px 32px;background:#f0f4fc;border:1px solid #d4deef;border-bottom:0;border-radius:20px 20px 0 0}
.connection-section .network-line>span{color:#45618a}
.connection-section .network-icon.server{background:#fff;border-color:#bacbe6;color:#3159bd;box-shadow:0 4px 12px #2d4f9708}
.connection-section .network-node small{color:#4b5c73}
.connection-section .connection-example{background:#f0f4fc;border:1px solid #d4deef;border-top:0;border-radius:0 0 20px 20px;padding:24px 32px 32px;position:relative;gap:40px}
.connection-section .connection-example:before{content:'';position:absolute;left:32px;right:32px;top:0;height:1px;background:#d4deef}
.connection-section .connection-example code{color:#244675;font-size:13px}
.connection-section .connection-example code span{color:#4b5c73;font-size:11px}
.connection-section .connection-caption{color:#52627a}
.surface-pricing .price-card{background:#fff;border-color:#c4d0e2;box-shadow:0 12px 32px #263a5b08}
.surface-pricing .price-row{border-color:#d9e1ed}
.surface-pricing .annual-saving{background:#e9efff;color:#294dc4!important;border-radius:6px;padding:12px 14px;line-height:1.5}
.surface-pricing .pricing>div>small{color:#52627a}
.surface-faq .faq{padding-top:88px;padding-bottom:88px}
.surface-faq .questions details{border-color:#d5deea}
.surface-faq .questions summary{color:#18263e}
.surface-faq .questions details[open]{background:#f2f5fa;border-radius:8px;padding-inline:18px;margin-inline:-18px}
.surface-faq .questions details p{color:#4b5c73}
@media(max-width:760px){
 .connection-section .network{padding:32px 14px 24px;margin:32px 0 0;border-radius:14px 14px 0 0}
 .connection-section .network-node{min-width:80px;max-width:100px;text-align:center}
 .connection-section .network-node small{font-size:9px;line-height:1.5}
 .connection-section .network-line>span{font-size:7px;letter-spacing:0}
 .connection-section .connection-example{padding:22px 14px 26px;gap:20px;border-radius:0 0 14px 14px}
 .connection-section .connection-example:before{left:16px;right:16px}
 .connection-section .connection-example code{font-size:10px}
 .connection-section .connection-example code span{font-size:10px}
 .surface-faq .faq{padding-top:64px;padding-bottom:64px}
}

body:not(.legal-page)>.nav .brand img:only-child{width:32px;height:36px;display:block}

/* Header shares the hero container edges at each breakpoint. */
body:not(.legal-page)>.nav{padding-inline:max(48px,calc((100vw - 1344px)/2))}
@media(max-width:1100px){body:not(.legal-page)>.nav{padding-inline:32px}}
@media(max-width:760px){body:not(.legal-page)>.nav{padding-inline:24px}}

/* Separate the three reading groups in the hero. */
.hero .tagline{margin-bottom:45px}
.hero h1{margin-bottom:32px}
.hero .hero-sub{margin-bottom:36px}
@media(max-width:760px){
 .hero .tagline{margin-bottom:34px}
 .hero h1{margin-bottom:28px}
 .hero .hero-sub{margin-bottom:32px}
}

/* Footer: related content grouped, legal details on a shared baseline. */
body:not(.legal-page) > footer.wrap{grid-template-columns:minmax(0,1fr) auto;gap:14px 48px;align-items:start;padding-block:40px 28px}
body:not(.legal-page) > footer > a:first-child{grid-column:1;grid-row:1;justify-self:start}
body:not(.legal-page) > footer > p{grid-column:1;grid-row:2;margin:0;font-size:12px;line-height:1.75}
body:not(.legal-page) > footer > a:last-of-type{grid-column:2;grid-row:1/3;align-self:center;font-size:13px;text-align:right}
body:not(.legal-page) > footer .footer-legal{grid-column:1/-1;display:flex;align-items:center;gap:24px;max-width:none;margin-top:18px;padding-top:22px;border-top:1px solid #ffffff30}
body:not(.legal-page) > footer .footer-legal small{order:-1;width:auto;margin-right:auto;font-size:10px;line-height:1.6}
body:not(.legal-page) > footer .footer-legal a{font-size:12px}
@media(max-width:760px){
 body:not(.legal-page) > footer.wrap{grid-template-columns:minmax(0,1fr);gap:14px;padding-block:32px 24px}
 body:not(.legal-page) > footer > a:last-of-type{grid-column:1;grid-row:3;justify-self:start;text-align:left;margin-top:6px}
 body:not(.legal-page) > footer .footer-legal{gap:16px 24px;margin-top:10px;padding-top:20px}
 body:not(.legal-page) > footer .footer-legal small{order:1;flex-basis:100%;margin-right:0;max-width:100%;font-size:10px}
}