/* The large campaign hero is deliberate; the catalog retains its compact spacing. */
.storefront-visual .hero.hero-phone-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);grid-template-areas:"copy media";gap:20px;align-items:center;padding:30px 44px;min-height:0;max-height:none;background:linear-gradient(115deg,#e0f6f3 0%,#b4e9e3 52%,#81d8d0 100%);border-radius:18px;overflow:hidden;position:relative;margin-top:12px;margin-bottom:0}
.storefront-visual .hero.hero-phone-layout .hero-copy{grid-area:copy;order:0;padding:0;max-width:580px;position:relative;z-index:2}
.storefront-visual .hero.hero-phone-layout .hero-copy .eyebrow{color:#294943;font-size:14px;letter-spacing:.04em;margin-bottom:14px}
.storefront-visual .hero.hero-phone-layout h1{font-size:clamp(34px,3.55vw,52px);line-height:1.14;letter-spacing:-.02em;color:#183d37;margin:0 0 18px;font-weight:700}
.storefront-visual .hero.hero-phone-layout .hero-copy>p{font-size:16px;line-height:1.6;max-width:450px;color:#284c46;margin-bottom:20px}
.storefront-visual .hero.hero-phone-layout .hero-actions{gap:12px;align-items:center;flex-wrap:wrap}
.storefront-visual .hero.hero-phone-layout .hero-actions .primary{background:#183d37;color:#fff;border-color:#183d37;min-height:48px;min-width:0;padding-inline:22px;font-size:16px}
.storefront-visual .hero.hero-phone-layout .hero-actions .text-button{color:#183d37;min-height:44px;font-size:16px}
.storefront-visual .hero.hero-phone-layout .hero-bottom{font-size:14px;line-height:1.5;color:#284c46;margin-top:18px}
.storefront-visual .hero.hero-phone-layout .hero-media{grid-area:media;order:0;display:block;position:relative;height:448px;min-width:0;background:transparent;border-radius:0;overflow:visible;isolation:isolate}
.storefront-visual .hero.hero-phone-layout .hero-media>picture.hero-picture{position:absolute;inset:0 -50px 0 50px;width:auto;height:100%;display:block;background:none;border-radius:0;overflow:visible}
.storefront-visual .hero.hero-phone-layout #hero-photo{width:100%;height:100%;object-fit:contain;transform:rotate(5deg) scale(1.15);filter:drop-shadow(0 12px 10px #23443b17);border-radius:0}
.storefront-visual .hero.hero-phone-layout .hero-photo-note{position:absolute;grid-column:auto;bottom:10px;right:20px;width:auto;white-space:nowrap;font-size:11px;line-height:1.3;max-width:90%;padding:0;background:none;color:#284c46;margin:0}
.hero-phone{position:absolute;z-index:2;left:6%;top:0;width:212px;height:438px;pointer-events:none}
.hero-phone-drift{width:100%;height:100%;transform-origin:50% 50%}
.phone-bezel{height:100%;padding:5px;border:2px solid #aaaead;border-radius:37px;background:linear-gradient(130deg,#313333,#050505 25%,#202323 80%,#888);box-shadow:0 16px 28px #183d3738,0 2px 3px #fff9 inset}
.phone-screen{position:relative;height:100%;border:3px solid #050505;border-radius:29px;background:#fff;overflow:hidden;text-align:left;color:#183d37;padding:0 13px}
.phone-top{display:flex;justify-content:space-between;font-size:9px;font-weight:600;line-height:14px;margin:9px 2px 7px;color:#101817}
.phone-camera{position:absolute;width:62px;height:15px;top:9px;left:50%;transform:translateX(-50%);background:#090b0b;border-radius:20px}
.phone-brand{height:28px;width:45px;object-fit:contain;display:block;margin:5px auto 6px}
.phone-product-photo{height:147px;margin:0 -13px;background:#dff3ef;overflow:hidden}
.phone-product-photo img{height:100%;width:100%;object-fit:contain;transform:scale(1.08)}
.phone-product-copy{padding:9px 0 14px;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.phone-example-label{font-size:7px;letter-spacing:.1em;font-weight:600;color:#52716a}
.phone-product-copy>b{font-size:14px;line-height:1.22;letter-spacing:0;font-weight:700;margin-bottom:3px}
.phone-field-label{font-size:8px;line-height:1.4;font-weight:600;color:#294b44}
.phone-field{font-size:10px;line-height:22px;display:block;background:#edf5f3;border-radius:6px;width:100%;padding-inline:9px}
.phone-swatches{display:flex;gap:7px;padding:2px 0 3px}
.phone-swatches i{width:15px;height:15px;border:1px solid #bac9c6;border-radius:50%;background:#fff}
.phone-swatches i:nth-child(2){background:#81d8d0;border:2px solid #183d37}.phone-swatches i:nth-child(3){background:#273b37}
.phone-preview-done{font-size:9px;font-weight:600;background:#183d37;color:#fff;width:100%;line-height:25px;text-align:center;border-radius:20px;margin-top:1px}
.phone-home-bar{position:absolute;bottom:5px;width:66px;height:3px;left:50%;transform:translateX(-50%);border-radius:4px;background:#162b26}
.hero-spark{position:absolute;right:7%;top:1%;z-index:3;color:#183d37;font-size:48px;line-height:1;pointer-events:none}.hero-spark-drift{display:block}
.hero-proof{position:absolute;right:-8px;bottom:55px;z-index:3;pointer-events:none}.hero-proof-drift{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #ecf1ef;padding:10px 14px;border-radius:12px;box-shadow:0 6px 18px #183d3717;font-size:13px;font-weight:600;color:#183d37}.hero-proof-drift>span{font-size:20px}
.storefront-visual .hero:not(.hero-phone-layout) :is(.hero-phone,.hero-spark,.hero-proof){display:none}
.storefront-visual .client-strip{padding-block:20px 18px;border-bottom:1px solid #e8efec;text-align:center}
.storefront-visual .client-strip h2{font-size:18px;line-height:1.4;font-weight:700;margin:0 0 14px;letter-spacing:0;color:#354e47}
.client-logos{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-items:center;gap:24px;max-width:1080px;margin:auto}
.client-logos img{display:block;width:100%;height:42px;object-fit:contain;max-width:125px;justify-self:center;filter:none;opacity:1}
.client-pepsi{width:42px;height:42px;overflow:hidden;position:relative;justify-self:center;border-radius:50%}.client-logos .client-pepsi img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100px;height:100px;max-width:none}
@media(max-width:1100px){.storefront-visual .hero.hero-phone-layout{padding:24px 28px;gap:12px}.storefront-visual .hero.hero-phone-layout .hero-media{height:402px}.hero-phone{width:194px;height:401px;left:0}.phone-product-photo{height:125px}.phone-product-copy{gap:3px}.hero-proof{bottom:24px;right:-10px}.hero-spark{font-size:36px}.client-logos{gap:18px}}
@media(max-width:767px){
 .storefront-visual .hero.hero-phone-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "media";gap:14px;padding:22px 20px 24px;max-height:none;margin-top:8px;border-radius:14px}
 .storefront-visual .hero.hero-phone-layout h1{font-size:34px;line-height:1.14;margin-bottom:12px}
 .storefront-visual .hero.hero-phone-layout .hero-copy .eyebrow{font-size:12px;margin-bottom:10px}
 .storefront-visual .hero.hero-phone-layout .hero-copy>p{margin-bottom:12px;font-size:16px;line-height:1.5}
 .storefront-visual .hero.hero-phone-layout .hero-actions{gap:6px 12px}
 .storefront-visual .hero.hero-phone-layout .hero-actions .primary{font-size:16px;min-height:44px;padding-inline:16px}
 .storefront-visual .hero.hero-phone-layout .hero-actions .text-button{font-size:16px;min-height:44px}
 .storefront-visual .hero.hero-phone-layout .hero-bottom{margin-top:8px;font-size:12px}
 .storefront-visual .hero.hero-phone-layout .hero-media{height:265px;width:100%;max-width:460px;justify-self:center}
 .storefront-visual .hero.hero-phone-layout .hero-media>picture.hero-picture{inset:0 -8px 0 55px}
 .storefront-visual .hero.hero-phone-layout #hero-photo{transform:rotate(5deg) scale(1.03)}
 .hero-phone{left:5%;top:0;width:130px;height:264px}.phone-bezel{padding:3px;border-radius:24px}.phone-screen{border-width:2px;border-radius:18px;padding-inline:8px}.phone-top{font-size:6px;line-height:9px;margin:5px 2px 4px}.phone-camera{width:41px;height:10px;top:5px}.phone-brand{height:18px;width:28px;margin:3px auto 4px}.phone-product-photo{height:85px;margin:0 -8px}.phone-product-copy{padding:5px 0 9px;gap:2px}.phone-example-label{font-size:4.5px}.phone-product-copy>b{font-size:9px;margin-bottom:2px}.phone-field-label{font-size:5.5px}.phone-field{font-size:7px;line-height:15px;border-radius:4px;padding-inline:6px}.phone-swatches{gap:5px;padding:2px 0}.phone-swatches i{width:10px;height:10px}.phone-preview-done{font-size:6px;line-height:17px}.phone-home-bar{width:43px;height:2px;bottom:3px}
 .hero-spark{right:6%;top:4%;font-size:30px}.hero-proof{bottom:28px;right:0}.hero-proof-drift{font-size:10px;padding:7px 9px;border-radius:8px;gap:4px}.hero-proof-drift>span{font-size:15px}
 .storefront-visual .hero.hero-phone-layout .hero-photo-note{bottom:7px;right:12px;font-size:10px;max-width:85%;text-align:right}
 .storefront-visual .client-strip{padding-block:16px 14px}.storefront-visual .client-strip h2{font-size:16px;margin-bottom:12px}.client-logos{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 18px}.client-logos img{height:30px;max-width:90px}.client-pepsi{width:30px;height:30px}.client-logos .client-pepsi img{width:71px;height:71px;max-width:none}
}
@media(max-width:360px){.storefront-visual .hero.hero-phone-layout{padding-inline:15px;gap:12px}.storefront-visual .hero.hero-phone-layout h1{font-size:30px}.storefront-visual .hero.hero-phone-layout .hero-media{height:245px}.hero-phone{width:120px;height:245px;left:0}.phone-product-photo{height:75px}.phone-product-copy>b{font-size:8px}.hero-proof-drift{font-size:9px}.client-logos{column-gap:14px}}
@media(prefers-reduced-motion:reduce){.hero-phone-drift,.hero-spark-drift,.hero-proof-drift{transform:none!important}}
