/* Phone-only readability layer. Parent loader adds the matching data-template
   attribute to each template body. No desktop, color, font-family, content,
   visibility, animation, or form-behavior changes. Load after brand styles. */
@media (max-width:600px){
  body[data-template]{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body[data-template] main,body[data-template] article,body[data-template] section,body[data-template] form,body[data-template] fieldset{min-width:0}
  body[data-template] p,body[data-template] li,body[data-template] dd{overflow-wrap:break-word}
  body[data-template] :is(.button,.btn,.pill,.ticket,.menu){min-height:48px;max-width:100%;white-space:normal;line-height:1.4;touch-action:manipulation}
  body[data-template] :is(.button,.btn,.pill,.ticket){align-items:center;justify-content:center;text-align:center;font-size:14px}
  body[data-template] .menu{min-width:48px;font-size:14px}
  body[data-template] :is(nav,.nav) a{min-height:44px;line-height:1.5}
  body[data-template] summary{min-height:44px;line-height:1.45;padding-block:8px}
  body[data-template] :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea){font-size:16px;min-height:48px;max-width:100%;box-sizing:border-box}
  body[data-template] :is(input[type=checkbox],input[type=radio]){flex-shrink:0}
  /* Rally: retain the oversized italic identity; loosen dense package copy. */
  body[data-template=rally] .hero h1{font-size:clamp(54px,14vw,78px);line-height:1.02}
  body[data-template=rally] .page-hero h1{font-size:clamp(46px,12vw,68px);line-height:1.05}
  body[data-template=rally] :is(.hero-copy,.page-hero){padding-inline:22px}
  body[data-template=rally] .hero .actions{gap:16px;align-items:stretch}
  body[data-template=rally] .hero .actions .button{width:100%}
  body[data-template=rally] :is(.package-grid p,.service-row p,.light-panel p,.timeline p,.steps-band p,.demo-explainer p){font-size:16px;line-height:1.65}
  body[data-template=rally] :is(.fine,.hero-note,.footer-bottom,.areas span,.service-row aside span){font-size:12px;line-height:1.65}
  body[data-template=rally] .package-grid article{padding:28px 22px}
  body[data-template=rally] .contact-card{padding:28px 22px}
  body[data-template=rally] .service-row ul{font-size:16px;line-height:1.8}
  body[data-template=rally] .areas span{float:none;display:block}
  /* Northline: give restrained service cards and supporting notes readable type. */
  body[data-template=northline] h1{font-size:clamp(42px,11vw,58px);line-height:1.1}
  body[data-template=northline] .pagehead h1{font-size:clamp(42px,11vw,58px)}
  body[data-template=northline] :is(.card p,.service ul,.notecard p,.notecard li,.checklist li){font-size:16px;line-height:1.65}
  body[data-template=northline] :is(.fine,.small,.phase .output,.diagram .cap,.footer p){font-size:13px;line-height:1.65}
  body[data-template=northline] :is(.card,.phase,.box,.notecard){padding:26px 22px}
  body[data-template=northline] .btns{align-items:stretch;gap:16px}
  body[data-template=northline] .btns .btn{width:100%;justify-content:space-between}
  body[data-template=northline] .footlinks{gap:12px 24px}
  body[data-template=northline] .footlinks a{display:inline-flex;align-items:center;min-height:44px}
  /* Forma: keep the editorial serif and airy spacing, soften cramped navigation. */
  body[data-template=forma] h1{font-size:clamp(43px,11.5vw,61px);line-height:1.08}
  body[data-template=forma] .nav nav{width:100%;flex-wrap:wrap;gap:4px 22px;font-size:14px}
  body[data-template=forma] .nav nav a{display:inline-flex;align-items:center}
  body[data-template=forma] :is(.hero p,.step p,.service p,.service ul,details p){font-size:16px;line-height:1.7}
  body[data-template=forma] :is(.fine,.caption,.meta,.fact-grid span,.footer-bottom,.service .price){font-size:12px;line-height:1.65;letter-spacing:.04em}
  body[data-template=forma] .caption{gap:12px;flex-wrap:wrap}
  body[data-template=forma] .arrow{min-height:44px;font-size:14px;gap:18px}
  body[data-template=forma] .footer-links{flex-wrap:wrap;gap:8px 22px;font-size:14px}
  body[data-template=forma] .footer-links a{display:inline-flex;align-items:center;min-height:44px}
  /* Puddle: stack the narrow itinerary instead of squeezing copy beside a time. */
  body[data-template=puddle] .hero h1{font-size:clamp(54px,14vw,80px);line-height:1}
  body[data-template=puddle] .pageintro h1{font-size:clamp(44px,11.5vw,66px);line-height:1.04}
  body[data-template=puddle] .stop{grid-template-columns:minmax(0,1fr);gap:12px;margin-bottom:28px}
  body[data-template=puddle] .time{justify-self:start;min-width:110px;margin:0;padding:10px 18px;font-size:14px}
  body[data-template=puddle] .stop p{font-size:16px;line-height:1.65}
  body[data-template=puddle] :is(.small,.note,.fine){font-size:13px;line-height:1.65}
  body[data-template=puddle] :is(.bubble,.rule){padding:24px}
  body[data-template=puddle] .faq details{padding:18px 22px}
  body[data-template=puddle] .nav a{display:flex;align-items:center;font-size:14px}
  /* Crumb: preserve the bakery menu's price column, stack product storytelling. */
  body[data-template=crumb] .home-top h1{font-size:clamp(48px,12.5vw,72px);letter-spacing:-.045em;line-height:1.05}
  body[data-template=crumb] .page-title h1{font-size:clamp(44px,11.5vw,64px);letter-spacing:-.04em;line-height:1.1}
  body[data-template=crumb] .header{gap:18px;flex-wrap:wrap}
  body[data-template=crumb] .header .pill{font-size:12px;display:inline-flex;padding:10px 16px}
  body[data-template=crumb] .nav{flex-wrap:wrap;gap:4px 20px;font-size:12px}
  body[data-template=crumb] .nav a{display:inline-flex;align-items:center}
  body[data-template=crumb] .product{grid-template-columns:minmax(0,1fr);padding:22px}
  body[data-template=crumb] :is(.product p,.menu-item p,details p,.note){font-size:16px;line-height:1.65}
  body[data-template=crumb] .menu-item{grid-template-columns:minmax(0,1fr) auto;gap:10px 14px}
  body[data-template=crumb] .menu-item small{font-size:12px;line-height:1.5;letter-spacing:.04em}
  body[data-template=crumb] .filters{gap:10px;flex-wrap:wrap}
  body[data-template=crumb] .filters button{min-height:48px;font-size:14px;padding:12px 18px}
  body[data-template=crumb] .story-row{grid-template-columns:minmax(0,1fr);gap:12px}
  body[data-template=crumb] .story-number{font-size:48px}
  body[data-template=crumb] .paper{padding:24px}
  /* Afterhours: preserve kinetic display headings and semantic scrollable schedule. */
  body[data-template=afterhours] :is(.class-copy p,.rules p,.visit>div+div p,.faq details p,.price-content ul,.manifesto p,.poster-bottom p){font-size:16px;line-height:1.65}
  body[data-template=afterhours] :is(.note,.footer-meta,.session p,.price-content>strong span){font-size:12px;line-height:1.65}
  body[data-template=afterhours] .session h3{font-size:clamp(36px,10vw,50px);line-height:1.05}
  body[data-template=afterhours] .filters{align-items:stretch;padding:20px;gap:16px}
  body[data-template=afterhours] .filters label{font-size:12px;line-height:1.5}
  body[data-template=afterhours] .filters select{min-width:0;width:100%}
  body[data-template=afterhours] .reset-filter{min-height:48px;font-size:13px;margin:0;align-self:start}
  body[data-template=afterhours] .filters p{width:100%;margin:0;font-size:12px;line-height:1.6}
  body[data-template=afterhours] .table-wrap{max-width:100%;overscroll-behavior-x:contain}
  body[data-template=afterhours] thead th{font-size:11px;line-height:1.5}
  body[data-template=afterhours] tbody td a{min-height:48px;display:inline-flex;align-items:center;font-size:12px}
  body[data-template=afterhours] .ticket{display:inline-flex;font-size:14px}
  /* Patchwork: readable diagnostic labels and generous estimator controls. */
  body[data-template=patchwork] h1{font-size:clamp(38px,10.5vw,52px);line-height:1.1;letter-spacing:-.045em}
  body[data-template=patchwork] :is(.principle p,.note,.estimate-result p){font-size:16px;line-height:1.65}
  body[data-template=patchwork] :is(.label,.issue-list a>span:last-child,.cost small,.estimate-result small,footer,footer p){font-size:12px;line-height:1.65}
  body[data-template=patchwork] .rail nav a{font-size:12px;min-height:48px;align-items:center}
  body[data-template=patchwork] :is(label,legend){font-size:14px;line-height:1.6}
  body[data-template=patchwork] .radio{min-height:48px;font-size:16px;gap:12px;margin:8px 0}
  body[data-template=patchwork] :is(form,.estimate-result){padding:24px 20px}
  body[data-template=patchwork] .service-table article{grid-template-columns:minmax(0,1fr);gap:12px}
  body[data-template=patchwork] .cost{grid-column:auto}
  body[data-template=patchwork] .service-code small{display:inline;margin-left:12px}
  body[data-template=patchwork] .cost a{font-size:14px;display:inline-flex;align-items:center;min-height:44px}
  body[data-template=patchwork] .contents a{font-size:13px;min-height:44px;line-height:1.5}
  body[data-template=patchwork] .visit-info dl{grid-template-columns:minmax(0,1fr);font-size:14px;line-height:1.7;gap:4px}
  body[data-template=patchwork] .visit-info dd{margin-bottom:14px}
}