:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:#153b50;background:#f6fbfe}*{box-sizing:border-box}body{margin:0}button,a{font:inherit}button{cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid #007da9;outline-offset:4px}[hidden]{display:none!important}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}.how-guide{max-width:1120px;margin:auto;padding:32px 28px 24px}.guide-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:26px}.guide-eyebrow{font-size:11px;line-height:1.4;font-weight:750;letter-spacing:.14em;color:#438399;margin:0 0 10px}.guide-heading h1{font-size:clamp(30px,4vw,46px);line-height:1.15;letter-spacing:-.04em;color:#153b50;margin:0 0 12px}.guide-lead{font-size:16px;line-height:1.6;color:#5c7686;max-width:590px;margin:0}.motion-toggle{display:flex;align-items:center;gap:8px;flex:none;min-height:44px;border:1px solid #c9e1eb;background:#fff;border-radius:12px;color:#275a72;padding:10px 14px;font-size:13px;font-weight:650}.motion-toggle[aria-pressed=true]{background:#e7f5fc}.guide-steps{position:static!important;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:0 0 18px;padding:0;background:none;border:0;width:auto}.guide-steps button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:56px;padding:8px;border:1px solid #d8e8ef;border-radius:12px;background:#fff;color:#55717f;font-size:13px;font-weight:650}.guide-steps button>span{display:grid;place-items:center;width:25px;height:25px;flex:none;border-radius:50%;background:#edf5f8;color:#547b8d;font-size:12px}.guide-steps button[aria-current=step]{background:#e6f6fe;border-color:#85cbe7;color:#00779f}.guide-steps button[aria-current=step]>span{background:#007fa9;color:#fff}.journey-card{border:1px solid #d5e7ef;border-radius:24px;background:#fff;overflow:hidden;box-shadow:0 9px 32px #193e5210}.journey-visual{position:relative;width:100%;aspect-ratio:3/2;max-height:620px;background:#eaf3f7;overflow:hidden;touch-action:pan-y pinch-zoom}.journey-visual>img{display:block;width:100%;height:100%;object-fit:contain}.journey-effects{position:absolute;inset:0;pointer-events:none}.demo-chip{position:absolute;display:flex;align-items:center;gap:8px;padding:12px 16px;border:1px solid #c4e2ef;border-radius:14px;background:#fffffff0;color:#12637f;font-size:clamp(12px,1.4vw,18px);font-weight:700;box-shadow:0 5px 20px #14344518}.demo-chip svg{width:25px;height:25px}.camera-chip{bottom:9%;right:7%}.focus-frame{position:absolute;inset:18% 22%;border:3px solid #00a8d8;border-radius:14px;box-shadow:0 0 0 8px #fff5}.capture-flash{position:absolute;inset:0;background:white;opacity:0}.shade-swatches{position:absolute;left:9%;bottom:10%;display:flex;gap:10px;padding:12px;border:1px solid #d5e7ef;background:#fffffff2;border-radius:18px;box-shadow:0 8px 25px #153b501a}.shade-swatches i{display:block;width:clamp(24px,4vw,46px);height:clamp(38px,6vw,68px);background:var(--swatch);border-radius:7px;border:3px solid #fff;box-shadow:0 2px 4px #193e5220}.choice-chip{top:10%;right:6%}.compare-demo{position:absolute;inset:10% 12%;border:2px solid #fff9;border-radius:18px}.compare-demo>span{position:absolute;top:14px;padding:6px 10px;background:#fff;border-radius:8px;font-size:13px;font-weight:700;color:#20495b}.compare-demo>span:first-child{left:14px}.compare-demo>span:nth-child(2){right:14px}.compare-demo>i{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;box-shadow:0 0 0 1px #07668055;display:flex;align-items:center;justify-content:center}.compare-demo>i svg{width:44px;height:44px;padding:10px;overflow:visible;border:1px solid #fff;border-radius:50%;background:#007faa;color:white}.preview-chip{bottom:8%;left:8%}.save-chip{top:12%;left:7%}.compare-chip{bottom:12%;right:7%}.measure-demo{position:absolute;left:12%;right:12%;bottom:19%;height:42px;background:repeating-linear-gradient(90deg,#1c758d 0 2px,transparent 2px 12px),linear-gradient(#fcf7dd,#f1deb5);border:2px solid #fff;border-radius:8px;transform-origin:left;box-shadow:0 3px 20px #183b4c25}.measure-demo b{position:absolute;left:50%;top:-42px;transform:translateX(-50%);background:#fffffff2;border:1px solid #d5e7ef;border-radius:9px;padding:7px 12px;white-space:nowrap;font-size:13px;color:#23566b}.measure-chip{top:10%;right:7%}.coverage-pin{position:absolute;display:grid;place-items:center;width:60px;height:60px;border:2px solid #fff;border-radius:50%;background:#007fa9;color:#fff;box-shadow:0 0 0 10px #007fa922}.coverage-pin svg{width:32px;height:32px}.pin-one{top:22%;left:22%}.pin-two{top:33%;right:21%}.pin-three{bottom:27%;left:44%}.quote-chip{bottom:9%;right:7%}.visual-step{position:absolute;top:18px;left:18px;background:#fffffff0;border:1px solid #d5e7ef;border-radius:10px;padding:8px 11px;color:#35677d;font-size:12px;font-weight:700}.replay-motion{position:absolute;bottom:16px;right:16px;width:44px;height:44px;border:1px solid #c1dbe6;border-radius:50%;background:#fff;color:#185a76;font-size:25px;box-shadow:0 3px 12px #173e5218}.guide-copy{padding:25px 30px 30px}.copy-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:4px}.copy-heading .guide-eyebrow{margin:0}.step-arrows{display:flex;gap:8px}.step-arrows button{width:44px;height:44px;border:1px solid #d6e5ec;background:#f7fbfd;border-radius:50%;font-size:23px;color:#285b70}.guide-copy h2{font-size:clamp(24px,3vw,33px);line-height:1.2;letter-spacing:-.025em;margin:12px 0;color:#143b50}.guide-copy>p{font-size:16px;line-height:1.65;max-width:820px;color:#526c7a;margin:0 0 16px}.guide-copy>.step-note{padding:12px 15px;border-radius:12px;border:1px solid #d6e8f2;background:#f2faff;font-size:13px;color:#376178}.guide-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:20px}.guide-primary{display:flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:14px 21px;border-radius:13px;background:#008ccc;color:#fff;text-decoration:none;font-weight:750;font-size:15px;box-shadow:0 5px 14px #008ccc25}.guide-secondary{min-height:44px;display:flex;align-items:center;color:#087b9e;font-size:14px;font-weight:700;text-decoration:none}.guide-footer{display:flex;align-items:center;gap:12px;padding:20px 4px;color:#5b7786;font-size:12px}.guide-footer>svg{color:#56899d}.guide-footer p{line-height:1.6;margin:0;max-width:760px}.guide-footer a{margin-left:auto;flex:none;color:#137f9f;font-weight:700;text-decoration:none;min-height:44px;display:flex;align-items:center}.image-fallback{position:absolute;inset:0;display:grid;place-content:center;padding:30px;text-align:center;color:#456b7e}.image-unavailable .journey-effects{display:none}
@media(prefers-reduced-motion:no-preference){
 .journey-visual>img{animation:photo-breathe 5s ease-in-out infinite}
 .focus-frame{animation:focus-photo 5s ease-in-out infinite}
 .capture-flash{animation:photo-flash 5s ease-in-out infinite}
 .camera-chip,.choice-chip,.preview-chip,.save-chip,.compare-chip,.measure-chip,.quote-chip{animation:chip-arrive 5s ease-out infinite}
 .shade-swatches i{animation:choose-swatch 5s ease-in-out infinite}.shade-swatches i:nth-child(2){animation-delay:.15s}.shade-swatches i:nth-child(3){animation-delay:.3s}.shade-swatches i:nth-child(4){animation-delay:.45s}
 .compare-demo>i{animation:compare-wipe 5s ease-in-out infinite}
 .measure-demo{animation:measure-extend 5s ease-in-out infinite}
 .coverage-pin{animation:map-pulse 5s ease-in-out infinite}.pin-two{animation-delay:.25s}.pin-three{animation-delay:.5s}
}
body[data-motion=paused] .journey-visual *,body[data-visible=false] .journey-visual *{animation-play-state:paused!important}
@keyframes photo-breathe{0%,100%{transform:scale(1)}40%,65%{transform:scale(1.025)}}
@keyframes focus-photo{0%,100%{transform:scale(1);opacity:.75}25%,65%{transform:scale(.96);opacity:1}}
@keyframes photo-flash{0%,28%,36%,100%{opacity:0}31%{opacity:.28}}
@keyframes chip-arrive{0%,100%{transform:translateY(3px);opacity:.78}20%,75%{transform:translateY(0);opacity:1}}
@keyframes choose-swatch{0%,45%,100%{transform:translateY(0)}20%{transform:translateY(-12px);box-shadow:0 0 0 2px #0097bd}}
@keyframes compare-wipe{0%,100%{left:30%}50%{left:70%}}
@keyframes measure-extend{0%,100%{transform:scaleX(.75)}30%,70%{transform:scaleX(1)}}
@keyframes map-pulse{0%,100%{transform:scale(.96);box-shadow:0 0 0 8px #007fa920}35%{transform:scale(1.07);box-shadow:0 0 0 15px #007fa90a}}
@media(max-width:700px){.how-guide{padding:22px 16px 16px}.guide-heading{display:block;margin-bottom:20px}.guide-heading h1{font-size:34px}.guide-lead{font-size:14px}.motion-toggle{margin-top:14px;min-height:44px}.guide-steps{gap:4px}.guide-steps button{flex-direction:column;gap:5px;padding:7px 2px;min-height:62px;font-size:10px;border-radius:9px}.guide-steps button>span{width:23px;height:23px;font-size:11px}.journey-card{border-radius:18px}.journey-visual{max-height:none}.guide-copy{padding:18px 18px 22px}.guide-copy h2{font-size:25px}.guide-copy>p{font-size:14px}.guide-copy>.step-note{font-size:12px;padding:11px 12px}.guide-actions{gap:9px;display:block}.guide-primary{width:100%;font-size:14px}.guide-secondary{justify-content:center;margin-top:5px}.demo-chip{padding:8px 10px;border-radius:10px;font-size:10px;gap:5px}.demo-chip svg{width:17px;height:17px}.focus-frame{border-width:2px;box-shadow:0 0 0 4px #fff5}.shade-swatches{gap:5px;padding:7px;border-radius:10px}.compare-demo>span{top:8px;padding:4px 7px;font-size:10px}.compare-demo>span:first-child{left:8px}.compare-demo>span:nth-child(2){right:8px}.compare-demo>i svg{width:33px;height:33px;padding:7px}.measure-demo{height:25px;background-size:auto;bottom:17%}.measure-demo b{top:-29px;font-size:9px;padding:4px 7px}.coverage-pin{width:36px;height:36px;border-width:1px}.coverage-pin svg{width:21px;height:21px}.visual-step{top:10px;left:10px;font-size:10px;padding:5px 7px}.replay-motion{width:40px;height:40px;bottom:10px;right:10px;min-height:40px;font-size:24px}.guide-footer{align-items:flex-start;flex-wrap:wrap;gap:8px;padding:15px 2px}.guide-footer>p{flex:1;min-width:0}.guide-footer a{width:100%;justify-content:center;margin:0}.camera-chip,.quote-chip{bottom:18%;right:6%}}
@media(max-width:340px){.how-guide{padding-inline:12px}.guide-steps button{font-size:9px}.guide-copy{padding-inline:14px}}

/* Keep44px motion controls outside the illustrated scene on all sizes. */
.motion-controls{display:flex;align-items:center;gap:10px;flex:none}.motion-controls .motion-toggle{margin:0}.motion-controls .replay-motion{position:static;width:44px;height:44px;min-height:44px;flex:none}
@media(max-width:700px){.motion-controls{margin-top:14px}}