/* Native lower product explainers and coverage. */
.cm-continuity>.cx-explainer{grid-column:1/-1;margin-top:0}
/* Coverage uses the product's address-selection page, in both device previews. */
.cx-address-reference .cx-stage{background:var(--odx-bg)}
.cx-explainer:has(.cu-expanded){isolation:auto;z-index:10010}
.cx-explainer:has(.cu-expanded) .cx-stage{z-index:10010}
.cu-location-coverage .cu-address-card{z-index:500}
.cu-location-coverage .cu-onboard-steps{z-index:500}
.cu-location-coverage .cu-address-examples{display:block;border:0;background:none;margin:18px auto 0;padding:2px;color:var(--cu-primary);font-size:13px;text-decoration:underline;text-underline-offset:3px}
.cu-suggestions .cu-eligible{color:var(--cu-primary)!important}
.cu-location-coverage .cu-address-help.cu-outside-help{color:#b42318}
.cu-location-coverage .cu-no-address{padding:18px;font-size:13px;margin:0}
.cu-coverage-legend{position:absolute;left:28px;bottom:32px;z-index:450;display:flex;align-items:center;gap:9px;padding:11px 15px;background:#fffffff5;border:1px solid #ddd;border-radius:7px;box-shadow:0 2px 10px #0002;font-size:13px;color:#333}
.cu-coverage-legend>i{width:20px;height:12px;display:block;border:2px solid var(--cu-primary);background:var(--cu-soft)}
.cu-map-host .cu-coverage-pin{background:none;border:0;color:#222}
.cu-coverage-pin>b{display:grid;place-items:center;width:30px;height:30px;transform:rotate(-45deg);border-radius:50% 50% 50% 0;border:3px solid white;background:var(--cu-primary);box-shadow:0 2px 8px #0005;color:white;font:700 19px/1 Arial}
.cu-coverage-pin.is-outside>b{background:#b42318}
.cu-coverage-pin>b>i{font-style:normal;transform:rotate(45deg)}
.cu-coverage-pin.is-selected>b{outline:3px solid #fff9;outline-offset:3px}
.cu-coverage-pin>span{position:absolute;left:37px;top:-5px;background:#fff;box-shadow:0 2px 8px #0003;border-radius:5px;padding:5px 9px;white-space:nowrap;color:#222!important;font:600 13px/1.3 Arial!important}
.product-page .cu-coverage-pin>span>small{display:block;font:10px/1.5 Arial!important;color:#626262!important}
.cu-phone .cu-location-coverage .cu-address-card{position:absolute;top:82px;left:16px;right:16px;transform:none;width:auto;padding:20px 23px}
.cu-phone .cu-location-coverage .cu-address-card h3{margin-bottom:9px}
.cu-phone .cu-location-coverage .cu-address-card>p{margin-bottom:18px}
.cu-phone .cu-location-coverage .cu-address-actions{margin-top:23px}
.cu-phone .cu-location-coverage .cu-address-examples{font-size:10px;margin-top:12px}
.cu-phone .cu-location-coverage .cu-suggestions{max-height:125px}
.cu-phone .cu-location-coverage .cu-suggestions button{padding:9px 10px}
.cu-phone .cu-location-coverage .cu-coverage-legend{left:13px;bottom:27px;padding:6px 8px;font-size:10px;gap:6px}
.cu-phone .cu-location-coverage .cu-coverage-legend>i{width:15px;height:10px}
.cu-phone .cu-coverage-pin>b{width:22px;height:22px;border-width:2px;font-size:14px}
.cu-phone .cu-coverage-pin>span{left:25px;top:-4px;padding:4px 5px;font-size:9px!important}
.product-page .cu-phone .cu-coverage-pin>span>small{font-size:7px!important}

/* Remaining explainers use native product surfaces, never standalone marketing panels. */
.cx-explainer .cx-stage:has(.cu-device-pair){height:auto;max-height:none;overflow:visible;background:var(--odx-bg)}
.cu-question-card>footer{display:flex;justify-content:space-between;gap:16px}
.cu-pricing-quantity{display:flex;align-items:center;justify-content:space-between;margin:28px 0;font-size:15px;color:#555;gap:20px}
.cu-pricing-quantity select{font:inherit;padding:12px;border:1px solid #ddd;background:white;border-radius:8px;color:#333;min-width:160px}
.cu-condition-result{margin-top:22px!important;line-height:1.5}
.cu-target-options{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.cu-target-options .cu-btn{font-size:11px;padding:6px 8px;min-height:28px}
.cu-record-row{display:flex;justify-content:space-between;gap:24px;padding:16px 0;border-bottom:1px solid #eee;font-size:15px;line-height:1.5;color:#777}
.cu-record-row strong{text-align:right;color:#333;font-weight:500}
.cu-record-status{display:inline-flex;padding:7px 13px;background:var(--cu-soft);color:var(--cu-primary);border:1px solid var(--cu-border);border-radius:6px;font-size:13px;font-weight:600}
.cu-record-address{display:flex;gap:16px;align-items:center;padding:20px 0;color:#333}
.cu-record-address>i{font-size:25px;color:var(--cu-primary)}
.cu-record-address small,.cu-record-address strong,.cu-record-address span{display:block;line-height:1.5}
.cu-record-address small{font-size:12px;color:#888}
.cu-record-address strong{font-size:18px}
.cu-record-address span{font-size:13px;color:#777}
.product-page .cu-record-form h3,.product-page .cu-assessment-context h3{font-size:24px;margin:12px 0 22px}
.product-page .cu-record-form p,.product-page .cu-assessment-context p{font-size:16px;line-height:1.6;color:#777}
.cu-record-form .cu-field>span{font-size:14px}
.cu-record-form .cu-field input{height:48px;font-size:16px}
.cu-record-form .cu-field textarea{width:100%;height:130px;resize:vertical;border:1px solid #ddd;border-radius:9px;padding:15px;font:16px/1.6 Arial,sans-serif;background:white;color:#333}
.cu-record-background>h3{margin:30px}
.cu-record-background>article{margin:30px;background:white;border-radius:15px;padding:35px}
.cu-record-timeline{list-style:none;margin:30px 0;padding:0}
.cu-record-timeline li{position:relative;border-left:2px solid #e5e5e5;padding:0 0 32px 28px;margin-left:8px;font-size:16px}
.cu-record-timeline li:before{content:'';position:absolute;width:14px;height:14px;background:#ddd;border:3px solid white;border-radius:50%;left:-8px;top:2px}
.cu-record-timeline li.done:before{background:var(--cu-primary)}
.cu-record-timeline li:last-child{border-left-color:transparent}
.cu-record-timeline span{display:block;color:#777;margin-top:6px;font-size:14px}
.cu-assessment-dialog>footer{justify-content:space-between}
.cu-assessed-quote{display:grid;grid-template-columns:1fr 400px;gap:28px;padding:28px;height:calc(100% - 104px);overflow:auto}
.cu-assessed-quote>main{padding:20px}
.product-page .cu-assessed-quote h3{font-size:25px;margin:0 0 20px}
.product-page .cu-assessed-quote p{font-size:16px;color:#777;line-height:1.6;margin-bottom:28px}
.cu-assessed-option{width:100%;background:white;padding:30px;margin:20px 0;text-align:left}
.cu-assessed-option>span{flex:1}
.cu-assessed-option strong,.cu-assessed-option small{display:block}
.cu-assessed-option small{font-size:14px;color:#777;margin-top:8px}
.cu-assessed-option>b{font-size:24px;color:var(--cu-primary)}
.cu-assessed-quote .cu-summary{height:max-content}
.cu-assessed-quote .cu-summary>.cu-btn{width:100%;margin-top:20px}
.cu-portal-header{height:88px;border-bottom:1px solid #eee;background:white;padding:24px 35px;display:flex;gap:28px;align-items:center;font-size:17px}
.cu-portal-header>strong{font-size:24px;color:var(--cu-primary)}
.cu-portal-header>span{color:#777}
.cu-portal-header>b{margin-left:auto;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--cu-soft);color:var(--cu-primary);font-size:14px}
.cu-portal-shell{display:flex;height:calc(100% - 88px)}
.cu-portal-nav{width:270px;flex:none;padding:30px 20px;background:white;border-right:1px solid #eee;display:flex;flex-direction:column;gap:10px}
.cu-portal-nav .cu-btn{justify-content:flex-start;text-align:left;border-radius:8px;font-size:16px;min-height:45px}
.cu-portal-nav .cu-btn:last-child{margin-top:24px}
.cu-portal-content{flex:1;min-width:0;overflow:auto;padding:38px 48px;background:#fafafa}
.product-page .cu-portal-content>h3,.product-page .cu-invoice-heading h3{font-size:28px;margin:0 0 12px}
.product-page .cu-portal-content p{font-size:16px;color:#777;line-height:1.6;margin:0 0 28px}
.cu-account-service{display:flex;background:white;border:1px solid #eee;border-radius:14px;overflow:hidden;max-width:1050px;margin-top:30px}
.cu-account-service>img{width:36%;max-width:360px;object-fit:cover}
.cu-account-service>div{padding:30px;flex:1}
.product-page .cu-account-service h3,.product-page .cu-appointment h3,.product-page .cu-account-detail h3{font-size:23px;margin:18px 0 10px}
.cu-account-service .cu-btn{margin-top:24px}
.cu-appointment{display:flex;background:white;border:1px solid #eee;border-radius:14px;padding:32px;gap:30px;max-width:1050px;margin-top:30px}
.cu-calendar-date{background:var(--cu-soft);border:1px solid var(--cu-border);border-radius:10px;width:120px;height:140px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--cu-primary);flex:none}
.cu-calendar-date small{font-size:16px}.cu-calendar-date strong{font-size:52px;line-height:1.2}.cu-calendar-date span{font-size:11px}
.cu-appointment>div:last-child{flex:1}
.cu-account-detail{background:white;border:1px solid #eee;border-radius:14px;padding:25px 32px;max-width:1050px;margin-top:22px}
.cu-account-detail .cu-btn{margin-top:18px}
.cu-invoice-heading{display:flex;justify-content:space-between;align-items:flex-start;max-width:1050px}
.cu-invoice-sheet{background:white;border:1px solid #eee;border-radius:14px;padding:34px;max-width:1050px;margin-bottom:22px}
.cu-invoice-parties{display:flex;justify-content:space-between;gap:25px;margin-bottom:35px;align-items:center}
.cu-invoice-parties>div:first-child>*{display:block;font-size:14px;line-height:1.7}.cu-invoice-parties>div:first-child>strong{font-size:18px}
.cu-invoice-parties small,.cu-invoice-parties span{color:#888}
.cu-invoice-line{display:flex;justify-content:space-between;gap:25px;padding:18px 0;border-bottom:1px solid #eee;font-size:16px}
.cu-invoice-line small{display:block;font-size:12px;color:#777;margin-top:7px}
.cu-record-muted{color:#888}
.cu-invoice-totals{margin:20px 0 0 auto;width:45%;min-width:300px}
.cu-invoice-totals .cu-record-row{padding:9px 0}
.cu-invoice-totals .cu-record-row:last-child{color:var(--cu-primary);font-weight:600;border:0}
.cu-record-activity{max-width:1050px;border-left:3px solid var(--cu-primary);background:var(--cu-soft);padding:20px;margin-top:20px;font-size:14px}
.cu-record-activity .cu-record-row{font-size:13px;padding:8px 0}
.cu-phone .cu-pricing-quantity{font-size:11px;margin:20px 0;gap:10px}.cu-phone .cu-pricing-quantity select{font-size:11px;padding:8px;min-width:120px}
.cu-phone .cu-condition-result{font-size:10px;line-height:1.6}
.cu-phone .cu-target-options .cu-btn{font-size:9px;min-height:25px;padding:4px 8px}
.cu-phone .cu-record-row{font-size:10px;padding:10px 0;gap:12px}
.cu-phone .cu-record-status{font-size:9px;padding:4px 8px}
.cu-phone .cu-record-address{gap:9px;padding:14px 0}.cu-phone .cu-record-address>i{font-size:17px}
.cu-phone .cu-record-address small{font-size:8px}.cu-phone .cu-record-address strong{font-size:13px}.cu-phone .cu-record-address span{font-size:9px}
.cu-phone .cu-assessment-dialog .cu-checkout-body>div{padding:18px!important}
.cu-phone .cu-assessment-dialog .cu-checkout-body{overflow:auto}
.cu-phone .cu-assessment-context{display:none}
.product-page .cu-phone .cu-record-form h3{font-size:17px;margin:12px 0 17px}
.product-page .cu-phone .cu-record-form p{font-size:11px;line-height:1.6}
.cu-phone .cu-record-form .cu-field>span{font-size:10px;margin-bottom:6px}
.cu-phone .cu-record-form .cu-field input{font-size:12px;height:38px;padding:10px}
.cu-phone .cu-record-form .cu-field textarea{font-size:12px;height:110px;padding:12px}
.cu-phone .cu-assessment-dialog>footer{height:82px;gap:5px;justify-content:flex-start;flex-wrap:nowrap;align-items:center}
.cu-phone .cu-assessment-dialog>footer>.cu-btn:last-child{width:auto;flex:1;font-size:11px;padding:7px}
.cu-phone .cu-record-timeline{margin:25px 0}
.cu-phone .cu-record-timeline li{font-size:12px;padding:0 0 32px 25px}.cu-phone .cu-record-timeline span{font-size:10px;line-height:1.6}
.cu-phone .cu-assessed-quote{display:block;padding:18px;height:calc(100% - 77px)}
.cu-phone .cu-assessed-quote>main{padding:0}
.product-page .cu-phone .cu-assessed-quote h3{font-size:18px;margin-bottom:12px}
.product-page .cu-phone .cu-assessed-quote p{font-size:11px;margin-bottom:18px}
.cu-phone .cu-assessed-option{padding:15px 12px;gap:10px;margin:12px 0;font-size:11px}
.cu-phone .cu-assessed-option>i{flex:none}.cu-phone .cu-assessed-option small{font-size:9px;margin-top:6px;line-height:1.5}.cu-phone .cu-assessed-option>b{font-size:14px}
.cu-phone .cu-assessed-quote .cu-summary{min-height:0;padding:18px;margin-top:10px;border-radius:12px}
.cu-phone .cu-assessed-quote .cu-summary>.cu-btn{margin-top:12px;font-size:11px}
.cu-phone .cu-complete .cu-record-row{font-size:9px;padding:9px 0}
.cu-phone .cu-portal-header{height:60px;padding:15px 17px;gap:10px;font-size:9px}
.cu-phone .cu-portal-header>strong{font-size:14px}.cu-phone .cu-portal-header>b{width:28px;height:28px;font-size:10px}
.cu-phone .cu-portal-shell{display:flex;flex-direction:column;height:calc(100% - 60px)}
.cu-phone .cu-portal-nav{width:100%;flex:none;padding:10px 12px;gap:6px;border:0;border-bottom:1px solid #eee;display:grid;grid-template-columns:1fr 1fr 1fr}
.cu-phone .cu-portal-nav .cu-btn{font-size:9px;padding:5px 7px;min-height:28px;justify-content:center;border-radius:16px}
.cu-phone .cu-portal-nav .cu-btn:last-child{margin-top:2px;grid-column:1/-1;min-height:26px;justify-self:end}
.cu-phone .cu-portal-content{padding:20px 16px;overflow:auto}
.product-page .cu-phone .cu-portal-content>h3,.product-page .cu-phone .cu-invoice-heading h3{font-size:18px;margin-bottom:9px}
.product-page .cu-phone .cu-portal-content p{font-size:11px;margin-bottom:17px}
.cu-phone .cu-account-service{display:block;margin-top:18px}
.cu-phone .cu-account-service>img{width:100%;height:115px;max-width:none}
.cu-phone .cu-account-service>div{padding:18px}
.product-page .cu-phone .cu-account-service h3,.product-page .cu-phone .cu-appointment h3,.product-page .cu-phone .cu-account-detail h3{font-size:15px;margin:12px 0 8px}
.cu-phone .cu-account-service .cu-btn{font-size:10px;margin-top:16px}
.cu-phone .cu-appointment{padding:17px;gap:12px;margin-top:18px}
.cu-phone .cu-calendar-date{width:55px;height:76px;border-radius:7px}.cu-phone .cu-calendar-date small{font-size:10px}.cu-phone .cu-calendar-date strong{font-size:28px}.cu-phone .cu-calendar-date span{font-size:7px}
.cu-phone .cu-account-detail{padding:17px;margin-top:15px}
.cu-phone .cu-account-detail .cu-btn{font-size:10px;margin-top:14px}
.cu-phone .cu-invoice-sheet{padding:16px;margin-bottom:16px}
.cu-phone .cu-invoice-parties{display:block;margin-bottom:15px}
.cu-phone .cu-invoice-parties>div:first-child>*{font-size:9px}.cu-phone .cu-invoice-parties>div:first-child>strong{font-size:13px}
.cu-phone .cu-invoice-line{font-size:10px;padding:11px 0}.cu-phone .cu-invoice-line small{font-size:8px;line-height:1.6}
.cu-phone .cu-invoice-totals{width:100%;min-width:0;margin-top:15px}
.cu-phone .cu-record-activity{padding:12px;font-size:10px}.cu-phone .cu-record-activity .cu-record-row{font-size:9px}
.cu-phone .cu-portal-content>.cu-btn{font-size:10px;min-height:29px}
.cm-checkout>.cx-explainer{grid-column:1/-1}
.cm-checkout>div:not(.cx-explainer){grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
.cm-checkout>div:not(.cx-explainer)>article{margin-top:0}
.cm-assessment>.cx-explainer{grid-column:1/-1;margin-top:0}
@media(max-width:700px){.cm-checkout>div:not(.cx-explainer){grid-template-columns:1fr;gap:28px}}

.cu-assessment-context>.cu-record-address{justify-content:flex-start!important}
.cu-easy-wrap{height:calc(100% - 105px)}
.cu-easy-tiers{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:30px}
.cu-easy-tiers>.cu-btn{display:flex;flex-direction:column;min-height:110px;gap:12px;font-size:17px}
.cu-easy-tiers strong{font-size:22px}
.product-page .cu-easy-quantity{font-size:15px;margin-top:24px;color:#777}
.cu-phone .cu-easy-wrap{height:calc(100% - 38px)}
.cu-phone .cu-easy-tiers{gap:10px;margin-top:24px}
.cu-phone .cu-easy-tiers>.cu-btn{font-size:12px;min-height:85px;padding:15px 10px;gap:8px}
.cu-phone .cu-easy-tiers strong{font-size:14px}
.product-page .cu-phone .cu-easy-quantity{font-size:11px;margin-top:20px}
.cu-phone .cu-easy-wrap .cu-question-card>footer{gap:5px;padding:15px 10px}
.cu-phone .cu-easy-wrap .cu-question-card>footer>.cu-btn{font-size:10px;padding:7px 10px;min-width:0}
.cu-draw-details em{font-style:normal}
/* Playback and section controls follow the same business color as the product UI. */
.cx-explainer{--cx-accent:var(--live-demo-primary,#20b633);--cx-soft:color-mix(in srgb,var(--cx-accent) 10%,var(--odx-surface))}
.cx-explainer .cx-timeline>i{background:var(--cx-accent)}
.cx-explainer .cx-steps>button[aria-pressed=true]{border-color:color-mix(in srgb,var(--cx-accent) 35%,transparent)}