/* ROMULUS Municipal: public site. No web fonts, no third-party requests, no JS required.
   Colour pairs are chosen for WCAG 2.1 AA (4.5:1 body text, 3:1 large text and UI). */
:root {
  --bg: #ffffff;
  --surface: #f4f6f9;
  --ink: #14202e;
  --muted: #4a5868;
  --line: #d4dae2;
  --link: #0b5cad;
  --navy: #0f1b2b;
  --navy-ink: #f2f5f8;
  --gold: #e0b84c;          /* only on --navy */
  --gold-ink: #7a5a12;      /* gold accent on light backgrounds */
  --focus: #b8860b;
  --btn: #0f1b2b;
  --btn-ink: #ffffff;
  --proven-bg: #e3f2e7; --proven-ink: #1b5e30;
  --build-bg: #fdf1d3;  --build-ink: #6e4a00;
  --plan-bg: #e9edf2;   --plan-ink: #36424f;
  --warn-bg: #fff4d6;   --warn-ink: #5c4200; --warn-line: #e0b84c;
  --radius: 10px;
  --max: 72rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d141d; --surface: #141e2a; --ink: #e3e9f0; --muted: #a9b6c4; --line: #2a3646;
    --link: #8cc4ff; --gold-ink: #e8c66a; --focus: #e8c66a; --btn: #e0b84c; --btn-ink: #0f1b2b;
    --proven-bg: #173524; --proven-ink: #9fe0b2;
    --build-bg: #3a2c08;  --build-ink: #f3d27a;
    --plan-bg: #24303d;   --plan-ink: #c5d0dc;
    --warn-bg: #3a2c08;   --warn-ink: #f3d27a; --warn-line: #8a6a1c;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-size: 1.0625rem; line-height: 1.6; }
img { max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 16px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--btn); color: var(--btn-ink); padding: 8px 14px; z-index: 10; }
.skip:focus { left: 8px; top: 8px; }

/* Header */
.site-head { background: var(--navy); color: var(--navy-ink); }
.site-head .wrap { display: flex; align-items: center; gap: 16px; min-height: 64px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--navy-ink); text-decoration: none; font-weight: 700; letter-spacing: 0.06em; }
.brand img { width: 30px; height: auto; }
.brand small { display: block; font-weight: 500; letter-spacing: 0.02em; color: #c9d3de; font-size: 0.78rem; }
.nav { margin-left: auto; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.nav a { color: var(--navy-ink); text-decoration: none; padding: 8px 10px; border-radius: 6px; display: inline-block; }
.nav a:hover, .nav a[aria-current="page"] { background: rgba(255,255,255,0.1); }
.nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--gold); }
.nav a.signin { border: 1px solid var(--gold); color: var(--gold); margin-left: 6px; }
.nav a:focus-visible { outline-color: var(--gold); }
.menu { display: none; margin-left: auto; }
.menu > summary { list-style: none; cursor: pointer; padding: 8px 12px; border: 1px solid #5d6b7c; border-radius: 6px; color: var(--navy-ink); }
.menu > summary::-webkit-details-marker { display: none; }
@media (max-width: 860px) {
  .nav { display: none; }
  .menu { display: block; }
  .menu[open] { width: 100%; }
  .menu[open] .nav { display: block; margin: 8px 0 12px; }
  .menu[open] .nav ul { flex-direction: column; align-items: stretch; }
  .menu[open] .nav a { display: block; }
  .menu[open] .nav a.signin { margin-left: 0; text-align: center; }
}

.head-actions { margin-left: auto; }
.site-head .head-actions .btn.secondary { background: transparent; color: var(--navy-ink); border-color: #7d8b9b; padding: 8px 14px; }

/* Draft banner */
.draft { background: var(--warn-bg); color: var(--warn-ink); border-bottom: 2px solid var(--warn-line); font-size: 0.92rem; }
.draft .wrap { padding-top: 8px; padding-bottom: 8px; }

/* Sections */
main { display: block; }
.hero { background: var(--navy); color: var(--navy-ink); padding: 48px 0 56px; }
.hero h1 { font-size: clamp(1.9rem, 4.5vw, 2.9rem); line-height: 1.15; margin: 0 0 16px; max-width: 22ch; }
.hero p.lead { font-size: 1.2rem; max-width: 60ch; color: #d6dee7; margin: 0 0 24px; }
.hero .kicker { color: var(--gold); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.85rem; font-weight: 700; margin: 0 0 10px; }
.hero a:not(.btn) { color: #ffffff; }
.page-head { padding: 40px 0 8px; }
.page-head h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.2; margin: 0 0 10px; }
.page-head p { color: var(--muted); max-width: 65ch; margin: 0; font-size: 1.12rem; }
section { padding: 36px 0; }
section.alt { background: var(--surface); }
h2 { font-size: 1.55rem; line-height: 1.25; margin: 0 0 14px; }
h3 { font-size: 1.15rem; line-height: 1.3; margin: 0 0 8px; }
p { margin: 0 0 14px; max-width: 70ch; }
.muted { color: var(--muted); }
.eyebrow { color: var(--gold-ink); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.82rem; font-weight: 700; margin-bottom: 6px; }
ul.ticks { padding-left: 1.2rem; }
ul.ticks li { margin-bottom: 6px; }

/* Buttons */
.btn { display: inline-block; background: var(--btn); color: var(--btn-ink); text-decoration: none; font-weight: 600; padding: 12px 20px; border-radius: 8px; border: 2px solid var(--btn); font-size: 1rem; cursor: pointer; font-family: inherit; }
.btn.secondary { background: transparent; color: var(--ink); border-color: var(--line); }
.hero .btn { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.hero .btn.secondary { background: transparent; color: var(--navy-ink); border-color: #7d8b9b; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Cards & grids */
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.grid.two { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
section.alt .card { background: var(--bg); }
.card h3 { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
.card p { font-size: 0.98rem; }
.card .freq { font-size: 0.9rem; color: var(--muted); margin: 0; }
.steps { counter-reset: step; list-style: none; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.steps li { counter-increment: step; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.steps li::before { content: counter(step); display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: var(--gold); font-weight: 700; margin-bottom: 10px; }

/* Badges */
.badge { display: inline-block; font-size: 0.78rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; letter-spacing: 0.02em; }
.badge.proven { background: var(--proven-bg); color: var(--proven-ink); }
.badge.in_build { background: var(--build-bg); color: var(--build-ink); }
.badge.planned { background: var(--plan-bg); color: var(--plan-ink); }
.legend { display: flex; gap: 18px; flex-wrap: wrap; padding: 0; list-style: none; font-size: 0.95rem; }
.legend li { display: flex; gap: 8px; align-items: baseline; max-width: 34ch; }

/* Module detail */
.module { border-top: 1px solid var(--line); padding: 22px 0; scroll-margin-top: 12px; }
.module:first-of-type { border-top: 0; }
.module h3 { font-size: 1.25rem; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.module dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 10px 0 0; font-size: 0.98rem; }
.module dt { font-weight: 600; color: var(--muted); }
.module dd { margin: 0; }
.module dd ul { margin: 0; padding-left: 1.1rem; }
@media (max-width: 560px) { .module dl { grid-template-columns: 1fr; } .module dt { margin-top: 6px; } }

/* Tables */
.table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; font-size: 0.97rem; }
caption { text-align: left; padding: 10px 12px; font-weight: 600; }
th, td { text-align: left; padding: 10px 12px; border-top: 1px solid var(--line); vertical-align: top; }
thead th { background: var(--surface); border-top: 0; }

/* Pricing */
.tiers { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
.tier { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; background: var(--bg); }
.tier.highlight { border: 2px solid var(--gold-ink); }
.tier .for { color: var(--muted); margin-bottom: 12px; }
.price { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 16px; }
.price div { background: var(--surface); border-radius: 8px; padding: 10px; }
.price .amt { font-size: 1.05rem; font-weight: 700; display: block; }
.price .per { font-size: 0.85rem; color: var(--muted); }
.placeholder { background: var(--warn-bg); color: var(--warn-ink); border: 1px dashed var(--warn-line); padding: 0 6px; border-radius: 4px; font-weight: 700; }
.notice { background: var(--warn-bg); color: var(--warn-ink); border: 1px solid var(--warn-line); border-radius: var(--radius); padding: 12px 16px; }

/* Forms */
form.stack { display: grid; gap: 16px; max-width: 36rem; }
.field label { display: block; font-weight: 600; margin-bottom: 4px; }
.field .hint { display: block; color: var(--muted); font-size: 0.9rem; margin-bottom: 6px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=time], input[type=date], select, textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid #7a8796; border-radius: 6px; padding: 10px 12px;
}
textarea { min-height: 8rem; resize: vertical; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; margin: 0; }
legend { font-weight: 600; padding: 0 6px; }
.check { display: flex; gap: 10px; align-items: flex-start; }
.check input { margin-top: 0.35rem; width: 1.1rem; height: 1.1rem; }
.req { color: var(--muted); font-weight: 400; }
.small { font-size: 0.92rem; }

/* Honeypot field for bots: off-screen, out of the tab order, hidden from assistive tech */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Legal text */
.legal { max-width: 75ch; }
.legal h2 { font-size: 1.2rem; margin-top: 28px; }
.legal .meta { color: var(--muted); }
.mark { background: var(--warn-bg); color: var(--warn-ink); padding: 0 3px; border-radius: 3px; }

/* Footer */
.site-foot { background: var(--navy); color: #c9d3de; margin-top: 48px; padding: 32px 0; font-size: 0.95rem; }
.site-foot a { color: #ffffff; }
.site-foot .cols { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.site-foot h2 { font-size: 1rem; color: var(--gold); margin: 0 0 8px; }
.site-foot ul { list-style: none; padding: 0; margin: 0; }
.site-foot li { margin-bottom: 6px; }
.site-foot .fine { border-top: 1px solid #2a3a50; margin-top: 24px; padding-top: 16px; }