/* dc-lens landing — "normal site" variant. Spec: design/VARIANT-SPEC.md (build to the
   tables there; report pages keep site.css). */
:root{ --bg:#faf7f1; --ink:#1f2a24; --muted:#5d6b62; --accent:#1d5c45; --accent-h:#174a38;
  --border:#e6dfd2; --rule:#eee7da; --tint:#e7f0eb; --shadow:0 1px 3px rgba(31,42,36,.07); }
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0; padding:0; background:var(--bg); color:var(--ink); font-size:16px; line-height:1.55;
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1000px; margin:0 auto; padding:0 24px}

nav.top{display:flex; justify-content:space-between; align-items:center; padding:20px 0}
.wordmark{font-size:19px; font-weight:650; letter-spacing:-0.01em; text-decoration:none}
nav.top a.navlink{font-size:14px; font-weight:500; color:var(--muted); text-decoration:none}
nav.top a.navlink:hover{color:var(--ink)}

.hero{padding:84px 0 40px; text-align:center}
h1{font-size:clamp(32px,4.5vw,48px); font-weight:650; line-height:1.1; letter-spacing:-0.015em; margin:0}
.hero .sub{font-size:18px; color:var(--muted); max-width:560px; margin:16px auto 0}

.checkrow{display:flex; gap:8px; background:#fff; border:1px solid var(--border); border-radius:999px;
  padding:6px; max-width:520px; margin:28px auto 0; box-shadow:var(--shadow)}
.checkrow input{flex:1; font:inherit; font-size:16px; border:none; outline:none; background:transparent;
  padding:10px 10px 10px 18px; color:var(--ink); min-width:0}
.checkrow input::placeholder{color:#9aa69e}
.btn{display:inline-block; background:var(--accent); color:#fff; border:none; border-radius:999px;
  font-family:inherit; font-size:15px; font-weight:600; padding:12px 26px; cursor:pointer;
  text-decoration:none; white-space:nowrap}
.btn:hover{background:var(--accent-h)}
@media(max-width:520px){
  .checkrow{flex-direction:column; border-radius:20px; padding:8px}
  .checkrow input{padding:12px 14px; text-align:center}
  .checkrow .btn{width:100%}
}
#err{display:none; color:#a33322; font-size:14px; margin:10px 0 0}
.spin{display:none; color:var(--muted); font-size:14px; margin:10px 0 0}
.hero .hint{font-size:13.5px; color:var(--muted); margin:14px 0 0}

.eyebrow{display:block; font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--muted)}
.card{background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow);
  padding:28px 32px}

#vcard{display:none; max-width:760px; margin:8px auto 0; text-align:left}
.band{font-size:28px; font-weight:650; letter-spacing:-0.01em; margin-top:6px}
.rag-green{color:var(--accent)} .rag-amber{color:#8a6d1f} .rag-red{color:#a33322}
.why{font-size:15px; color:var(--muted); margin:8px 0 0}
.tablewrap{overflow-x:auto; margin-top:8px}
.tablewrap table{min-width:420px}
table{border-collapse:collapse; width:100%; font-size:14px}
th{font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
  text-align:left; padding:7px 12px 7px 0; border-bottom:1px solid var(--border)}
td{padding:9px 12px 9px 0; border-bottom:1px solid var(--rule); vertical-align:top}
tr:last-child td{border-bottom:none}
td.num, th.num{text-align:right; font-variant-numeric:tabular-nums}
.fine{font-size:13px; color:var(--muted)}
.risk{font-size:13px; color:var(--muted); margin:10px 0 0}

section.block{padding:56px 0 0}
section.block > h2{font-size:26px; font-weight:650; letter-spacing:-0.01em; text-align:center; margin:0}
section.block > .intro{font-size:16px; color:var(--muted); text-align:center; max-width:560px; margin:10px auto 0}

.pair{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:28px}
@media(max-width:860px){.pair{grid-template-columns:1fr}}
.price{font-size:40px; font-weight:650; letter-spacing:-0.02em}
.price small{font-size:14px; font-weight:400; color:var(--muted); letter-spacing:0}
ul.ticks{list-style:none; padding:0; margin:16px 0 20px}
ul.ticks li{padding:6px 0 6px 26px; position:relative; font-size:15px}
ul.ticks li::before{content:'✓'; position:absolute; left:2px; color:var(--accent); font-weight:700}
.samplenum{font-size:24px; font-weight:650; margin:6px 0 0}
a.cardlink{display:block; text-decoration:none}
a.cardlink:hover{border-color:var(--accent)}
.textlink{color:var(--accent); font-weight:600; font-size:15px; text-decoration:none}
.textlink:hover{text-decoration:underline}
.honest{background:transparent; border:1px solid var(--border); border-radius:16px; padding:22px 28px;
  margin-top:20px}
.honest p{margin:8px 0 0; font-size:14.5px; color:var(--muted); max-width:720px}
.honest p:first-of-type{color:var(--ink)}
.honest h3{font-size:16px; font-weight:650; margin:0}

.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:28px}
@media(max-width:860px){.steps{grid-template-columns:1fr}}
.step{background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); padding:24px 26px}
.stepnum{width:32px; height:32px; border-radius:999px; background:var(--tint); color:var(--accent);
  font-size:16px; font-weight:650; display:flex; align-items:center; justify-content:center}
.step h3{font-size:17px; font-weight:650; margin:14px 0 8px}
.step p{font-size:14.5px; color:var(--muted); margin:0}
.whoweare{font-size:15px; color:var(--muted); text-align:center; max-width:640px; margin:32px auto 0}

.mapwrap{margin-top:28px; position:relative}
.mapfull{height:520px; position:relative; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:#eef0ec}
.mapfull .gl{position:absolute; inset:0}
.mappanel{position:absolute; top:16px; left:max(16px, calc(50vw - 500px)); z-index:5; background:#fff;
  border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); padding:16px 20px; max-width:250px}
.mappanel h2{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin:0; color:var(--muted)}
.mappanel .count{font-size:24px; font-weight:650; margin:4px 0 0}
.mappanel .count b{color:var(--accent); font-weight:650}
.mappanel .sub{font-size:12.5px; color:var(--muted); margin:4px 0 0}
@media(max-width:700px){.mappanel{position:static; max-width:none; border-radius:0; border-left:none; border-right:none; box-shadow:none}}
.maplibregl-popup-content{font-family:inherit; font-size:12.5px; padding:10px 12px; border-radius:10px;
  border:1px solid var(--border); box-shadow:var(--shadow); background:#fff}

footer{margin:56px 0 0; border-top:1px solid var(--border); padding:24px 0 48px}