/* V4 local review. Existing Decode Modus identity, with a guided product story. */
.guided-page { --guide-tint:#eef2f0; --guide-line:#cdd8d1; }
.guided-page .header { height:80px; }
.guided-hero { grid-template-columns:1.08fr .92fr; gap:68px; padding:48px 0 52px; }
.product-category { color:var(--red); font-size:16px; font-weight:650; margin:0 0 16px; }
.guided-hero h1 { font-size:clamp(36px,4.7vw,58px); line-height:1.28; letter-spacing:-.025em; margin:0 0 22px; }
.guided-hero .hero-pain { font-size:16px; line-height:1.9; margin:0 0 23px; }
.solution-intro h2 { font-size:23px; line-height:1.5; margin:0 0 8px; }
.solution-intro p { font-size:16px; line-height:1.9; color:var(--muted); margin:0 0 24px; }
.guided-hero .hero-action { gap:16px; flex-wrap:wrap; }
.guided-hero .hero-action>span { font-size:13px; }
.audience-note { margin:17px 0 0; font-size:12px; color:var(--muted); }
.hero-visual { margin:0; padding:26px; border:1px solid var(--line); background:var(--guide-tint); border-radius:12px; }
.visual-title { display:flex; justify-content:space-between; margin-bottom:16px; font-size:15px; font-weight:600; }
.hero-visual>img { width:100%; height:auto; display:block; border-radius:6px; }
.visual-result { display:flex; align-items:center; gap:13px; margin-top:18px; padding:20px 0 3px; border-top:1px solid var(--guide-line); }
.visual-result>img { flex-shrink:0; }
.visual-result>div { flex:1; }
.visual-result b,.visual-result span { display:block; }
.visual-result b { font-size:16px; }
.visual-result span { font-size:11px; color:var(--muted); }
.visual-result>strong { font-size:22px; letter-spacing:-.025em; white-space:nowrap; }
.hero-visual figcaption { margin-top:17px; font-size:11px; color:var(--muted); }
.demo-primer { padding:34px 0 27px; border-top:1px solid var(--line); max-width:760px; }
.demo-primer h2 { font-size:34px; line-height:1.4; margin:0 0 13px; }
.demo-primer h2 br { display:none; }
.demo-primer>p { font-size:16px; line-height:1.85; max-width:54ch; margin:0 0 10px; }
.demo-primer .demo-boundary { font-size:13px; color:var(--muted); margin:0; }
#demo .demo-card { background:var(--guide-tint); border-color:var(--guide-line); padding:26px; scroll-margin-top:16px; }
#demo .experience-heading { margin-bottom:14px; }
#demo .experience-heading>div { gap:12px; }
#demo .experience-heading .demo-label { font-size:12px; padding:3px 7px; border:1px solid #a3b9ab; border-radius:4px; color:#335843; }
#demo .experience-heading h2 { font-size:19px; }
.journey-progress { display:flex; gap:12px; list-style:none; padding:0 0 15px; margin:0; border-bottom:1px solid var(--guide-line); }
.journey-progress li { display:flex; align-items:center; gap:8px; flex:1; font-size:14px; color:var(--muted); line-height:1.5; }
.journey-progress li>span { display:grid; place-items:center; width:25px; height:25px; border:1px solid #a6b3aa; border-radius:50%; flex-shrink:0; font-size:12px; }
.journey-progress [data-state=current] { color:var(--ink); font-weight:650; }
.journey-progress [data-state=current]>span { background:var(--red); border-color:var(--red); color:white; }
.journey-progress [data-state=done]>span { background:#d6e8dc; border-color:#a3b9ab; color:#20563b; }
#demo .demo-navigation { justify-content:flex-end; margin:0; min-height:0; height:0; position:relative; }
#demo #back-to-order { position:absolute; right:0; top:4px; font-size:12px; }
.journey-guide { padding:23px 0 22px; max-width:66ch; }
.journey-guide h3 { font-size:23px; line-height:1.5; margin:0 0 8px; }
.journey-guide p { font-size:15px; line-height:1.85; color:#44564a; margin:0; max-width:58ch; }
.workbench { align-items:start; }
#demo .intake-state>h3.sr-only,#demo .customer-state>h3.sr-only { margin:0; }
#demo .intake-state,#demo .customer-state { min-height:0; padding-top:0; }
#demo .quote-result .change-order { display:flex; align-items:center; justify-content:center; width:100%; padding:10px 12px; min-height:46px; margin:14px 0 0; border:1px solid #a8c0b0; border-radius:6px; background:#e2ece5; color:#234f35; font-size:14px; }
#demo .quote-result .change-note:not([hidden]) { display:block; font-size:13px; margin:9px 0 0; color:#234f35; }
.quantity-guide { font-size:13px; line-height:1.65; color:var(--muted); margin:4px 0 12px; }
#demo #review-customer { margin-top:20px; }
.guided-page .future-copy>p { font-size:16px; }
.guided-page .value-section { gap:76px; padding-top:55px; padding-bottom:65px; }
.guided-page .work-proof>p { font-size:15px; line-height:1.85; margin:0 0 8px; }
.guided-page .work-proof .text-link { font-size:14px; }
.guided-page .closing { padding-top:65px; padding-bottom:60px; }
.guided-page .closing>div>p { max-width:38ch; font-size:16px; line-height:1.9; }
.guided-page .closing>div>small { font-size:13px; }
.guided-page .questions p { font-size:14px; }
.guided-page .mobile-contact>span { font-size:12px; }
.guided-page .mobile-contact .button { font-size:13px; min-height:46px; white-space:nowrap; }
.guided-page .preview-dialog { width:min(580px,calc(100vw - 24px)); }
.guided-page .preview-dialog .dialog-top h2 { font-size:23px; max-width:20ch; }
.quote-output-actions { padding-top:9px; }
.quote-secondary-actions { flex-wrap:wrap; gap:8px 16px; }
.quote-secondary-actions .text-link { font-size:13px; }
.demo-payoff { padding-top:22px; margin-top:10px; border-top:1px solid var(--line); }
.completion-mark { display:flex; gap:8px; align-items:center; color:#245a3c; font-size:13px; margin:0 0 12px; }
.demo-payoff>h3 { font-size:22px; line-height:1.5; margin:0 0 13px; }
.demo-payoff ul { padding-left:20px; margin:0 0 23px; font-size:14px; line-height:1.85; }
.demo-payoff li+li { margin-top:6px; }
.demo-payoff>.time-headline { font-size:24px; line-height:1.5; margin-bottom:15px; text-wrap:initial; }
.time-headline .time-before { white-space:nowrap; }
.time-headline strong { color:var(--red); font-weight:750; white-space:nowrap; }
.demo-payoff>.time-benefits { margin-bottom:22px; }
.payoff-invite { background:var(--guide-tint); border-radius:8px; padding:21px; }
.payoff-invite h3 { font-size:23px; line-height:1.5; margin:0 0 10px; }
.payoff-invite p { font-size:14px; line-height:1.8; margin:0 0 17px; }
.payoff-invite small { display:block; text-align:center; font-size:12px; color:var(--muted); margin-top:9px; }
.preview-form-note { font-size:12px; line-height:1.6; color:#75511f; padding:9px 11px; background:#f7efde; border-radius:5px; margin:0 0 13px; }
.guided-page #booking-intro { font-size:14px; line-height:1.8; }
.guided-page .booking-dialog .dialog-top h2 { font-size:24px; }
.guided-page .booking-dialog .form-step>label { font-size:14px; }
.guided-page #booking-result>p { font-size:15px; line-height:1.85; }
.guided-page #booking-result>.preview-form-note { font-size:12px; }
.local-result-icon { padding:0 0 10px; }
.preview-details { border-block:1px solid var(--line); margin:16px 0 20px; }
.preview-details summary { padding:12px 0; cursor:pointer; font-size:14px; }
.guided-page #preview-content { overscroll-behavior:contain; }
.guided-page button:focus-visible,.guided-page a:focus-visible { outline:2px solid var(--red); outline-offset:4px; }
@media (hover:hover) { .guided-page .button-red:hover { background:var(--red-hover); } #demo .change-order:hover { background:#d6e5da; } }
@media (max-width:1000px) and (min-width:801px) {
 .guided-hero { gap:32px; }
 .hero-visual { padding:18px; }
 .visual-result { flex-wrap:wrap; }
 .visual-result>strong { width:100%; margin-left:45px; }
 .journey-guide { max-width:70%; }
}
@media (max-width:800px) {
 .guided-page .header { height:72px; }
 .guided-page .header nav { gap:9px; }
 .guided-page .header .button { display:none; }
 .guided-hero { display:block; padding:31px 0 29px; }
 .product-category { font-size:15px; margin-bottom:13px; }
 .guided-hero h1 { font-size:clamp(32px,8.2vw,42px); line-height:1.32; margin-bottom:17px; }
 .guided-hero .hero-pain { font-size:15px; line-height:1.8; margin-bottom:20px; }
 .solution-intro h2 { font-size:22px; line-height:1.45; margin-bottom:7px; }
 .solution-intro p { font-size:15px; line-height:1.8; margin-bottom:20px; }
 .desktop-break { display:none; }
 .guided-hero .hero-action { gap:12px; }
 .guided-hero .hero-action .button { min-height:50px; font-size:15px; }
 .guided-hero .hero-action>span { font-size:12px; }
 .audience-note { font-size:12px; line-height:1.7; margin-top:16px; }
 .hero-visual { display:none; }
 .demo-primer { margin:0 8px; padding:25px 0 23px; }
 .demo-primer h2 { font-size:28px; line-height:1.45; margin-bottom:12px; }
 .demo-primer h2 br { display:block; }
 .demo-primer>p { font-size:15px; line-height:1.8; margin-bottom:9px; }
 .demo-primer .demo-boundary { font-size:12px; }
 #demo .demo-card { padding:16px 14px; scroll-margin-top:10px; }
 #demo .experience-heading { margin:0 0 14px; }
 #demo .experience-heading>div { gap:8px; }
 #demo .experience-heading h2 { font-size:16px; }
 #demo .experience-heading .demo-label { font-size:11px; }
 #demo .experience-heading #reset-demo { font-size:12px; }
 .journey-progress { gap:8px; padding-bottom:15px; }
 .journey-progress li { gap:5px; font-size:12px; }
 .journey-progress li>span { width:22px; height:22px; font-size:11px; }
 #demo #back-to-order { top:2px; min-height:44px; font-size:12px; }
 .journey-guide { max-width:none; padding:21px 0 18px; }
 .demo-card:has(#back-to-order:not([hidden])) .journey-guide { padding-top:46px; }
 .journey-guide h3 { font-size:20px; line-height:1.5; margin-bottom:8px; }
 .journey-guide p { font-size:14px; line-height:1.8; }
 #demo .wa-bubble p,#demo .order-lines p { font-size:14px; }
 #demo .source-action>.button { font-size:15px; }
 #demo .intake-state textarea { font-size:15px; }
 #demo .clipboard-receipt { font-size:12px; }
 #demo .quote-result .change-order { display:flex; font-size:14px; margin-top:13px; }
 #demo .quote-result .change-note:not([hidden]) { display:block; }
 #demo .quote-line>div>b { font-size:13px; }
 #demo .quote-line .compact-product-detail { font-size:11px; }
 #demo .quote-line>strong { font-size:13px; }
 #demo .customer-state .quote-customer small { font-size:12px; }
 .guided-page .value-section { padding:36px 0 43px; gap:25px; }
 .guided-page .future-copy>p { font-size:15px; line-height:1.9; }
 .guided-page .value-section h2 { font-size:29px; }
 .guided-page .value-section .workload-headline { font-size:clamp(24px,7.1vw,29px); }
 .guided-page .closing { padding-top:40px; padding-bottom:42px; gap:34px; }
 .guided-page .closing>div>p { font-size:15px; line-height:1.85; }
 .guided-page .closing .button { font-size:15px; }
 .guided-page .closing>div>small { font-size:12px; }
 .guided-page .questions summary { font-size:14px; }
 .guided-page .preview-dialog .dialog-top { margin-bottom:15px; }
 .guided-page .preview-dialog .dialog-top h2 { font-size:20px; line-height:1.5; }
 .guided-page .preview-dialog .text-link { font-size:12px; }
 .payoff-invite { padding:17px; }
 .payoff-invite h3 { font-size:21px; }
 .demo-payoff>h3 { font-size:21px; }
 .demo-payoff>.time-headline { font-size:22px; }
 .guided-page .booking-dialog .dialog-top h2 { font-size:22px; }
 .guided-page #booking-intro { font-size:14px; }
 .guided-page #booking-dialog .button { font-size:15px; }
 .guided-page #contact-step .lead-field label { font-size:14px; }
 .guided-page #contact-step .lead-field small { font-size:12px; }
}
@media (max-width:374px) {
 .guided-hero h1 { font-size:32px; }
 .guided-hero .hero-action { gap:9px; }
 .guided-hero .hero-action>span { font-size:11px; }
 #demo .experience-heading h2 { font-size:15px; }
 .journey-progress { gap:4px; }
 .journey-progress li { font-size:11px; gap:4px; }
 .guided-page .mobile-contact { gap:8px; padding-inline:12px; }
 .guided-page .mobile-contact>span { font-size:11px; }
 .guided-page .mobile-contact .button { font-size:12px; }
 .demo-payoff>.time-headline { font-size:20px; }
}
@media (prefers-reduced-motion:reduce) { .guided-page * { scroll-behavior:auto!important; } }