/* Public outage map — styled after highlandscablegroup.com: indigo strip, cream header, purple band, yellow accent */
:root{
  --brand:#5810d6; --brand-2:#1901a7; --brand-hi:#7404f3; --accent:#ffcd57; --ink-strip:#1a1033;
  --cream:#fcfaf7; --page:#f6f3ee; --panel:#ffffff; --ink:#1d1630; --muted:#6c6483; --line:#e6e0ef; --rule:#c31230;
  --clear:#1f8a5b; --minor:#c99512; --partial:#df6a26; --major:#c22a2a; --maint:#3f7fbf;
  --f-ui:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-display:"DM Serif Display",Georgia,"Times New Roman",serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--page);color:var(--ink);font:15px/1.55 var(--f-ui);-webkit-text-size-adjust:100%}
a{color:var(--brand)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.wrap{max-width:1180px;margin:0 auto;padding-inline:16px}

/* top strip, like the site's network/status bar */
.strip{background:var(--ink-strip);color:#e9e4f5;font-size:13px}
.strip-in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 18px;padding-block:9px}
.net{display:inline-flex;align-items:center;gap:8px}
.net i{width:8px;height:8px;border-radius:50%;background:#7a7392;flex:none}
.net i.ok{background:#3ccf7a}.net i.warn{background:var(--accent)}.net i.bad{background:#ff5a4f}
.strip-links{display:flex;gap:18px;flex-wrap:wrap}
.strip-links a{color:#e9e4f5;text-decoration:none}
.strip-links a:hover{color:#fff;text-decoration:underline}

/* cream header */
.site{background:var(--cream);border-bottom:1px solid var(--line)}
.site-in{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-block:16px}
.brand{display:inline-flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font:700 17px/1.1 Georgia,"Times New Roman",serif;letter-spacing:.02em;text-transform:uppercase}
.brand img{height:40px;width:auto;display:block}
.back{display:inline-block;background:var(--accent);color:#1d1630;font-weight:700;text-decoration:none;padding:10px 18px;border-radius:999px;font-size:14px;white-space:nowrap}
.back:hover{filter:brightness(.96)}

/* purple band */
.hero{background:linear-gradient(120deg,var(--brand-hi) 0%,var(--brand) 45%,var(--brand-2) 100%);color:#fff;padding-block:34px 72px}
.eyebrow{display:flex;align-items:center;gap:12px;font:500 12px/1 var(--f-mono);letter-spacing:.2em;color:#c9b6ff}
.eyebrow i{width:34px;height:2px;background:var(--rule);display:inline-block}
.hero h1{font:400 clamp(36px,6vw,60px)/1.02 var(--f-display);margin:14px 0 10px;letter-spacing:-.01em;text-wrap:balance}
.lede{margin:0;max-width:56ch;color:#e6dcff;font-size:16px}

.body{padding-block:0 32px;display:flex;flex-direction:column;gap:14px;margin-top:-44px;position:relative}

/* status card sits on the band */
.status{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-left:6px solid var(--muted);border-radius:14px;padding:16px 18px;box-shadow:0 10px 30px rgba(29,22,48,.12)}
.status .ind{width:14px;height:14px;border-radius:50%;background:var(--muted);flex:none}
.status.clear{border-left-color:var(--clear)}.status.clear .ind{background:var(--clear)}
.status.partial,.status.minor{border-left-color:var(--partial)}.status.partial .ind,.status.minor .ind{background:var(--partial)}
.status.major{border-left-color:var(--major)}.status.major .ind{background:var(--major);animation:pulse 2s infinite}
.status.maintenance{border-left-color:var(--maint)}.status.maintenance .ind{background:var(--maint)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(194,42,42,.5)}70%{box-shadow:0 0 0 10px rgba(194,42,42,0)}100%{box-shadow:0 0 0 0 rgba(194,42,42,0)}}
@media (prefers-reduced-motion:reduce){.status .ind{animation:none!important}}
.st-title{font-weight:700;font-size:17px}
.st-sub{color:var(--muted);font-size:14px}
.demo{margin-left:auto;font:500 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;border:1px dashed var(--muted);color:var(--muted);border-radius:4px;padding:4px 7px;white-space:nowrap}

.notices{display:flex;flex-direction:column;gap:8px}
.notices:empty{display:none}
.notice{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 16px}
.notice.outage{border-left:4px solid var(--major)}
.notice.maintenance{border-left:4px solid var(--maint)}
.nar{color:var(--muted);font-size:13px}

.layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px}
@media (max-width:820px){.layout{grid-template-columns:minmax(0,1fr)}}
.mapbox{display:flex;flex-direction:column;gap:8px;min-width:0}
#map{height:min(64vh,600px);min-height:340px;border-radius:14px;border:1px solid var(--line);background:#eef0e6;box-shadow:0 2px 10px rgba(29,22,48,.06)}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--muted);align-items:center}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend .ramp{width:110px;height:8px;border-radius:4px;background:linear-gradient(90deg,#5b2fc9,#2f5fe0,#1fb8e8,#2fcf5a,#e8e82a,#f79420,#e3201b)}
.legend i.dot{width:12px;height:12px;border-radius:50%;background:#e5322b;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.legend i.dot.maint{background:var(--maint)}

.list{display:flex;flex-direction:column;gap:10px;min-width:0}
.lbl{font:500 12px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--brand);margin:6px 0 0}
.intro{margin:0;font-size:14px;color:var(--muted)}
.areas{display:flex;flex-direction:column;gap:10px}
.area{display:flex;gap:12px;text-align:left;width:100%;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:13px 15px;font:inherit;color:inherit;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.area:hover{border-color:var(--brand);box-shadow:0 4px 14px rgba(88,16,214,.12)}
.sev{width:6px;border-radius:3px;flex:none;align-self:stretch}
.ab{display:flex;flex-direction:column;gap:2px;min-width:0}
.an{font-weight:700}
.as{font-size:13px;color:var(--muted)}
.am{font-size:13px;margin-top:4px}
.empty{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;color:var(--muted)}
.updated{font-size:12px;color:var(--muted);margin:0}
.stale{color:var(--partial);font-weight:600}
.fine{font-size:12px;color:var(--muted);margin:0;max-width:75ch}

/* map chrome */
.leaflet-container{font:inherit}
.om-dark{filter:invert(1) hue-rotate(180deg) brightness(.95) contrast(.9)}
.leaflet-heatmap-layer{opacity:.85}
.area-tag{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:6px;font-weight:700;font-size:11px;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.area-tag:before{display:none}
.leaflet-popup-content-wrapper{border-radius:10px}
.leaflet-popup-content{font-size:14px;line-height:1.45}
.pmuted{color:var(--muted)}
.om-bubble{filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}

/* iframe embed: no header or band, tighter */
.embed{background:transparent}
.embed .body{margin-top:0;padding-block:10px;gap:10px}
.embed .wrap{max-width:none;padding-inline:10px}
.embed #map{height:min(70vh,520px)}
.embed .status{padding:10px 12px;box-shadow:none}

/* address check */
.check{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.check-form label,.verify label{font-weight:700;font-size:15px;display:block;margin-bottom:8px}
.verify label{font-weight:400;font-size:14px}
.check-row{display:flex;gap:8px;flex-wrap:wrap}
.check-row input{flex:1 1 240px;min-width:0;font:inherit;font-size:16px;padding:11px 14px;border:1px solid #cfc6e2;border-radius:10px;background:#fff;color:var(--ink)}
.check-row input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(88,16,214,.18)}
.btn-accent{background:var(--accent);color:#1d1630;border:0;font:inherit;font-weight:700;padding:11px 22px;border-radius:999px;cursor:pointer;white-space:nowrap}
.btn-accent:hover{filter:brightness(.96)}
.btn-accent:disabled{opacity:.6;cursor:default}
.btn-ghost{background:transparent;color:var(--brand);border:1.5px solid var(--brand);font:inherit;font-weight:700;padding:9px 18px;border-radius:999px;cursor:pointer}
.btn-ghost:hover{background:rgba(88,16,214,.06)}
.check-result:empty{display:none}
.check-result{border-radius:10px;padding:12px 14px;font-size:14px;line-height:1.5}
.check-result.busy{color:var(--muted);padding-inline:0}
.check-result.clear{background:#eaf7f0;border:1px solid #bfe5cf}
.check-result.outage{background:#fdeeee;border:1px solid #f1c4c4}
.check-result.warn{background:#fff7e0;border:1px solid #f3dea1}
.check-actions{margin-top:10px}
.verify{margin-top:12px}
.verify-msg{margin-top:6px;font-size:13px;color:var(--major)}
.verify-msg:empty{display:none}

/* connection page */
.mlist{display:flex;flex-direction:column;gap:18px}
.mcard{display:flex;flex-direction:column;gap:10px}
.m-signal{background:#fff7e0;border:1px solid #f3dea1;border-radius:10px;padding:12px 14px;font-weight:600}
.m-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:760px){.m-grid{grid-template-columns:minmax(0,1fr)}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;min-width:0}
.panel[hidden]{display:none}
.panel h3{margin:0 0 10px;font:400 24px/1.1 var(--f-display)}
.note{font-size:13px;color:var(--muted);margin:8px 0 0}
.pings{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.pings li{display:grid;grid-template-columns:62px minmax(0,1fr) 90px;align-items:center;gap:10px;font-size:13px;font-variant-numeric:tabular-nums;animation:pingIn .3s ease both;animation-delay:var(--d,0ms)}
.pings li i{height:8px;background:#ece7f5;border-radius:4px;overflow:hidden;display:block}
.pings li em{display:block;height:100%;background:var(--brand);border-radius:4px}
.pings li b{text-align:right}
.pings li.lost b{color:var(--major)}
.pings li.wait b{color:var(--muted);font-weight:400}
@keyframes pingIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pings li{animation:none}}

.m-ping-btn{margin-top:14px}


/* name + captcha verification */
.verify-intro{margin:0 0 10px;font-size:14px}
.verify-fields{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:flex-start}
.vf{display:flex;flex-direction:column;gap:6px;flex:1 1 220px;min-width:0;font-size:13px;color:var(--muted)}
.vf input{font:inherit;font-size:16px;padding:10px 12px;border:1px solid #cfc6e2;border-radius:10px;background:#fff;color:var(--ink);width:100%}
.vf input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(88,16,214,.18)}
#vCap{letter-spacing:.25em;text-transform:uppercase;font-family:var(--f-mono)}
.cap-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cap-img{border-radius:8px;border:1px solid #e1d9f0;max-width:100%;height:auto;background:#f4f0fb}
.cap-new{background:none;border:0;color:var(--brand);font:inherit;font-size:13px;text-decoration:underline;cursor:pointer;padding:4px}

/* connection check: Internet > modem scene */
.diag{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;margin-top:14px}
.devices{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.devices[hidden]{display:none}
.dev{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:14px;padding:8px 14px;border-radius:999px;border:1px solid #cfc6e2;background:#fff;color:var(--ink);cursor:pointer}
.dev:hover:not(:disabled){border-color:var(--brand)}
.dev.on{background:var(--brand);border-color:var(--brand);color:#fff}
.dev:disabled{cursor:default;opacity:.6}
.dev.on:disabled{opacity:1}
.dev i{width:9px;height:9px;border-radius:50%;background:#b3abc6;flex:none}
.dev i.ok{background:#3ccf7a}.dev i.warn{background:var(--accent)}.dev i.bad{background:#ff5a4f}
.scene{position:relative;border-radius:12px;overflow:hidden;background:radial-gradient(120% 90% at 50% 40%,#1b0f45,#0d0722 70%);box-shadow:inset 0 0 0 1px rgba(167,123,255,.25);color:#fff;
  background-image:radial-gradient(120% 90% at 50% 40%,rgba(27,15,69,.0),#0d0722 75%),linear-gradient(rgba(167,123,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(167,123,255,.07) 1px,transparent 1px);
  background-size:auto,24px 24px,24px 24px;background-color:#120a33}
.scene-stage{position:relative;max-width:760px;margin:0 auto}
.scene svg{display:block;width:100%;height:auto}
.flow{stroke-dasharray:22 420;stroke-dashoffset:0;opacity:0}
.s-check .flow.fwd{opacity:1;animation:flowRun 1.6s linear infinite}
.s-speed .flow.fwd{opacity:1;stroke-dasharray:40 60;animation:flowRun .45s linear infinite}
.s-speed .link-glow{opacity:1;stroke-width:4}
.s-ping .flow.fwd{opacity:1;animation:flowRun 1.1s linear infinite}
.s-ping .flow.back{opacity:1;animation:flowRun 1.1s linear infinite;animation-delay:-.55s}
.s-online .flow.fwd{opacity:.55;animation:flowRun 4s linear infinite}
.s-offline .link-glow,.s-error .link-glow{opacity:.12}
.s-offline .link-base,.s-error .link-base{stroke-dasharray:10 9}
@keyframes flowRun{from{stroke-dashoffset:442}to{stroke-dashoffset:0}}
.led{fill:#3b2a78}
.s-check .led{fill:var(--accent);animation:ledBlink .9s steps(1,end) infinite}
.s-check .led:nth-child(2){animation-delay:.22s}.s-check .led:nth-child(3){animation-delay:.44s}.s-check .led:nth-child(4){animation-delay:.66s}
.s-online .led,.s-speed .led,.s-ping .led{fill:#3ccf7a;filter:drop-shadow(0 0 4px #3ccf7a)}
.s-speed .led:nth-child(4),.s-ping .led:nth-child(4){animation:ledBlink .25s steps(1,end) infinite}
.s-offline .led,.s-error .led{fill:#ff5a4f;filter:drop-shadow(0 0 4px #ff5a4f)}
.s-offline .led:nth-child(n+2),.s-error .led:nth-child(n+2){fill:#3b2a78;filter:none}
@keyframes ledBlink{50%{fill:#3b2a78}}
.scene-phase{position:absolute;top:12px;left:0;right:0;text-align:center;font:500 13px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:#cdb8ff}
.scene-phase.blink{color:#fff;text-shadow:0 0 10px rgba(94,231,255,.9);animation:phaseBlink 1s steps(1,end) infinite}
@keyframes phaseBlink{50%{opacity:.35}}
.scene-big{position:absolute;left:28%;right:28%;bottom:12px;display:flex;flex-direction:column;align-items:center;text-align:center;pointer-events:none}
.scene-big:empty{display:none}
.scene-big b{font:400 46px/1 var(--f-display);font-variant-numeric:tabular-nums;text-shadow:0 0 18px rgba(167,123,255,.9),0 0 3px rgba(255,255,255,.8)}
.scene-big span{margin-top:4px;font:500 11px/1.3 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:#cdb8ff}
.scene-big small{margin-top:2px;font-size:11px;color:#a99bc9}
.modem-tag{position:absolute;left:81.4%;top:72%;transform:translateX(-50%);white-space:nowrap;font:600 12px/1 var(--f-mono);letter-spacing:.12em;padding:6px 9px;border-radius:6px;opacity:0;transition:opacity .3s}
.modem-tag.ok,.modem-tag.bad{opacity:1;animation:tagIn .4s ease both}
.modem-tag.ok{color:#3ccf7a;background:rgba(60,207,122,.12);box-shadow:0 0 0 1px rgba(60,207,122,.55),0 0 16px rgba(60,207,122,.35)}
.modem-tag.bad{color:#ff7a70;background:rgba(255,90,79,.12);box-shadow:0 0 0 1px rgba(255,90,79,.55),0 0 16px rgba(255,90,79,.35)}
@keyframes tagIn{from{opacity:0;transform:translate(-50%,6px)}to{opacity:1;transform:translate(-50%,0)}}
.steps{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.steps li{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:8px;align-items:center;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:#faf8fd;font-size:13px;min-width:0}
.steps li i{grid-row:1/3;width:12px;height:12px;border-radius:50%;background:#d6cfe5}
.steps li span{font-weight:600}
.steps li b{font-weight:400;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.steps li.run{border-color:var(--brand)}
.steps li.run i{background:var(--brand);animation:ledPulse 1s ease-in-out infinite}
.steps li.ok i{background:var(--clear)}
.steps li.warn i{background:var(--minor)}
.steps li.bad i{background:var(--major)}
.steps li.bad b{color:var(--major)}
.steps li.skip{opacity:.6}
@keyframes ledPulse{50%{box-shadow:0 0 0 5px rgba(88,16,214,.18)}}
.pings:empty{display:none}
.diag-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:14px}
.diag-actions .note{margin:0}
@media (max-width:860px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  .diag{padding:12px}
  .scene{padding-top:34px}
  .scene-phase{top:12px;font-size:11px;letter-spacing:.14em}
  .scene-big{position:static;padding:0 10px 12px}
  .scene-big b{font-size:38px}
}
@media (prefers-reduced-motion:reduce){
  .flow,.led,.scene-phase.blink,.steps li.run i,.modem-tag{animation:none!important}
  .s-check .flow.fwd,.s-speed .flow.fwd,.s-ping .flow{stroke-dasharray:none;opacity:.6}
}
.s-usage .flow.fwd{opacity:1;stroke-dasharray:30 90;animation:flowRun .8s linear infinite}
.s-usage .flow.back{opacity:.8;stroke-dasharray:14 140;animation:flowRun 1.4s linear infinite}
.s-usage .led{fill:#3ccf7a;filter:drop-shadow(0 0 4px #3ccf7a)}
.s-usage .led:nth-child(3),.s-usage .led:nth-child(4){animation:ledBlink .35s steps(1,end) infinite}
.use-bar{display:block;width:min(220px,90%);height:6px;margin-top:8px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.use-bar em{display:block;height:100%;background:linear-gradient(90deg,#5ee7ff,#a77bff,#ffcd57);box-shadow:0 0 8px #5ee7ff;animation:barIn 1.2s ease-out both}
@keyframes barIn{from{width:0}}
.month-use{margin:12px 0 0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#faf8fd;font-size:14px}
.month-use[hidden]{display:none}
.month-use b{font:400 20px/1 var(--f-display);color:var(--brand)}
.month-use span{color:var(--muted);font-size:13px}
@media (prefers-reduced-motion:reduce){.s-usage .flow,.s-usage .led,.use-bar em{animation:none!important}}

/* ---------- phones ---------- */
.back-short{display:none}
@media (max-width:600px){
  body{font-size:15px}
  .wrap{padding-inline:max(14px,env(safe-area-inset-left))}
  .strip{font-size:12px}
  .strip-in{padding-block:7px;flex-wrap:nowrap;gap:10px}
  .strip-in>*{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .strip-links{gap:12px;flex:none}
  .strip-links a:not([href^="tel:"]){display:none}
  .site-in{padding-block:10px}
  .brand{font-size:14px;gap:8px}
  .brand img{height:30px}
  .back{padding:8px 14px;font-size:13px}
  .back-long{display:none}.back-short{display:inline}
  .hero{padding-block:18px 58px}
  .eyebrow{font-size:10px;letter-spacing:.16em}
  .eyebrow i{width:20px}
  .hero h1{font-size:34px;margin:10px 0 6px}
  .lede{font-size:14px}
  .body{margin-top:-40px;gap:12px}
  .status{padding:12px 14px;gap:12px;border-radius:12px}
  .st-title{font-size:16px}
  .st-sub{font-size:13px}
  .check{padding:14px;border-radius:12px}
  .check-row{flex-wrap:nowrap}
  .check-row input{flex:1 1 auto;padding:11px 12px}
  .check-row .btn-accent{padding:11px 16px}
  .verify-fields{gap:10px}
  .vf{flex-basis:100%}
  .cap-img{width:100%;max-width:260px}
  .check-actions .btn-accent,.verify .btn-accent{width:100%}
  #map{height:56vh;min-height:300px;border-radius:12px}
  .legend{font-size:11px}
  .notice{padding:10px 14px;font-size:14px}
  .area{padding:11px 13px}
  /* connection page */
  .diag{padding:12px;border-radius:12px}
  .devices{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;margin-inline:-12px;padding:0 12px 4px;scrollbar-width:none}
  .devices::-webkit-scrollbar{display:none}
  .dev{flex:none;scroll-snap-align:start;padding:8px 12px;font-size:13px}
  .scene{padding-top:30px;border-radius:10px}
  .scene-phase{top:10px;font-size:10px;letter-spacing:.14em}
  .modem-tag{left:auto;right:1%;transform:none;top:auto;bottom:-6px;font-size:9px;letter-spacing:.06em;padding:3px 5px}
  .scene-stage{margin-bottom:14px}
  @keyframes tagIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .scene-big b{font-size:36px}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:10px}
  .steps li{padding:8px 9px;font-size:12px;column-gap:7px;border-radius:8px}
  .steps li i{width:10px;height:10px}
  .month-use{font-size:13px}
  .pings li{grid-template-columns:48px minmax(0,1fr) 72px;gap:8px;font-size:12px}
  .diag-actions .btn-accent{width:100%}
}

/* "Is your home affected?" → customer app */
.app-card{flex-direction:row;align-items:center;gap:16px}
.app-ico{flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--brand-hi),var(--brand-2));box-shadow:0 6px 16px rgba(88,16,214,.25)}
.app-txt{flex:1;min-width:0}
.app-txt h2{margin:0 0 2px;font-size:17px;font-weight:700}
.app-txt p{margin:0;color:var(--muted);font-size:14px}
.app-btn{flex:none;text-decoration:none;display:inline-block}
@media (max-width:600px){
  .app-card{flex-wrap:wrap;gap:12px}
  .app-ico{width:44px;height:44px;border-radius:12px}
  .app-txt{flex:1 1 calc(100% - 60px)}
  .app-btn{width:100%;text-align:center}
}