/* Mat pages JPT5060 / 60100 / 16060 / 200120: lifestyle scene sequence and thermography module (Claude 2026-11-07).
   Uses the pad-modules.css tokens (.pad-mod) so the four mats read like the two pads. */
.ms-experience{padding:100px 0 80px;background:#fff}
.ms-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:5%;align-items:center}
.ms-scenes{min-width:0}
.ms-stage{display:grid;isolation:isolate}
.ms-scene{grid-area:1/1;margin:0;min-width:0;opacity:0;visibility:hidden;transition:opacity .85s ease,visibility .85s;pointer-events:none}
.ms-scene.is-active{opacity:1;visibility:visible;pointer-events:auto}
.ms-scene img{display:block;width:100%;height:auto;aspect-ratio:1.38;object-fit:cover}
.ms-scene figcaption{display:flex;gap:22px;padding:24px 4px 16px;min-height:112px;font-size:12px;color:var(--ink)}
.ms-scene figcaption>span{font-size:10px;letter-spacing:.14em;color:var(--shu);padding-top:6px}
.ms-scene h3{font-weight:400;font-size:18px;line-height:1.7;letter-spacing:.04em;margin:0 0 6px;color:var(--ink)}
.ms-scene p{font-size:12px;line-height:2;color:var(--mute);margin:0}
.ms-controls{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:6px 4px 16px;border-bottom:1px solid var(--line)}
.ms-controls>div{display:flex;gap:14px;width:60%;max-width:280px}
.ms-controls [data-scene-select]{flex:1;background:transparent;border:0;padding:6px 0 0;cursor:pointer;font:10px var(--sans);letter-spacing:.14em;color:#8f8f8f;text-align:left}
.ms-controls [data-scene-select] i{display:block;height:1px;background:var(--line);margin-top:8px}
.ms-controls [data-scene-select][aria-pressed="true"]{color:var(--shu)}
.ms-controls [data-scene-select][aria-pressed="true"] i{background:var(--shu2)}
.ms-controls [data-scenes-pause]{background:transparent;border:0;border-bottom:1px solid #ababab;color:#747474;font:10px var(--sans);letter-spacing:.06em;padding:3px 0 7px;cursor:pointer;white-space:nowrap}
.ms-scenes>.pad-note{margin:14px 4px 0}

/* ---- thermography of the heating element ---- */
.mt{padding:90px 0;background:#fff}
.mt .cf-head{margin-bottom:40px}
.mt-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:40px 5%;align-items:start}
.mt-hero{margin:0}
.mt-hero img{display:block;width:100%;height:auto}
.mt-hero figcaption,.mt-shot figcaption{font-size:12px;line-height:1.9;color:var(--note);padding-top:12px}
.mt-side{display:grid;gap:22px;align-content:start}
.mt-shot{margin:0}
.mt-shot img{display:block;width:100%;height:auto}
.mt-reading span{display:block;font-size:10px;letter-spacing:.14em;color:#8f8f8f;margin-bottom:8px}
.mt-reading strong{display:block;font-weight:300;font-size:44px;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}
.mt-reading strong small{font-size:14px;margin-left:6px;color:var(--mute)}
.mt-reading p{margin:10px 0 0;font-size:12px;line-height:1.9;color:var(--note)}
.mt .pad-um{margin-top:0}
.mt .pad-fir-link{justify-self:start}

/* the shared controller film on a mat page */
.mat-product .cf{background:transparent}   /* sits on the page paper, not a white card (2026-11-07) */

@media(max-width:1000px){.ms-grid{grid-template-columns:1fr;gap:32px}.mt-grid{grid-template-columns:1fr}}
@media(max-width:640px){.ms-experience{padding:65px 0 40px}.mt{padding:60px 0}.ms-scene img{aspect-ratio:1.2}.ms-scene figcaption{gap:14px;min-height:120px}}

/* ---- safety: five requests, written to reassure ---- */
.mat-safety{padding:80px 0 70px;border-top:1px solid var(--line)}
.mat-safety .cf-head{margin-bottom:36px}
.mat-safety-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px 5%}
.mat-safety-list li{display:grid;grid-template-columns:28px 1fr;gap:14px;padding-top:18px;border-top:1px solid var(--line)}
.mat-safety-list svg{width:26px;height:26px;stroke:var(--shu);fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.mat-safety-list span{display:block;font-size:10px;letter-spacing:.16em;color:#8f8f8f;margin-bottom:6px}
.mat-safety-list h3{margin:0 0 8px;font-weight:400;font-size:16px;line-height:1.7;letter-spacing:.04em;color:var(--ink)}
.mat-safety-list p{margin:0;font-size:12.5px;line-height:2;color:var(--mute)}
.mat-safety-more{margin:34px 0 0;padding-top:18px;border-top:1px solid var(--line);display:grid;grid-template-columns:160px 1fr;gap:12px 24px}
.mat-safety-more>span{font-size:10px;letter-spacing:.16em;color:#8f8f8f;padding-top:3px}
.mat-safety-more ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.mat-safety-more li{position:relative;padding-left:14px;font-size:12px;line-height:1.9;color:var(--note)}
.mat-safety-more li::before{content:"";position:absolute;left:0;top:.85em;width:6px;height:1px;background:var(--shu2)}
.mat-use-caution a{color:var(--shu);text-decoration:none;border-bottom:1px solid currentColor}
.cf-range-note{margin:16px 0 0;font-size:12px;line-height:1.9;color:var(--ink);padding:12px 14px;background:#f3efe8;border-left:2px solid var(--shu2)}
@media(max-width:1000px){.mat-safety-list{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.mat-safety{padding:60px 0 50px}.mat-safety-more{grid-template-columns:1fr}.mat-safety-list{grid-template-columns:1fr;gap:18px}}