/* Layouts for mobile instructions and legal pages; shared primitives live separately. */

.brand { font-size:28px; font-weight:700; letter-spacing:-1px; gap:9px; }
.brand-dot { display:none; }
.w-home-hero,.w-product-hero { background:var(--navy); color:#fff; position:relative; padding:76px 0 106px; }
.w-home-hero:after,.w-product-hero:after { content:''; position:absolute; bottom:-1px; left:0; right:0; height:62px; background:#fff; clip-path:polygon(0 100%,100% 0,100% 100%); pointer-events:none; }
.w-home-hero .eyebrow,.w-product-hero .eyebrow { color:#b4c5e9; }
.w-home-grid,.w-hero-grid { display:grid; grid-template-columns:1fr 1.15fr; align-items:center; gap:70px; }
.w-home-copy h1 { font-size:clamp(49px,4.8vw,68px); margin-top:22px; }
.w-home-copy h1 span,.w-hero-copy h1 span { color:#fff; }
.w-home-copy>p:not(.eyebrow) { color:#e0e7f6; font-size:22px; line-height:1.55; margin:25px 0 31px; max-width:470px; }
.w-home-preview>.eyebrow { margin-bottom:20px; font-size:11px; }
.w-preview-caption { text-align:center; font-size:16px; color:#c3d2ed; margin-top:21px; }
.screenshot-link { border-radius:10px; border-color:#d9e5f7; box-shadow:0 18px 48px #182e5c14; }
.w-home-preview .screenshot-link,.w-hero-visual .screenshot-link { border:1px solid #b7d7fa; box-shadow:0 24px 60px #050d2638; }
.w-tool-band { background:#fff; }
.w-tool { display:grid; grid-template-columns:.85fr 1.15fr; align-items:center; gap:0 90px; padding-top:66px; }
.w-tool-copy { padding-bottom:48px; }
.w-product-name { display:flex; align-items:center; gap:10px; margin:20px 0; color:var(--ink); font-size:16px; font-weight:600; }
.w-product-name img { flex-shrink:0; }
.w-tool h2 { font-size:46px; }
.w-body { font-size:20px; line-height:1.65; margin-top:22px; }
.w-checks { padding:0; list-style:none; display:grid; gap:13px; margin:28px 0 30px; }
.w-checks li { display:flex; align-items:center; gap:13px; font-size:16px; font-weight:500; color:var(--ink); }
.w-checks .icon { flex-shrink:0; width:23px; height:23px; border-radius:50%; padding:4px; background:var(--blue); color:#fff; stroke-width:2.8; }
.w-tool-screen { margin-bottom:45px; }
.w-tool-mobile { grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; border-top:1px solid var(--line); padding:23px 0; font-size:15px; }
.w-tool-mobile .text-link { font-size:15px; }
.w-about { display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:90px; padding-block:82px; }
.w-about h2 { font-size:41px; }
.w-about p { font-size:20px; max-width:510px; }
.w-about .text-link { margin-top:21px; }
.w-product-hero { padding-top:70px; padding-bottom:105px; }
.w-hero-grid { grid-template-columns:1fr 1.14fr; gap:65px; }
.w-hero-copy h1 { font-size:clamp(43px,4.2vw,61px); margin-top:22px; line-height:1.22; }
.w-hero-copy .w-body { color:#e0e7f6; font-size:22px; max-width:485px; margin-top:26px; }
.w-hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:20px; margin-top:30px; }
.w-hero-actions .text-link { color:#fff; border:1px solid #7c8dab; border-radius:4px; padding:14px 18px; min-height:56px; font-size:16px; gap:8px; }
.w-hero-actions .text-link:hover { background:#ffffff0d; text-decoration:none; }
.w-hero-actions .text-link .icon { width:18px; }
.w-product-hero .cta-note { color:#b7c7e3; font-size:12px; margin-top:15px; }
.w-browser-strip { margin-top:32px; }
.w-browser-strip>p { color:#a8bbdd; font-size:11px; letter-spacing:.075em; font-weight:600; }
.w-browser-strip>div { display:flex; flex-wrap:wrap; gap:24px; margin-top:14px; }
.w-browser-strip a { display:flex; align-items:center; gap:10px; font-size:13px; color:#e3ebfb; }
.w-browser-strip a:hover span { text-decoration:underline; text-underline-offset:4px; }
.w-browser-strip img { width:35px; height:35px; object-fit:contain; }
.w-browser-strip .icon { width:15px; }
.w-hero-visual { min-width:0; }
.w-how { padding-block:67px 73px; }
.w-how h2 { text-align:center; font-size:38px; }
.w-how ol { display:grid; grid-template-columns:repeat(3,1fr); list-style:none; padding:0; gap:45px; margin-top:40px; }
.w-how li { display:flex; align-items:flex-start; gap:18px; }
.w-step-number { font-size:14px; font-weight:700; color:#fff; background:var(--blue); display:grid; place-items:center; width:34px; height:34px; flex-shrink:0; border-radius:50%; }
.w-how h3 { font-size:24px; margin-bottom:9px; }
.w-how p { font-size:16px; }
.w-features { background:var(--surface-tint); padding-block:78px 90px; }
.w-section-intro { text-align:center; margin-bottom:78px; }
.w-section-intro h2 { font-size:43px; }
.w-section-intro>p { font-size:21px; margin-top:17px; }
.w-story { display:grid; grid-template-columns:.82fr 1.18fr; align-items:center; gap:90px; }
.w-story+.w-story { margin-top:105px; }
.w-story-copy h3 { font-size:37px; line-height:1.23; margin-top:18px; }
.w-story .w-body { font-size:20px; }
.w-story .w-checks { margin-bottom:0; }
.w-story-reverse { grid-template-columns:1.18fr .82fr; }
.w-story-reverse .w-story-copy { grid-column:2; grid-row:1; }
.w-story-reverse .screenshot-link { grid-column:1; grid-row:1; }
.w-story-link { margin-top:26px; }
.w-browsers { padding-block:80px; }
.w-browsers>h2 { text-align:center; font-size:40px; }
.w-browser-options { display:grid; grid-template-columns:1fr 1fr; gap:90px; margin:45px auto 0; max-width:1040px; }
.w-browser-options article { display:grid; grid-template-columns:48px 1fr; gap:0 20px; align-items:start; }
.w-browser-options img { grid-row:1/5; }
.w-browser-options h3 { font-size:26px; margin:6px 0 14px; }
.w-browser-options p { font-size:17px; grid-column:2; }
.w-browser-options .text-link { grid-column:2; margin-top:20px; }
.w-browser-options .w-browser-note { font-size:13px; margin-top:12px; }
.w-firefox-note { font-size:14px; text-align:center; margin-top:37px; }
.w-closing { text-align:center; background:var(--navy); padding-block:70px; }
.w-closing h2 { color:#fff; font-size:44px; }
.w-closing .button { margin-top:28px; }
.w-closing .cta-note { color:#c0cde4; font-size:13px; margin-top:17px; }
.mobile-hero h1,.support-hero h1 { font-size:64px; font-weight:700; }
.mobile-hero,.support-hero { padding-block:62px; }
.mobile-hero .intro,.support-hero .intro { font-size:20px; }
.library-diagram { background:var(--surface-tint); border:0; border-radius:10px; }
.steps-section { background:var(--surface-tint); border:0; }
.setup-steps p,.desktop-experience>div>p:not(.eyebrow),.support-options p { font-size:18px; }
.support-options article { border-radius:8px; box-shadow:none; background:var(--surface-tint); border:0; }



@media(max-width:1100px) {
    .brand { font-size:25px; }
    .w-home-grid,.w-hero-grid { gap:40px; }
    .w-home-copy h1 { font-size:56px; }
    .w-hero-copy h1 { font-size:49px; }
    .w-home-copy>p:not(.eyebrow),.w-hero-copy .w-body { font-size:20px; }
    .w-tool,.w-story,.w-about { gap:50px; }
    .w-story-copy h3 { font-size:32px; }
    .w-story .w-body { font-size:18px; }
    .w-checks li { font-size:15px; }
    .w-hero-actions { gap:13px; }
    .w-hero-actions .text-link { font-size:14px; padding-inline:14px; }
    .w-hero-actions .button { font-size:16px; padding-inline:20px; }
}
@media(max-width:850px) {
    .w-home-hero,.w-product-hero { padding-block:48px 84px; }
    .w-home-grid,.w-hero-grid { grid-template-columns:1fr; gap:40px; }
    .w-home-copy,.w-hero-copy { max-width:620px; }
    .w-home-copy h1 { font-size:65px; }
    .w-hero-copy h1 { font-size:60px; }
    .w-home-copy>p:not(.eyebrow),.w-hero-copy .w-body { max-width:590px; font-size:22px; }
    .w-home-preview,.w-hero-visual { max-width:670px; width:100%; margin:auto; }
    .w-hero-actions .button,.w-hero-actions .text-link { font-size:17px; }
    .w-tool { grid-template-columns:1fr; padding-top:45px; gap:0; }
    .w-tool-copy { max-width:580px; padding-bottom:30px; }
    .w-tool-screen { max-width:670px; width:100%; margin:0 auto 35px; }
    .w-about { gap:35px; padding-block:60px; }
    .w-about h2 { font-size:36px; }
    .w-about p { font-size:18px; }
    .w-how { padding-block:50px; }
    .w-how ol { gap:22px; }
    .w-how h3 { font-size:22px; }
    .w-how p { font-size:15px; }
    .w-features { padding-block:60px; }
    .w-section-intro { margin-bottom:52px; }
    .w-section-intro h2 { font-size:38px; }
    .w-section-intro>p { font-size:19px; }
    .w-story,.w-story-reverse { grid-template-columns:1fr; gap:30px; }
    .w-story+.w-story { margin-top:65px; }
    .w-story-copy { max-width:610px; }
    .w-story-copy h3 { font-size:36px; }
    .w-story .w-body { font-size:20px; }
    .w-story-reverse .w-story-copy,.w-story-reverse .screenshot-link { grid-column:auto; grid-row:auto; }
    .w-checks li { font-size:16px; }
    .w-browser-options { gap:35px; }
    .w-browser-options article { display:block; }
    .w-browser-options h3 { margin-top:19px; }
}
@media(max-width:600px) {
    .brand { font-size:24px; gap:7px; }
    .w-home-hero,.w-product-hero { padding-block:34px 66px; }
    .w-home-hero:after,.w-product-hero:after { height:30px; }
    .w-home-grid,.w-hero-grid { gap:35px; }
    .w-home-copy h1 { font-size:clamp(39px,10.8vw,61px); margin-top:18px; }
    .w-home-copy>p:not(.eyebrow),.w-hero-copy .w-body { font-size:19px; line-height:1.65; margin-top:23px; }
    .w-home-preview>.eyebrow { font-size:9px; margin-bottom:16px; }
    .w-preview-caption { font-size:14px; margin-top:15px; }
    .w-hero-copy h1 { font-size:clamp(35px,9.8vw,56px); margin-top:18px; }
    .w-hero-actions { margin-top:25px; gap:10px; }
    .w-hero-actions .button,.w-hero-actions .text-link { font-size:14px; min-height:52px; padding:13px 14px; }
    .w-hero-actions .icon { width:16px; }
    .w-browser-strip { margin-top:25px; }
    .w-browser-strip>p { font-size:10px; }
    .w-browser-strip>div { gap:16px; }
    .w-browser-strip a { font-size:11px; gap:8px; }
    .w-browser-strip img { width:30px; height:30px; }
    .w-browser-strip .icon { width:13px; }
    .w-tool { padding-top:36px; }
    .w-tool h2 { font-size:38px; }
    .w-product-name { font-size:13px; margin-block:17px; }
    .w-tool .w-body { font-size:18px; }
    .w-checks { margin-block:24px 27px; gap:12px; }
    .w-checks li { font-size:15px; }
    .w-tool-mobile { justify-content:flex-start; font-size:14px; gap:9px; padding-block:20px; }
    .w-tool-mobile .text-link { font-size:14px; margin-left:31px; }
    .w-about { grid-template-columns:1fr; gap:21px; padding-block:45px; }
    .w-about h2 { font-size:33px; }
    .w-about p { font-size:18px; }
    .w-about .text-link { margin-top:18px; }
    .w-how { padding-block:42px; }
    .w-how h2 { text-align:left; font-size:31px; }
    .w-how ol { grid-template-columns:1fr; gap:26px; margin-top:29px; }
    .w-how p { font-size:16px; }
    .w-features { padding-block:44px; }
    .w-section-intro { text-align:left; margin-bottom:40px; }
    .w-section-intro h2 { font-size:33px; }
    .w-section-intro>p { font-size:18px; }
    .w-story { gap:28px; }
    .w-story+.w-story { margin-top:49px; }
    .w-story-copy h3 { font-size:31px; margin-top:14px; }
    .w-story .w-body { font-size:18px; margin-top:19px; }
    .w-story .w-checks { margin-top:22px; }
    .w-story .w-checks li { font-size:15px; }
    .w-browsers { padding-block:45px; }
    .w-browsers>h2 { text-align:left; font-size:33px; }
    .w-browser-options { grid-template-columns:1fr; gap:33px; margin-top:33px; }
    .w-browser-options article { display:grid; grid-template-columns:40px 1fr; gap:0 15px; }
    .w-browser-options h3 { font-size:24px; margin-top:3px; }
    .w-browser-options p { font-size:16px; }
    .w-browser-options img { width:40px; height:40px; }
    .w-browser-options .text-link { font-size:15px; }
    .w-firefox-note { text-align:left; font-size:13px; margin-top:30px; }
    .w-closing { padding-block:47px; }
    .w-closing h2 { font-size:33px; }
    .mobile-hero h1,.support-hero h1 { font-size:clamp(40px,11vw,59px); }
    .mobile-hero,.support-hero { padding-block:35px; }
    .mobile-hero .intro,.support-hero .intro { font-size:18px; }
    .setup-steps p,.desktop-experience>div>p:not(.eyebrow),.support-options p { font-size:16px; }


}