:root {
  /* page */
  --ground: #eef1f6; --surface: #ffffff; --sunk: #e6eaf2; --ink: #121a33; --muted: #5b6582; --line: #d9dfea;
  --accent: #2f55e4; --accent-ink: #ffffff; --accent-soft: #e3e9fd;
  --ok: #0c6e43; --ok-soft: #dcf3e8; --warn: #7d4e00; --warn-soft: #fbeed4; --bad: #b02a24; --bad-soft: #fbe1df;
  --shadow: 0 1px 2px rgba(18, 26, 51, .06), 0 8px 24px -12px rgba(18, 26, 51, .18);
  /* hero is always the night-map look */
  --h-bg: #0e1631; --h-ink: #eef1ff; --h-muted: #9aa6d1; --h-line: #26325f; --h-field: #17214a;
  --m-land: #1a2450; --m-pick: #243168; --m-hover: #2f3f82; --m-on: #3f5ff0; --m-edge: #0e1631;
  --p-idle: #dfe5ff; --p-run: #7fd4ff; --p-ok: #39d98a; --p-warn: #f5b93d; --p-bad: #ff5e57;
  /* timing */
  --t-dns: #8aa9d6; --t-tcp: #98c7a4; --t-tls: #d2b173; --t-ttfb: #2f55e4; --t-dl: #b7c0d4;
  --display: "Bricolage Grotesque", "Onest", system-ui, sans-serif;
  --sans: "Onest", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0a1024; --surface: #121a36; --sunk: #19224a; --ink: #e8ecfa; --muted: #98a3c7; --line: #243059;
    --accent: #7d97ff; --accent-ink: #0a1024; --accent-soft: #1d2a5e;
    --ok: #4fd896; --ok-soft: #123728; --warn: #f2bd57; --warn-soft: #3a2c10; --bad: #ff7a73; --bad-soft: #3d1a1c;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 28px -14px rgba(0,0,0,.6);
    --t-ttfb: #7d97ff; --t-dl: #4a5578;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--ground); color: var(--ink); font: 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.wrap { max-width: 1240px; margin: 0 auto; padding-inline: 20px; }
@media (max-width: 520px) { .wrap { padding-inline: 16px; } }

/* ---------- hero ---------- */
.hero { background: var(--h-bg); color: var(--h-ink); position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: var(--h-line); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 18px; }
.logo { display: flex; align-items: center; gap: 10px; font: 800 20px var(--display); letter-spacing: -.02em; color: var(--h-ink); text-decoration: none; }
.logo svg { width: 28px; height: 28px; }
.engine { font: 12px var(--mono); color: var(--h-muted); text-align: right; margin: 0; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; align-items: center; padding-block: 18px 30px; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } }
.hero .rp-headline { font: 800 clamp(34px, 4.6vw, 54px)/1.02 var(--display); letter-spacing: -.035em; margin: 0 0 14px; text-wrap: balance; }
.rp-headline em { font-style: normal; color: #9fb2ff; }
.lede { color: var(--h-muted); margin: 0 0 22px; max-width: 46ch; font-size: 16px; }

.probe-form { display: grid; gap: 12px; }
.urlbar { display: flex; align-items: center; gap: 0; background: #fff; color: #121a33; border-radius: 12px; padding: 5px 5px 5px 14px; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 20px 40px -20px rgba(0,0,0,.6); }
.urlbar svg { flex: none; width: 18px; height: 18px; color: #6b7699; }
.urlbar input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 500 16px var(--mono); padding: 11px 10px; color: #121a33; }
.run { flex: none; border: 0; background: var(--accent); color: #fff; font-weight: 700; font-size: 15px; padding: 12px 22px; border-radius: 9px; display: flex; align-items: center; gap: 8px; }
@media (prefers-color-scheme: dark) { .run { background: #3f5ff0; } }
.run:hover { filter: brightness(1.08); }
.run:disabled { opacity: .7; cursor: progress; }
.run .spin { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.optrow { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { display: flex; align-items: center; gap: 8px; background: var(--h-field); border: 1px solid var(--h-line); border-radius: 9px; padding: 6px 10px; font-size: 13px; color: var(--h-muted); }
.opt select { background: transparent; border: 0; color: var(--h-ink); font-weight: 600; font-size: 13px; padding: 2px 0; outline: 0; }
.opt select option { color: #121a33; }
.opt label { display: flex; align-items: center; gap: 7px; cursor: pointer; color: var(--h-ink); font-weight: 600; }
.opt input[type=checkbox] { accent-color: #3f5ff0; width: 15px; height: 15px; }
.opt.disabled { opacity: .55; }
.opt.disabled label { cursor: not-allowed; }

.picks { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.picks-label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--h-muted); margin-right: 4px; font-weight: 600; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(63,95,240,.18); border: 1px solid rgba(127,151,255,.35); color: var(--h-ink); border-radius: 99px; padding: 3px 6px 3px 9px; font-size: 13px; font-weight: 500; }
.chip .x { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; color: var(--h-muted); font-size: 14px; line-height: 1; }
.chip:hover .x { background: rgba(255,255,255,.12); color: #fff; }
.chip.noshot { border-style: dashed; }
.addbtn { background: transparent; border: 1px dashed var(--h-line); color: var(--h-ink); border-radius: 99px; padding: 4px 12px; font-size: 13px; font-weight: 600; }
.addbtn:hover { border-color: var(--h-muted); }
.clearbtn { background: transparent; border: 0; color: var(--h-muted); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }

.panel { background: var(--h-field); border: 1px solid var(--h-line); border-radius: 12px; padding: 12px; display: grid; gap: 10px; }
.panel-top { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.panel input[type=search] { flex: 1 1 180px; min-width: 0; background: var(--h-bg); border: 1px solid var(--h-line); border-radius: 8px; padding: 8px 10px; color: var(--h-ink); }
.preset { background: transparent; border: 1px solid var(--h-line); color: var(--h-ink); border-radius: 7px; padding: 5px 9px; font-size: 12px; font-weight: 600; }
.preset:hover { border-color: var(--h-muted); }
.clist { max-height: 230px; overflow: auto; display: grid; gap: 8px; padding-right: 4px; }
.cgroup-title { margin: 0 0 4px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--h-muted); font-weight: 600; }
.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0 10px; }
.cgrid label { display: flex; align-items: center; gap: 7px; padding: 3px 0; font-size: 14px; cursor: pointer; }
.cgrid label.hide { display: none; }
.cgrid input { accent-color: #3f5ff0; }
.cgrid .cam { margin-left: auto; font: 10px var(--mono); color: var(--h-muted); }

.mapbox { position: relative; }
#map { width: 100%; height: auto; display: block; }
#map .land { fill: var(--m-land); stroke: var(--m-edge); stroke-width: .5; }
#map .land.pick { fill: var(--m-pick); cursor: pointer; transition: fill .15s; }
#map .land.pick:hover { fill: var(--m-hover); }
#map .land.on { fill: var(--m-on); fill-opacity: .55; }
#map .grat { fill: none; stroke: var(--h-line); stroke-width: .4; stroke-opacity: .5; }
.pg { --rc: var(--p-idle); --rip: 2.8s; transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.pg.st-run { --rc: var(--p-run); --rip: 1.2s; }
.pg.st-ok { --rc: var(--p-ok); --rip: 3.4s; }
.pg.st-warn { --rc: var(--p-warn); --rip: 2s; }
.pg.st-bad { --rc: var(--p-bad); --rip: 1.3s; }
.pg .pin { fill: var(--rc); stroke: var(--h-bg); stroke-width: 1.5; cursor: pointer; transition: fill .3s;
  transform-box: fill-box; transform-origin: center; animation: pin-drop .6s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(var(--i, 0) * 45ms); }
.pg .ripple { fill: none; stroke: var(--rc); stroke-width: 1.2; opacity: 0; pointer-events: none;
  transform-box: fill-box; transform-origin: center; animation: pin-ripple var(--rip) ease-out infinite; animation-delay: var(--d, 0s); }
.pg .ripple.r2 { animation-delay: calc(var(--d, 0s) + var(--rip) / 2); }
.pg.st-ok .ripple { stroke-width: 1; }
.pg.pop .pin { animation: pin-pop .55s cubic-bezier(.34, 1.56, .64, 1); }
.pg.leave .pin { animation: pin-out .25s ease-in forwards; }
.pg.leave .ripple { display: none; }
@keyframes pin-drop { from { transform: translateY(-16px) scale(.2); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pin-ripple { 0% { transform: scale(.9); opacity: .8; } 100% { transform: scale(3.8); opacity: 0; } }
@keyframes pin-pop { 0% { transform: scale(1); } 40% { transform: scale(1.7); } 100% { transform: scale(1); } }
@keyframes pin-out { to { transform: scale(0); opacity: 0; } }
.maplegend { position: absolute; left: 8px; bottom: 6px; display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--h-muted); }
.maplegend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: 0; }
.maphint { position: absolute; right: 8px; bottom: 6px; font-size: 11px; color: var(--h-muted); }
.maptip { position: absolute; pointer-events: none; background: #fff; color: #121a33; font-size: 12px; padding: 5px 8px; border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.35); white-space: nowrap; transform: translate(-50%, calc(-100% - 10px)); }
.recent { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.recent button { background: transparent; border: 1px solid var(--h-line); color: var(--h-muted); border-radius: 7px; padding: 3px 9px; font: 12px var(--mono); }
.recent button:hover { color: var(--h-ink); border-color: var(--h-muted); }
.recent button b { font-weight: 500; color: var(--h-ink); }

/* ---------- results ---------- */
.content { padding-block: 26px 70px; display: grid; gap: 34px; }
.results-inner { display: grid; gap: 16px; }
main:focus { outline: none; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.target { display: grid; gap: 2px; }
.target .label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.target h2 { margin: 0; font: 700 24px var(--display); letter-spacing: -.02em; word-break: break-all; }
.tools { display: flex; gap: 8px; flex-wrap: wrap; }
.seg { display: inline-flex; background: var(--sunk); border-radius: 9px; padding: 3px; }
.seg button { border: 0; background: transparent; padding: 6px 12px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--muted); }
.seg button[aria-pressed=true] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.ghost { background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 6px 12px; font-size: 13px; font-weight: 600; }
.ghost:hover { border-color: var(--muted); }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
@media (max-width: 720px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stats { margin: 0; }
.stat { padding: 14px 18px; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px; border-left: 1px solid var(--line); }
.stat dd { margin: 0; }
.stat dt { font-size: 12px; color: var(--muted); }
.stat:first-child { border-left: 0; }
@media (max-width: 720px) { .stat:nth-child(3) { border-left: 0; } .stat:nth-child(n+3) { border-top: 1px solid var(--line); } }
.stat dd { font: 600 26px var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stat.ok dd { color: var(--ok); }
.stat.bad dd { color: var(--bad); }
.progress { height: 3px; background: var(--sunk); border-radius: 3px; overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.grid.mobile { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
.card .frame { position: relative; background: var(--sunk); }
.chrome { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--sunk); border-bottom: 1px solid var(--line); }
.dots { display: flex; gap: 4px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.addr { flex: 1; min-width: 0; background: var(--surface); border-radius: 6px; padding: 3px 8px; font: 11px var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 5px; }
.addr svg { width: 10px; height: 10px; flex: none; }
.viewport { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; background: var(--surface); position: relative; overflow: hidden; }
.grid.mobile .viewport { aspect-ratio: 9 / 17; }
.viewport img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.viewport.clickable { cursor: zoom-in; }
.viewport.clickable:hover img { filter: brightness(.96); }
.skel { position: absolute; inset: 0; padding: 16px; display: grid; align-content: start; gap: 10px; }
.skel i { display: block; height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--sunk) 0%, var(--line) 50%, var(--sunk) 100%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
.skel i:nth-child(1) { width: 40%; height: 14px; }
.skel i:nth-child(2) { width: 85%; height: 60px; border-radius: 8px; }
.skel i:nth-child(3) { width: 70%; }
.skel i:nth-child(4) { width: 55%; }
.skel span { font-size: 12px; color: var(--muted); margin-top: 6px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.tile { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 4px; padding: 16px; }
.tile b { font: 600 38px var(--mono); letter-spacing: -.03em; }
.tile span { font-size: 13px; color: var(--muted); max-width: 30ch; }
.tile.ok b { color: var(--ok); }
.tile.warn b { color: var(--warn); }
.tile.bad b { color: var(--bad); }
.flagbadge { position: absolute; top: 46px; left: 10px; font: 600 11px var(--sans); padding: 4px 9px; border-radius: 99px; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.flagbadge.warn { background: #f5b93d; color: #2d1d00; }
.flagbadge.bad { background: #ff5e57; color: #fff; }
.card .meta { padding: 12px 14px 14px; display: grid; gap: 6px; }
.card h3 { margin: 0; font: 700 19px var(--display); letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; }
.card h3 .fl { font-size: 18px; }
.card h3 .cc { font: 11px var(--mono); color: var(--muted); font-weight: 400; margin-left: auto; }
.facts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.facts .mono { color: var(--muted); font-size: 12px; }
.facts .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--line); }
.cities { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.err { font: 12px/1.45 var(--mono); color: var(--bad); white-space: pre-wrap; word-break: break-word; }
.pill { display: inline-flex; align-items: center; gap: 6px; font: 600 12px var(--sans); padding: 2px 9px; border-radius: 99px; background: var(--sunk); color: var(--muted); white-space: nowrap; }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.run::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .2; } }

.tablecard { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.tablewrap { overflow-x: auto; }
:where(.tablewrap) table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 900px; }
:where(.tablewrap) th { text-align: left; font-weight: 600; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--sunk); }
:where(.tablewrap) td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
:where(.tablewrap) tbody tr:last-child td { border-bottom: 0; }
.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.net { color: var(--muted); font-size: 12px; }
.bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--sunk); min-width: 150px; margin-top: 5px; }
.bar i { height: 100%; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); padding: 10px 14px; border-top: 1px solid var(--line); }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
details summary { cursor: pointer; color: var(--accent); font-size: 12px; }
details pre { font: 11px/1.5 var(--mono); background: var(--sunk); padding: 8px; border-radius: 6px; overflow-x: auto; max-height: 220px; margin: 6px 0 0; }

.empty { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 820px) { .empty { grid-template-columns: 1fr; } }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px; display: grid; gap: 8px; align-content: start; }
.step .n { font: 600 12px var(--mono); color: var(--accent); }
.step h3 { margin: 0; font: 700 18px var(--display); letter-spacing: -.01em; }
.step p { margin: 0; color: var(--muted); font-size: 14px; }
.notice { font-size: 13px; background: var(--warn-soft); border-radius: 10px; padding: 10px 14px; margin: 0; }
.notice code { font: 12px var(--mono); }

/* lightbox */
dialog#lb { border: 0; padding: 0; background: transparent; max-width: min(1200px, 96vw); width: 100%; color: var(--ink); }
dialog#lb::backdrop { background: rgba(6, 10, 25, .82); }
.lb { background: var(--surface); border-radius: 14px; overflow: hidden; display: grid; max-height: 92vh; grid-template-rows: auto minmax(0, 1fr) auto; }
.lb-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.lb-head h2 { margin: 0; font: 700 18px var(--display); flex: 1; min-width: 0; }
.lb-head button { background: var(--sunk); border: 0; border-radius: 8px; width: 34px; height: 34px; font-size: 16px; }
.lb-body { overflow: auto; background: var(--sunk); }
.lb-body img { display: block; width: 100%; height: auto; }
.lb-body .tile { position: static; min-height: 300px; }
.lb-foot { padding: 10px 14px; display: flex; gap: 8px 18px; flex-wrap: wrap; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); }
.lb-foot b { color: var(--ink); font-weight: 600; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* flags */
.flg { display: inline-block; width: 20px; height: 15px; border-radius: 2px; object-fit: cover; vertical-align: -2px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); flex: none; }
.card h3 .flg { width: 24px; height: 18px; }
.lb-head h3 .flg { margin-right: 4px; }
/* WordPress admin bar */
.admin-bar .hero { padding-top: 0; }
.rp-login { background: var(--h-field); border: 1px solid var(--h-line); border-radius: 12px; padding: 16px; color: var(--h-ink); display: grid; gap: 10px; }
.rp-login a { color: #9fb2ff; font-weight: 600; }
.rp-page { max-width: 760px; margin: 0 auto; padding: 40px 20px 70px; }
.rp-page h1 { font: 800 40px/1.1 var(--display); letter-spacing: -.03em; }
.rp-page a { color: var(--accent); }

/* ---- accessibility helpers ---- */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 1000; background: #fff; color: #121a33; font-weight: 700; padding: 10px 16px; border-radius: 8px; text-decoration: none; }
.skip:focus { top: 12px; }
.hero-head::after { display: none; }
.hero-body .hero-grid { padding-block: 8px 34px; }
.optrow { border: 0; margin: 0; padding: 0; min-width: 0; }
.opt label.optlabel { color: var(--h-muted); font-weight: 400; cursor: default; }
.clist { border: 0; margin: 0; padding: 0 4px 0 0; min-width: 0; }
.cgroup-title { margin: 0 0 4px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--h-muted); font-weight: 600; }
.rp-login-title { margin: 0; font: 700 18px var(--display); }
.rp-login p { margin: 0; color: var(--h-muted); }
.mapstatic img { border-radius: 12px; opacity: .9; }
.maphint { margin: 0; }
/* ---- content sections ---- */
.section-title { margin: 0 0 14px; font: 800 26px/1.15 var(--display); letter-spacing: -.02em; text-wrap: balance; }
ol.empty { list-style: none; margin: 0; padding: 0; counter-reset: step; }
ol.empty .step { counter-increment: step; }
ol.empty .step::before { content: counter(step, decimal-leading-zero); font: 600 12px var(--mono); color: var(--accent); }
.faq { display: grid; gap: 8px; max-width: 820px; }
.faq .section-title { margin-bottom: 6px; }
.faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 0 16px; }
.faq-item summary { cursor: pointer; padding: 14px 0; font-weight: 600; font-size: 16px; color: var(--ink); list-style-position: outside; }
.faq-item[open] summary { border-bottom: 1px solid var(--line); }
.faq-a { color: var(--muted); padding-block: 4px 6px; }
.faq-a p { margin: 10px 0; }
.site-footer { border-top: 1px solid var(--line); padding-block: 18px 28px; font-size: 13px; color: var(--muted); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.site-footer p { margin: 0; }
.footer-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; flex-wrap: wrap; }
.site-footer a { color: var(--accent); }
@media (forced-colors: active) { .pill, .chip, .card, .stat { border: 1px solid CanvasText; } }

/* ---- pages, posts and page builders ---- */
.hero-body .engine { text-align: left; margin-top: 12px; }
.topbar { flex-wrap: wrap; }
.logo-custom img { max-height: 40px; width: auto; display: block; }
.rp-nav .rp-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; flex-wrap: wrap; }
.rp-nav a { color: var(--h-ink); text-decoration: none; font-weight: 600; font-size: 14px; }
.rp-nav a:hover, .rp-nav .current-menu-item > a { color: #9fb2ff; }
.rp-nav .sub-menu { display: none; }
.rp-elementor { width: 100%; }
.rp-elementor .entry-content > *:first-child { margin-top: 0; }
.rp-page .entry-content { font-size: 16px; line-height: 1.7; }
.rp-page .entry-content img { height: auto; }
.rp-page .entry-content > * { max-width: 100%; }
.rp-entry { padding-block: 16px; border-bottom: 1px solid var(--line); }
.rp-entry-title { margin: 0 0 6px; font: 700 22px var(--display); }
.rp-entry-title a { color: var(--ink); text-decoration: none; }
.rp-embed h2.rp-headline { font: 800 clamp(28px, 3.6vw, 44px)/1.05 var(--display); letter-spacing: -.03em; margin: 0 0 14px; }
.rp-after-tool { width: 100%; }
.alignwide { max-width: 1240px; margin-inline: auto; }
.alignfull { width: 100%; max-width: none; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* Elementor pages: let sections run edge to edge and keep the tool's own layout. */
.rp-elementor .entry-content { max-width: none; }
.rp-embed .content { padding-block: 22px 40px; }
.rp-embed .content:has(> #results[hidden]):not(:has(.steps, .faq, .notice:not([hidden]))) { padding-block: 0; }
@media (max-width: 640px) {
  .maphint { display: none; }
  .maplegend { position: static; margin-top: 8px; }
}

/* ---- blog fallback (used when no Elementor archive template applies) ---- */
.rp-archive-hero .wrap { padding-block: 64px 56px; display: grid; gap: 14px; }
.rp-eyebrow { margin: 0; font: 500 13px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #9fb2ff; }
.rp-archive-hero .rp-headline { margin: 0; font: 800 clamp(34px, 4.6vw, 54px)/1.02 var(--display); letter-spacing: -.035em; }
.rp-archive-hero .lede p { margin: 0; }
.rp-archive-hero .search-form { display: flex; gap: 8px; max-width: 520px; margin-top: 8px; }
.rp-archive-hero .search-field { flex: 1; min-width: 0; background: var(--h-field); border: 1px solid var(--h-line); color: var(--h-ink); border-radius: 10px; padding: 12px 14px; }
.rp-archive-hero .search-submit { background: #3f5ff0; color: #fff; border: 0; border-radius: 10px; padding: 0 18px; font-weight: 700; }
.rp-archive-body { padding-block: 48px 72px; }
.rp-post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 28px 24px; }
.rp-post-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.rp-post-thumb img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.rp-post-body { padding: 22px 24px 24px; display: grid; gap: 10px; align-content: start; }
.rp-post-badge { justify-self: start; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 99px; }
.rp-post-title { margin: 0; font: 700 21px/1.25 var(--display); letter-spacing: -.01em; }
.rp-post-title a { color: var(--ink); text-decoration: none; }
.rp-post-title a:hover { color: var(--accent); }
.rp-post-excerpt { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.rp-post-meta { margin: 0; color: var(--muted); font-size: 13px; }
.rp-archive-body .pagination { margin-top: 48px; text-align: center; }
.rp-archive-body .nav-links { display: inline-flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.rp-archive-body .page-numbers { color: var(--muted); text-decoration: none; font-weight: 600; }
.rp-archive-body .page-numbers.current { color: var(--ink); }
.rp-empty { color: var(--muted); font-size: 17px; }

/* ---- article body: Elementor "Post Content" widget and the theme's own post layout ---- */
.elementor-widget-theme-post-content .elementor-widget-container,
.single-post .rp-page .entry-content {
  font-family: var(--sans); font-size: 18px; line-height: 1.75; color: #2a3350;
}
:is(.elementor-widget-theme-post-content, .single-post .rp-page .entry-content) :is(h2, h3, h4) {
  font-family: var(--display); color: var(--ink); letter-spacing: -.02em; line-height: 1.2; text-wrap: balance; scroll-margin-top: 90px;
}
:is(.elementor-widget-theme-post-content, .single-post .rp-page .entry-content) h2 { font-size: clamp(24px, 3vw, 30px); font-weight: 800; margin: 1.9em 0 .6em; }
:is(.elementor-widget-theme-post-content, .single-post .rp-page .entry-content) h3 { font-size: clamp(20px, 2.4vw, 23px); font-weight: 700; margin: 1.6em 0 .5em; }
:is(.elementor-widget-theme-post-content, .single-post .rp-page .entry-content) p { margin: 0 0 1.2em; }
:is(.elementor-widget-theme-post-content, .single-post .rp-page .entry-content) a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
:is(.elementor-widget-theme-post-content, .single-post .rp-page .entry-content) a:hover { text-decoration-thickness: 2px; }
:is(.elementor-widget-theme-post-content, .single-post .rp-page .entry-content) :is(ul, ol) { padding-left: 1.3em; margin: 0 0 1.3em; }
:is(.elementor-widget-theme-post-content, .single-post .rp-page .entry-content) li { margin: .35em 0; }
:is(.elementor-widget-theme-post-content, .single-post .rp-page .entry-content) li::marker { color: var(--accent); }
:is(.elementor-widget-theme-post-content, .single-post .rp-page .entry-content) blockquote {
  margin: 1.6em 0; padding: 18px 22px; border-left: 3px solid var(--accent); background: var(--ground); border-radius: 0 12px 12px 0; color: var(--ink);
}
:is(.elementor-widget-theme-post-content, .single-post .rp-page .entry-content) blockquote p:last-child { margin-bottom: 0; }
:is(.elementor-widget-theme-post-content, .single-post .rp-page .entry-content) code {
  font-family: var(--mono); font-size: .88em; background: var(--sunk); padding: .12em .4em; border-radius: 5px;
}
:is(.elementor-widget-theme-post-content, .single-post .rp-page .entry-content) pre {
  font-family: var(--mono); font-size: 14px; line-height: 1.6; background: #0e1631; color: #e6eafb; padding: 18px 20px; border-radius: 12px; overflow-x: auto; margin: 1.6em 0;
}
:is(.elementor-widget-theme-post-content, .single-post .rp-page .entry-content) pre code { background: none; padding: 0; color: inherit; }
:is(.elementor-widget-theme-post-content, .single-post .rp-page .entry-content) img { max-width: 100%; height: auto; border-radius: 12px; }
:is(.elementor-widget-theme-post-content, .single-post .rp-page .entry-content) figure { margin: 1.8em 0; }
:is(.elementor-widget-theme-post-content, .single-post .rp-page .entry-content) figcaption { font-size: 14px; color: var(--muted); margin-top: 8px; text-align: center; }
:is(.elementor-widget-theme-post-content, .single-post .rp-page .entry-content) table { width: 100%; border-collapse: collapse; font-size: 16px; margin: 1.6em 0; display: block; overflow-x: auto; }
:is(.elementor-widget-theme-post-content, .single-post .rp-page .entry-content) :is(th, td) { border-bottom: 1px solid var(--line); padding: 10px 12px; text-align: left; }
:is(.elementor-widget-theme-post-content, .single-post .rp-page .entry-content) th { font-weight: 700; font-size: 14px; color: var(--ink); background: var(--sunk); }
:is(.elementor-widget-theme-post-content, .single-post .rp-page .entry-content) hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
@media (max-width: 640px) {
  .elementor-widget-theme-post-content .elementor-widget-container, .single-post .rp-page .entry-content { font-size: 17px; }
}

/* Theme Builder single and archive templates are designed on light backgrounds, so keep the light palette there in dark mode too. */
.elementor-location-single, .elementor-location-archive {
  --ground: #eef1f6; --surface: #ffffff; --sunk: #e6eaf2; --ink: #121a33; --muted: #5b6582; --line: #d9dfea;
  --accent: #2f55e4; --accent-ink: #ffffff; --accent-soft: #e3e9fd;
  color-scheme: light;
}

/* Comments (comments.php, also used by Elementor's Post Comments widget) */
.rp-comments { margin-top: 48px; font-family: var(--sans); color: var(--ink); }
.rp-comments__title { font-family: var(--display); font-size: 24px; font-weight: 800; letter-spacing: -.4px; margin: 0 0 18px; color: var(--ink); }
.rp-comments__note, .rp-comments__closed, .rp-comments .logged-in-as { color: var(--muted); font-size: 14px; margin: 0 0 18px; }
.rp-comments .logged-in-as a, .rp-comments .comment-meta a, .rp-comments .reply a { color: var(--accent); }
.rp-comment-list, .rp-comment-list .children { list-style: none; margin: 0; padding: 0; }
.rp-comment-list { margin-bottom: 40px; }
.rp-comment-list .children { margin-left: 28px; padding-left: 20px; border-left: 2px solid var(--line); }
.rp-comment-list .comment-body { padding: 18px 0; border-bottom: 1px solid var(--line); }
.rp-comment-list .comment-author { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.rp-comment-list .comment-author .avatar { border-radius: 50%; }
.rp-comment-list .comment-author .says { display: none; }
.rp-comment-list .comment-meta { font-size: 13px; margin: 4px 0 10px 50px; }
.rp-comment-list .comment-meta a { color: var(--muted); text-decoration: none; }
.rp-comment-list .comment-content, .rp-comment-list .reply { margin-left: 50px; font-size: 16px; line-height: 1.65; }
.rp-comment-list .reply a { font-size: 14px; font-weight: 700; text-decoration: none; }
.rp-comments .comment-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.rp-comments .comment-form > p { margin: 0; grid-column: 1 / -1; }
.rp-comments .comment-form-author, .rp-comments .comment-form-email, .rp-comments .comment-form-url { grid-column: auto !important; }
.rp-comments .comment-form label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.rp-comments .comment-form :is(input[type=text], input[type=email], input[type=url], textarea) {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
}
.rp-comments .comment-form textarea { min-height: 150px; resize: vertical; }
.rp-comments .comment-form :is(input, textarea):focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.rp-comments .comment-form-cookies-consent { display: flex; gap: 10px; align-items: flex-start; }
.rp-comments .comment-form-cookies-consent label { font-weight: 400; color: var(--muted); margin: 0; }
.rp-comments .comment-form-cookies-consent input { margin-top: 4px; accent-color: var(--accent); }
.rp-comments .rp-comments__submit {
  font: inherit; font-weight: 700; font-size: 15px; color: var(--accent-ink); background: var(--accent);
  border: 0; border-radius: 10px; padding: 14px 24px; cursor: pointer;
}
.rp-comments .rp-comments__submit:hover { filter: brightness(.92); }
.rp-comments .comment-reply-title small { font-size: 14px; margin-left: 10px; font-family: var(--sans); font-weight: 600; }
@media (max-width: 640px) {
  .rp-comments .comment-form { grid-template-columns: 1fr; }
  .rp-comment-list .children { margin-left: 8px; padding-left: 14px; }
  .rp-comment-list .comment-meta, .rp-comment-list .comment-content, .rp-comment-list .reply { margin-left: 0; }
}

/* Block editor tables inside articles: replace WordPress's heavy default borders */
:is(.elementor-widget-theme-post-content, .single-post .rp-page .entry-content) .wp-block-table { margin: 1.6em 0; overflow-x: auto; }
:is(.elementor-widget-theme-post-content, .single-post .rp-page .entry-content) .wp-block-table table { margin: 0; display: table; border: 1px solid var(--line); border-radius: 12px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
:is(.elementor-widget-theme-post-content, .single-post .rp-page .entry-content) .wp-block-table thead { border-bottom: 0; }
:is(.elementor-widget-theme-post-content, .single-post .rp-page .entry-content) .wp-block-table :is(th, td) { border: 0; border-bottom: 1px solid var(--line); padding: 12px 16px; vertical-align: top; font-size: 16px; line-height: 1.55; }
:is(.elementor-widget-theme-post-content, .single-post .rp-page .entry-content) .wp-block-table th { font-size: 14px; }
:is(.elementor-widget-theme-post-content, .single-post .rp-page .entry-content) .wp-block-table tbody tr:last-child td { border-bottom: 0; }
:is(.elementor-widget-theme-post-content, .single-post .rp-page .entry-content) .wp-block-table :is(td, th):first-child { width: 36%; }
@media (max-width: 640px) {
  :is(.elementor-widget-theme-post-content, .single-post .rp-page .entry-content) .wp-block-table :is(td, th):first-child { width: auto; min-width: 110px; }
  :is(.elementor-widget-theme-post-content, .single-post .rp-page .entry-content) .wp-block-table :is(th, td) { padding: 10px 12px; font-size: 15px; }
}