/* Window tint page: shade simulator, how-it-works, film tiers, process, price estimator, guarantee. */
.mxt{--navy:#1b3a57;--blue:#4690cd;--sun:#f5c451;--orange:#e8833a;--ink:#1b3a57;--soft:#3b5066;--wash:#e8f1fa}
.mxt h2{margin:0 0 .4rem}
.mxt .mxt-sub{color:var(--soft);max-width:62ch;margin:0 0 1.5rem;font-size:1.0625rem}
.mxt-band{padding-block:clamp(2.5rem,6vw,4.5rem)}
.mxt-band--wash{background:var(--wash)}
.mxt-band--ink{background:var(--navy);color:#e8eef5}
.mxt-band--ink h2,.mxt-band--ink h3{color:#fff}
.mxt-band--ink .mxt-sub{color:#a9c0d6}
/* simulator */
.mxt-sim{display:grid;gap:1.5rem;align-items:center}
@media(min-width:900px){.mxt-sim{grid-template-columns:1.25fr 1fr;gap:2.5rem}}
.mxt-view{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:16/10;background:#0b1724;box-shadow:0 24px 50px -30px #0b1724}
.mxt-view svg{display:block;width:100%;height:100%}
.mxt-film{transition:opacity .45s ease,fill .45s ease}
.mxt-badge{position:absolute;left:1rem;top:1rem;padding:.4rem .75rem;border-radius:999px;font-family:var(--font-display,Montserrat,sans-serif);font-weight:800;font-size:.875rem;background:#fff;color:var(--navy);box-shadow:0 4px 14px #0004}
.mxt-badge[data-legal="no"]{background:#ffe1dc;color:#9b2414}
.mxt-badge[data-legal="yes"]{background:#dff5e4;color:#14612b}
.mxt-temp{position:absolute;right:1rem;top:1rem;padding:.4rem .75rem;border-radius:12px;background:#0b1724cc;color:#fff;font-weight:700;font-size:.875rem}
.mxt-ctrl h3{font-size:1.0625rem;margin:0 0 .5rem}
.mxt-seg{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.25rem;padding:0;list-style:none}
.mxt-seg button{font:inherit;font-weight:700;cursor:pointer;border:2px solid #c9d8e6;background:#fff;color:var(--navy);border-radius:12px;padding:.55rem .85rem;min-width:3.6rem;transition:all .15s ease}
.mxt-seg button:hover{border-color:var(--blue)}
.mxt-seg button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.mxt-seg button:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.mxt-meter{margin:0 0 .85rem}
.mxt-meter__top{display:flex;justify-content:space-between;font-weight:700;font-size:.9375rem;margin-bottom:.3rem}
.mxt-meter__bar{height:12px;border-radius:999px;background:#dbe6f0;overflow:hidden}
.mxt-meter__fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--blue),var(--navy));transition:width .5s cubic-bezier(.3,1,.4,1)}
.mxt-meter--uv .mxt-meter__fill{background:linear-gradient(90deg,#7b5cd6,#4a2fa8)}
.mxt-meter--heat .mxt-meter__fill{background:linear-gradient(90deg,var(--sun),var(--orange))}
.mxt-note{font-size:.9375rem;color:var(--soft);background:#fff;border-left:4px solid var(--sun);padding:.75rem 1rem;border-radius:0 12px 12px 0;margin:1rem 0 0}
/* how it works */
.mxt-how{display:grid;gap:1rem}
@media(min-width:760px){.mxt-how{grid-template-columns:repeat(3,1fr)}}
.mxt-card{background:#fff;border-radius:18px;padding:1.4rem;box-shadow:0 2px 0 #d6e0ea,0 14px 30px -24px #1b3a5780}
.mxt-band--ink .mxt-card{background:#ffffff0d;box-shadow:inset 0 0 0 1px #ffffff1f}
.mxt-card h3{margin:.6rem 0 .35rem;font-size:1.125rem}
.mxt-card p{margin:0;color:inherit;opacity:.9}
.mxt-ico{width:3rem;height:3rem;display:grid;place-items:center;border-radius:14px;background:var(--sun);color:var(--navy)}
.mxt-ico svg{width:1.8rem;height:1.8rem}
.mxt-ray{stroke-dasharray:6 8;animation:mxt-ray 1.6s linear infinite}
@keyframes mxt-ray{to{stroke-dashoffset:-28}}
/* tiers */
.mxt-tiers{display:grid;gap:1rem}
@media(min-width:860px){.mxt-tiers{grid-template-columns:repeat(3,1fr)}}
.mxt-tier{position:relative;background:#fff;border:2px solid #dbe6f0;border-radius:20px;padding:1.5rem;display:flex;flex-direction:column;gap:.6rem;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.mxt-tier:hover{transform:translateY(-3px);border-color:var(--blue);box-shadow:0 20px 40px -28px #1b3a57}
.mxt-tier--best{border-color:var(--navy)}
.mxt-tier__tag{position:absolute;top:-.8rem;left:1.2rem;background:var(--orange);color:#132a40;font-weight:800;font-size:.8125rem;padding:.25rem .65rem;border-radius:999px}
.mxt-tier h3{margin:0;font-size:1.25rem}
.mxt-tier__kind{font-weight:700;color:var(--blue);margin:0}
.mxt-tier ul{margin:0;padding-left:1.1rem;color:var(--soft)}
.mxt-tier li{margin:.2rem 0}
.mxt-dots{display:flex;gap:.25rem;margin:0}
.mxt-dots span{width:.8rem;height:.8rem;border-radius:50%;background:#dbe6f0}
.mxt-dots span.on{background:var(--orange)}
.mxt-tier__row{display:flex;justify-content:space-between;align-items:center;font-size:.9375rem;font-weight:600}
/* process */
.mxt-steps{list-style:none;margin:0;padding:0;display:grid;gap:.75rem;counter-reset:s}
.mxt-step{background:#fff;border-radius:16px;box-shadow:0 2px 0 #d6e0ea}
.mxt-step button{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:grid;grid-template-columns:2.6rem 1fr auto;gap:1rem;align-items:center;padding:1rem 1.15rem;font-family:var(--font-display,Montserrat,sans-serif);font-weight:700;font-size:1.0625rem;color:var(--navy)}
.mxt-step button:focus-visible{outline:3px solid var(--sun);outline-offset:2px;border-radius:16px}
.mxt-step__n{width:2.6rem;height:2.6rem;border-radius:50%;display:grid;place-items:center;background:var(--wash);border:3px solid var(--blue)}
.mxt-step__time{font-family:var(--font-body,Figtree,sans-serif);font-weight:600;font-size:.875rem;color:var(--soft)}
.mxt-step__body{padding:0 1.15rem 1.1rem 4.75rem;color:var(--soft);display:none}
.mxt-step[open] .mxt-step__body{display:block}
.mxt-step[open] .mxt-step__n{background:var(--blue);color:#fff}
/* estimator */
.mxt-est{display:grid;gap:1.5rem}
@media(min-width:900px){.mxt-est{grid-template-columns:1.2fr 1fr;align-items:start}}
.mxt-out{background:#fff;color:var(--navy);border-radius:20px;padding:1.5rem;box-shadow:0 20px 40px -30px #000}
.mxt-out__price{font-family:var(--font-display,Montserrat,sans-serif);font-weight:900;font-size:clamp(2rem,6vw,2.75rem);line-height:1.1;margin:.25rem 0 .5rem}
.mxt-out__small{color:var(--soft);font-size:.9375rem;margin:0 0 1rem}
.mxt-band--ink .mxt-seg button{background:#ffffff10;border-color:#ffffff38;color:#fff}
.mxt-band--ink .mxt-seg button[aria-pressed="true"]{background:var(--sun);border-color:var(--sun);color:#132a40}
/* guarantee */
.mxt-g{display:grid;gap:1.25rem}
@media(min-width:860px){.mxt-g{grid-template-columns:1fr 1fr}}
.mxt-g ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.mxt-g li{display:flex;gap:.6rem;align-items:flex-start}
.mxt-g li:before{content:"";flex:none;width:1.35rem;height:1.35rem;margin-top:.1rem;border-radius:50%;background:#2f9e55 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' stroke='white' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/80% no-repeat}
.mxt-g .mxt-no li:before{background:#c5d2de url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 6l8 8M14 6l-8 8' stroke='white' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/70% no-repeat}
.mxt-seal{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-display,Montserrat,sans-serif);font-weight:900;font-size:1.25rem;color:var(--navy);background:var(--sun);padding:.6rem 1rem;border-radius:14px;margin:0 0 1rem}
.mxt-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.25rem}
@media (prefers-reduced-motion:reduce){.mxt-ray{animation:none}.mxt-film,.mxt-meter__fill,.mxt-tier{transition:none}}