/* OutdoorROI. One style file for every page. Change the ?v= on the link whenever this file changes. */
:root {
  --font-display: "Archivo", "Arial Black", "Segoe UI", system-ui, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --ink: #0b1120;
  --ink-2: #172042;
  --paper: #fff8ec;
  --surface: #ffffff;
  --muted: #545c75;
  --line: #eadfc8;
  --accent: #c2410c;
  --accent-ink: #ffffff;
  --gold: #ffb703;
  --soft: #fff0c7;
  --ok: #0a7a50;
  --bad: #b42318;
  --warn: #b45309;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.6 var(--font-body); overflow-x: clip; }
img, svg { max-width: 100%; }
a { color: var(--accent); }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.02em; line-height: 1.1; margin: 0; }
p { margin: 0 0 14px; }
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 1400px) { .wrap { max-width: 1280px; } }
@media (min-width: 1700px) { .wrap { max-width: 1440px; } }

/* top bar */
.topbar { background: var(--ink); color: #fff; }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; font: 800 1.3rem/1 var(--font-display); letter-spacing: -0.02em; white-space: nowrap; }
.brand img { display: block; width: 42px; height: 42px; }
.brand b { color: var(--gold); font-weight: 800; }
.nav { display: flex; align-items: center; gap: 26px; font-size: 0.98rem; }
.nav a { color: #e9ecf5; text-decoration: none; }
.nav a:hover { color: var(--gold); }
.nav .nav-cta { color: var(--ink); background: var(--gold); font-weight: 700; padding: 10px 16px; border-radius: 999px; white-space: nowrap; }
.nav .nav-cta:hover { color: var(--ink); filter: brightness(1.06); }
.topbar a:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
@media (max-width: 860px) { .nav > a:not(.nav-cta) { display: none; } .topbar .wrap { min-height: 64px; } .brand { font-size: 1.1rem; } .brand img { width: 36px; height: 36px; } .nav .nav-cta { padding: 9px 13px; font-size: 0.9rem; } }

/* buttons */
.btn { display: inline-block; font: 700 1.05rem/1 var(--font-body); color: var(--accent-ink); background: var(--accent); border: 0; border-radius: 10px; padding: 16px 26px; cursor: pointer; text-decoration: none; }
.btn:hover { filter: brightness(1.08); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.btn.ghost { color: var(--ink); background: transparent; border: 2px solid var(--ink); padding: 14px 22px; }
.btn.small { font-size: 0.92rem; padding: 10px 14px; border-radius: 8px; }
.btn.gold { color: var(--ink); background: var(--gold); }
.btn:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* home: hero */
.hero { background: var(--ink); color: #fff; padding: 56px 0 72px; position: relative; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: repeating-linear-gradient(90deg, var(--gold) 0 28px, #1d2748 28px 56px); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 48px; align-items: center; }
.kicker { display: inline-block; font: 700 0.8rem/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin: 0 0 18px; }
.hero h1 { font-size: clamp(2.3rem, 5.2vw, 4rem); font-weight: 800; text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--gold); }
.hero .lede { font-size: 1.2rem; color: #dfe4f2; max-width: 34rem; margin: 20px 0 28px; }
.hero .fine { margin: 16px 0 0; color: #c3cbe0; font-size: 0.98rem; }
.proof { background: var(--surface); color: var(--ink); border-radius: 16px; padding: 26px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); border-top: 8px solid var(--gold); }
.proof .tagline { font: 700 0.72rem/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.proof h2 { font-size: 1.5rem; margin: 0 0 16px; }
.proof dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 1rem; }
.proof dt { color: var(--muted); }
.proof dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.proof .stamp { display: inline-block; margin-top: 18px; font: 800 0.95rem/1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ok); border: 2px solid var(--ok); border-radius: 8px; padding: 8px 12px; transform: rotate(-2deg); }
@media (max-width: 860px) { .hero { padding: 36px 0 56px; } .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* home: sections */
.sec { padding: 64px 0; }
.sec.alt { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 800; margin: 0 0 10px; }
.sec .sub { color: var(--muted); font-size: 1.12rem; max-width: 44rem; margin: 0 0 32px; }
.grid { display: grid; gap: 18px; }
.grid.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.k2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 980px) { .grid.k4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.k3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .grid.k4, .grid.k2 { grid-template-columns: minmax(0, 1fr); } .sec { padding: 44px 0; } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.sec.alt .card { background: var(--paper); }
.card h3 { font-size: 1.2rem; margin: 0 0 6px; }
.card p { margin: 0; color: var(--muted); }
.step .num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--gold); font: 800 1.1rem/1 var(--font-display); margin: 0 0 14px; }
.price .amt { font: 800 2.4rem/1 var(--font-display); margin: 10px 0 4px; }
.price .split { color: var(--muted); font-size: 0.98rem; margin: 0 0 12px; }
.price .when { color: var(--ink); }
.know { border-left: 6px solid var(--accent); }
.know h3 { font-size: 1.12rem; }
.cta-band { background: var(--ink); color: #fff; text-align: left; padding: 48px 0; }
.cta-band h2 { color: #fff; margin: 0 0 18px; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.notlaw { color: var(--muted); font-size: 0.95rem; margin: 28px 0 0; max-width: 60rem; }

/* inner pages */
.page { padding: 44px 0 24px; }
/* narrow reading pages keep the same left edge as the menu and the footer */
.page.narrow .wrap > *, .wrap.flow > * { max-width: 46rem; }
.page h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; margin: 0 0 8px; }
.page h2 { font-size: 1.3rem; margin: 30px 0 8px; }
.page li { margin: 0 0 10px; }
.page ul, .page ol { padding-left: 1.3rem; margin: 0 0 14px; }
.updated { color: var(--muted); font: 700 0.78rem/1.4 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 26px; }
.note { padding: 14px 16px; border-radius: 10px; background: var(--soft); border: 1px solid #f0dc9a; margin: 0 0 22px; }
.note.red { background: #fdecee; border-color: #f3c0c7; }
.cards { list-style: none; padding: 0 !important; display: grid; gap: 14px; }
.cards li { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px; margin: 0; }
.cards a { font: 700 1.15rem/1.3 var(--font-display); display: block; margin: 0 0 6px; }
.cards span { color: var(--muted); }
.cta { background: var(--ink); color: #fff; border-radius: 14px; padding: 24px; margin: 30px 0; }
.cta .btn { margin-top: 14px; }
.src { color: var(--muted); font-size: 0.92rem; }

/* the questions */
.bar { height: 8px; background: var(--line); border-radius: 99px; overflow: hidden; margin: 0 0 28px; }
.bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.25s; }
.q h1 { font-size: clamp(1.6rem, 3.6vw, 2.2rem); }
.q .help { color: var(--muted); margin: 8px 0 22px; }
.choices { display: grid; gap: 12px; margin: 0 0 18px; }
.choices.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .choices.two { grid-template-columns: minmax(0, 1fr); } }
.choice { display: block; width: 100%; text-align: left; font: 600 1.05rem/1.35 var(--font-body); color: var(--ink); background: var(--surface); border: 2px solid var(--line); border-radius: 12px; padding: 16px 18px; cursor: pointer; }
.choice small { display: block; font-weight: 400; color: var(--muted); font-size: 0.95rem; margin-top: 2px; }
.choice:hover { border-color: var(--ink); }
.choice.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: #fff3e6; }
label.f { display: block; font-weight: 700; margin: 16px 0 6px; }
label.f span { font-weight: 400; color: var(--muted); }
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=date], input[type=password], textarea, select { width: 100%; font: inherit; color: var(--ink); background: var(--surface); border: 2px solid var(--line); border-radius: 10px; padding: 12px 14px; }
textarea { min-height: 6.5rem; resize: vertical; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.row3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0 14px; }
@media (max-width: 640px) { .row2, .row3 { grid-template-columns: minmax(0, 1fr); } }
.check { display: flex; gap: 12px; align-items: flex-start; margin: 16px 0; padding: 14px; background: var(--surface); border: 2px solid var(--line); border-radius: 12px; }
.check input { flex: none; width: 22px; height: 22px; margin-top: 2px; accent-color: var(--accent); }
.actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 24px 0 0; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--muted); text-decoration: underline; cursor: pointer; }
.err { color: var(--bad); font-weight: 700; min-height: 1.5em; margin: 12px 0 0; }
.sum { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px; margin: 0 0 18px; }
.sum table { width: 100%; border-collapse: collapse; }
.sum td { padding: 8px 0; border-bottom: 1px solid var(--line); }
.sum td:last-child { text-align: right; font-weight: 700; white-space: nowrap; }
.sum tr:last-child td { border-bottom: 0; font-size: 1.2rem; font-weight: 800; }
.sum.two tr:last-child td { font-size: inherit; font-weight: inherit; }
.sum.two td:last-child { font-weight: 800; }
.giftbox { margin: 14px 0; }
.giftbox .in { display: flex; gap: 8px; margin-top: 8px; }
.giftbox .in input { flex: 1; min-width: 0; }
[hidden] { display: none !important; }

/* the order page */
.status { background: var(--ink); color: #fff; border-radius: 16px; padding: 24px; margin: 0 0 22px; border-left: 10px solid var(--gold); }
.status .lab { font: 700 0.75rem/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin: 0 0 10px; }
.status h2 { color: #fff; font-size: 1.5rem; margin: 0; }
.status p { margin: 10px 0 0; color: #dfe4f2; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px; margin: 0 0 22px; }
.panel h2 { margin: 0 0 10px; font-size: 1.25rem; }
.drop { border: 2px dashed #b9ae93; border-radius: 12px; padding: 26px 18px; text-align: center; background: var(--paper); }
.drop.over { border-color: var(--accent); background: #fff3e6; }
.files { list-style: none; padding: 0 !important; margin: 14px 0 0 !important; }
.files li { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); margin: 0; overflow-wrap: anywhere; }
.files small { color: var(--muted); white-space: nowrap; }
.prog { height: 10px; background: var(--line); border-radius: 99px; overflow: hidden; margin: 12px 0 6px; }
.prog i { display: block; height: 100%; width: 0; background: var(--ok); }
pre.sheet { white-space: pre-wrap; overflow-wrap: anywhere; font: 0.95rem/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin: 0 0 14px; max-height: 26rem; overflow: auto; }
.msg { border-left: 4px solid var(--gold); padding: 6px 0 6px 14px; margin: 0 0 12px; white-space: pre-wrap; }
.msg small { display: block; color: var(--muted); }
table.list { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
table.list th, table.list td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.list tr.pick { cursor: pointer; }
table.list tr.pick:hover { background: var(--soft); }
.pill { display: inline-block; font: 700 0.75rem/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 8px; border-radius: 99px; background: var(--soft); white-space: nowrap; }
.pill.ready { background: #fdecee; color: var(--bad); }
.pill.filed, .pill.registered { background: #e3f4ea; color: var(--ok); }
.tablewrap { overflow-x: auto; }

/* footer: always left, on every page */
footer { text-align: left; color: var(--muted); font-size: 0.92rem; }
footer > .wrap { position: relative; display: grid; gap: 8px; justify-items: start; border-top: 1px solid var(--line); padding-top: 34px; padding-bottom: 34px; margin-top: 40px; }
footer .tag { text-align: left; font: 700 0.78rem/1.4 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; }
footer .tag a { color: var(--muted); text-decoration: underline; text-underline-offset: 4px; }
.giftpop { display: inline-flex; align-items: center; gap: 8px; line-height: 1; }
.giftpop span { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
footer .giftpop { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); margin: 0; padding: 0; color: inherit; font-family: inherit; font-size: 15px; font-weight: 600; white-space: nowrap; text-decoration: none; }
footer .giftpop:hover span { opacity: 0.75; }
@media (max-width: 640px) { footer .giftpop { position: static; transform: none; margin-top: 12px; justify-self: start; } }

/* the filing packet */
.answers { list-style: none; padding: 0 !important; margin: 6px 0 0 !important; }
.answers li { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); margin: 0; }
.answers .ans { min-width: 0; }
.answers .q { display: block; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.answers .v { display: block; font-size: 1.08rem; font-weight: 600; white-space: pre-wrap; overflow-wrap: anywhere; }
.answers small { display: block; color: var(--muted); margin-top: 2px; }
.answers .btn { flex: none; }
.status p + p { margin-top: 6px; }

/* the hero picture */
.hero-art { display: flex; justify-content: center; }
.hero-art img { display: block; width: 100%; max-width: 560px; height: auto; border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.45); }
@media (max-width: 860px) { .hero-art img { max-width: 260px; } }
.example { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 32px; align-items: center; margin: 36px 0 0; }
.example .proof { box-shadow: 0 14px 34px rgba(16, 25, 53, 0.16); }
.example > p { color: var(--muted); font-size: 1.15rem; max-width: 30rem; margin: 0; }
@media (max-width: 760px) { .example { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 380px) { .brand { font-size: 0.98rem; gap: 8px; } .brand img { width: 32px; height: 32px; } }


/* ---- OutdoorROI: tools, meters and diagrams ---- */
.hero .btnrow { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.btn.ghost.light { color: #fff; border-color: rgba(255,255,255,.65); }
.btn.ghost.light:hover { border-color: var(--gold); color: var(--gold); }
.glowband { background: linear-gradient(180deg, #0b1120 0%, #121b38 100%); color: #fff; padding: 0 0 64px; }
.minicalc { background: #fff; color: var(--ink); border-radius: 18px; padding: 24px; margin-top: -34px; position: relative; z-index: 2; box-shadow: 0 24px 60px rgba(0,0,0,.35); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: 28px; align-items: center; border-top: 8px solid var(--gold); }
.minicalc h2 { font-size: 1.5rem; margin: 0 0 4px; } .minicalc .sub2 { color: var(--muted); margin: 0 0 14px; }
.minicalc label { font-weight: 700; display: block; margin: 12px 0 4px; font-size: .95rem; }
.minicalc .money { display: flex; align-items: center; gap: 8px; } .minicalc .money span { font-weight: 800; }
@media (max-width: 860px) { .minicalc { grid-template-columns: minmax(0,1fr); padding: 20px; } }
.meter { margin: 6px 0 14px; }
.meter .track { position: relative; height: 18px; border-radius: 99px; background: linear-gradient(90deg, #b42318 0 25%, #d97706 25% 50%, #65a30d 50% 75%, #0a7a50 75% 100%); }
.meter .pin { position: absolute; top: -7px; width: 4px; height: 32px; background: var(--ink); border-radius: 3px; transform: translateX(-2px); transition: left .35s ease; box-shadow: 0 0 0 3px #fff; }
.meter .ends { display: flex; justify-content: space-between; font-size: .78rem; font-weight: 700; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; margin-top: 8px; }
.verdict { border-radius: 14px; padding: 16px 18px; border-left: 10px solid var(--muted); background: #f4f1e8; margin: 0 0 14px; }
.verdict h3 { font-size: 1.5rem; margin: 0 0 4px; }
.verdict p { margin: 0; color: var(--ink-2); }
.verdict.good { border-color: var(--ok); background: #e5f5ee; } .verdict.ok { border-color: #65a30d; background: #eef6df; } .verdict.warn { border-color: #d97706; background: #fff0d4; } .verdict.bad { border-color: var(--bad); background: #fdecee; } .verdict.none { border-color: #94a3b8; background: #f1f4f9; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin: 0 0 14px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.stat b { display: block; font: 800 1.35rem/1.15 var(--font-display); letter-spacing: -.01em; } .stat span { color: var(--muted); font-size: .88rem; }
@media (max-width: 640px) { .stats { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.tool { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: clamp(18px, 3vw, 30px); margin: 0 0 30px; scroll-margin-top: 20px; }
.tool > h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0 0 4px; } .tool > .sub2 { color: var(--muted); margin: 0 0 20px; max-width: 46rem; }
.tool .cols { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); gap: 30px; align-items: start; }
@media (max-width: 900px) { .tool .cols { grid-template-columns: minmax(0,1fr); } }
.tool .row2, .tool .row3 { gap: 0 14px; }
.hint { color: var(--muted); font-size: .9rem; margin: 4px 0 0; }
.adv { margin: 14px 0 0; border-top: 1px dashed var(--line); padding-top: 10px; } .adv summary { cursor: pointer; font-weight: 700; color: var(--accent); }
.fig { margin: 18px 0 0; } .fig svg { width: 100%; height: auto; display: block; } .fig figcaption { color: var(--muted); font-size: .92rem; margin-top: 6px; }
.whatif { width: 100%; border-collapse: collapse; font-size: .95rem; margin: 6px 0 0; } .whatif th, .whatif td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); } .whatif td:last-child { font-weight: 700; }
.chip { display: inline-block; font: 700 .75rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; padding: 5px 9px; border-radius: 99px; background: var(--soft); }
.chip.good { background: #cdeedd; color: #075c3d; } .chip.ok { background: #e1efc9; color: #3d5c0b; } .chip.warn { background: #ffe2b0; color: #7a4204; } .chip.bad { background: #fbd5d9; color: #8a1a12; }
.board-ta { width: 100%; font: 800 1.7rem/1.15 var(--font-display); letter-spacing: -.01em; text-transform: uppercase; background: #101935; color: #ffc233; border: 4px solid #6b7390; border-radius: 12px; padding: 16px; min-height: 8.5rem; resize: vertical; }
.board-ta::placeholder { color: #8b93a8; }
.tcard { display: block; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s, border-color .15s; }
.tcard:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(11,17,32,.14); border-color: var(--gold); }
.tcard .ic { display: block; width: 52px; height: 52px; border-radius: 14px; background: var(--ink); margin: 0 0 14px; padding: 10px; } .tcard .ic svg { width: 100%; height: 100%; display: block; }
.tcard h3 { font-size: 1.2rem; margin: 0 0 6px; color: var(--ink); } .tcard p { color: var(--muted); margin: 0 0 10px; } .tcard .go { font-weight: 700; color: var(--accent); }
.tcard .tag { float: right; }
.diagram { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: clamp(14px, 3vw, 28px); }
.diagram svg { width: 100%; height: auto; display: block; }
.dgrid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 28px; align-items: center; }
@media (max-width: 900px) { .dgrid { grid-template-columns: minmax(0,1fr); } }
input[type=range] { width: 100%; accent-color: var(--accent); padding: 0; border: 0; background: none; }
.loopnum { display: inline-flex; width: 34px; height: 34px; border-radius: 50%; background: var(--gold); color: var(--ink); font: 800 1rem/34px var(--font-display); text-align: center; justify-content: center; margin-right: 8px; }
.ticks { display: flex; justify-content: space-between; color: var(--muted); font-size: .82rem; }
.reportlist { list-style: none; padding: 0 !important; display: grid; gap: 10px; }
.reportlist li { padding-left: 34px; position: relative; margin: 0; } .reportlist li::before { content: ""; position: absolute; left: 0; top: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.kdiv { height: 1px; background: var(--line); margin: 20px 0; }
@media (prefers-reduced-motion: reduce) { .meter .pin, .tcard { transition: none; } }