:root{
--bg:#071018;
--bg2:#0b1621;
--panel:#0d1b27;
--panel2:#102230;
--text:#f4f8fb;
--muted:#9eb0bc;
--line:#233b4a;
--green:#78c63f;
--green2:#a3ee63;
--amber:#f1b94b;
--blue:#4ea0ff;
--radius:13px;
--shadow:0 14px 40px rgba(0,0,0,.32);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
margin:0;
background:linear-gradient(180deg,#061019,#0a151e 55%,#071018);
color:#f4f8fb;
font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
line-height:1.45;
}

.topbar{
position:sticky;
top:0;
z-index:30;
display:flex;
align-items:center;
justify-content:space-between;
min-height:64px;
padding:9px clamp(18px,4vw,54px);
background:rgba(4,11,17,.94);
backdrop-filter:blur(16px);
border-bottom:1px solid rgba(255,255,255,.06);
}

.brand{
display:flex;
align-items:center;
gap:10px;
color:white;
text-decoration:none;
}

.brand strong{
display:block;
font-size:1.18rem;
letter-spacing:.055em;
}

.brand small{
display:block;
color:#9eb0bc;
font-size:.55rem;
letter-spacing:.12em;
}

.mark{
width:34px;
height:38px;
display:grid;
place-items:center;
clip-path:polygon(50% 0,94% 17%,87% 72%,50% 100%,13% 72%,6% 17%);
background:linear-gradient(145deg,#a3ee63,#2d7420);
position:relative;
}

.mark:after{
content:"";
position:absolute;
inset:4px;
clip-path:inherit;
background:#071018;
}

.eye{
z-index:1;
width:16px;
height:10px;
border:2px solid #a3ee63;
border-radius:60% 0 60% 0;
transform:rotate(45deg);
display:grid;
place-items:center;
font-size:0;
}

.eye:after{
content:"";
width:4px;
height:4px;
border-radius:50%;
background:#a3ee63;
}

.nav{
display:flex;
align-items:center;
gap:20px;
}

.nav a{
color:#d8e3ea;
text-decoration:none;
font-size:.8rem;
}

.nav a:hover{color:#a3ee63}

.nav-toggle{display:none}

.btn{
border:0;
border-radius:8px;
padding:10px 15px;
font-weight:800;
letter-spacing:.02em;
cursor:pointer;
text-decoration:none;
display:inline-flex;
align-items:center;
justify-content:center;
}

.primary{
background:linear-gradient(135deg,#78c63f,#4f9e22);
color:#071018;
}

.secondary{
background:#162b39;
color:#a3ee63;
border:1px solid #315266;
}

.ghost{
background:rgba(8,18,27,.68);
border:1px solid #567080;
color:white;
}

.btn.large{
padding:12px 20px;
font-size:.9rem;
}

.hero{
min-height:400px;
padding:38px clamp(28px,5vw,72px) 30px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:flex-start;
position:relative;
overflow:hidden;
isolation:isolate;
background-color:#050c12;
background-image:
linear-gradient(
90deg,
#050c12 0%,
#050c12 32%,
rgba(5,12,18,.97) 39%,
rgba(5,12,18,.72) 48%,
rgba(5,12,18,.20) 59%,
rgba(5,12,18,.03) 72%
),
url("images/watchback-hero.png");
background-repeat:no-repeat,no-repeat;
background-size:100% 100%, auto 94%;
background-position:center, right center;
}

.hero:before{
content:"";
position:absolute;
z-index:-1;
inset:0;
pointer-events:none;
background:
linear-gradient(
90deg,
rgba(3,9,14,.98) 0%,
rgba(3,9,14,.94) 28%,
rgba(3,9,14,.78) 38%,
rgba(3,9,14,.38) 48%,
rgba(3,9,14,.08) 60%,
transparent 72%
);
}

.hero:after{
content:"";
position:absolute;
z-index:-1;
left:0;
right:0;
bottom:0;
height:55px;
pointer-events:none;
background:linear-gradient(
0deg,
rgba(5,12,18,.48),
transparent
);
}

.hero > *{
position:relative;
z-index:2;
max-width:590px;
}

.hero h1{
font-size:clamp(2.35rem,3.35vw,3.6rem);
line-height:.96;
margin:.1em 0 .22em;
text-transform:uppercase;
letter-spacing:-.035em;
max-width:590px;
text-shadow:0 3px 18px rgba(0,0,0,.85);
}

.hero h1 span{color:#a3ee63}

.eyebrow{
color:#a3ee63;
font-weight:900;
text-transform:uppercase;
letter-spacing:.16em;
font-size:.64rem;
text-shadow:0 2px 8px rgba(0,0,0,.9);
}

.lede{
font-size:clamp(.88rem,1vw,1.02rem);
max-width:560px;
color:#d8e2e9;
text-shadow:0 2px 8px rgba(0,0,0,.9);
}

.hero-actions{
display:flex;
gap:10px;
margin:16px 0;
}

.pill-row{
display:flex;
flex-wrap:wrap;
gap:7px;
}

.pill-row span{
border:1px solid #355366;
background:rgba(5,15,22,.84);
padding:5px 8px;
border-radius:99px;
color:#c8d6df;
font-size:.67rem;
backdrop-filter:blur(4px);
}

.hero .status-card{
margin-top:14px;
width:min(470px,100%);
}

.status-card{
background:rgba(7,18,26,.90);
border:1px solid #365268;
border-radius:12px;
padding:12px 14px;
box-shadow:0 14px 40px rgba(0,0,0,.32);
backdrop-filter:blur(10px);
}

.status-title{
font-weight:900;
margin-bottom:5px;
font-size:.78rem;
}

.status-title span{
float:right;
color:#a3ee63;
font-size:.57rem;
}

.status-card dl{margin:0}

.status-card dl div{
display:flex;
justify-content:space-between;
padding:5px 0;
border-bottom:1px solid #223845;
font-size:.78rem;
}

.status-card dt{color:#b7c6d0}

.status-card dd{
margin:0;
font-weight:900;
}

.status-card small{
display:block;
color:#9eb0bc;
margin-top:7px;
font-size:.63rem;
}

.notice{
margin:0;
padding:10px clamp(20px,5vw,72px);
display:flex;
gap:16px;
align-items:center;
background:#102838;
border-top:1px solid #295067;
border-bottom:1px solid #295067;
font-size:.79rem;
}

.notice strong{
color:#a3ee63;
white-space:nowrap;
}

.notice span{color:#c4d3dc}

.section{
padding:46px clamp(20px,5vw,72px);
}

.section-heading{
max-width:820px;
margin-bottom:20px;
}

.section-heading.centered{
text-align:center;
margin-left:auto;
margin-right:auto;
}

.section h2{
font-size:clamp(1.65rem,2.6vw,2.55rem);
line-height:1.06;
margin:.12em 0;
}

.section-heading p:last-child{
color:#9eb0bc;
font-size:.92rem;
}

.dash-grid{
display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:14px;
}

.panel{
background:linear-gradient(180deg,#0d1b27,#0a151e);
border:1px solid #233b4a;
border-radius:13px;
overflow:hidden;
box-shadow:0 8px 30px rgba(0,0,0,.18);
}

.panel-head{
display:flex;
align-items:center;
justify-content:space-between;
padding:12px 14px;
border-bottom:1px solid #233b4a;
}

.panel-head h3{
margin:0;
font-size:.88rem;
text-transform:uppercase;
letter-spacing:.04em;
}

.panel-head em{
font-style:normal;
color:#a3ee63;
font-size:.65rem;
}

.map-controls{
display:flex;
gap:5px;
flex-wrap:wrap;
}

.map-controls button{
background:#122633;
color:#b7c8d2;
border:1px solid #294658;
border-radius:7px;
padding:6px 8px;
cursor:pointer;
font-size:.66rem;
}

.map-controls button.active{
background:#78c63f;
color:#08100d;
border-color:#78c63f;
}

.map{
height:390px;
position:relative;
background:
radial-gradient(circle at 30% 30%,rgba(68,125,154,.25),transparent 24%),
linear-gradient(135deg,#0b1820,#10232d);
overflow:hidden;
}

.map svg{
position:absolute;
inset:0;
width:100%;
height:100%;
}

.road{
fill:none;
stroke:#36505e;
stroke-width:18;
opacity:.5;
}

.road.thin{stroke-width:9}

.marker{
position:absolute;
width:16px;
height:16px;
border:3px solid #071018;
border-radius:50%;
box-shadow:
0 0 0 4px rgba(255,255,255,.12),
0 0 18px currentColor;
cursor:pointer;
transform:translate(-50%,-50%);
}

.marker.police,
.dot.police{
background:#4ea0ff;
color:#4ea0ff;
}

.marker.publicworks,
.dot.publicworks{
background:#f1b94b;
color:#f1b94b;
}

.marker.code,
.dot.code{
background:#a466ff;
color:#a466ff;
}

.marker.hidden{display:none}

.map-legend{
position:absolute;
left:12px;
bottom:12px;
background:rgba(3,10,15,.83);
border:1px solid #2c4758;
padding:8px 10px;
border-radius:8px;
font-size:.68rem;
display:grid;
gap:5px;
}

.map-legend span{
display:flex;
align-items:center;
gap:7px;
}

.dot{
width:7px;
height:7px;
border-radius:50%;
}

.detections #detection-list{padding:8px}

.det-card{
width:100%;
border:1px solid transparent;
background:transparent;
color:white;
text-align:left;
padding:9px;
border-radius:9px;
cursor:pointer;
display:grid;
grid-template-columns:52px 1fr;
gap:7px;
margin-bottom:4px;
}

.det-card:hover,
.det-card.active{
background:#132633;
border-color:#315267;
}

.det-card time{
color:#a3ee63;
font-weight:800;
font-size:.7rem;
}

.det-card strong{
display:block;
font-size:.82rem;
}

.det-card span{
color:#9eb0bc;
font-size:.7rem;
}

.detail-panel #detail{padding:16px}

.detail-badge{
display:inline-block;
border:1px solid #3a6176;
background:#112734;
padding:4px 8px;
border-radius:99px;
color:#a3ee63;
font-size:.65rem;
font-weight:900;
text-transform:uppercase;
}

.detail-panel h4{
font-size:1.25rem;
margin:10px 0 7px;
}

.detail-list{
display:grid;
gap:8px;
margin-top:14px;
}

.detail-row{
padding-bottom:8px;
border-bottom:1px solid #223a49;
}

.detail-row small{
display:block;
color:#9eb0bc;
text-transform:uppercase;
letter-spacing:.08em;
}

.steps{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:10px;
}

.steps article{
background:#0d1c27;
border:1px solid #233b4a;
padding:18px;
border-radius:13px;
}

.steps article span{
display:grid;
place-items:center;
width:34px;
height:34px;
border-radius:50%;
background:#78c63f;
color:#071018;
font-weight:900;
}

.steps h3{
text-transform:uppercase;
font-size:.95rem;
}

.steps p,
.product p,
.manifesto p{
color:#9eb0bc;
}

.product-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px;
padding-top:10px;
}

.product{
background:linear-gradient(180deg,#0e1d28,#0a151e);
border:1px solid #233b4a;
border-radius:13px;
padding:22px;
}

.product-icon{
font-size:2.5rem;
color:#a3ee63;
}

.product h2{font-size:1.7rem}

.muted{color:#8399a7!important}

.price{
font-size:2.35rem;
font-weight:900;
margin:14px 0;
}

.price small{
font-size:.72rem;
color:#9eb0bc;
}

.legal{background:#09151f}

.legal-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:10px;
}

.law-card{
display:flex;
flex-direction:column;
gap:8px;
background:#0f202d;
border:1px solid #274556;
border-radius:11px;
padding:15px;
color:white;
text-decoration:none;
min-height:180px;
}

.law-card:hover{
border-color:#78c63f;
transform:translateY(-2px);
}

.law-card span{
color:#9eb0bc;
font-size:.8rem;
}

.law-card b{
margin-top:auto;
color:#a3ee63;
font-size:.72rem;
}

.legal-note{
margin-top:14px;
border-left:4px solid #f1b94b;
background:#171f24;
padding:14px 16px;
color:#cfdae0;
font-size:.85rem;
}

.manifesto{max-width:950px}

.manifesto p{font-size:1.02rem}

.support{
display:flex;
align-items:center;
justify-content:space-between;
gap:26px;
background:linear-gradient(135deg,#10222c,#142b20);
border-top:1px solid #315447;
border-bottom:1px solid #315447;
}

.support>div{max-width:760px}

.support h2{margin:.1em 0}

.support p{color:#c1d0d8}

footer{
padding:22px clamp(20px,5vw,72px);
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
background:#040b10;
border-top:1px solid #1e3340;
}

footer p{
color:#9eb0bc;
font-size:.76rem;
}

dialog{
width:min(650px,calc(100% - 32px));
border:1px solid #38586a;
background:#0b1821;
color:white;
border-radius:16px;
padding:26px;
box-shadow:0 30px 100px #000;
}

dialog::backdrop{
background:rgba(0,0,0,.78);
backdrop-filter:blur(4px);
}

dialog h2{
font-size:2.1rem;
margin:.1em 0;
}

.close{
position:absolute;
right:16px;
top:12px;
background:transparent;
border:0;
color:white;
font-size:2rem;
cursor:pointer;
}

.funding-box{
border:1px solid #3c624b;
background:#10251a;
padding:14px;
border-radius:11px;
margin:16px 0;
}

.warning{
color:#d9caa0;
background:#251f13;
padding:12px;
border-radius:9px;
}

.toast{
position:fixed;
left:50%;
bottom:24px;
transform:translateX(-50%) translateY(30px);
background:#10242f;
border:1px solid #375d70;
color:white;
padding:11px 15px;
border-radius:10px;
opacity:0;
pointer-events:none;
transition:.25s;
z-index:80;
}

.toast.show{
opacity:1;
transform:translateX(-50%) translateY(0);
}

@media(max-width:1050px){

.nav a{display:none}

.hero{
min-height:390px;
padding-top:38px;
background-color:#050c12;
background-image:
linear-gradient(
90deg,
rgba(5,12,18,.98) 0%,
rgba(5,12,18,.94) 40%,
rgba(5,12,18,.55) 58%,
rgba(5,12,18,.10) 78%
),
url("images/watchback-hero.png");
background-repeat:no-repeat,no-repeat;
background-size:100% 100%, auto 88%;
background-position:center,right center;
}

.hero h1{
font-size:clamp(2.35rem,5vw,3.4rem);
}

.dash-grid{
grid-template-columns:1fr 1fr;
}

.map-panel{
grid-column:1/-1;
}

.steps{
grid-template-columns:repeat(2,1fr);
}

.legal-grid{
grid-template-columns:repeat(2,1fr);
}

}


@media(max-width:720px){

.topbar{
padding:10px 16px;
}

.nav{
display:none;
position:absolute;
left:12px;
right:12px;
top:66px;
background:#08141d;
border:1px solid #294352;
border-radius:14px;
padding:16px;
flex-direction:column;
align-items:stretch;
}

.nav.open{display:flex}

.nav.open a{display:block}

.nav-toggle{
display:block;
background:transparent;
border:1px solid #355161;
color:white;
border-radius:8px;
padding:8px 11px;
}

.hero{
padding:38px 20px 30px;
min-height:auto;
background-color:#050c12;
background-image:
linear-gradient(
180deg,
rgba(5,12,18,.88) 0%,
rgba(5,12,18,.91) 55%,
rgba(5,12,18,.86) 100%
),
url("images/watchback-hero.png");
background-repeat:no-repeat,no-repeat;
background-size:100% 100%, auto 72%;
background-position:center,right center;
}

.hero:before{
background:rgba(3,9,14,.30);
}

.hero > *{max-width:100%}

.hero h1{
font-size:clamp(2.25rem,10.5vw,3.6rem);
}

.hero .status-card{width:100%}

.notice{
align-items:flex-start;
flex-direction:column;
gap:4px;
}

.product-grid,
.legal-grid{
grid-template-columns:1fr;
}

.map{height:370px}

.steps{grid-template-columns:1fr}

.support,
footer{
flex-direction:column;
align-items:flex-start;
}

.section{
padding:44px 18px;
}

#demo .map-controls{
display:flex;
}

}


.hero{
min-height:560px;
height:auto;
padding:56px clamp(28px,5vw,72px) 46px;
justify-content:center;
background-color:#050c12;
background-image:
linear-gradient(
90deg,
#050c12 0%,
#050c12 30%,
rgba(5,12,18,.96) 38%,
rgba(5,12,18,.62) 48%,
rgba(5,12,18,.12) 59%,
rgba(5,12,18,0) 68%
),
url("images/watchback-hero.png");
background-repeat:no-repeat,no-repeat;
background-size:100% 100%,auto 94%;
background-position:center,right center;
}

.hero:before{
background:linear-gradient(
90deg,
rgba(3,9,14,.42) 0%,
rgba(3,9,14,.22) 38%,
rgba(3,9,14,0) 58%
);
}

.hero > *{max-width:590px}

.hero .status-card{width:min(470px,100%)}


@media(max-width:1050px){

.hero{
min-height:520px;
padding:48px 4vw 38px;
background-image:
linear-gradient(
90deg,
#050c12 0%,
#050c12 33%,
rgba(5,12,18,.93) 43%,
rgba(5,12,18,.48) 54%,
rgba(5,12,18,0) 68%
),
url("images/watchback-hero.png");
background-size:100% 100%,auto 88%;
background-position:center,right center;
}

}


@media(max-width:720px){

.hero{
display:block;
min-height:0;
padding:200px 20px 30px;
background-color:#050c12;
background-image:
linear-gradient(
180deg,
rgba(5,12,18,0) 0%,
rgba(5,12,18,0) 54%,
rgba(5,12,18,.48) 72%,
#050c12 100%
),
url("images/watchback-hero.png");
background-repeat:no-repeat,no-repeat;
background-size:
100% 230px,
calc(100% - 20px) auto;
background-position:center top,center 10px;
}

.hero:before,
.hero:after{
display:none;
}

.hero > *{max-width:100%}

.hero h1{
font-size:clamp(2.25rem,10.5vw,3.6rem);
}

.hero .status-card{width:100%}

}


img{
display:block;
max-width:100%;
height:auto;
}


.visual-section,
.feature-section{
display:grid;
grid-template-columns:minmax(280px,.78fr) minmax(0,1.35fr);
gap:42px;
align-items:center;
}


.visual-copy,
.feature-copy,
.visual-image,
.feature-image{
min-width:0;
}


.visual-copy h2,
.feature-copy h2,
.software-visual-section h2,
.support-copy h2{
color:#f4f8fb;
}


.visual-copy p,
.feature-copy > p,
.support-copy > p{
color:#9eb0bc;
font-size:.92rem;
line-height:1.6;
}


.visual-image,
.feature-image,
.wide-showcase,
.support-image{
margin:0;
min-width:0;
max-width:100%;
}


.visual-image img,
.feature-image img,
.wide-showcase img,
.support-image img{
display:block;
width:100%;
max-width:100%;
height:auto;
border-radius:10px;
border:1px solid #294856;
box-shadow:0 18px 45px rgba(0,0,0,.22);
}


.visual-image figcaption,
.feature-image figcaption,
.wide-showcase figcaption{
color:#718895;
font-size:.65rem;
line-height:1.4;
margin-top:7px;
text-align:center;
}


.mini-features{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-top:18px;
}


.mini-features span{
border:1px solid #355366;
background:rgba(5,15,22,.84);
padding:5px 8px;
border-radius:99px;
color:#c8d6df;
font-size:.67rem;
}


.installation-section{
padding-top:62px;
padding-bottom:62px;
}


.how{
padding-top:62px;
}


.wide-showcase{
width:min(1050px,100%);
margin:0 auto 31px;
}


.feature-section{
grid-template-columns:.9fr 1.25fr;
}


.feature-section.reverse{
grid-template-columns:1.25fr .9fr;
}


.feature-section.reverse .feature-copy{
order:2;
}


.feature-section.reverse .feature-image{
order:1;
}


.feature-list{
margin:22px 0;
display:grid;
grid-template-columns:1fr 1fr;
gap:9px;
}


.feature-list > div{
background:#091c27;
border:1px solid #274554;
border-radius:7px;
padding:11px;
}


.feature-list strong,
.feature-list span{
display:block;
}


.feature-list strong{
color:#f4f8fb;
font-size:.8rem;
}


.feature-list span{
margin-top:4px;
color:#8ea4b0;
font-size:.72rem;
line-height:1.45;
}


.concept-price{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:10px;
margin:18px 0;
}


.concept-price > span{
color:#78c63f;
text-transform:uppercase;
font-size:.68rem;
font-weight:800;
}


.concept-price strong{
color:#f4f8fb;
font-size:2rem;
}


.concept-price small{
flex-basis:100%;
color:#788f9b;
font-size:.65rem;
}


.software-visual-section{
text-align:center;
}


.software-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:10px;
text-align:left;
}


.software-grid article{
background:#0d1b27;
border:1px solid #233b4a;
border-radius:8px;
padding:17px;
}


.software-icon{
width:36px;
height:36px;
display:grid;
place-items:center;
border-radius:7px;
background:rgba(163,238,99,.10);
border:1px solid #477138;
color:#a3ee63;
font-weight:900;
}


.software-grid h3{
color:#f4f8fb;
font-size:.82rem;
margin:12px 0 6px;
}


.software-grid p{
margin:0;
color:#94a8b3;
font-size:.72rem;
line-height:1.55;
}


.software-action{
margin-top:20px;
display:flex;
justify-content:center;
align-items:center;
gap:12px;
}


.software-action span{
color:#758c98;
font-size:.68rem;
}


.support-copy{
min-width:0;
}


.support-image{
flex:0 1 620px;
}


.support-image img{
width:100%;
max-width:100%;
height:auto;
}


@media(max-width:850px){

.visual-section,
.feature-section,
.feature-section.reverse{
grid-template-columns:1fr;
}

.feature-section.reverse .feature-copy,
.feature-section.reverse .feature-image{
order:initial;
}

.visual-copy,
.feature-copy,
.visual-image,
.feature-image,
.wide-showcase,
.support-image{
width:100%;
max-width:100%;
min-width:0;
}

.visual-image img,
.feature-image img,
.wide-showcase img,
.support-image img{
width:100%;
max-width:100%;
height:auto;
}

.support{
display:block;
}

.support-image{
margin-top:22px;
}

}


@media(max-width:560px){

.feature-list,
.software-grid{
grid-template-columns:1fr;
}

}


/* =========================================================
   PHONE-ONLY FINAL SPACING FIX
   Everything above remains unchanged for desktop.
   ========================================================= */

@media(max-width:720px){

html{
scroll-padding-top:52px;
}

#demo,
#how,
#hardware,
#software,
#mobile,
#legal,
#about{
scroll-margin-top:0;
}


main > section.section{
padding-top:26px !important;
padding-bottom:26px !important;
position:relative;
}


main > .installation-section{
padding-top:26px !important;
padding-bottom:26px !important;
}


main > .how{
padding-top:26px !important;
padding-bottom:26px !important;
}


main > .visual-section,
main > .feature-section{
gap:18px !important;
row-gap:18px !important;
}


.wide-showcase{
margin-bottom:18px !important;
}


.visual-image figcaption,
.feature-image figcaption,
.wide-showcase figcaption{
margin-bottom:0 !important;
}


main > section.section:not(#demo)::before{
content:"";
display:block !important;
position:absolute !important;
top:0 !important;
left:50% !important;
width:46% !important;
height:2px !important;
transform:translateX(-50%) !important;
background:linear-gradient(
90deg,
rgba(163,238,99,0) 0%,
rgba(163,238,99,.22) 15%,
rgba(163,238,99,.68) 50%,
rgba(163,238,99,.22) 85%,
rgba(163,238,99,0) 100%
) !important;
z-index:4;
pointer-events:none;
}


#demo{
padding-bottom:28px !important;
}


main > .installation-section{
padding-top:30px !important;
}


.hero{
padding-top:170px !important;
background-size:
100% 205px,
calc(100% - 20px) auto !important;
}


.hero-copy{
margin-top:0 !important;
}


main > section.section > :first-child{
margin-top:0;
}


.support-image{
margin-top:18px !important;
}

}


/* =========================================================
   PHONE-ONLY HOW-IT-WORKS CARD SIZE
   Keeps the original card layout.
   Only reduces scale and wasted space.
   Desktop is completely untouched.
   ========================================================= */

@media(max-width:720px){

.steps{
gap:9px !important;
}


.steps article{
display:block !important;
padding:11px !important;
min-height:0 !important;
border-radius:7px !important;
background:#091c27 !important;
border:1px solid #274554 !important;
}


.steps article span{
display:grid !important;
place-items:center !important;
width:28px !important;
height:28px !important;
margin:0 0 9px 0 !important;
border-radius:50% !important;
background:#78c63f !important;
color:#071018 !important;
font-size:.72rem !important;
font-weight:900 !important;
line-height:1 !important;
}


.steps article h3{
margin:0 0 6px 0 !important;
font-size:.8rem !important;
line-height:1.25 !important;
text-transform:uppercase !important;
}


.steps article p{
margin:0 !important;
font-size:.72rem !important;
line-height:1.45 !important;
color:#8ea4b0 !important;
}

}


/* =========================================================
   PHONE DEMO
   Keep width/layout exactly where it is now.
   Only make the two lower windows shorter.
   ========================================================= */

@media(max-width:720px){

#demo .dash-grid{
grid-template-columns:1fr 1fr !important;
gap:7px !important;
align-items:start !important;
}

#demo .map-panel{
grid-column:1 / -1 !important;
}

#demo .map{
height:180px !important;
}

#demo .map-controls{
display:flex !important;
gap:3px !important;
}

#demo .map-controls button{
padding:3px 5px !important;
font-size:.52rem !important;
}

#demo .panel-head{
padding:5px 7px !important;
min-height:0 !important;
}

#demo .panel-head h3{
font-size:.61rem !important;
line-height:1.05 !important;
margin:0 !important;
}

#demo .panel-head em{
font-size:.45rem !important;
line-height:1 !important;
}

#demo .map-legend{
left:6px !important;
bottom:6px !important;
padding:5px 6px !important;
font-size:.48rem !important;
gap:3px !important;
}

#demo .detections,
#demo .detail-panel{
height:auto !important;
min-height:0 !important;
align-self:start !important;
}

#demo .detections #detection-list{
padding:3px 4px !important;
}

#demo .det-card{
grid-template-columns:34px 1fr !important;
gap:3px !important;
padding:3px 4px !important;
margin-bottom:1px !important;
border-radius:5px !important;
min-height:0 !important;
}

#demo .det-card time{
font-size:.47rem !important;
line-height:1.05 !important;
}

#demo .det-card strong{
font-size:.54rem !important;
line-height:1.05 !important;
}

#demo .det-card span{
font-size:.45rem !important;
line-height:1.05 !important;
}

#demo .detail-panel #detail{
padding:5px 6px !important;
}

#demo .detail-badge{
padding:2px 4px !important;
font-size:.41rem !important;
line-height:1 !important;
}

#demo .detail-panel h4{
font-size:.66rem !important;
line-height:1.05 !important;
margin:4px 0 3px !important;
}

#demo .detail-panel #detail > p{
font-size:.46rem !important;
line-height:1.15 !important;
margin:0 0 3px !important;
}

#demo .detail-list{
gap:1px !important;
margin-top:3px !important;
}

#demo .detail-row{
padding-bottom:2px !important;
margin:0 !important;
}

#demo .detail-row small{
font-size:.38rem !important;
line-height:1 !important;
}

#demo .detail-row strong{
display:block !important;
font-size:.46rem !important;
line-height:1.05 !important;
}

}


/* =========================================================
   WATCHBACK LIVE DEMO — STATIC MAP + VEHICLE CAPTURES
   No external map library. No external CSS. No external JS.
   Existing HTML and tuned phone layout remain untouched.
   ========================================================= */

#demo .map{
background:
linear-gradient(rgba(5,15,20,.16),rgba(5,15,20,.16)),
url("images/watchback-demo-map.jpg") center/cover no-repeat !important;
}

#demo .map svg{
opacity:.08;
}

#demo .marker{
z-index:5;
width:24px;
height:29px;
border:2px solid rgba(255,255,255,.9);
border-radius:50% 50% 50% 7px;
transform:translate(-50%,-50%) rotate(-45deg);
box-shadow:
0 0 0 4px rgba(255,255,255,.07),
0 0 17px currentColor;
}

#demo .marker::after{
content:"";
position:absolute;
left:50%;
top:50%;
width:7px;
height:7px;
border-radius:50%;
background:#fff;
transform:translate(-50%,-50%);
}

#demo .marker.police,
#demo .dot.police{
background:#2486f3;
color:#2486f3;
}

#demo .marker.publicworks,
#demo .dot.publicworks{
background:#f0a31d;
color:#f0a31d;
}

#demo .marker.code,
#demo .dot.code{
background:#ef4438;
color:#ef4438;
}

#demo .marker.other,
#demo .dot.other{
background:#19aa61;
color:#19aa61;
}

#demo .map-legend{
grid-template-columns:repeat(2,minmax(0,1fr));
column-gap:12px;
}

#demo .det-card{
grid-template-columns:50px minmax(0,1fr) 82px;
align-items:center;
gap:8px;
padding:7px;
}

#demo .det-main{
min-width:0;
}

#demo .det-category{
display:block;
font-size:.56rem !important;
font-weight:900;
line-height:1.05;
margin-bottom:3px;
text-transform:uppercase;
letter-spacing:.035em;
}

#demo .det-category.police{color:#5da9ff !important}
#demo .det-category.code{color:#ff6f67 !important}
#demo .det-category.publicworks{color:#f1b94b !important}
#demo .det-category.other{color:#57dc91 !important}

#demo .det-sub{
display:block;
margin-top:3px;
font-size:.61rem !important;
line-height:1.16;
color:#93a7b2 !important;
}

#demo .det-thumb{
width:82px;
height:47px;
object-fit:cover;
border-radius:6px;
border:1px solid #34505e;
box-shadow:0 4px 12px rgba(0,0,0,.28);
}

#demo .detail-photo{
width:100%;
height:116px;
object-fit:cover;
border-radius:8px;
border:1px solid #34505e;
margin-bottom:9px;
box-shadow:0 7px 18px rgba(0,0,0,.26);
}

#demo .detail-topline{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
}

#demo .detail-time{
color:#a3ee63;
font-size:.66rem;
font-weight:900;
white-space:nowrap;
}

#demo .detail-badge.police{
color:#70b6ff;
border-color:#345f8d;
background:#10273b;
}

#demo .detail-badge.code{
color:#ff827b;
border-color:#79433f;
background:#301817;
}

#demo .detail-badge.publicworks{
color:#f1c96e;
border-color:#745c2f;
background:#2c2413;
}

#demo .detail-badge.other{
color:#67dda0;
border-color:#347153;
background:#10291d;
}

@media(max-width:720px){

#demo .marker{
width:11px !important;
height:14px !important;
border-width:1px !important;
box-shadow:
0 0 0 2px rgba(255,255,255,.05),
0 0 7px currentColor !important;
}

#demo .marker::after{
width:3px;
height:3px;
}

#demo .map-legend{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
column-gap:5px !important;
}

#demo .det-card{
grid-template-columns:31px minmax(0,1fr) 38px !important;
gap:3px !important;
padding:3px 4px !important;
}

#demo .det-category{
font-size:.34rem !important;
line-height:1 !important;
margin-bottom:1px !important;
}

#demo .det-sub{
font-size:.36rem !important;
line-height:1.02 !important;
margin-top:1px !important;
}

#demo .det-thumb{
width:38px !important;
height:23px !important;
border-radius:3px !important;
}

#demo .detail-photo{
height:43px !important;
margin-bottom:4px !important;
border-radius:4px !important;
}

#demo .detail-topline{
gap:3px !important;
}

#demo .detail-time{
font-size:.38rem !important;
}

}

@media(max-width:720px){

#demo .det-sub{
display:none !important;
}

#demo .det-card{
grid-template-columns:31px minmax(0,1fr) 38px !important;
align-items:center !important;
padding:2px 4px !important;
min-height:0 !important;
}

#demo .det-main{
min-width:0 !important;
}

#demo .det-category{
margin-bottom:1px !important;
}

#demo .det-card strong{
line-height:1 !important;
}

#demo .det-thumb{
height:21px !important;
}

}


/* =========================================================
   PHONE-ONLY HERO + SUPPORT DIALOG FONT FIX
   Desktop remains untouched.
   ========================================================= */

@media(max-width:720px){

.hero h1{
font-size:clamp(2rem,9.2vw,2.15rem) !important;
}

dialog h2{
font-size:1.6rem !important;
line-height:1.15 !important;
}

}