:root{--how-dark:#062719;--how-green:#0b6b2b;--how-bright:#39cf4a;--how-cream:#fbf8f1;--how-line:#dfe4dc;--how-ink:#0d150f;--how-muted:#59665d}
.how-page{background:#fbfaf6;color:var(--how-ink);font-family:Inter,system-ui,sans-serif}.how-page .shell{width:min(1120px,calc(100% - 48px));margin-inline:auto}.how-page .site-header{position:relative;z-index:90}.how-page .desktop-nav a[aria-current=page]{color:#0b6b2b}.how-page .mobile-menu-panel,.how-page .mobile-menu-backdrop{display:none}
.how-hero{display:grid;grid-template-columns:1.03fr .97fr;gap:74px;align-items:center;padding:88px 0 102px}.eyebrow,.mini-kicker{font-size:12px;letter-spacing:.14em;font-weight:900;color:#08712e}.how-hero h1{font-size:clamp(58px,6.4vw,88px);line-height:.92;letter-spacing:-.07em;margin:18px 0 28px;max-width:720px}.how-hero h1 span{color:#0b6b25}.how-lead{font-size:19px;line-height:1.62;color:#48564d;max-width:690px}.hero-actions{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}.hero-proof{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:28px;color:#536158;font-weight:800}.hero-proof span{background:#fff;border:1px solid #dde4dd;padding:8px 12px;border-radius:999px;font-size:13px}.hero-proof b{color:#9aa49d}
.hero-flow-card{background:#fff;border:1px solid #dfe4df;border-radius:30px;padding:28px;box-shadow:0 32px 80px rgba(8,40,20,.10);transform:rotate(1deg)}.flow-window-head,.flow-seller,.flow-grid,.checkout-line,.checkout-total{display:flex;justify-content:space-between;gap:14px;align-items:center}.flow-window-head{padding-bottom:16px;border-bottom:1px solid #e5e8e4}.flow-window-head span{font-size:12px;padding:7px 10px;border-radius:999px;background:#e8f6ec;color:#087a3d;font-weight:900}.flow-seller{justify-content:flex-start;margin-top:22px}.flow-seller>div{display:grid;gap:3px;flex:1}.flow-seller small{color:#7a847d}.fake-avatar{display:grid;place-items:center;width:44px;height:44px;border-radius:999px;background:#0b4c39;color:#fff;font-weight:900}.verified-dot{display:grid;place-items:center;width:28px;height:28px;border-radius:999px;background:#0b8a47;color:#fff}.flow-badge{display:inline-flex;margin-top:22px;padding:7px 10px;background:#fff0d9;border:1px solid #f1c77c;border-radius:999px;font-size:12px;font-weight:900;color:#b86b00}.hero-flow-card h2{font-size:31px;line-height:1.05;letter-spacing:-.045em;margin:18px 0}.flow-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.flow-grid>div{background:#f7f4ef;border-radius:16px;padding:14px;display:grid;gap:4px}.flow-grid small{color:#777}.flow-button{margin-top:16px;padding:15px;text-align:center;background:#0b503c;color:#fff;border-radius:13px;font-weight:900}.flow-steps{display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr auto;align-items:center;margin-top:26px}.flow-steps span{display:grid;place-items:center;width:28px;height:28px;border-radius:999px;background:#eef1ee;color:#7a857d;font-weight:900;font-size:12px}.flow-steps span.done{background:#e2f4e8;color:#08723a}.flow-steps span.current{background:#fff0dc;color:#c86e00;border:2px solid #e68b00}.flow-steps i{height:2px;background:#d9dfda}.flow-labels{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:7px;text-align:center;color:#7c867f}
.how-section{padding:92px 0}.intro-section{background:#fff}.centered-copy{text-align:center}.intro-head,.section-heading{max-width:820px;margin:auto}.intro-head h2,.how-section h2{font-size:clamp(44px,5vw,66px);line-height:1.01;letter-spacing:-.055em;margin:14px 0 18px}.intro-head>p:last-child,.section-heading>p:last-child{font-size:17px;line-height:1.62;color:#5a675f}.quick-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:44px}.quick-steps article{background:#fbfaf6;border:1px solid #e1e5df;border-radius:22px;padding:22px}.quick-steps article>span{display:grid;place-items:center;width:38px;height:38px;border-radius:13px;background:#eaf5e7;color:#096c2c;font-weight:900}.quick-steps h3{font-size:20px;margin:18px 0 7px}.quick-steps p{margin:0;line-height:1.5;color:#5d685f}
.journey-section{display:grid;grid-template-columns:.9fr 1.1fr;gap:74px;align-items:center}.journey-section.reverse{grid-template-columns:1.05fr .95fr}.journey-copy>p:not(.mini-kicker){font-size:17px;line-height:1.65;color:#58655d}.check-list{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:12px}.check-list li{position:relative;padding-left:30px;font-weight:750}.check-list li:before{content:"✓";position:absolute;left:0;color:#087a3e;font-weight:900}.builder-demo{background:#fff;border:1px solid #e0e4df;border-radius:28px;padding:26px;box-shadow:0 26px 64px rgba(10,40,20,.08)}.builder-top{display:flex;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid #e5e8e4}.builder-top strong{color:#0a7b3f;font-size:13px}.builder-types{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:20px 0}.builder-types span{padding:10px 8px;border-radius:12px;background:#f4f3ef;text-align:center;font-size:12px;font-weight:800}.builder-types span.active{background:#e4f5e7;color:#08733a}.builder-demo label{display:block;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;margin:16px 0 7px;color:#657168}.builder-input,.builder-list{border:1px solid #dde1dd;border-radius:14px;padding:14px;background:#fcfcfa}.builder-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.builder-list{display:grid;gap:8px}.builder-list span{font-size:14px}.builder-publish{margin-top:20px;background:#096f39;color:#fff;text-align:center;padding:14px;border-radius:13px;font-weight:900}
.dark-section{background:var(--how-dark);color:#fff}.light-copy h2{color:#fff}.light-copy>p:not(.mini-kicker){color:#c8d6cd}.light-list li{color:#fff}.light-list li:before{color:#55db66}.buyer-offer-demo{background:#fff;color:#101510;border-radius:28px;padding:24px;box-shadow:0 28px 70px rgba(0,0,0,.18)}.offer-photo-placeholder{position:relative;height:260px;border-radius:20px;background:linear-gradient(135deg,#e8f1e9,#f6f2ea);overflow:hidden}.offer-photo-placeholder>span{position:absolute;left:14px;top:14px;z-index:2;padding:7px 9px;border-radius:999px;background:#e8f4ff;color:#0b63c6;font-size:11px;font-weight:900}.phone-shape{position:absolute;width:120px;height:210px;border-radius:22px;background:#101a18;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-14deg);padding:8px;box-shadow:0 18px 30px rgba(0,0,0,.22)}.phone-shape>div{height:100%;border-radius:16px;background:linear-gradient(160deg,#4fc7ee,#2f82d5 45%,#133863)}.buyer-seller{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;margin-top:18px}.buyer-seller>span{display:grid;place-items:center;width:42px;height:42px;border-radius:999px;background:#0b4f3b;color:#fff;font-weight:900}.buyer-seller>div{display:grid}.buyer-seller small{color:#7b827d}.buyer-seller b{display:grid;place-items:center;width:26px;height:26px;border-radius:999px;background:#0b8b4a;color:#fff}.buyer-offer-demo h3{font-size:28px;line-height:1.05;letter-spacing:-.04em;margin:18px 0}.buyer-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}.buyer-stats span{display:grid;background:#f5f2ec;padding:13px;border-radius:14px}.buyer-stats small{color:#777}.buyer-buy{margin-top:14px;background:#084d3b;color:#fff;text-align:center;padding:14px;border-radius:12px;font-weight:900}.secure-line{display:block;text-align:center;margin-top:9px;color:#6d7a72;font-weight:700}
.checkout-section .section-heading{margin-bottom:42px}.checkout-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:24px}.checkout-card,.checkout-points article{background:#fff;border:1px solid #e0e4df;border-radius:24px}.checkout-card{padding:28px}.checkout-head{display:flex;justify-content:space-between;align-items:end;padding-bottom:15px;border-bottom:1px solid #e5e7e2}.checkout-head span{font-size:12px;letter-spacing:.08em;color:#6b746e}.checkout-head strong{font-size:24px}.checkout-line{padding:16px 0;border-bottom:1px solid #ecece8}.optional-fee>div{display:grid;gap:4px}.optional-fee small{color:#7b837e;font-size:12px}.checkout-divider{height:1px;background:#dcded9;margin-top:2px}.checkout-total{font-size:26px;padding-top:16px}.checkout-total strong{font-size:34px}.checkout-note{margin-top:22px;background:#f0f8f2;border:1px solid #d3e8d7;border-radius:17px;padding:16px;display:grid;gap:5px}.checkout-note span{font-size:13px;color:#59675e;line-height:1.45}.checkout-points{display:grid;gap:12px}.checkout-points article{padding:20px;display:flex;gap:14px}.checkout-points article>span{display:grid;place-items:center;flex:0 0 38px;height:38px;border-radius:13px;background:#eaf5e7;color:#0a6e2e;font-weight:900}.checkout-points h3{margin:0 0 5px}.checkout-points p{margin:0;color:#5e695f;line-height:1.5}
.fulfilment-section{background:#f3f7f2}.fulfilment-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:42px}.fulfilment-grid article{background:#fff;border:1px solid #dfe5df;border-radius:24px;padding:24px}.offer-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:#e8f5e8;color:#0b6e2c;font-size:22px;font-weight:900}.fulfilment-grid h3{font-size:22px;margin:18px 0 8px}.fulfilment-grid p{color:#59665e;line-height:1.55}.fulfilment-grid small{display:block;margin-top:18px;padding-top:14px;border-top:1px solid #e7eae5;color:#7a847d;line-height:1.45}
.order-section{display:grid;grid-template-columns:.84fr 1.16fr;gap:70px;align-items:center}.order-copy>p:not(.mini-kicker){font-size:17px;line-height:1.65;color:#59665d}.order-features{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}.order-features span{padding:9px 11px;background:#fff;border:1px solid #dde2dc;border-radius:999px;font-size:13px;font-weight:800}.order-demo{background:#fff;border:1px solid #dfe4df;border-radius:26px;padding:24px;box-shadow:0 26px 64px rgba(10,40,20,.08)}.order-demo-title{display:flex;justify-content:space-between;gap:14px;align-items:center;padding-bottom:18px;border-bottom:1px solid #e6e8e4}.order-demo-title>div{display:grid;gap:4px}.order-demo-title small{color:#7a837d}.order-demo-title>span{padding:8px 10px;border-radius:999px;background:#fff0dc;color:#c56e00;font-size:12px;font-weight:900}.order-timeline{display:grid;margin-top:8px}.order-node{position:relative;display:grid;grid-template-columns:auto 1fr;gap:14px;padding:14px 0}.order-node:not(:last-child):after{content:"";position:absolute;left:16px;top:47px;bottom:-9px;width:2px;background:#d9dfda}.order-node>span{z-index:1;display:grid;place-items:center;width:34px;height:34px;border-radius:999px;background:#eef1ee;color:#7d8981;font-weight:900}.order-node.done>span{background:#e3f5e8;color:#08753b}.order-node.current>span{background:#fff2dc;color:#d37600;border:2px solid #ed8c00}.order-node div{display:grid;gap:4px}.order-node small{color:#6a756d}
.completion-section{background:#062719;color:#fff}.completion-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:center}.completion-section h2{color:#fff}.completion-section p{color:#cad8cf;line-height:1.65;font-size:17px}.completion-path{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:12px;align-items:center}.completion-path div{background:#123524;border:1px solid #2a4b37;border-radius:20px;padding:20px;display:grid;gap:10px;min-height:130px}.completion-path span{display:grid;place-items:center;width:34px;height:34px;border-radius:999px;background:#49d45a;color:#062719;font-weight:900}.completion-path i{width:34px;height:2px;background:#3c5b47}
.support-section-how .section-heading{max-width:850px}.support-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}.support-cards article{background:#fff;border:1px solid #e0e4df;border-radius:22px;padding:24px}.support-cards article>span{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:#edf6ec;font-weight:900}.support-cards h3{margin:18px 0 7px}.support-cards p{margin:0;color:#59665d;line-height:1.5}.trust-link{text-align:center;margin-top:28px}.trust-link a{font-weight:900;color:#08713a}.how-final-cta{margin-bottom:90px}.how-page .footer{margin-top:0}.how-page .footer-inner{grid-template-columns:.8fr 1.8fr}.how-page .footer-nav{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.quick-steps{grid-template-columns:repeat(3,1fr)}.fulfilment-grid{grid-template-columns:repeat(2,1fr)}.how-hero,.journey-section,.journey-section.reverse,.order-section,.completion-grid{grid-template-columns:1fr}.hero-flow-card{transform:none}.checkout-grid{grid-template-columns:1fr}.completion-path{grid-template-columns:1fr}.completion-path i{width:2px;height:26px;justify-self:center}.how-page .desktop-nav,.how-page .nav-actions{display:none}.how-page .mobile-menu-toggle{display:inline-flex;margin-left:auto}.how-page .mobile-menu-panel{position:fixed;top:0;right:0;width:min(86vw,340px);height:100vh;z-index:200;display:flex;flex-direction:column;gap:10px;padding:22px;background:#fffdf8;border-left:1px solid rgba(16,21,16,.12);box-shadow:-24px 0 70px rgba(4,18,8,.18);transform:translateX(108%);transition:transform .22s ease}.how-page.mobile-menu-open .mobile-menu-panel{transform:translateX(0)}.how-page .mobile-menu-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.how-page .mobile-menu-head img{height:32px;width:auto}.how-page .mobile-menu-close{width:40px;height:40px;border-radius:999px;border:1px solid rgba(16,21,16,.14);background:#fff;color:#101510;font-size:22px;font-weight:900}.how-page .mobile-menu-panel a{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 14px;border-radius:16px;background:#f6f3ee;color:#101510;font-size:15px;font-weight:900}.how-page .mobile-menu-panel a.mobile-primary{justify-content:center;background:#063f12;color:#fff}.how-page .mobile-menu-panel a.mobile-muted{background:#fff;border:1px solid rgba(16,21,16,.12)}.how-page .mobile-menu-backdrop{position:fixed;inset:0;z-index:190;background:rgba(3,12,6,.28);backdrop-filter:blur(2px)}.how-page.mobile-menu-open .mobile-menu-backdrop{display:block}.how-page .footer-inner{grid-template-columns:1fr}.how-page .footer-nav{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.how-page .shell{width:calc(100% - 28px)}.how-page .site-header{width:calc(100% - 28px);position:sticky;top:0;z-index:90;background:rgba(255,253,248,.96);backdrop-filter:blur(14px)}.how-page .brand img{width:132px}.how-hero{padding:42px 0 64px;gap:36px}.how-hero h1{font-size:clamp(46px,13.5vw,60px);text-wrap:balance}.how-lead{font-size:17px}.hero-proof{gap:7px}.hero-proof b{display:none}.hero-proof span{font-size:12px}.hero-flow-card{padding:18px;border-radius:22px}.hero-flow-card h2{font-size:25px}.flow-grid,.buyer-stats,.builder-row{grid-template-columns:1fr}.flow-labels{font-size:10px}.how-section{padding:64px 0}.intro-head h2,.how-section h2{font-size:clamp(36px,10.5vw,47px);text-wrap:balance}.quick-steps{grid-template-columns:1fr;margin-top:30px}.journey-section,.order-section,.completion-grid{gap:34px}.builder-demo,.buyer-offer-demo,.checkout-card,.order-demo{padding:18px}.builder-types{grid-template-columns:1fr 1fr}.offer-photo-placeholder{height:230px}.buyer-offer-demo h3{font-size:25px}.fulfilment-grid,.support-cards{grid-template-columns:1fr}.checkout-head{align-items:flex-start;gap:10px;flex-direction:column}.checkout-total strong{font-size:30px}.completion-path div{min-height:auto}.how-page .footer-nav{grid-template-columns:1fr}.how-final-cta{margin-bottom:50px}}

/* Polished product-led How It Works updates */
.digital-hero-card{transform:rotate(.4deg)}
.digital-preview{margin:18px 0 4px;border:1px solid #dfe5df;border-radius:20px;overflow:hidden;background:#f7faf7;box-shadow:inset 0 0 0 1px rgba(255,255,255,.65)}
.preview-toolbar{height:38px;display:flex;align-items:center;gap:7px;padding:0 12px;background:#fff;border-bottom:1px solid #e3e8e3;color:#5f6c63;font-size:11px;font-weight:800}
.preview-toolbar i{width:7px;height:7px;border-radius:50%;background:#ccd5ce}.preview-toolbar i:first-child{background:#5ecb70}.preview-toolbar span{margin-left:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.preview-layout{display:grid;grid-template-columns:74px 1fr;min-height:210px}.preview-sidebar{background:#0b2d1e;padding:18px 12px;display:grid;align-content:start;gap:15px}.preview-sidebar b{height:8px;border-radius:99px;background:#5a7969;opacity:.72}.preview-sidebar b:first-child{background:#56d66a;width:80%}.preview-main{padding:18px;display:grid;gap:14px}.preview-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.preview-metrics span{height:46px;border-radius:11px;background:#fff;border:1px solid #e1e6e1}.preview-chart{height:84px;border-radius:14px;background:#fff;border:1px solid #e1e6e1;display:flex;align-items:end;gap:7px;padding:14px 13px}.preview-chart i{flex:1;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,#4ed45c,#0f7040)}.preview-chart i:nth-child(1){height:34%}.preview-chart i:nth-child(2){height:56%}.preview-chart i:nth-child(3){height:42%}.preview-chart i:nth-child(4){height:76%}.preview-chart i:nth-child(5){height:62%}.preview-chart i:nth-child(6){height:88%}.preview-table{display:grid;gap:7px}.preview-table b{height:8px;border-radius:99px;background:#dfe6df}.preview-table b:nth-child(2){width:82%}.preview-table b:nth-child(3){width:67%}.preview-table b:nth-child(4){width:74%}
.digital-badge{background:#eaf6ff;border-color:#badcf7;color:#0a65b7}
.builder-types button{appearance:none;border:0;font:inherit;padding:10px 8px;border-radius:12px;background:#f4f3ef;text-align:center;font-size:12px;font-weight:800;color:#38423c;cursor:pointer;transition:.16s ease}.builder-types button:hover{background:#ecefe9}.builder-types button.active{background:#e4f5e7;color:#08733a;box-shadow:inset 0 0 0 1px #bde0c4}.builder-types button:focus-visible{outline:3px solid rgba(45,190,75,.28);outline-offset:2px}
.product-photo-stage{position:relative;height:280px;border-radius:20px;overflow:hidden;background:#edf1ed;border:1px solid #e0e6e1}.product-offer-pill{position:absolute;z-index:2;left:14px;top:14px;padding:7px 9px;border-radius:999px;background:#e8f4ff;color:#0b63c6;font-size:11px;font-weight:900}.headphones-render{width:100%;height:100%;display:block}

@media(max-width:980px){.digital-hero-card{transform:none}}
@media(max-width:640px){.preview-layout{grid-template-columns:58px 1fr;min-height:175px}.preview-main{padding:12px;gap:10px}.preview-chart{height:68px;padding:10px}.preview-metrics span{height:38px}.product-photo-stage{height:220px}.builder-types{gap:7px}.builder-types button{min-height:42px}}

.audience-switch{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-top:12px}.audience-switch a{display:grid;gap:5px;padding:20px 22px;border:1px solid #dfe4df;border-radius:20px;background:#fff;color:#0d150f;box-shadow:0 12px 34px rgba(10,40,20,.05)}.audience-switch strong{font-size:20px}.audience-switch span{color:#657168;font-size:14px}.audience-switch a:hover{border-color:#9fcaaa;transform:translateY(-1px)}
@media(max-width:640px){.audience-switch{grid-template-columns:1fr;padding-top:0}}

/* Audience-separated journey update */
.audience-switch-wrap{padding:20px 0 12px;background:#fbfaf6;position:sticky;top:0;z-index:30}
.audience-switch{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:0}
.audience-tab{appearance:none;text-align:left;display:grid;gap:5px;padding:20px 22px;border:1px solid #dfe4df;border-radius:20px;background:#fff;color:#0d150f;box-shadow:0 12px 34px rgba(10,40,20,.05);cursor:pointer;font:inherit;transition:.18s ease}
.audience-tab strong{font-size:20px}.audience-tab span{color:#657168;font-size:14px}.audience-tab:hover{border-color:#9fcaaa;transform:translateY(-1px)}
.audience-tab.active{background:#0a6a2d;border-color:#0a6a2d;color:#fff;box-shadow:0 18px 42px rgba(8,92,39,.18)}.audience-tab.active span{color:#dff5e4}
.audience-panel[hidden]{display:none!important}.audience-panel.active{display:block}
.real-product-photo{margin:18px 0 4px;border:1px solid #dfe5df;border-radius:20px;overflow:hidden;background:#f4f5f1;aspect-ratio:16/9}.real-product-photo img,.real-stage img{width:100%;height:100%;object-fit:cover;display:block}.product-hero-card{transform:rotate(.35deg)}
.real-stage{background:#f4f5f1}.seller-share-demo{display:grid;gap:22px}.share-link-card{background:#fff;color:#0d150f;border-radius:24px;padding:26px;display:grid;gap:10px;box-shadow:0 24px 60px rgba(0,0,0,.16)}.share-link-card small{font-size:11px;letter-spacing:.1em;color:#657168;font-weight:900}.share-link-card strong{font-size:22px;overflow-wrap:anywhere}.share-link-card span{justify-self:start;padding:7px 10px;border-radius:999px;background:#e8f6ec;color:#087a3d;font-size:12px;font-weight:900}.share-channels{display:flex;flex-wrap:wrap;gap:10px}.share-channels span{padding:10px 14px;border:1px solid #315342;border-radius:999px;background:#123524;color:#fff;font-weight:800;font-size:13px}
.buyer-final .cta-spark{color:#fff}.seller-steps article,.buyer-steps article{min-height:178px}
@media(max-width:980px){.audience-switch-wrap{position:relative;top:auto}.product-hero-card{transform:none}}
@media(max-width:640px){.audience-switch{grid-template-columns:1fr}.audience-tab{padding:17px 18px}.audience-switch-wrap{padding:10px 0}.real-product-photo{aspect-ratio:4/3}.seller-steps article,.buyer-steps article{min-height:auto}.share-link-card strong{font-size:17px}}

/* Final navigation + journey-switch polish */
@media (min-width:981px){
  .how-page .mobile-menu-toggle,
  .how-page .mobile-menu-panel,
  .how-page .mobile-menu-backdrop{display:none!important}
  .how-page .desktop-nav{display:flex!important}
  .how-page .nav-actions{display:flex!important}
}

/* Keep the selector useful while reading on smaller screens. */
@media (max-width:980px){
  .how-page .mobile-menu-toggle{display:inline-flex!important;margin-left:auto}
  .audience-switch-wrap{
    position:sticky;
    top:68px;
    z-index:80;
    padding:8px 0;
    background:rgba(251,250,246,.96);
    border-bottom:1px solid rgba(15,45,27,.07);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    box-shadow:0 10px 24px rgba(7,38,19,.05)
  }
  .audience-switch{grid-template-columns:1fr 1fr;gap:8px}
  .audience-tab{min-width:0;padding:12px 13px;border-radius:15px;box-shadow:none}
  .audience-tab strong{font-size:15px;line-height:1.15}
  .audience-tab span{font-size:11px;line-height:1.25}
  .audience-panel{scroll-margin-top:160px}
}

@media (max-width:640px){
  .how-page .site-header{min-height:68px;padding-top:10px;padding-bottom:10px}
  .how-page .mobile-menu-toggle{width:40px;height:40px;flex:0 0 40px}
  .audience-switch-wrap{top:68px}
  .audience-switch{grid-template-columns:1fr 1fr;gap:7px}
  .audience-tab{padding:11px 10px;min-height:64px;align-content:center}
  .audience-tab strong{font-size:14px}
  .audience-tab span{font-size:10px}
  .how-hero{padding-top:34px;padding-bottom:48px}
  .how-hero h1{font-size:clamp(42px,12vw,55px);line-height:.98}
  .how-lead{line-height:1.55}
  .hero-actions{display:grid;grid-template-columns:1fr;gap:10px}
  .hero-actions .button{width:100%;justify-content:center}
  .how-section{padding:54px 0}
  .intro-head,.section-heading,.centered-copy{max-width:100%}
  .intro-head h2,.how-section h2{font-size:clamp(32px,9vw,42px);line-height:1.04;letter-spacing:-.045em}
  .intro-head>p:not(.mini-kicker),.section-heading>p:not(.mini-kicker),.journey-copy>p:not(.mini-kicker){font-size:16px;line-height:1.58}
  .quick-steps article{padding:22px;border-radius:20px}
  .journey-section,.order-section,.completion-grid{gap:28px}
  .builder-demo,.buyer-offer-demo,.checkout-card,.order-demo{border-radius:20px;padding:16px}
  .fulfilment-grid article,.support-cards article{padding:21px;border-radius:19px}
  .final-cta{border-radius:24px;padding-left:20px;padding-right:20px}
  .how-final-cta h2{font-size:clamp(31px,9vw,41px)}
  .how-page .footer-inner,.how-page .footer-bottom{width:calc(100% - 28px)}
}

/* Header alignment + mobile menu polish */
.how-page .site-header{
  width:min(1120px,calc(100% - 48px));
  min-height:96px;
  margin-inline:auto;
  display:grid;
  grid-template-columns:190px minmax(0,1fr) 230px;
  align-items:center;
  padding:0;
}
.how-page .brand{
  justify-self:start;
  display:inline-flex;
  align-items:center;
  line-height:0;
}
.how-page .brand img{
  width:148px;
  height:auto;
  display:block;
}
.how-page .desktop-nav{
  justify-self:center;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:54px;
}
.how-page .desktop-nav a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  line-height:1;
}
.how-page .nav-actions{
  justify-self:end;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:16px;
  min-height:52px;
}
.how-page .nav-login,
.how-page .nav-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  white-space:nowrap;
}
.how-page .nav-cta{
  min-height:50px;
  padding:0 26px;
  border-radius:999px;
}
.how-page .mobile-menu-toggle{
  width:42px;
  height:42px;
  padding:0;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(13,21,15,.14);
  border-radius:999px;
  background:#fff;
  color:#0d150f;
  box-shadow:0 6px 18px rgba(10,40,20,.06);
}
.how-page .mobile-menu-toggle svg{
  width:19px;
  height:19px;
  display:block;
  fill:none;
}
.how-page .mobile-menu-toggle svg path{
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
}

@media (max-width:980px){
  .how-page .site-header{
    width:calc(100% - 28px);
    min-height:72px;
    grid-template-columns:1fr auto;
    padding:8px 0;
  }
  .how-page .brand img{width:140px}
  .how-page .mobile-menu-toggle{
    justify-self:end;
    margin-left:0!important;
  }
}

@media (max-width:640px){
  .how-page .site-header{
    width:calc(100% - 28px);
    min-height:68px;
    padding:7px 0;
  }
  .how-page .brand img{width:136px}
  .how-page .mobile-menu-toggle{
    width:40px;
    height:40px;
    flex:0 0 40px;
  }
  .how-page .mobile-menu-toggle svg{width:18px;height:18px}
}

/* 2026-08-20 completion pass: mobile containment + header/menu consistency */
html,
body.how-page{
  width:100%;
  max-width:100%;
  overflow-x:clip;
}
.how-page *,
.how-page *::before,
.how-page *::after{
  box-sizing:border-box;
}
.how-page main,
.how-page section,
.how-page .shell,
.how-page .audience-panel,
.how-page .journey-section,
.how-page .order-section,
.how-page .completion-grid,
.how-page .builder-demo,
.how-page .seller-share-demo,
.how-page .share-link-card,
.how-page .hero-flow-card{
  min-width:0;
  max-width:100%;
}
.how-page img,
.how-page svg{
  max-width:100%;
}

/* Desktop: exactly one navigation system. */
@media (min-width:981px){
  .how-page .site-header{
    width:min(1120px,calc(100% - 48px));
    grid-template-columns:180px minmax(0,1fr) 240px;
    column-gap:24px;
  }
  .how-page .desktop-nav{
    display:flex!important;
    justify-self:center;
  }
  .how-page .nav-actions{
    display:flex!important;
    justify-self:end;
  }
  .how-page .mobile-menu-toggle,
  .how-page .mobile-menu-panel,
  .how-page .mobile-menu-backdrop{
    display:none!important;
  }
}

/* Tablet/mobile: hide desktop links completely and show only logo + menu button. */
@media (max-width:980px){
  .how-page .site-header{
    position:relative;
    width:calc(100% - 28px);
    max-width:1120px;
    min-height:70px;
    margin-inline:auto;
    display:grid;
    grid-template-columns:minmax(0,1fr) 44px;
    align-items:center;
    gap:12px;
    padding:8px 0;
  }
  .how-page .desktop-nav,
  .how-page .nav-actions{
    display:none!important;
  }
  .how-page .brand{
    min-width:0;
    overflow:hidden;
  }
  .how-page .brand img{
    width:140px;
    max-width:100%;
    height:auto;
  }
  .how-page .mobile-menu-toggle{
    display:inline-grid!important;
    place-items:center;
    justify-self:end;
    width:42px;
    height:42px;
    min-width:42px;
    margin:0!important;
    padding:0;
    border:1px solid rgba(13,21,15,.14);
    border-radius:50%;
    background:#fff;
    color:#0d150f;
    box-shadow:0 7px 20px rgba(10,40,20,.08);
  }
  .how-page .mobile-menu-toggle svg{
    width:18px;
    height:18px;
    display:block;
  }
  .how-page .mobile-menu-panel{
    position:fixed;
    top:0;
    right:0;
    z-index:220;
    display:flex!important;
    flex-direction:column;
    width:min(88vw,350px);
    max-width:calc(100vw - 24px);
    height:100dvh;
    padding:20px;
    gap:9px;
    background:#fffdf8;
    border-left:1px solid rgba(16,21,16,.10);
    box-shadow:-24px 0 70px rgba(4,18,8,.20);
    transform:translate3d(110%,0,0);
    transition:transform .22s ease;
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .how-page.mobile-menu-open .mobile-menu-panel,
  body.mobile-menu-open .mobile-menu-panel{
    transform:translate3d(0,0,0);
  }
  .how-page .mobile-menu-backdrop{
    position:fixed;
    inset:0;
    z-index:210;
    display:block!important;
    background:rgba(3,12,6,.30);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s ease,visibility .2s ease;
  }
  body.mobile-menu-open .mobile-menu-backdrop{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .how-page .mobile-menu-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:8px;
  }
  .how-page .mobile-menu-head img{
    width:138px;
    height:auto;
  }
  .how-page .mobile-menu-close{
    flex:0 0 40px;
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border:1px solid rgba(16,21,16,.14);
    border-radius:50%;
    background:#fff;
    color:#101510;
    font-size:22px;
    line-height:1;
    cursor:pointer;
  }
  .how-page .mobile-menu-panel>a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:50px;
    width:100%;
    padding:0 14px;
    border-radius:15px;
    background:#f7f5f0;
    color:#101510;
    text-decoration:none;
    font-size:15px;
    font-weight:850;
  }
  .how-page .mobile-menu-panel>a.mobile-muted{
    background:#fff;
    border:1px solid rgba(16,21,16,.11);
  }
  .how-page .mobile-menu-panel>a.mobile-primary{
    justify-content:center;
    background:#075b21;
    color:#fff;
    border-color:#075b21;
  }

  /* Sticky journey switch, without widening the viewport. */
  .audience-switch-wrap{
    position:sticky;
    top:0;
    z-index:100;
    width:100%;
    max-width:100vw;
    overflow:hidden;
  }
  .audience-switch-wrap .shell{
    width:calc(100% - 28px);
  }
  .audience-switch{
    width:100%;
    min-width:0;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
  .audience-tab{
    width:100%;
    min-width:0;
    overflow:hidden;
  }
  .audience-tab strong,
  .audience-tab span{
    min-width:0;
    overflow-wrap:anywhere;
  }

  /* Prevent cards/content from creating horizontal scroll. */
  .how-hero,
  .journey-section,
  .journey-section.reverse,
  .order-section,
  .completion-grid,
  .checkout-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .quick-steps,
  .fulfilment-grid,
  .support-cards{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .builder-row,
  .flow-grid,
  .buyer-stats{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
  .builder-types{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .share-link-card strong,
  .flow-seller,
  .order-demo-title,
  .checkout-head,
  .checkout-line,
  .checkout-total{
    min-width:0;
  }
  .share-link-card strong,
  .hero-flow-card h2,
  .journey-copy h2,
  .order-copy h2,
  .intro-head h2,
  .section-heading h2{
    overflow-wrap:anywhere;
  }
  .dark-section{
    overflow:hidden;
  }
}

@media (max-width:640px){
  .how-page .shell{
    width:calc(100% - 28px);
  }
  .how-page .site-header{
    width:calc(100% - 28px);
    grid-template-columns:minmax(0,1fr) 40px;
    min-height:66px;
    padding:7px 0;
  }
  .how-page .brand img{width:136px}
  .how-page .mobile-menu-toggle{
    width:40px;
    height:40px;
    min-width:40px;
  }
  .how-hero{
    padding-top:34px;
    gap:34px;
  }
  .how-hero h1{
    max-width:100%;
    font-size:clamp(42px,12.2vw,54px);
    letter-spacing:-.055em;
  }
  .hero-flow-card{
    width:100%;
    padding:16px;
    border-radius:22px;
  }
  .audience-switch-wrap .shell{
    width:calc(100% - 20px);
  }
  .audience-switch{
    gap:6px;
  }
  .audience-tab{
    min-height:62px;
    padding:10px 9px;
    border-radius:14px;
  }
  .audience-tab strong{font-size:13px}
  .audience-tab span{font-size:9.5px;line-height:1.2}
  .builder-demo,
  .order-demo,
  .buyer-offer-demo,
  .checkout-card,
  .share-link-card{
    width:100%;
    padding:16px;
  }
  .builder-row,
  .flow-grid,
  .buyer-stats{
    gap:8px;
  }
  .share-channels{
    gap:8px;
  }
  .share-channels span{
    padding:8px 11px;
    font-size:12px;
  }
}