/* BagFlow product page. Shared navigation, forms and other pages keep their styles. */
.bag-page{--bag-green:#2d454f;--bag-soft:#e6eef1;--bag-line:#bacbd2}
.bag-page .eyebrow{font-size:12px;line-height:1.5}
.bag-page .breadcrumbs{margin-bottom:42px}
.bag-hero{padding-block:28px 76px}
.bag-hero-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:54px}
.bag-hero h1{font-size:clamp(48px,5.8vw,86px);line-height:1.02;letter-spacing:-.065em;margin:24px 0;max-width:650px}
.bag-hero h1 em{display:block;color:var(--bag-green)}
.bag-hero .detail-intro{font-size:18px;max-width:530px;margin:0;line-height:1.7}
.bag-actions{display:flex;align-items:center;flex-wrap:wrap;gap:18px 26px;margin-top:30px}
.bag-actions .underlink{margin:0}
.bag-hero figure,.bag-screen{margin:0;min-width:0}
.bag-hero img{display:block;width:100%;height:auto;border:1px solid var(--bag-line)}
.bag-page figcaption{font-size:13px;line-height:1.5;color:#4e6169;margin-top:12px}
.bag-scope{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:32px;padding-top:22px;border-top:1px solid var(--border);font-size:13px;color:#4e6169}
.bag-section{padding-block:72px;border-top:1px solid var(--border)}
.bag-section-head{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:end;margin:28px 0 44px}
.bag-page .bag-section h2{font-size:clamp(34px,4vw,56px);line-height:1.08;letter-spacing:-.045em;max-width:650px}
.bag-section-head>p{max-width:530px;line-height:1.75}
.bag-features{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.bag-feature{border-top:1px solid var(--bag-line);padding-top:20px}
.bag-feature-number{font:13px monospace;color:#526a74}
.bag-feature h3{font-size:28px;line-height:1.15;letter-spacing:-.045em;margin:22px 0 16px;overflow-wrap:anywhere}
.bag-feature p{line-height:1.75;max-width:390px}
.bag-showcase{background:var(--bag-soft)}
.bag-showcase .bag-section{border:0}
.bag-screen-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.bag-screen img{display:block;width:100%;height:auto;border:1px solid var(--bag-line)}
.bag-caption-title{display:block;font-size:17px;color:var(--foreground);font-weight:500;margin-bottom:4px}
.bag-process{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;margin-top:32px}
.bag-process p{margin-top:24px;max-width:580px;line-height:1.75}
.bag-topics{list-style:none;margin:0;padding:0;counter-reset:topics}
.bag-topics li{counter-increment:topics;display:grid;grid-template-columns:35px 1fr;gap:12px;padding:23px 0;border-top:1px solid var(--bag-line)}
.bag-topics li:before{content:'0' counter(topics);font:13px monospace;color:#526a74;padding-top:6px}
.bag-topics h3{font-size:24px;line-height:1.2;letter-spacing:-.035em}
.bag-topics p{margin-top:8px;font-size:16px}
.bag-faq{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px}
.bag-faq h2{margin-top:26px}
.bag-answers article{padding:24px 0;border-top:1px solid var(--border)}
.bag-answers h3{font-size:23px;letter-spacing:-.025em;line-height:1.3;margin-bottom:12px}
.bag-answers p{line-height:1.75}
.bag-page .contact-section h2{font-size:clamp(40px,4.3vw,64px);line-height:1.08}
.bag-page .product-directory{margin-block:54px}
.bag-page .product-directory a[aria-current=page]{border-top:2px solid var(--bag-green)}
@media(max-width:1100px){.bag-hero-grid{gap:32px}.bag-process,.bag-faq{gap:40px}.bag-section-head{gap:32px}.bag-feature h3{font-size:24px}.bag-features{gap:24px}}
@media(max-width:760px){.bag-page .breadcrumbs{margin-bottom:30px}.bag-hero{padding-block:24px 44px}.bag-hero-grid,.bag-section-head,.bag-features,.bag-screen-grid,.bag-process,.bag-faq{grid-template-columns:1fr;gap:30px}.bag-hero h1{font-size:clamp(42px,10.5vw,66px)}.bag-hero .detail-intro{font-size:17px}.bag-scope{margin-top:24px;gap:8px 18px}.bag-section{padding-block:46px}.bag-section-head{margin:22px 0 30px;gap:20px}.bag-page .bag-section h2{font-size:36px}.bag-feature h3{font-size:27px;margin:14px 0 12px}.bag-feature p{max-width:none}.bag-process{margin-top:24px}.bag-faq h2{margin-top:20px}.bag-page .contact-section h2{font-size:42px}.bag-page .header-cta{font-size:12px}.bag-page .product-directory{margin-block:36px}}
@media(max-width:380px){.bag-page .header{gap:12px}.bag-page .logo{font-size:26px}.bag-page .header-cta{padding:9px;gap:6px}.bag-page .header-cta svg{display:none}.bag-actions{align-items:flex-start;flex-direction:column}}

/* Keep the longer BagFlow headline readable in the split hero. */
.bag-hero h1{font-size:clamp(42px,4.6vw,68px);overflow-wrap:break-word}
@media(max-width:760px){.bag-hero h1{font-size:clamp(36px,8.8vw,62px)}}