/* iSupport Small Biz — approved v5 design system. Warm-white ground, navy ink, amber action, green = support-local/trust. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

:root{
  --bg:#F7F4EF; --surface:#F2F0EB; --card:#FFFFFF;
  --ink:#0A2640; --ink-2:#44546A; --muted:#6B7280;
  --border:#E6E1D9; --border-2:#D7D1C7;
  --amber:#F5A623; --amber-dark:#D4891A; --amber-bg:#FDEFD2;
  --green:#1A6B4A; --green-2:#15573C; --green-bg:#E4F2EC; --on-green:#EAF6F0;
  --navy-deep:#061A2E; --navy-mid:#0E3358;
  --id-black:#2B2B2B; --id-carib:#1A5276; --id-woman:#5B2C6F; --id-online:#185FA5;
  --shadow:0 1px 2px rgba(10,38,64,.05), 0 6px 20px rgba(10,38,64,.07);
  --shadow-lift:0 2px 6px rgba(10,38,64,.08), 0 16px 40px rgba(10,38,64,.12);
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-pill:100px;
  --fdisplay:'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
  --fbody:'DM Sans', system-ui, -apple-system, sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#061A2E; --surface:#0A2640; --card:#0E3358;
  --ink:#F4F1EA; --ink-2:#C4CFDB; --muted:#8EA0B2;
  --border:rgba(244,241,234,.12); --border-2:rgba(244,241,234,.2);
  --amber:#F7B84B; --amber-dark:#F5A623; --amber-bg:rgba(247,184,75,.14);
  --green:#5BBE93; --green-2:#49A87E; --green-bg:rgba(91,190,147,.16); --on-green:#06231A;
  --navy-deep:#030F1C; --navy-mid:#13406A;
  --id-black:#C9CDD2; --id-carib:#7FB4D8; --id-woman:#C79BDC; --id-online:#79B2E6;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  --shadow-lift:0 2px 6px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.5);
  color-scheme:dark;
}}

body{background:var(--bg); color:var(--ink); font-family:var(--fbody); line-height:1.5; -webkit-font-smoothing:antialiased;}
.wrap{width:100%; max-width:1140px; margin-inline:auto;
  padding-left:max(22px,env(safe-area-inset-left,0px));
  padding-right:max(22px,env(safe-area-inset-right,0px));}
a{color:inherit; text-decoration:none}
h1,h2,h3{font-family:var(--fdisplay); font-weight:800; line-height:1.05; letter-spacing:-.02em; text-wrap:balance; margin:0}
p{margin:0}
button{font-family:inherit; cursor:pointer}
:focus-visible{outline:3px solid var(--amber); outline-offset:2px; border-radius:4px}

header.nav{position:sticky; top:0; z-index:30; background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--border)}
.nav-in{display:flex; align-items:center; gap:16px; padding-block:13px}
.brand{display:flex; align-items:center; gap:5px; flex:none; font-family:var(--fdisplay); font-weight:800; font-size:1.2rem; letter-spacing:-.02em; color:var(--ink); white-space:nowrap}
.brand .wm{margin-left:1px}
.brand .mark{width:30px; height:30px; border-radius:9px; background:var(--ink); color:var(--bg); display:grid; place-items:center; font-size:1rem; transform:rotate(-4deg)}
.brand .sb{color:var(--amber-dark)}
.nav-links{display:none; gap:20px; margin-left:8px}
.nav-links a{color:var(--ink-2); font-weight:600; font-size:.92rem; white-space:nowrap}
.nav-links a:hover{color:var(--ink)}
.nav-spacer{flex:1}
.btn-amber{border:0; background:var(--amber); color:#0A2640; font-weight:700; font-size:.92rem; padding:11px 20px; border-radius:var(--r-pill); white-space:nowrap; flex:none; transition:background .18s ease, transform .18s ease}
.btn-amber:hover{background:var(--amber-dark); transform:translateY(-1px)}
@media(min-width:1000px){.nav-links{display:flex}}
.nav-toggle{display:inline-grid; place-items:center; width:42px; height:42px; border:1px solid var(--border-2); background:var(--card); color:var(--ink); border-radius:12px; flex:none}
.nav-toggle:hover{border-color:var(--ink)}
.nav-menu{border-top:1px solid var(--border); background:var(--bg)}
.nav-menu .wrap{display:flex; flex-direction:column; gap:2px; padding-block:8px 14px}
.nav-menu a{color:var(--ink); font-weight:600; font-size:1.02rem; padding:12px 6px; border-radius:8px}
.nav-menu a:hover{color:var(--amber-dark); background:var(--surface)}
@media(min-width:1000px){ .nav-toggle{display:none} .nav-menu{display:none} }
@media(max-width:440px){ .brand .sb{display:none} }

.hero{padding-block:clamp(36px,3.2vw,44px) clamp(24px,2.2vw,30px); text-align:center}
.hero .eyebrow{display:inline-flex; align-items:center; gap:12px; color:var(--amber-dark); font-weight:700; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase}
.hero .eyebrow::before,.hero .eyebrow::after{content:""; width:28px; height:1.5px; background:var(--amber-dark); opacity:.6}
.hero h1{font-size:clamp(2.5rem,5.4vw,3.7rem); margin-top:12px}
.hero .sub{font-size:clamp(1.05rem,2vw,1.2rem); color:var(--ink-2); max-width:50ch; margin:14px auto 0}
.search{margin:22px auto 0; display:flex; gap:8px; background:var(--card); border:1px solid var(--border-2); border-radius:var(--r-pill); padding:7px 7px 7px 20px; max-width:660px; box-shadow:var(--shadow); align-items:center}
.search svg{flex:none; color:var(--muted)}
.search input{flex:1; min-width:0; border:0; background:transparent; color:var(--ink); font-size:1rem; padding:12px 0}
.search input::placeholder{color:var(--muted)}
.search input:focus{outline:none}
.search .region{display:none; align-items:center; gap:6px; color:var(--ink-2); font-size:.9rem; font-weight:600; border-left:1px solid var(--border); padding:0 14px; white-space:nowrap}
.search .region select{border:0; background:transparent; color:inherit; font:inherit; font-weight:600; cursor:pointer; appearance:none; -webkit-appearance:none; padding-right:2px}
.search .region select:focus{outline:none}
@media(min-width:620px){.search .region{display:flex}}
.search .btn-amber{padding:13px 24px; font-size:.95rem}
.popular{margin-top:18px; display:flex; flex-wrap:wrap; gap:9px; justify-content:center}
.chip{border:1px solid var(--border-2); background:var(--card); color:var(--ink); font-size:.85rem; font-weight:600; padding:8px 15px; border-radius:var(--r-pill); transition:border-color .15s, background .15s, color .15s}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"],.chip.is-on{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.pager{display:flex; align-items:center; gap:16px; justify-content:center; margin-top:28px; color:var(--ink-2); font-size:.9rem}
.pager a{color:var(--amber-dark); font-weight:700; border:1px solid var(--border-2); padding:8px 16px; border-radius:var(--r-pill)}
.pager a:hover{border-color:var(--ink)}

.stats{background:linear-gradient(180deg,var(--green),var(--green-2)); color:var(--on-green); margin-top:30px}
.stats-in{display:grid; grid-template-columns:repeat(2,1fr); gap:28px 20px; padding-block:38px; text-align:center}
@media(min-width:820px){.stats-in{grid-template-columns:repeat(4,1fr)}}
.stat .num{font-family:var(--fdisplay); font-weight:800; font-size:clamp(1.9rem,3.3vw,2.5rem); line-height:1; color:#FFFFFF}
.stat .lab{font-size:.9rem; margin-top:10px; color:var(--on-green); opacity:.92; max-width:26ch; margin-inline:auto}
:root:not([data-theme="light"]) .stat .num{color:#06231A}
.stats-in.cols-2{grid-template-columns:repeat(2,1fr)}
.stats-in.cols-3{grid-template-columns:repeat(2,1fr)}
@media(min-width:820px){.stats-in.cols-3{grid-template-columns:repeat(3,1fr)}}
/* Mobile: mission spans the top; the two stats sit side by side below it.
   Placement via named grid-areas (reliable regardless of DOM order). */
.stats-band{display:grid; grid-template-columns:1fr 1fr; grid-template-areas:"mission mission" "a b"; gap:20px 24px; padding-block:36px; text-align:center; max-width:470px; margin-inline:auto}
.stats-mission{grid-area:mission; font-family:var(--fdisplay); font-weight:800; font-size:clamp(1.45rem,5vw,2.3rem); line-height:1.16; letter-spacing:-.01em; max-width:22ch; margin:0 auto; color:#FFFFFF}
:root:not([data-theme="light"]) .stats-mission{color:#06231A}
.stats-band .stat-a{grid-area:a}
.stats-band .stat-b{grid-area:b}
.stats-band .stat{text-align:center}
/* Tablet/desktop: Free | mission (centered focal CTA) | 77. */
@media(min-width:820px){
  .stats-band{grid-template-columns:1fr 1.6fr 1fr; grid-template-areas:"a mission b"; align-items:center; column-gap:clamp(24px,3vw,56px); row-gap:0; padding-block:clamp(26px,2.8vw,38px); max-width:none; margin-inline:0}
  .stats-mission{max-width:30ch; font-size:clamp(1.4rem,1.75vw,1.95rem); line-height:1.24}
  .stats-band .stat .num{font-size:clamp(1.5rem,1.9vw,2.1rem)}
  .stats-band .stat .lab{max-width:24ch; font-size:.9rem}
}

.section{padding-block:clamp(34px,5vw,54px)}
.section--surface{background:var(--surface)}
.section-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px}
.section-head h2{font-size:clamp(1.5rem,3vw,2rem)}
.section-head .lnk{color:var(--amber-dark); font-weight:700; font-size:.92rem}
.filters{display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 22px}
.filterbar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:22px 0 10px}
.filterbar .search{margin:0; box-shadow:var(--shadow); flex:1 1 300px; max-width:none}
.filterbar select{appearance:none; -webkit-appearance:none; background-color:var(--card); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A94A6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; border:1px solid var(--border-2); color:var(--ink); font-family:inherit; font-size:.9rem; font-weight:600; padding:12px 40px 12px 16px; border-radius:var(--r-pill); cursor:pointer}
.filterbar select:hover{border-color:var(--ink)}
.filterbar .clearf{color:var(--amber-dark); font-weight:700; font-size:.88rem; padding:8px 6px; white-space:nowrap}
.browse-all{text-align:center; margin-top:32px}
.browse-all .btn-amber{display:inline-block}
.noresults{padding:30px 0; text-align:center}
.noresults p{color:var(--ink-2); max-width:48ch; margin:0 auto}
.noresults-actions{margin-top:16px; display:flex; flex-direction:column; align-items:center; gap:12px}
.noresults-cats{display:flex; flex-wrap:wrap; gap:8px; justify-content:center}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:18px}
.biz{position:relative; overflow:hidden; background:var(--card); border:1px solid var(--border); border-radius:var(--r-md); padding:20px; display:flex; flex-direction:column; gap:11px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.biz:hover{transform:translateY(-3px); box-shadow:var(--shadow-lift); border-color:var(--border-2)}
.biz>*:not(.cardbg){position:relative; z-index:1}
.cardbg{position:absolute; inset:0; z-index:0; background-size:cover; background-position:right center; opacity:.18; -webkit-mask-image:linear-gradient(to left,#000 8%,rgba(0,0,0,.45) 52%,transparent 88%); mask-image:linear-gradient(to left,#000 8%,rgba(0,0,0,.45) 52%,transparent 88%); transition:opacity .35s ease, transform .5s ease; pointer-events:none}
.biz.has-bg:hover .cardbg{opacity:.33; transform:scale(1.05)}
.biz .logo.has-logo{background-color:#fff; background-size:contain; background-repeat:no-repeat; background-position:center; color:transparent; border:1px solid var(--border)}
@media (prefers-reduced-motion: reduce){ .cardbg{transition:opacity .2s ease} .biz.has-bg:hover .cardbg{transform:none} }
.biz .top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.biz .logo{width:46px; height:46px; border-radius:11px; flex:none; display:grid; place-items:center; font-family:var(--fdisplay); font-weight:800; font-size:1.15rem; color:#fff}
.biz h3{font-size:1.18rem; letter-spacing:-.01em}
.biz .cat{color:var(--muted); font-size:.88rem; margin-top:3px}
.biz .ids{display:flex; flex-wrap:wrap; gap:6px}
.biz .foot{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:4px}
.lnk{color:var(--amber-dark); font-weight:700; font-size:.9rem}
.loc{display:inline-flex; align-items:center; gap:5px; color:var(--ink-2); font-size:.85rem; font-weight:500}
.rating{display:inline-flex; align-items:center; gap:4px; color:var(--ink); font-size:.85rem; font-weight:700}
.rating svg{color:var(--amber)}
.rating span{color:var(--muted); font-weight:500}
.idbadge{display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:700; padding:4px 10px; border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--border)}
.idbadge .dot{width:7px; height:7px; border-radius:50%}
.id-black .dot{background:var(--id-black)} .id-carib .dot{background:var(--id-carib)}
.id-woman .dot{background:var(--id-woman)} .id-online .dot{background:var(--id-online)}
.verified{display:inline-flex; align-items:center; gap:5px; font-size:.74rem; font-weight:700; color:var(--green); background:var(--green-bg); padding:5px 10px; border-radius:var(--r-pill)}
.biz.unclaimed{border-style:dashed; border-color:var(--border-2); background:color-mix(in srgb,var(--card) 55%,var(--surface))}
.claimrow{display:flex; align-items:center; gap:8px; background:var(--amber-bg); color:var(--amber-dark); border-radius:var(--r-sm); padding:9px 12px; font-size:.84rem; font-weight:600; margin-top:auto}
.claimlink{color:var(--muted); font-size:.82rem; font-weight:600}
.claimlink:hover{color:var(--amber-dark)}
.formcard{background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:clamp(22px,4vw,38px); max-width:620px; margin:20px auto 60px; box-shadow:var(--shadow)}
.formcard.narrow{max-width:520px; text-align:center}
.formcard h1{font-family:var(--fdisplay); font-weight:800; color:var(--ink); font-size:clamp(1.5rem,3.5vw,2.1rem); line-height:1.1; margin:0 0 10px}
.formlede{color:var(--ink-2); line-height:1.6; margin:0 0 22px}
.formlede strong{color:var(--ink)}
.formerr{background:var(--amber-bg); color:var(--amber-dark); border:1px solid color-mix(in srgb,var(--amber) 45%,transparent); border-radius:var(--r-sm); padding:11px 14px; font-size:.9rem; font-weight:600; margin-bottom:18px}
.claimform{display:grid; gap:16px; text-align:left}
.claimform label{display:grid; gap:6px}
.claimform label>span{font-size:.88rem; font-weight:700; color:var(--ink)}
.claimform label em{font-style:normal; color:var(--muted); font-weight:500}
.claimform input,.claimform select,.claimform textarea{font:inherit; color:var(--ink); background:var(--surface); border:1.5px solid var(--border-2); border-radius:var(--r-sm); padding:12px 14px; width:100%; box-sizing:border-box}
.claimform input::placeholder,.claimform textarea::placeholder{color:var(--muted)}
.claimform input:focus,.claimform select:focus,.claimform textarea:focus{outline:none; border-color:var(--green); box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 22%,transparent)}
.claimform input[aria-invalid]{border-color:#d46a6a}
.claimform small{color:var(--muted); font-size:.8rem}
.claimform input[type=file]{font:inherit; color:var(--ink); background:var(--surface); border:1.5px solid var(--border-2); border-radius:var(--r-sm); padding:9px 11px; width:100%; box-sizing:border-box}
.imgtype{border:0; padding:0; margin:0}
.imgtype legend{font-size:.88rem; font-weight:700; color:var(--ink); padding:0; margin-bottom:8px}
.imgtype .radios{display:flex; flex-wrap:wrap; gap:20px}
.imgtype .radio{display:inline-flex; align-items:center; gap:7px; font-weight:600; color:var(--ink-2); font-size:.92rem}
.imgtype .radio input{width:auto}
.flash{background:var(--green-bg); color:var(--green-2); border:1px solid color-mix(in srgb,var(--green) 35%,transparent); border-radius:var(--r-sm); padding:11px 16px; font-weight:600; margin:16px 0; font-size:.92rem}
.admin-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px}
.admin-h2{font-size:1.15rem; margin:28px 0 12px; display:flex; align-items:center; gap:10px}
.acount{display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:24px; padding:0 7px; border-radius:999px; background:var(--amber-bg); color:var(--amber-dark); font-size:.8rem; font-weight:800}
.arow{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; background:var(--card); border:1px solid var(--border); border-radius:var(--r-md); padding:14px 16px; margin-bottom:10px}
.ainfo{display:flex; flex-direction:column; gap:3px; min-width:0}
.ainfo strong{font-size:1rem}
.amuted{color:var(--muted); font-size:.85rem}
.aacts{display:flex; gap:8px; flex-wrap:wrap}
.aacts form{display:inline; margin:0}
.aacts .btn-amber,.aacts .btn-ghost{padding:8px 14px; font-size:.86rem}
.claimform button{margin-top:4px; justify-self:start}
.formicon{width:54px; height:54px; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; border-radius:50%; background:var(--amber-bg); color:var(--amber-dark)}
.formicon.ok{background:var(--green-bg); color:var(--green)}
.formcard.narrow .btn-amber{display:inline-flex; align-items:center; margin:6px 0 16px}
.formcard.narrow .lnk{display:inline-block; margin-top:6px}
.claimcta{display:flex; align-items:center; justify-content:center; width:100%; margin-top:14px; padding:13px 20px}
.stagingbox{background:var(--surface); border:1px dashed var(--border-2); border-radius:var(--r-sm); padding:16px; margin:4px 0 20px; text-align:center}
.stagingbox p{color:var(--ink-2); font-size:.88rem; margin:0 0 12px}
.stagingtag{display:inline-block; font-size:.7rem; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--amber-dark); background:var(--amber-bg); border-radius:999px; padding:3px 10px; margin-bottom:8px}
.mapbox{margin-top:16px; border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden}
.mapbox .maphead{display:flex; align-items:center; gap:8px; padding:12px 14px; background:var(--surface); color:var(--ink-2); font-size:.86rem; font-weight:600; border-bottom:1px solid var(--border)}
.mapph{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:170px; padding:22px; text-align:center; color:var(--muted); background:repeating-linear-gradient(45deg,var(--surface),var(--surface) 12px,var(--card) 12px,var(--card) 24px)}
.mapph .mloc{color:var(--ink); font-weight:700}
.mapph .mdir{margin-top:4px}
.leafmap{height:270px; width:100%; z-index:0}
.leafmap .leaflet-control-attribution{font-size:10px}
.mapfoot{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-top:1px solid var(--border); font-size:.86rem; color:var(--ink-2)}
.mapfoot span{font-weight:600; color:var(--ink)}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:28px}
.steps{display:grid; gap:18px; margin-top:24px}
@media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{background:var(--card); border:1px solid var(--border); border-radius:var(--r-md); padding:22px; box-shadow:var(--shadow)}
.step .sn{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:var(--amber-bg); color:var(--amber-dark); font-family:var(--fdisplay); font-weight:800; font-size:1.05rem; margin-bottom:12px}
.step h3{font-size:1.14rem; margin-bottom:6px}
.step p{color:var(--ink-2); line-height:1.6; font-size:.95rem}
.feats{display:grid; gap:16px; margin-top:24px}
@media(min-width:720px){.feats{grid-template-columns:repeat(2,1fr)}}
.feat{display:flex; gap:14px; background:var(--card); border:1px solid var(--border); border-left:4px solid var(--green); border-radius:var(--r-md); padding:18px 20px}
.feat .fi{flex:none; color:var(--green); margin-top:2px}
.feat h3{font-size:1.06rem; margin-bottom:4px}
.feat p{color:var(--ink-2); line-height:1.55; font-size:.92rem}
.prose{max-width:62ch}
.prose p{color:var(--ink-2); line-height:1.75; margin-bottom:14px}
.prose strong{color:var(--ink)}

.ownercta{background:linear-gradient(135deg,var(--navy-mid),var(--navy-deep)); color:#EAF0F6; text-align:center}
.ownercta-in{padding-block:clamp(40px,6vw,68px)}
.ownercta h2{color:#F4F1EA; font-size:clamp(1.8rem,4vw,2.6rem)}
.ownercta p{color:#AEBED0; max-width:54ch; margin:16px auto 0; font-size:1.05rem}
.ownercta .btns{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:26px}
.btn-ghost-d{border:1px solid rgba(244,241,234,.3); background:transparent; color:#F4F1EA; font-weight:600; font-size:.95rem; padding:13px 22px; border-radius:var(--r-pill)}
.ownercta .btn-amber{padding:14px 26px; font-size:1rem}

.detail{padding-block:26px 50px}
.back{display:inline-flex; align-items:center; gap:7px; color:var(--ink-2); font-weight:600; font-size:.9rem; background:none; border:0; padding:6px 0}
.dcard{background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); margin-top:14px}
.dbanner{position:relative; overflow:hidden; background:linear-gradient(135deg,var(--navy-mid),var(--navy-deep)); padding:30px clamp(20px,4vw,36px); display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.dbanner>*:not(.cardbg){position:relative; z-index:1}
.dbanner .cardbg{opacity:.18}
.dbanner.has-bg:hover .cardbg{opacity:.26}
.dbanner .logo{width:72px; height:72px; border-radius:16px; flex:none; display:grid; place-items:center; font-family:var(--fdisplay); font-weight:800; font-size:1.8rem; background:var(--amber); color:#0A2640}
.dbanner .logo.has-logo{background-color:#fff; background-size:contain; background-repeat:no-repeat; background-position:center; color:transparent; border:1px solid var(--border)}
.dbanner h2{color:#F4F1EA; font-size:clamp(1.7rem,4vw,2.4rem)}
.dbanner .place{color:#A9BBCE; font-size:1rem; margin-top:5px}
.dbanner .ids{margin-bottom:9px; display:flex; gap:7px; flex-wrap:wrap}
.dbanner .idbadge{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.18); color:#EAF0F6}
.dbody{padding:clamp(20px,4vw,36px); display:grid; grid-template-columns:1.5fr 1fr; gap:30px}
@media(max-width:720px){.dbody{grid-template-columns:1fr}}
.dbody h3{font-size:1.15rem; margin-bottom:8px}
.dbody p{color:var(--ink-2)}
.facts{display:flex; flex-direction:column; gap:12px; margin-top:22px}
.fact{display:flex; gap:12px; align-items:flex-start; font-size:.95rem}
.fact .k{color:var(--muted); width:92px; flex:none}
.fact .v{color:var(--ink); font-weight:500}
.trustbox{background:var(--green-bg); border:1px solid color-mix(in srgb,var(--green) 30%,transparent); border-radius:var(--r-md); padding:18px}
.trustbox .t{display:flex; align-items:center; gap:8px; color:var(--green); font-weight:700}
.trustbox p{font-size:.88rem; margin-top:8px; color:var(--ink-2)}
.actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.actions .btn-amber{padding:11px 18px; font-size:.9rem; display:inline-flex; align-items:center; gap:7px}
.actions .btn-ghost{border:1px solid var(--border-2); background:transparent; color:var(--ink); font-weight:600; font-size:.9rem; padding:11px 18px; border-radius:var(--r-pill); display:inline-flex; align-items:center; gap:7px}

footer.site{background:var(--navy-deep); color:#C4CFDB}
.foot-in{padding-block:34px; display:flex; flex-wrap:wrap; gap:16px 24px; justify-content:space-between; align-items:center}
footer.site .brand{color:#F4F1EA}
footer.site .brand .mark{background:var(--amber); color:#0A2640}
footer.site small{color:#8EA0B2; max-width:44ch}
.foot-links{display:flex; flex-wrap:wrap; gap:16px; align-items:center}
.foot-links a{color:#C4CFDB; font-weight:600; font-size:.85rem}
.foot-links a:hover{color:#F4F1EA}
.foot-bottom{border-top:1px solid rgba(244,241,234,.12); padding-block:16px; text-align:center}
.foot-bottom small{color:#8EA0B2; font-size:.8rem}

.legal{max-width:70ch; padding-block:clamp(10px,2vw,20px) 20px}
.legal h1{font-size:clamp(1.8rem,4vw,2.4rem)}
.legal h2{font-size:1.2rem; margin:28px 0 10px}
.legal p{color:var(--ink-2); line-height:1.75; margin-bottom:14px}
.legal ul{margin:0 0 14px; padding-left:20px}
.legal li{color:var(--ink-2); line-height:1.7; margin-bottom:8px}
.legal a{color:var(--amber-dark); font-weight:700}

.diag-hero{margin-top:14px; font-size:.92rem; color:var(--ink-2)}
.diag-hero a{color:var(--amber-dark); font-weight:700}
.diag-quiet{margin-top:14px; font-size:.84rem; color:var(--muted)}
.diag-quiet a{color:var(--amber-dark); font-weight:600}

.pscore{display:flex; align-items:center; gap:8px; margin-top:6px}
.pscore-bar{flex:1; max-width:160px; height:6px; border-radius:999px; background:var(--border-2); overflow:hidden}
.pscore-fill{height:100%; background:var(--amber); border-radius:999px}
.pscore-label{font-size:.78rem; color:var(--muted); font-weight:600; white-space:nowrap}
.ownerdiag{margin-top:22px; background:var(--card); border:1px solid var(--border); border-left:4px solid var(--amber); border-radius:var(--r-md); padding:18px 20px}
.ownerdiag h3{font-size:1.05rem; margin-bottom:6px}
.ownerdiag p{color:var(--ink-2); font-size:.92rem; margin-bottom:4px}

.hidden{display:none}
@keyframes rise{from{opacity:.001; transform:translateY(14px)} to{opacity:1; transform:none}}
.anim{animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
.anim.d1{animation-delay:.06s} .anim.d2{animation-delay:.13s} .anim.d3{animation-delay:.2s}
@media (prefers-reduced-motion: reduce){ *{animation:none!important; transition:none!important} }
