/* Groundwork — the one stylesheet.
 *
 * Zero dependencies, no build step, no CSS library. Every page emitted by
 * scripts/lib/layout.mjs links this file and nothing else.
 *
 * Base is privacy.html's :root — the real theme (teal/cream, --sand, Playfair Display +
 * DM Sans). The component library below (.hero .card .btn .stat .compare .locknote .badge
 * .pay .signup .wrap) is the one the 148 generated permit pages already use, ported onto
 * those tokens. Tokens were already compatible; --paper/--line take privacy's values.
 *
 * The permit pages still carry their own inline copy of this. That is deliberate for now —
 * they are regenerated by scripts/refresh-permit-pages.mjs and cutting them over is a
 * separate change. Do NOT add a 149th inline copy: new pages go through layout().
 */

:root{
  --ink:#071c26;--deep:#0e3a4a;--deep-2:#0a2a37;--sea:#1f8a8a;--sand:#e3d3ae;
  --paper:#f5f2e9;--body:#22414d;--secondary:#51707c;--muted:#5f7a85;--line:#ddd8c8;
  --card:#fffdf7;--warm:#b45309;--ok:#0f5132;
  --serif:"Playfair Display",Georgia,serif;--sans:"DM Sans",system-ui,sans-serif;
}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--body);font-family:var(--sans);font-size:16.5px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--sea);text-decoration:underline;text-underline-offset:2px}
img{max-width:100%;height:auto}
hr{border:0;border-top:1px solid var(--line);margin:40px 0}

/* ---------- shell ---------- */
.wrap{max-width:900px;margin:0 auto;padding:0 28px}
.wrap.narrow{max-width:760px}
.topbar{background:var(--ink);color:#a9c4c6;font-size:13px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;height:40px}
.topbar a{color:#fff;text-decoration:none;font-weight:600}
.site-header{background:var(--paper);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:76px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand .badge{width:40px;height:40px;border-radius:50%;background:var(--deep);display:grid;place-items:center;border:2px solid var(--sand);margin:0;padding:0;letter-spacing:0;text-transform:none;font-size:inherit}
.brand .badge span{font-family:var(--serif);font-weight:700;color:#fff;font-size:19px;line-height:1}
.brand .name{font-family:var(--serif);font-weight:700;font-size:21px;color:var(--deep)}
.brand .name em{font-style:italic;font-weight:500;color:var(--sea)}
.site-nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.site-nav a{font-size:14.5px;font-weight:600;color:var(--deep);text-decoration:none}
.site-nav a:hover{color:var(--sea)}
.site-nav a[aria-current="page"]{color:var(--sea);text-decoration:underline;text-underline-offset:5px}
.back{font-size:14.5px;font-weight:600;color:var(--deep);text-decoration:none}
.back:hover{color:var(--sea)}
main{padding:44px 0 88px}
footer{background:var(--ink);color:#7d9a9c;font-size:13.5px;padding:28px 0}
footer .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
footer a{color:#a9c2c3;text-decoration:underline;text-underline-offset:3px}
footer b{color:var(--sand)}

/* ---------- type ---------- */
h1{font-family:var(--serif);font-size:clamp(32px,5vw,48px);color:var(--deep);letter-spacing:-.6px;line-height:1.12;margin:0 0 12px}
h1 em{font-style:italic;color:var(--sea);font-weight:500}
h2{font-family:var(--serif);font-size:26px;color:var(--deep);margin:44px 0 12px;letter-spacing:-.2px;line-height:1.25}
h3{font-family:var(--sans);font-size:17px;color:var(--deep);margin:0 0 8px}
p,li{color:var(--body)}
ul{padding-left:22px}
ul.clean{padding-left:20px}
ul.clean li{margin:6px 0}
.k{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--sea)}
.lede{font-size:19px;line-height:1.6;color:var(--secondary)}
.note{font-size:13.5px;color:var(--muted)}
.fine{font-size:12.5px;color:var(--muted);margin-top:10px}
.updated{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:36px}
.person{color:var(--warm);font-weight:700}
.foot{font-size:12.5px;color:var(--muted);margin-top:28px;line-height:1.55}

/* ---------- hero ---------- */
.hero{background:linear-gradient(160deg,#14495c,var(--deep) 55%,var(--deep-2));color:#fff;border-radius:16px;padding:34px 30px;margin:0 0 22px}
.hero .k{color:#8fd6d0}
.hero h1{color:#fff;margin:10px 0 12px}
.hero h1 em{color:var(--sand)}
.hero p{margin:0 0 6px;color:#cfe1e1;font-size:18px;line-height:1.6}
.hero p b{color:#fff}
.hero .btn{margin-top:18px}
.hero-split{display:grid;grid-template-columns:1fr;gap:22px}

/* ---------- cards, callouts ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin:16px 0}
.card h2{margin:0 0 10px;font-size:21px}
.card h3{margin:0 0 8px}
.callout{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--sea);border-radius:12px;padding:20px 22px;margin:18px 0}
.callout h3{font-family:var(--sans);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--sea);margin:0 0 10px}
.locknote{background:#efece2;border-left:4px solid var(--sea);padding:12px 14px;margin:12px 0;font-size:14.5px;color:var(--secondary);border-radius:0 8px 8px 0}
.locknote b{color:var(--deep)}
.meta{font-size:14.5px;color:var(--muted)}
.meta b{color:var(--deep)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:16px 0}
@media(max-width:700px){.grid2,.grid3{grid-template-columns:1fr}}

/* ---------- buttons ---------- */
button,.btn{display:inline-block;margin-top:14px;background:var(--sea);color:#fff!important;text-decoration:none;border:0;border-radius:10px;padding:13px 20px;font-family:var(--sans);font-weight:700;font-size:15.5px;cursor:pointer;line-height:1.2}
.btn:hover{background:#1a7676}
.btn.ghost{background:transparent;color:var(--deep)!important;border:2px solid var(--deep)}
.btn.ghost:hover{background:rgba(14,58,74,.06)}
.hero .btn.ghost{color:#fff!important;border-color:rgba(255,255,255,.6)}
.btn.small{margin-top:0;padding:9px 13px;font-size:13.5px}
.btn.block{display:block;text-align:center}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:18px 0}
.stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.stat b{display:block;font-family:var(--serif);font-size:30px;line-height:1.1;color:var(--deep)}
.stat span{display:block;font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.4}

/* ---------- badges ---------- */
.badge{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:#e7f0f0;color:var(--deep);padding:4px 9px;border-radius:999px;margin-bottom:8px;white-space:nowrap}
.badge.paid{background:var(--deep);color:#fff}
.badge.a{background:var(--deep);color:#fff}
.badge.b{background:var(--sand);color:#4a3a17}
.badge.off{background:#e8e4d7;color:var(--muted)}

/* ---------- compare ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0}
@media(max-width:640px){.compare{grid-template-columns:1fr}}
.compare .box{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.compare .box.us{border-color:var(--sea);box-shadow:0 0 0 1px var(--sea)}
.compare h3{margin:0 0 10px;font-size:17px;color:var(--deep)}
.compare .box.us h3{color:var(--sea)}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;margin:16px 0;font-size:15px;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
th,td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;background:#efece2}
tr:last-child td{border-bottom:0}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- pay / signup ---------- */
.pay,.signup{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 24px;margin:22px 0}
.pay-k,.signup-k{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--sea);font-weight:700;margin-bottom:10px}
.pay .price{font-family:var(--serif);font-size:34px;color:var(--deep);line-height:1.1;margin:0 0 4px}
label{display:block;font-size:13px;font-weight:700;margin:14px 0 6px;color:var(--deep)}
input,select{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;font-size:16px;font-family:var(--sans);background:#fff;color:var(--body)}
.msg{font-size:14px;color:#2b8a6f;font-weight:700;margin-top:10px}
.owner{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:start}
@media(max-width:600px){.owner{grid-template-columns:1fr}}
.owner img{border-radius:12px;border:1px solid var(--line)}

/* ---------- small screens ---------- */
@media(max-width:560px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .topbar{font-size:12px}
  .topbar .wrap{height:auto;padding-top:7px;padding-bottom:7px;gap:10px}
  .site-header .wrap{min-height:0;padding-top:14px;padding-bottom:14px;gap:10px}
  .site-nav{gap:14px}
  .site-nav a{font-size:14px}
  .hero{padding:26px 20px;border-radius:14px}
  .hero p{font-size:16.5px}
  .card,.callout,.pay,.signup{padding:16px 18px}
  main{padding:28px 0 64px}
  footer .wrap{flex-direction:column;gap:8px}
}

/* ---------- misc ---------- */
.crumb{font-size:13.5px;color:var(--muted);margin-bottom:14px}
.crumb a{color:var(--muted)}
.faq{margin:16px 0}
.faq h3{margin:22px 0 6px;font-size:17px}
.tick{color:var(--sea);font-weight:800}
.cross{color:#a4595c;font-weight:800}