/* Reflow at narrow CSS viewports and enlarged text sizes. */
html { -webkit-text-size-adjust: 100%; }
:is(.site-header,.csm-site-header) .header-main { flex-wrap: wrap; min-width: 0; }
:is(.site-header,.csm-site-header) .brand { min-width: 0; max-width: 100%; }
:is(.site-header,.csm-site-header) .header-actions { min-width: 0; max-width: 100%; flex-wrap: wrap; }
:is(.site-header,.csm-site-header) .header-badges { min-width: 0; max-width: 100%; }
:is(.site-header,.csm-site-header) :is(.header-app-badges,.app-badges) { flex-wrap: wrap; max-width: 100%; }
:is(.site-header,.csm-site-header) .mega-grid { grid-template-columns: repeat(auto-fit,minmax(min(100%,14rem),1fr)); align-items: start; }
:is(.site-header,.csm-site-header) :is(.menu-column,.menu-promo,.menu-copy) { min-width: 0; }
:is(.site-header,.csm-site-header) .menu-copy { overflow-wrap: anywhere; }
:is(.site-header,.csm-site-header) .mega-panel { max-height: min(70dvh,calc(100dvh - 10rem)); }
.site-footer .footer-grid { grid-template-columns: repeat(auto-fit,minmax(min(100%,13rem),1fr)); }
.site-footer :is(section,.footer-intro>div) { min-width: 0; }
.site-footer :is(a,p,strong) { overflow-wrap: anywhere; }
.site-footer :is(.app-badges,.footer-intro,.footer-bottom) { flex-wrap: wrap; }
dialog { max-width: calc(100% - 2rem); max-height: calc(100dvh - 2rem); }
.dialog-content { overflow-wrap: anywhere; }
.app-badges { flex-wrap: wrap; }
.app-badges a { max-width: 100%; }

@media(max-width:68.75rem) {
 :is(.site-header,.csm-site-header) .mega-grid { grid-template-columns: repeat(auto-fit,minmax(min(100%,17rem),1fr)); }
 :is(.site-header,.csm-site-header) .navigation { max-height: 70dvh; }
 :is(.site-header,.csm-site-header) .mega-panel { max-height: none; }
}
@media(max-width:40rem) {
 :is(.site-header,.csm-site-header) .header-actions { display: contents; }
 :is(.site-header,.csm-site-header) .header-main>.brand { margin-right: auto; }
 :is(.site-header,.csm-site-header) .brand img { width: clamp(8rem,38vw,11rem); max-width: 100%; }
 :is(.site-header,.csm-site-header) .header-badges { flex-basis: 100%; width: 100%; display: flex; justify-content: flex-end; }
 :is(.site-header,.csm-site-header) .mega-grid { grid-template-columns: minmax(0,1fr); }
}

/* Home columns reflow without bottom alignment or fixed minimum card widths. */
/* All rules below are scoped to .home-shell (the home page). Other pages reuse some of these class names (for example .hero-visual on the merchant page) and must not be affected. */
.home-shell { overflow: visible; }
.home-shell .page-grid { align-items: start; flex: none; }
.home-shell .intro-column { min-width: 0; max-width: none; align-self: start; }
.home-shell .hero-visual { align-self: start; }
.home-shell .intro-column #page-title { font-size: clamp(1.75rem,6.25cqw,3.3rem); line-height: 1.2; }
.home-shell .intro-column .headline-line { white-space: normal; }
.home-shell .intro-column .audience-grid { grid-template-columns: repeat(auto-fit,minmax(min(100%,15rem),1fr)); }
.home-shell .audience-heading { flex-wrap: wrap; }
.home-shell .more-link { white-space: normal; }
.home-shell .store-badge-link { max-width: 100%; }
@media(max-width:68.75rem) {
 .home-shell .page-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 2rem; }
 .home-shell .intro-column { width: 100%; }
 .home-shell .hero-visual { max-width: 48rem; justify-self: center; }
}
@media(max-width:68.75rem) { .home-shell .hero-visual { order: -1; } }

/* Keep the approved slogan on exactly three lines at every width. */
.home-shell .intro-column #page-title { font-size: min(3.3rem,5.5cqw); }
.home-shell .intro-column .headline-line { white-space: nowrap; }

/* Plain white page: remove the surrounding grey and green shadow washes. */
.home-shell .photo-frame, .home-shell .merchant-ticker, .home-shell .merchant-tile, .home-shell .audience-panel, .home-shell .audience-panel:hover, .home-shell .site-header { box-shadow: none; }
.home-shell .store-badge-link:hover { filter: none; }

/* Show the photograph only; its source PNG includes a decorative outer frame. */
.home-shell .hero-visual .photo-frame {
 position: relative;
 overflow: hidden;
 aspect-ratio: 1344 / 832;
 border-radius: 2%;
}
.home-shell .hero-visual .photo-frame img {
 position: absolute;
 width: 114.285714%;
 height: 123.076923%;
 max-width: none;
 left: -7.142857%;
 top: -11.538462%;
 object-fit: fill;
}

/* ---- Customer page (body.page-customer): hero reflow from the design package ---- */
/* Use CSS reflow instead of shrinking text with a resize-time binary search. */
.page-customer .hero .hero-copy h1 { font-size: clamp(1.75rem,calc(1rem + 2vw),3.4rem); line-height: 1.2; }
.page-customer .hero .hero-heading-line, .page-customer .hero .hero-title-line { white-space: normal; }
.page-customer .hero .hero-layout>* { min-width: 0; }
@media(max-width:68.75rem) {
 .page-customer .hero .hero-layout { grid-template-columns: minmax(0,1fr); }
 .page-customer .hero-collage { width: 100%; max-width: 42rem; justify-self: center; grid-template-columns: repeat(2,minmax(0,1fr)); }
 .page-customer .hero-collage figure:nth-child(even) { transform: none; }
}
@media(max-width:40rem) { .page-customer .delivery-choices>div { grid-template-columns: minmax(0,1fr); } }
/* Each slogan line fits the hero-copy container without soft wrapping. */
.page-customer .hero .hero-copy { container-type: inline-size; }
.page-customer .hero .hero-copy h1 { font-size: min(3.4rem,5.5cqw); }
.page-customer .hero .hero-heading-line, .page-customer .hero .hero-title-line { white-space: nowrap; }
.page-customer .hero .hero-copy .subline { white-space: nowrap; font-size: min(2rem,5.5cqw); }

/* ---- Merchant page (body.page-merchant): hero and pricing reflow from the design package ---- */
/* Allow hero and prices to reflow when display scaling reduces available width. */
.page-merchant .hero-grid { align-items: start; }
.page-merchant .hero-grid>* { min-width: 0; }
.page-merchant main :is(h1,h2,h3,p,a) { overflow-wrap: anywhere; }
.page-merchant .hero h1 { overflow-wrap: anywhere; }
.page-merchant .section-wrap>* { min-width: 0; }
.page-merchant .network-image .network-tag { right: 0; max-width: 100%; overflow-wrap: anywhere; }
.page-merchant .hero-actions>a { max-width: 100%; overflow-wrap: anywhere; }
.page-merchant .store-badges-compact { display: flex; flex-wrap: wrap; }
.page-merchant .merchant-pricing :is(.pricing-detail,.pricing-assurance) { min-width: 0; }
.page-merchant .merchant-pricing .pricing-detail { overflow-wrap: anywhere; }
@media(max-width:75rem) {
 .page-merchant .merchant-pricing .pricing-panel { grid-template-columns: minmax(0,1fr); }
 .page-merchant .merchant-pricing .pricing-assurance { align-items: flex-start; }
}
@media(max-width:68.75rem) {
 .page-merchant .hero-grid { grid-template-columns: minmax(0,1fr); }
 .page-merchant .hero-copy { max-width: none; }
 .page-merchant .hero-visual { width: 100%; max-width: 42rem; justify-self: center; }
}
@media(max-width:40rem) {
 .page-merchant .merchant-pricing .pricing-row { grid-template-columns: 36px minmax(0,1fr); }
 .page-merchant .merchant-pricing .pricing-amount { grid-column: 2; text-align: left; white-space: normal; }
}

/* The merchant slogan has three explicit lines; other headings still reflow. */
.page-merchant .customer-actions { container-type: inline-size; }
.page-merchant .customer-actions>span { display: block; white-space: nowrap; font-size: min(1.5rem,5.5cqw); }
.page-merchant .customer-actions .customer-discover { margin-top: 0; color: var(--brand-navy); }