/* Phone layout: one scale, loaded after the desktop and interaction styles. */
.hero-intro-mobile,.mobile-campaign-copy{display:none}
/* Extend backgrounds to the screen edge while keeping content clear of the notch. */
.site-header{padding-top:env(safe-area-inset-top,0px)}
.wrap{max-width:calc(100% - 2 * max(16px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px)))}
.footer-grid>div,.footer-bottom>span{min-width:0}
footer{padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}

/* Let content shrink inside its own columns instead of widening the page. */
.hero-grid>*,.signal-grid>*,.category-grid>*,.service-grid>*,.process-grid>*,.delivery-grid>*,.credibility-grid>*,.faq-grid>*,.form-shell>*{min-width:0}
main,footer{overflow-wrap:anywhere}
main :is(h1,h2,h3){overflow-wrap:anywhere}
footer a,.form-contact-links a{max-width:100%;overflow-wrap:anywhere}

/* Stack legal blocks before they become cramped; keep registration as one unit. */
@media(max-width:1040px){
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:12px}
}
@media(min-width:681px) and (max-width:1040px){
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
}

@media(max-width:680px){
  :root{
    --mobile-edge:16px;
    --mobile-card-pad:20px;
    --mobile-gap:16px;
    --mobile-group-gap:24px;
    --mobile-section-gap:48px;
    --btn-h:50px;
  }
  body{font-family:Arial,"Helvetica Neue",sans-serif;font-size:16px;line-height:1.55}
  .wrap,.hero,.process .wrap{width:min(calc(100% - 2 * var(--mobile-edge)),var(--max))}
  section{padding-block:var(--mobile-section-gap)}
  .section-head,.process .section-head{margin-bottom:var(--mobile-group-gap)}
  .section-head .lead{margin-top:16px;max-width:100%}
  .categories .section-head{padding-inline:0}
  .lead,.hero-copy .lead{font-size:16px;line-height:1.55}
  h2{font-size:clamp(28px,7.2vw,30px);line-height:1.16;letter-spacing:-.02em;max-width:none}
  h3,.category h3{font-size:20px;line-height:1.25;letter-spacing:-.015em}
  .eyebrow,.hero-copy .eyebrow,.partner-card .where,.delivery-kicker,.step-num{font-size:12px;line-height:1.4;letter-spacing:.08em}

  .header-inner{min-height:52px;gap:10px}
  .brand-wordmark{font-size:11px;line-height:1.4;letter-spacing:.07em}
  .main-site-link{font-size:12px;min-height:44px}
  .external-link-icon{width:12px;height:12px}
  .brand{display:inline-flex;align-items:center;min-height:44px}

  .hero{padding:12px 0 32px}
  .hero-grid{min-height:0;border-radius:20px;grid-template-columns:1fr}
  .hero-media{
    order:1;display:block;height:clamp(220px,60vw,260px);min-height:0;
    aspect-ratio:auto;padding:0;
  }
  .hero-media>img:not(.drutex-photo-logo){object-position:70% 52%}
  .hero-copy{order:2;padding:var(--mobile-card-pad);justify-content:flex-start}
  .hero-title{font-size:clamp(32px,8.5vw,36px);line-height:1.12;letter-spacing:-.02em;max-width:none;text-wrap:balance}
  .hero-copy h1{margin-top:0}
  .hero-copy .lead{margin-top:16px;max-width:none}
  .hero-intro-desktop{display:none}
  .hero-intro-mobile{display:inline}
  .hero-actions{margin-top:var(--mobile-group-gap);gap:10px}
  .hero-proof{font-size:16px;line-height:1.55;gap:14px;margin-top:var(--mobile-group-gap);max-width:none}
  .hero-proof .mobile-break{display:none}
  .hero-proof-link{position:relative;font-size:14px;line-height:inherit;min-height:0;display:inline-block;padding-block:0;margin-left:4px}
  .hero-proof-link::before{content:"";position:absolute;top:50%;left:0;right:0;height:44px;transform:translateY(-50%)}

  /* Only the short promotion stays on the photograph. Its full terms follow the CTA. */
  .hero-media .campaign-panel{position:absolute;inset:16px auto auto 16px;width:auto;max-width:calc(100% - 32px);padding:10px 12px;border-radius:12px}
  .hero-media .campaign-panel .label{font-size:11px;line-height:1.3;letter-spacing:.08em}
  .hero-media .campaign-discount{font-size:32px;line-height:1;margin:6px 0 0}
  .hero-media .campaign-panel p,.hero-media .campaign-terms-link,.hero-media .campaign-deadline{display:none}
  .mobile-campaign-copy{display:block;margin-top:var(--mobile-group-gap);font-size:14px;line-height:1.5;color:#53534f}
  .mobile-campaign-copy .campaign-terms-link{min-height:44px;font-size:14px;color:inherit;text-decoration-color:#aaa79f}
  .mobile-campaign-copy .campaign-terms-link:focus-visible{color:#111}
  .hero-media>img.drutex-photo-logo,.cred-image>img.drutex-photo-logo{
    position:absolute;inset:auto auto 16px 16px;width:110px;height:auto;
  }

  .btn,.hero-actions .btn,.service-cta,.credibility-cta{
    min-height:50px;font-size:16px;line-height:1.25;padding:12px 16px;white-space:normal;
  }
  .service-cta,.credibility-cta{width:100%;text-wrap:balance;overflow-wrap:normal}
  .signal-strip{padding-bottom:32px}
  .signal{padding:20px 0}
  .signal strong,.signal span{font-size:16px;line-height:1.55}
  .signal strong{margin-bottom:6px}

  .category-grid,.service-grid,.partner-stack,.delivery-grid,.credibility-grid{gap:var(--mobile-gap)}
  .category,.price-body,.partner-card,.service-main,.delivery-card,.cred-copy{padding:var(--mobile-card-pad)}
  .category,.price-card,.partner-card,.service-main,.delivery-card,.cred-copy,.cred-image{border-radius:20px}
  .category{min-height:190px;row-gap:14px}
  .category-heading{gap:12px;font-size:20px}
  .category p{font-size:16px;line-height:1.55}
  .category .go{font-size:16px;line-height:1.4;min-height:44px;margin-top:8px}
  .service-main,.partner-card{min-height:0}
  .service-main{justify-content:flex-start}
  .service-main h2{max-width:none}
  .service-main .lead{margin-top:16px}
  .service-points{gap:14px;margin-top:var(--mobile-group-gap)}
  .service-points b{flex-basis:1ch}
  .service-points .service-number-prefix{display:none}
  .partner-card h3{margin-top:8px}
  .partner-card p{margin-top:12px}
  .partner-card .partner-cta{min-height:44px;margin-top:var(--mobile-group-gap);font-size:16px}
  .process-grid{gap:0}
  .step{padding:20px 0}
  .step-num{margin-bottom:12px}
  .step p{margin-top:12px}
  .delivery-card>div>strong{font-size:22px;line-height:1.25;letter-spacing:-.015em;margin:12px 0}
  .delivery-meta{margin-top:var(--mobile-group-gap);padding-top:20px;gap:16px}
  .delivery-meta div{gap:6px}
  .delivery-meta b{font-size:14px;line-height:1.5;font-weight:700}
  .delivery-meta span{font-size:16px;line-height:1.55}

  .price-grid{gap:var(--mobile-gap)}
  .product-system{font-size:12px;line-height:1.4;margin-top:6px}
  .price-card .spec-row,.price-card summary,.price-card .details-copy,.included-copy,.included-copy h4{font-size:14px;line-height:1.55}
  .price{font-size:32px;line-height:1.2;padding-top:var(--mobile-group-gap)}
  .old-price,.saving,.prices .price-note{font-size:14px;line-height:1.55}
  .price-tax{font-size:12px;line-height:1.5;margin-top:8px}
  .price-card .btn{margin-top:var(--mobile-group-gap)}
  .prices .price-note{margin-top:var(--mobile-group-gap)}
  .cred-image{min-height:0;height:clamp(240px,70vw,320px)}
  .cred-copy h2{margin:12px 0 16px}
  .proof-list{gap:14px;margin-top:var(--mobile-group-gap)}
  .cred-copy .btn{margin-top:var(--mobile-group-gap)}
  .drutex-info{margin-top:var(--mobile-group-gap);padding-top:20px}
  .drutex-info h3{font-size:16px;line-height:1.4;letter-spacing:0}
  .drutex-info p{font-size:16px;line-height:1.55}
  .drutex-source-link{font-size:14px;min-height:44px}
  .faq-grid,.form-shell{gap:var(--mobile-group-gap)}
  .faq-list details{padding:12px 0}
  .faq-list summary{font-size:16px;line-height:1.5;font-weight:400;min-height:44px;gap:16px}
  .faq-answer,.faq-list details p{padding-right:0;font-size:16px;line-height:1.55}
  .campaign-terms{margin-top:var(--mobile-group-gap);padding-top:var(--mobile-group-gap)}
  .campaign-terms h3{font-size:20px;line-height:1.25}

  /* Form controls keep 16px text and a consistent touch height. */
  #offer #gauper-form-proposal{font-family:inherit;font-size:16px;line-height:1.55}
  #gauper-form-proposal .gp-form-card{padding:var(--mobile-card-pad);border-radius:20px}
  #gauper-form-proposal .gp-field :is(input, .gp-postcode-control){font-size:16px;line-height:1.5;min-height:50px;padding-block:12px}
  #gauper-form-proposal .gp-field :is(input, .gp-postcode-control):focus-visible{padding-block:11.5px}
  #gauper-form-proposal textarea{font-size:16px;line-height:1.5}
  #gauper-form-proposal .gp-field .gp-postcode-control{height:calc(1lh + 27px);padding-block:12px}
  #gauper-form-proposal .gp-field .gp-postcode-control:focus-visible{padding-block:11.5px}
  #gauper-form-proposal .gp-submit{font-size:16px;line-height:1.25;min-height:50px;padding:12px 16px}
  #gauper-form-proposal .gp-snekker-toggle{font-size:16px;line-height:1.5}
  #gauper-form-proposal .gp-contact-section .gp-field-heading>label{font-size:16px}
  #gauper-form-proposal .gp-choice-help{font-size:14px}
  #gauper-form-proposal .gp-service-note,#gauper-form-proposal .gp-share-note,#gauper-form-proposal .gp-contact-help,#gauper-form-proposal .gp-privacy-note{font-size:14px;line-height:1.5}
  #gauper-form-proposal .gp-error,#gauper-form-proposal .gp-field-heading .gp-error{font-size:14px;line-height:1.4}
  #gauper-form-proposal .gp-note{font-size:14px}
  #gauper-form-proposal .gp-success h3{font-family:inherit;font-size:26px;line-height:1.25}
  .form-after{padding:20px 0 0;font-size:14px;line-height:1.55}
  .form-contact-links a{display:inline-flex;align-items:center;min-height:44px}
  footer{padding:48px 0 calc(32px + env(safe-area-inset-bottom,0px))}
  .footer-grid{gap:var(--mobile-group-gap)}
  .footer-bottom .seller-identity{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
  .footer-bottom .seller-identity>span+span::before{content:none}
}

@media(max-width:360px){
  :root{--mobile-edge:14px;--mobile-card-pad:18px}
}