/* Puppy Day One — mobile layout hardening v8 */
html,body{width:100%;max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
*,*::before,*::after{min-width:0}
img,svg,video,canvas{max-width:100%}
button,input,select,textarea{max-width:100%}
.wrap{width:100%!important;max-width:1180px!important;padding-left:19px!important;padding-right:19px!important;margin-left:auto!important;margin-right:auto!important}
.hero,.shell,.puppyHero,.journeyBody,.previewTop,.photoUpload,.unlock,.timeline-item,.time,.todayTask,.taskRow{min-width:0}
.hero>*,.shell>*,.puppyHero>*,.journeyBody>*,.previewTop>*,.photoUpload>*,.unlock>*,.timeline-item>*,.time>*,.todayTask>*,.taskRow>*{min-width:0;max-width:100%}
.nav,.topbar{max-width:100%}

@media (max-width:900px){
  input,select,textarea{font-size:16px!important}
  .wrap{padding-left:16px!important;padding-right:16px!important}
  .nav,.topbar{height:auto!important;min-height:68px;padding:12px 0;gap:10px}
  .brand{font-size:21px!important;white-space:nowrap}
  .brandMark{width:36px!important;height:36px!important;flex:0 0 36px}
  .navLinks,.navRight,.toplinks{gap:5px!important;flex-wrap:wrap;justify-content:flex-end}
  .navLinks a,.navRight a,.navRight button,.toplinks a,.toplinks button{padding:8px 10px!important}
  .hero,.shell{grid-template-columns:minmax(0,1fr)!important;gap:28px!important;padding-top:34px!important;padding-bottom:30px!important}
  .hero h1,.copy h1{font-size:44px!important;line-height:1.02!important;letter-spacing:-.045em!important;overflow-wrap:anywhere}
  .hero p,.copy>p{font-size:16px!important}
  .heroVisual{width:100%!important;max-width:100%!important;transform:none!important}
  .previewTop{grid-template-columns:minmax(0,1fr)!important}
  .previewTop img{width:100%!important;height:210px!important}
  .proof,.steps,.cards,.week-grid,.weeks,.upsell-grid,.upsells{grid-template-columns:minmax(0,1fr)!important}
  .quiz-shell,.card,.journeyCard,.journey,.hero,.state{max-width:100%!important}
  .quiz-shell{padding:20px!important;margin:20px 0!important;border-radius:22px!important}
  .q h3{font-size:27px!important}
  .field,.opt{width:100%!important}
  .unlock{grid-template-columns:minmax(0,1fr)!important}
  .price{text-align:left!important}
  .buy,.cta{width:100%!important}
  .tracker,.trackerGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .timeline-item,.time{grid-template-columns:minmax(0,1fr)!important;gap:4px!important}
  .head{padding-top:30px!important;align-items:flex-start!important}
  .head h1{font-size:40px!important}
  .headNote{display:none!important}
  .puppyHero{grid-template-columns:minmax(0,1fr)!important;gap:16px!important;padding:16px!important}
  .heroPhoto{width:100%!important;height:230px!important}
  .ring{position:static!important;width:88px!important;height:88px!important;margin-top:4px}
  .journeyBody{grid-template-columns:minmax(0,1fr)!important;padding:16px!important}
  .stagePath,.phaseTabs{width:100%!important;max-width:100%!important;overflow-x:auto!important;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .stagePath::-webkit-scrollbar,.phaseTabs::-webkit-scrollbar{display:none}
  .stagePath{grid-template-columns:repeat(6,96px)!important;padding-left:16px!important;padding-right:16px!important}
  .phaseTabs{grid-template-columns:repeat(6,92px)!important;margin-left:-16px!important;margin-right:-16px!important;padding-left:16px!important;padding-right:16px!important}
  .todayTask,.taskRow{grid-template-columns:40px minmax(0,1fr)!important;gap:10px!important}
  .todayTask .due,.taskRow .taskDate{grid-column:2!important;white-space:normal!important;justify-self:start!important}
  .actions{flex-wrap:wrap!important}
  .actions .btn,.actions a.btn{flex:1 1 180px;text-align:center}
  .journeyTop{display:block!important}
  .progressNum{margin-top:14px!important}
  .nextGrid{grid-template-columns:minmax(0,1fr)!important}
  .photoUpload{grid-template-columns:96px minmax(0,1fr)!important}
  .footer{max-width:100%}
}

@media (max-width:560px){
  .wrap{padding-left:14px!important;padding-right:14px!important}
  .navLinks a:not(.navCta),.navRight a{display:none!important}
  .hero h1,.copy h1{font-size:38px!important;line-height:1.04!important}
  .hero p,.copy>p{font-size:15px!important}
  .hero{padding-top:26px!important}
  .heroVisual{padding:12px!important;border-radius:22px!important}
  .previewTop img{height:190px!important}
  .journeyLine{grid-template-columns:repeat(6,72px)!important;overflow-x:auto!important;max-width:100%!important;padding-bottom:4px}
  .miniTask{grid-template-columns:29px minmax(0,1fr)!important}
  .miniTask em{grid-column:2!important;justify-self:start!important}
  section{padding-top:36px!important;padding-bottom:36px!important}
  .section-title{font-size:34px!important}
  .quiz-shell{padding:16px!important}
  .q h3{font-size:25px!important}
  .actions{display:grid!important;grid-template-columns:1fr 1fr!important}
  .actions .btn,.actions a.btn{width:100%!important;min-width:0!important}
  .photoPrompt{padding:13px!important}
  .photoUpload{grid-template-columns:minmax(0,1fr)!important}
  .photoPreview,.photoEmpty{width:112px!important;height:112px!important}
  .photoActions{margin-top:2px}
  .photoChoose,.photoRemove{font-size:11px!important;padding:10px 12px!important}
  .tracker,.trackerGrid{grid-template-columns:minmax(0,1fr)!important}
  .puppyHero{padding:14px!important}
  .heroPhoto{height:210px!important}
  .heroCopy h2{font-size:31px!important;overflow-wrap:anywhere}
  .journeyBody{padding:14px!important}
  .sectionTop{display:block!important}
  .count{display:inline-block!important;margin-bottom:8px}
  .today,.sideCard,.encourage{padding:16px!important}
  .todayTask,.taskRow{grid-template-columns:38px minmax(0,1fr)!important}
  .journey{padding:18px!important;border-radius:22px!important}
  .journeyTop h2{font-size:34px!important;overflow-wrap:anywhere}
  .phaseTabs{margin-left:-18px!important;margin-right:-18px!important}
  .toplinks{max-width:45%}
  .state{padding:20px!important}
}

@media (max-width:380px){
  .brand{font-size:19px!important}
  .brandMark{width:34px!important;height:34px!important;flex-basis:34px}
  .navCta{font-size:9px!important;padding:8px 9px!important}
  .hero h1,.copy h1{font-size:35px!important}
  .heroVisual{padding:10px!important}
  .quiz-shell{padding:14px!important}
}