/* Shared responsive layouts: phone, tablet and desktop. */
.brand-page,.customer-app{--sf-content:1200px}
.brand-page *, .customer-app *{box-sizing:border-box}
.brand-page img,.customer-app img{max-width:100%}
.brand-page button,.brand-page input,.brand-page textarea,.brand-page select,.customer-app button,.customer-app input,.customer-app textarea,.customer-app select{font-family:inherit}
.brand-page input,.brand-page textarea,.brand-page select,.customer-app input,.customer-app textarea,.customer-app select{font-size:16px}
.brand-page .section{padding:clamp(48px,7vw,100px) max(24px,calc((100% - 1200px)/2))}
.brand-page .header nav{max-width:1280px;gap:clamp(12px,2vw,28px)}
.brand-page .nav-group{min-width:0}
.brand-page .nav-group summary{min-height:44px;display:flex;align-items:center}
.brand-page .promo-carousel{background:#fff}
.brand-page .promo-viewport{width:min(100%,1200px);margin-inline:auto;max-height:none;aspect-ratio:16/9}
.brand-page .promo-slide img{width:100%;height:100%;object-fit:contain}
.brand-page .intro{max-width:1100px;padding-inline:24px}
.brand-page .intro h1,.brand-page .intro h2{font-size:clamp(36px,5.4vw,68px);line-height:1.12;letter-spacing:-.04em;text-wrap:balance}
.brand-page .intro p{max-width:760px;margin-inline:auto;font-size:clamp(15px,1.4vw,18px);line-height:1.75}
.brand-page .contact{gap:clamp(24px,6vw,85px);grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.brand-page .contact>*{min-width:0}
.brand-page .contact h2{font-size:clamp(34px,4.8vw,64px);line-height:1.12;letter-spacing:-.04em;text-wrap:balance}
.brand-page .contact input,.brand-page .contact textarea,.brand-page .contact select{max-width:100%;min-width:0}
.brand-page .footer-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.brand-page .footer-grid a,.brand-page .legal{overflow-wrap:anywhere}
.app-introduction .reference-section{padding-inline:max(24px,calc((100% - 1200px)/2));gap:clamp(28px,5vw,76px);grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.app-introduction .reference-copy,.app-introduction .reference-section>div{min-width:0}
.app-introduction .reference-copy h1{font-size:clamp(36px,5vw,70px);line-height:1.12;letter-spacing:-.04em;text-wrap:balance}
.app-introduction .reference-copy h2,.app-introduction .app-reference-faq h2{font-size:clamp(32px,4vw,56px);line-height:1.15;letter-spacing:-.035em;text-wrap:balance}
.app-introduction .reference-copy>p:not(.eyebrow){font-size:clamp(16px,1.4vw,18px);line-height:1.75}
.app-introduction .reference-hero-visual .phone{max-width:calc(100% - 30px)}
.app-introduction .rewards-device{max-width:calc(100% - 20px)}
.app-introduction .member-card{max-width:calc(100% - 24px)}
.app-introduction .web-app-button{max-width:100%;min-height:56px}
.app-introduction .web-app-button>span{min-width:0}
.app-introduction .web-app-button strong{font-size:clamp(15px,1.5vw,19px);overflow-wrap:break-word}
/* App base keeps reading and touch targets comfortable on compact screens. */
.customer-app>header.sf-app-header,.customer-app>main#top{width:100%;max-width:640px}
.customer-app .grok-dock{width:min(100%,640px)}
.customer-app .sf-home>*{min-width:0}
.customer-app .sf-welcome p{font-size:clamp(16px,2vw,22px);overflow-wrap:anywhere}
.customer-app .sf-page h1{font-size:clamp(28px,3.3vw,42px)}
.customer-app .sf-page h2{font-size:clamp(21px,2.3vw,28px)}
.customer-app .sf-page p{font-size:clamp(14px,1.3vw,16px)}
.customer-app .sf-promo{min-width:0}
.customer-app #appHome .sf-promo h1{font-size:clamp(27px,3vw,40px)}
.customer-app .sf-stats strong{overflow-wrap:break-word}
.customer-app .sf-merch>a,.customer-app .sf-merch>div{min-width:0}
.customer-app .sf-buy-options strong{line-height:1.4}
.customer-app .sf-buy-options small{line-height:1.6}
.customer-app .sf-store-selected{grid-template-columns:minmax(0,1fr) auto}
.customer-app .sf-store-selected strong{overflow-wrap:anywhere}
.customer-app .sf-tabs{overflow-x:auto}
.customer-app .sf-tabs button{min-width:0;min-height:48px}
.customer-app .reference-result-heading{flex-wrap:wrap}
.customer-app .reference-price-card h2,.customer-app .reference-branch-card h2{overflow-wrap:anywhere}
.customer-app .reference-price-card>div{flex-wrap:wrap}
.customer-app .sf-app-header a,.customer-app .sf-text-link{min-height:44px}
.customer-app .sf-text-link{display:inline-flex;align-items:center}
.customer-app .sf-app-header .sf-wordmark{font-size:clamp(30px,5vw,36px)}
.customer-app .app-record,.customer-app .sf-soft-card{overflow-wrap:anywhere}
.customer-app dialog{max-width:calc(100% - 24px);max-height:calc(100dvh - 24px);overflow-y:auto}
.customer-app .cart-dialog{width:min(100%,640px);max-width:100%;padding-bottom:max(32px,env(safe-area-inset-bottom))}
.customer-app .grok-dock{padding-bottom:env(safe-area-inset-bottom,0px)}
.customer-app .grok-dock>a{min-width:0}
@media(min-width:761px) and (max-width:1023px){
 .brand-page .header nav{padding-inline:24px;gap:12px}
 .brand-page .nav-group summary{font-size:12px}
 .brand-page .header .logo.wordmark{font-size:36px}
 .app-introduction .app-reference-hero{min-height:650px;padding-top:55px}
 .app-introduction .reference-hero-visual{min-height:550px;padding-top:25px}
 .app-introduction .reference-hero-visual .phone{width:270px;min-height:500px}
 .app-introduction .hero-ring{width:350px;height:350px;border-width:55px;right:-45px}
 .app-introduction .reference-section{gap:30px}
 .customer-app>header.sf-app-header,.customer-app>main#top{max-width:820px}
 .customer-app .grok-dock{width:min(100%,820px)}
 .customer-app .sf-home{padding:24px 32px}
 .customer-app .sf-carousel{max-width:540px;margin-inline:auto}
 .customer-app .sf-buy-options{grid-template-columns:repeat(4,minmax(0,1fr))}
 .customer-app .sf-stats a{padding:18px 18px 40px}
 .customer-app .sf-stats strong{font-size:17px}
 .customer-app #appCatalogResults{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
}
@media(min-width:1024px){
 .customer-app{background:#f5f5f5}
 .customer-app>header.sf-app-header,.customer-app>main#top{max-width:1200px}
 .customer-app>header.sf-app-header{height:88px;padding:20px 40px}
 .customer-app .sf-app-header>div{gap:16px}
 .customer-app .sf-app-header>div a{background:#f6f6f6;border-radius:12px;width:46px;height:46px}
 .customer-app #top{padding-bottom:130px;min-height:calc(100dvh - 88px)}
 .customer-app .sf-home{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px 32px;padding:28px 40px}
 .customer-app .sf-welcome{grid-column:1/-1;grid-row:1;margin:0}
 .customer-app .sf-stats{grid-column:1/-1;grid-row:2;margin:0;gap:18px}
 .customer-app .sf-stats a{padding:20px 24px;min-height:100px;border-radius:18px}
 .customer-app .sf-stats small{font-size:13px}
 .customer-app .sf-stats strong{font-size:20px;margin-top:9px}
 .customer-app .sf-stats svg{width:30px;height:30px;bottom:22px;right:22px}
 .customer-app .sf-carousel{grid-column:1;grid-row:3/5;align-self:start;width:100%}
 .customer-app .sf-promo{min-height:0}
 .customer-app .sf-promo>div{padding:24px 28px 28px}
 .customer-app .sf-promo p{font-size:16px}
 .customer-app .sf-swipe{grid-column:1;grid-row:5;margin:-12px 0 0;font-size:12px}
 .customer-app .sf-service-choice{grid-column:2;grid-row:3;align-self:start;padding:24px 16px;background:#fafafa;border:1px solid #eee;border-radius:20px;margin:0}
 .customer-app .sf-service-choice svg{width:82px;height:82px;padding:19px}
 .customer-app .sf-service-choice strong{font-size:18px}
 .customer-app .sf-service-choice small{font-size:13px}
 .customer-app .sf-home>.sf-block:first-of-type{grid-column:2;grid-row:4;margin:0;align-self:start}
 .customer-app .sf-home>.sf-referral{grid-column:1;grid-row:6;align-self:stretch;padding:32px}
 .customer-app .sf-referral h2{font-size:34px;max-width:340px}
 .customer-app .sf-referral p{font-size:16px;max-width:340px}
 .customer-app .sf-home>.sf-block:last-of-type{grid-column:2;grid-row:6;margin:0}
 .customer-app .sf-section-head h2{font-size:24px}
 .customer-app .sf-section-head a{font-size:14px;min-height:44px;display:flex;align-items:center}
 .customer-app .sf-thanks{grid-column:1/-1;grid-row:7;padding:24px 0}
 .customer-app .sf-buy-options{gap:14px}
 .customer-app .sf-buy-options>a{padding:20px}
 .customer-app .sf-buy-options svg{margin-bottom:12px}
 .customer-app .sf-buy-options small{font-size:12px}
 .customer-app .sf-soft-card{padding:24px;font-size:16px}
 .customer-app .grok-dock{width:min(calc(100% - 48px),1120px);bottom:16px;border:1px solid #e6e6e6;border-radius:20px;overflow:hidden;box-shadow:0 8px 32px #00000010;padding-bottom:0}
 .customer-app .grok-dock>a{min-height:76px;flex-direction:row;gap:12px;font-size:15px}
 .customer-app .grok-dock svg{width:24px;height:24px}
 .customer-app .grok-dock>a[data-app-nav="account"]>span{max-width:none;font-size:15px}
 .customer-app .sf-page{max-width:860px;margin-inline:auto;padding:40px}
 .customer-app .sf-tabs button{font-size:15px;padding:18px 12px}
 .customer-app .sf-points-card{padding:32px}
 .customer-app .sf-gift-art{max-width:570px;margin-inline:auto}
 .customer-app .sf-help-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
 .customer-app .app-panel{padding:40px}
 .customer-app #appAccount{max-width:880px;margin-inline:auto}
 .customer-app .app-account-card{padding:32px}
 .customer-app .app-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
 .customer-app #appRepairList,.customer-app #appBookingList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
 .customer-app .app-record{margin:0 0 20px}
 .customer-app .reference-catalog-search{top:88px;padding:20px 40px}
 .customer-app .sf-store-selected{padding:22px 40px}
 .customer-app .reference-catalog-body{padding:24px 40px}
 .customer-app #appCatalogResults{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
 .customer-app .reference-price-card{margin:0;padding:24px}
 .customer-app #appCatalogResults:not(:empty){margin-top:24px}
 .customer-app .reference-price-card h2{font-size:24px}
 .customer-app .reference-price-card p{font-size:16px}
 .customer-app .reference-branches{padding:40px}
 .customer-app #appBranchCards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
 .customer-app .reference-branch-card{margin:0;padding:24px}
 .customer-app .sf-branch-map{height:320px}
 .customer-app .reference-branch-card .sf-branch-actions>*{font-size:14px;min-height:50px}
 .customer-app .iphone-sale-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .customer-app .iphone-sale-browser{padding:32px 40px}
 .customer-app .reference-shop-hero{padding:40px}
 .customer-app .iphone-shop-form{max-width:800px;margin:16px auto;padding:0 24px}
 .customer-app .cart-dialog{width:760px;max-width:calc(100% - 48px);height:auto;max-height:calc(100dvh - 48px);margin:auto;padding:32px;border-radius:20px}
 .customer-app .cart-bar{max-width:640px;width:calc(100% - 48px);bottom:110px}
}
@media(max-width:760px){
 .brand-page .section{padding:52px 20px}
 .brand-page .header nav{padding-inline:20px;gap:0}
 .brand-page .header .logo.wordmark{font-size:clamp(30px,8vw,36px)}
 .brand-page .contact{grid-template-columns:minmax(0,1fr);gap:30px}
 .brand-page .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px}
 .brand-page .intro{padding:48px 20px 56px}
 .brand-page .get-fix-button{max-width:100%;font-size:clamp(16px,4.8vw,19px);padding:16px 24px}
 .brand-page .promo-controls{gap:4px}
 .app-introduction .reference-section{padding-inline:20px;grid-template-columns:minmax(0,1fr)}
 .app-introduction .reference-hero-visual{width:100%;min-height:470px;overflow:hidden}
 .app-introduction .hero-ring{right:-45px;max-width:100%}
 .app-introduction .reference-points-visual{overflow:hidden}
 .app-introduction .member-visual{padding-inline:12px;overflow:hidden}
 .app-introduction .member-card>div{flex-wrap:wrap;gap:10px 16px}
 .app-introduction .native-stores{width:100%;max-width:365px;gap:8px}
 .app-introduction .native-store img{max-width:100%}
 .app-introduction .native-store img[src$="google-play.png"]{max-width:calc(100% + 12px)}
 .brand-page dialog{width:min(560px,calc(100% - 24px));max-width:calc(100% - 24px);max-height:calc(100dvh - 24px);overflow-y:auto}
 .customer-app .sf-home{padding:18px clamp(14px,4vw,24px)}
 .customer-app .sf-page{padding:28px 20px}
 .customer-app .sf-primary{max-width:100%}
 .customer-app .sf-stats{gap:7px}
 .customer-app .sf-service-choice strong{font-size:clamp(14px,4vw,17px)}
 .customer-app .sf-welcome{align-items:flex-start}
 .customer-app .sf-welcome>.sf-text-link{flex-shrink:0;font-size:12px}
 .customer-app .sf-promo>div{padding:20px}
 .customer-app .sf-promo{min-height:0}
 .customer-app .reference-price-card button{min-height:46px}
 .customer-app .app-money{flex-wrap:wrap}
}
@media(max-width:359px){
 .customer-app .sf-app-header{padding-inline:14px}
 .customer-app .sf-app-header>div{gap:2px}
 .customer-app .sf-stats a{padding-inline:8px}
 .customer-app .sf-stats small{font-size:10px}
 .customer-app .sf-stats strong{font-size:11px}
 .customer-app .reference-branch-card{padding:14px}
 .customer-app .reference-branch-card .sf-branch-actions{gap:4px}
 .customer-app .reference-branch-card .sf-branch-actions>*{font-size:11px;padding-inline:5px}
 .customer-app .sf-merch{gap:9px}
 .customer-app .sf-merch>a{padding:16px 12px}
 .brand-page .promo-dots button{min-width:24px}
}
@media(prefers-reduced-motion:reduce){.brand-page *,.customer-app *{scroll-behavior:auto!important}}

/* Editorial clarity and balanced app introduction, October 2026. */
.brand-page .intro{max-width:1200px}
.brand-page .intro .intro-slogan{font-size:clamp(21px,2.5vw,32px);line-height:1.45;letter-spacing:-.025em;font-weight:600;text-transform:none;color:#575757;max-width:900px}
.brand-page .intro h1{font-size:clamp(42px,6.2vw,80px);margin-block:30px}
.brand-page .intro p:not(.intro-slogan){font-size:clamp(18px,1.8vw,23px);line-height:1.65;max-width:850px}
.brand-page .promo-slide>a{display:block;width:100%;height:100%}
.brand-page .promo-slide>a:focus-visible{outline:5px solid #171717;outline-offset:-5px}
.brand-page section[id]{scroll-margin-top:145px}
.brand-about{display:grid;grid-template-columns:1fr 1fr;gap:64px;border-top:1px solid #eee}
.brand-page .brand-about h2,.brand-page .brand-commitment h2,.brand-page .brand-articles h2{font-size:clamp(34px,4vw,54px);line-height:1.15;letter-spacing:-.035em;margin:16px 0 28px}
.brand-about p,.brand-commitment p{font-size:18px;line-height:1.75;color:#555}
.brand-about .about-lead{font-size:clamp(20px,2vw,24px);color:#222}
.brand-about>div:last-child{padding-top:35px}
.brand-page .editorial-link{display:inline-block;margin-top:22px;font-size:17px;font-weight:700;border-bottom:3px solid #ffd400;padding-block:8px}
.brand-page .brand-commitment{background:#fafafa}
.commitment-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:45px}
.commitment-number{display:inline-flex;background:#ffd400;padding:10px;border-radius:50%;font-weight:700;font-size:17px}
.commitment-grid h3{font-size:22px;line-height:1.3;margin:22px 0 12px}
.commitment-grid p{font-size:16px}
.article-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.article-card{display:flex;flex-direction:column;align-items:flex-start;padding:30px;background:#fff;border:1px solid #ddd;border-radius:16px;min-height:250px;transition:border-color .2s}
.article-card:hover,.article-card:focus-visible{border-color:#8e7600;background:#fffdf2}
.article-card>span{font-size:11px;letter-spacing:1px;color:#666}
.article-card h3{font-size:clamp(22px,2.2vw,29px);line-height:1.3;margin:25px 0 30px}
.article-card strong{margin-top:auto;font-size:15px;border-bottom:3px solid #ffd400;padding-bottom:5px}
.brand-page select.topic-selected{border:2px solid #9a8000;background:#fff9d9;font-weight:700}
.app-introduction .app-reference-hero{align-items:center;min-height:0;padding-top:75px;padding-bottom:75px}
.app-introduction .app-reference-hero .reference-copy{padding-bottom:0}
.app-introduction .reference-hero-visual{align-self:center;align-items:center;min-height:580px;padding:0;margin:0;overflow:visible}
.app-introduction .reference-hero-visual .phone{transform:none;margin:0;flex-shrink:0;box-shadow:16px 16px 0 #f3f3f0}
.app-introduction .hero-ring{width:440px;height:440px;max-width:100%;border-width:65px;right:auto;bottom:auto;left:50%;top:50%;transform:translate(-50%,-50%)}
.app-introduction .reference-copy>p:not(.eyebrow){font-size:clamp(18px,1.7vw,21px);color:#555}
.app-introduction .app-reference-faq{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:70px;row-gap:20px;padding-block:85px;background:#fafafa;position:relative}
.app-introduction .faq-callout{grid-column:2;position:relative}
.app-introduction .faq-symbol{position:absolute;left:calc(-100% - 15px);top:40px;width:210px;height:170px;font-size:58px;box-shadow:10px 10px 0 #171717}
.app-introduction .faq-symbol>span{width:60px;height:60px;line-height:60px;font-size:38px;right:-20px;top:-25px}
.app-introduction .faq-callout>p{font-size:21px;color:#555;line-height:1.7}
.app-introduction .faq-drawer,.app-introduction .install-guide{grid-column:2;width:100%;margin-top:5px}
.app-introduction .faq-drawer>summary{font-size:18px;padding:17px 28px}
.app-introduction .faq-answers p,.app-introduction .install-guide>summary{font-size:16px}
.customer-app .branch-storefront{width:100%;height:200px;object-fit:cover;border-radius:12px;display:block;margin-bottom:20px}
@media(max-width:1023px){.commitment-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.brand-about{gap:32px}.app-introduction .reference-hero-visual .phone{width:280px;min-height:530px}.app-introduction .hero-ring{width:330px;height:330px;border-width:45px}.app-introduction .faq-symbol{width:160px;height:135px;font-size:44px}}
@media(max-width:760px){
 .brand-about,.article-grid{grid-template-columns:1fr;gap:24px}.brand-about>div:last-child{padding-top:0}.brand-about p{font-size:17px}.commitment-grid{gap:28px 20px}.commitment-grid h3{font-size:20px}.commitment-grid p{font-size:15px}.article-card{min-height:210px;padding:25px}
 .app-introduction .app-reference-hero{padding-block:50px}.app-introduction .reference-hero-visual{min-height:540px;margin-top:40px;overflow:hidden}.app-introduction .reference-hero-visual .phone{width:270px;min-height:500px}
 .app-introduction .app-reference-faq{display:block;padding-block:60px}.app-introduction .faq-symbol{position:relative;left:auto;top:auto;width:105px;height:85px;font-size:28px;margin:0 12px 40px auto;box-shadow:5px 5px 0 #171717}.app-introduction .faq-symbol>span{width:36px;height:36px;line-height:36px;font-size:23px;right:-10px;top:-18px}.app-introduction .faq-callout>p{font-size:18px}.app-introduction .faq-drawer,.app-introduction .install-guide{margin-top:28px}
}
@media(max-width:359px){.commitment-grid{grid-template-columns:1fr}.brand-page .intro h1{font-size:38px}}