/* Phone layouts preserve the desktop artwork without its fixed coordinates. */
@media(max-width:760px){
 .section{margin-left:20px;margin-right:20px}
 .hero{height:auto;min-height:0;padding:12px 0 32px}
 .header{position:relative;height:64px;min-height:64px;margin:0 16px;padding:8px 10px 8px 16px;grid-template-columns:minmax(0,1fr) auto 44px;gap:8px;z-index:10}
 .header .logo{width:96px}
 .header>.login{height:44px;min-height:44px;min-width:76px;padding:10px 12px}
 .header .menu-toggle{width:44px;height:44px;padding:12px}
 .header nav{display:none}
 .header nav.open{display:grid;grid-template-columns:1fr 1fr;position:absolute;top:72px;left:0;right:0;width:auto;padding:12px;gap:4px;background:#232120;border:1px solid #625a54;border-radius:8px;box-shadow:0 12px 28px #0008}
 .header nav a,.header nav.open .mobile-tariffs{position:static;display:flex;align-items:center;min-height:48px;padding:10px;font-size:14px;line-height:20px;color:#eee7e1;border:0;background:none;box-shadow:none}
 .header nav.open .mobile-tariffs{grid-column:1/-1;color:#fead6e;border-top:1px solid #51473f}
 .hero-inner{display:flex;flex-direction:column;width:auto;height:auto;margin:32px 20px 0;gap:28px}
 .hero-copy{position:relative;inset:auto;width:100%;padding:0}
 .hero-copy h1{font-size:36px;line-height:39px}
 .hero-copy .wish{position:relative;inset:auto;width:100%;height:auto;min-height:0;margin:22px 0 24px;padding-top:17px}
 .hero-copy .wish:before{top:0;width:100%}
 .hero-copy .wish p{position:static;margin:0 0 8px;font-size:16px;line-height:22px}
 .hero-copy .wish .wish-story{position:relative;inset:auto;display:table;max-width:100%;width:auto;height:auto;min-height:38px;margin:0;padding:2px 6px;font-size:28px;line-height:34px}
 .hero-copy .primary{position:static;width:100%;height:56px;min-height:56px;font-size:18px}
 .hero-media{position:relative;inset:auto;width:100%;max-width:440px;height:auto;aspect-ratio:641/590;margin:0 auto;flex:none}
 .hero-video-toggle{width:44px;height:44px;padding:12px;top:auto;bottom:12px;right:8px}
 .hero-media .video-preview .badge{top:6px}
 .catalog{padding:24px 0 32px}
 .catalog .section-heading{margin-bottom:12px}
 .catalog .section-heading h2{font-size:28px;line-height:32px;overflow-wrap:break-word}
 .catalog .text-link{min-height:44px;margin:4px 0 0;padding:8px 0}
 .catalog-grid:has(.album){margin:0 -20px;padding:18px 20px 16px;gap:26px;scroll-padding-inline:20px;scroll-snap-type:x mandatory}
 .catalog-grid .album{flex-basis:min(76vw,280px);scroll-snap-align:start}
 .how,.reviews{padding:40px 0}
 .how-intro h2,.reviews h2,.faq>h2,.footer-cta h2{font-size:30px;line-height:34px}
 .how-intro p,.reviews>div:first-child>p{font-size:18px;line-height:25px;margin:16px 0 20px}
 .how-intro .primary,.footer-cta .primary{width:100%;min-height:56px;font-size:18px}
 .steps{gap:28px}
 .steps article,.steps article:has(.step-mosaic){width:100%;display:grid;grid-template-columns:104px minmax(0,1fr);grid-template-rows:auto auto 1fr;gap:6px 18px}
 .steps article .step-photo,.steps article .step-mosaic{grid-column:1;grid-row:1/4;width:104px;height:132px;margin:0}
 .steps article .step-mosaic{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:4px;min-width:0;min-height:0}
 .steps article .step-mosaic>div{display:grid;grid-template-rows:repeat(2,minmax(0,1fr));min-width:0;min-height:0;height:100%;gap:4px}
 .steps article .step-mosaic img{display:block;min-width:0;min-height:0;width:100%;height:100%;object-fit:cover;border-radius:6px}
 .steps article .step-number,.steps article h3,.steps article p{grid-column:2;position:static;width:auto;max-width:100%;margin:0}
 .steps article .step-number{grid-row:1;font-size:20px;line-height:24px}
 .steps article h3{grid-row:2;font-size:20px;line-height:23px}
 .steps article p{grid-row:3;font-size:15px;line-height:21px}
 .photo-tips{padding:24px 16px;margin-top:32px;gap:20px}
 .photo-tips h3{font-size:26px;line-height:30px}
 .photo-tips strong{font-size:18px;line-height:23px}
 .photo-tips small{font-size:15px;line-height:21px}
 .transformation{padding:28px 16px}
 .transformation h2{font-size:28px;line-height:32px}
 .transformation .comparison{position:relative;display:block;padding-top:64px}
 .transformation .comparison>.polaroid{position:absolute;z-index:2;left:0;top:0;width:43%;max-width:170px;margin:0;pointer-events:none;transform:rotate(-7deg)}
 .transformation .polaroid figcaption{font-size:12px;line-height:16px;margin:0 0 6px;white-space:nowrap}
 .transformation .polaroid p{font-size:9px;line-height:10px;top:84%;left:10%;width:80%}
 .transformation .polaroid-sheet{box-shadow:0 8px 16px #0002}
 .transformation-results{display:flex;width:77%;margin-left:23%;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;border-radius:8px}
 .transformation-results::-webkit-scrollbar{display:none}
 .transformation .transformation-results>figure{position:relative;flex:0 0 100%;width:100%;min-width:0;max-width:none;scroll-snap-align:start;margin:0}
 .transformation-results figcaption{display:none}
 .transformation .transformation-results .result-photo{margin:0}
 .transformation .result-photo>img{height:auto;aspect-ratio:329/468;border-radius:8px}
 .transformation .transformation-results .badge{top:auto;bottom:12px;right:10px;font-size:11px;padding:7px 9px}
 .transformation .transformation-video .badge{height:30px}
 .transformation-switch{display:flex;justify-content:center;gap:4px;width:184px;margin:18px auto 0;padding:4px;background:#e6e3df;border-radius:28px}
 .transformation-switch button{flex:1;min-height:44px;padding:10px 12px;font-size:15px;line-height:20px;color:#625a54;border-radius:24px}
 .transformation-switch button[aria-pressed=true]{background:#faad77;color:#713600}
 .transformation-progress{display:none}
 .reviews .review{min-height:330px;padding:28px 20px 24px}
 .review .quote{width:66px;height:48px}
 .review blockquote{font-size:18px;line-height:26px;margin:32px 0 24px}
 .faq{padding-top:32px;padding-bottom:24px}
 .faq>h2{margin-bottom:24px}
 .faq details,.faq details[open]{padding:18px 16px;margin-bottom:12px}
 .faq summary,.faq details[open] summary{font-size:17px;line-height:24px;min-height:44px;padding-right:44px}
 .faq summary:after{width:32px;height:32px}
 .faq details p{margin-top:16px;font-size:16px;line-height:24px}
 .footer-cta{padding:40px 0 28px}
 .footer-main{padding-top:28px;gap:24px 18px}
 .footer-main a{min-height:44px;margin:0;font-size:15px}
 #modal{width:calc(100% - 16px);max-width:calc(100% - 16px);max-height:calc(100dvh - 16px);margin:auto;overscroll-behavior:contain;scroll-padding-block:20px}
 #modal:has(.login-form){width:calc(100% - 24px);max-width:440px;padding:min(190px,43vw) 24px 24px;border-radius:20px}
 #modal .login-brand{top:20px;left:22px;width:100px}
 #modal:has(.login-form) h2{font-size:28px;line-height:32px;margin-bottom:8px}
 #modal .login-subtitle{font-size:16px;line-height:22px;margin-bottom:16px;overflow-wrap:anywhere}
 #modal:has(.login-form) .provider{height:48px;min-height:48px;font-size:14px;gap:12px}
 #modal:has(.login-form) .login-divider{margin:14px 0;font-size:14px}
 #modal .login-form>input{min-height:48px;padding:11px 16px;font-size:16px}
 #modal .login-form .modal-action{min-height:50px;height:50px;margin-top:4px;font-size:17px}
 #modal .login-legal{margin:14px 0 0;font-size:13px;line-height:18px}
 #modal .login-change-email{min-height:44px}
 #modal:has(.tariff-view),#modal:has(.tariff-view[data-mode="credits"]){padding:52px 16px 24px;border-radius:20px}
 #modal:has(.tariff-view) h2{font-size:28px;line-height:32px;margin-bottom:10px}
 #modal .tariff-brand{width:90px;margin-bottom:16px}
 #modal .tariff-intro{font-size:15px;line-height:21px;margin-bottom:20px}
 #modal .tariff-view .tariff-tabs{height:54px;margin-bottom:20px}
 #modal .tariff-view .tariff-tabs button{height:44px;font-size:16px}
 #modal .tariff-grid{grid-template-columns:minmax(0,1fr);gap:12px}
 #modal .tariff-card,#modal .tariff-card.selected,#modal .tariff-view[data-mode="credits"] .tariff-card{padding:16px!important;gap:6px 12px;min-height:0;height:auto}
 #modal .tariff-card-heading,#modal .tariff-prices,#modal .tariff-card>small,#modal .tariff-card .tariff-output,#modal .tariff-card .tariff-feature,#modal .tariff-radio{position:static;max-width:100%;margin:0}
 #modal .tariff-card:before{display:none}
 #modal .tariff-card h3{font-size:17px;line-height:23px}
 #modal .tariff-price{font-size:30px;line-height:36px}
 #modal .tariff-card .tariff-output{font-size:15px;line-height:21px;padding-top:10px}
 #modal .tariff-view .tariff-card>p.tariff-feature{font-size:13px!important;line-height:18px}
 #modal .tariff-view .consent{margin-top:20px;font-size:13px;line-height:20px}
 #modal .consent #tariff-note,#modal .consent .tariff-cancel{font-size:13px;line-height:20px}
 #modal .tariff-view #buy,#modal .tariff-view[data-mode="credits"] #buy{min-height:56px;height:auto;font-size:16px;margin-top:20px}
 #modal .tariff-testimonials{margin-top:24px}
 #modal .tariff-review-slides{margin:0}
 #modal .tariff-review{padding:16px;min-height:196px}
 #modal .tariff-review-navigation{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;height:52px;gap:4px}
 #modal .tariff-review-navigation>button{position:static;width:44px;height:44px;padding:12px}
 #modal .tariff-review-navigation>button img{width:18px;height:18px}
 #modal .tariff-review-dots{justify-content:center}
 #modal .tariff-review-dots button{height:44px;width:22px}
 #modal .tariff-review-dots button:after,#modal .tariff-review-dots button[aria-pressed=true]:before{top:19px}
 #modal .tariff-review-dots button:not([aria-pressed=true]):after{left:8px}
 #modal .tariff-review-summary{font-size:13px;line-height:18px}
 #modal .tariff-grid{gap:10px}
 #modal .tariff-card,#modal .tariff-card.selected,#modal .tariff-view[data-mode="credits"] .tariff-card{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto auto;padding:14px!important;gap:5px 10px;text-align:left}
 #modal .tariff-card-heading{grid-column:1;grid-row:1;display:block;min-width:0;padding:0}
 #modal .tariff-card h3{font-size:16px;line-height:22px;font-weight:600}
 #modal .tariff-radio{position:absolute;top:14px;right:14px;width:20px;height:20px}
 #modal .tariff-radio img,#modal .selected .tariff-radio:after{width:20px;height:20px}
 #modal .tariff-prices{grid-column:2;grid-row:1/3;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;gap:1px;padding-right:28px;align-self:start}
 #modal .tariff-price,#modal .tariff-prices .tariff-price{font-size:24px;line-height:28px;white-space:nowrap}
 #modal .tariff-price span{font-size:17px;line-height:24px}
 #modal .tariff-old-price{font-size:13px;line-height:17px}
 #modal .tariff-card>small{grid-column:1;grid-row:2;font-size:12px;line-height:17px;align-self:start}
 #modal .tariff-card .tariff-output{grid-column:1/-1;grid-row:3;font-size:14px;line-height:20px;border:0;padding:4px 0 0}
 #modal .tariff-view .tariff-card>p.tariff-feature{display:none!important}
 #modal .tariff-view .tariff-card.selected>p.tariff-feature{display:flex!important;grid-row:4;grid-column:auto;gap:6px;margin:7px 0 0!important;font-size:12px!important;line-height:18px}
 #modal .tariff-card .tariff-feature:before{width:16px;height:16px;flex:none}
 #modal .tariff-view[data-mode="credits"] .tariff-feature{grid-column:1/-1!important}
}
@media(max-width:359px){
 .hero-copy h1{font-size:30px;line-height:34px}
 .hero-copy .wish .wish-story{font-size:25px;line-height:32px}
 .header{margin-inline:12px;gap:4px;padding-left:12px}
 .header .logo{width:84px}
 #modal:has(.login-form){padding-inline:16px}
 #modal:has(.login-form) h2{font-size:26px;line-height:30px}
 #modal .tariff-review-dots button{width:18px}
}
@media(max-height:740px){
 #modal:has(.login-form){padding-bottom:20px}
 #modal:has(.login-form) .login-divider{margin-block:10px}
}