/* Permit Roundup design system
   Tokens first. Every page on the site uses these and only these.
   Motifs: the permit stamp, the map pin, the skyline line.

   Brand world (v3, Nov 9, 2026): Mercury, from the awesome-design-md library
   (design-md/mercury/DESIGN.md). Picked because its structure is this product:
   a dark "night" frame (nav, hero, footer) around calm light content, one
   saturated action color carrying every action, cards separated by fill and
   hairlines rather than shadow stacks, and a pricing surface built from
   columns and a toggle. Adopted from Mercury: the token roles (night frame,
   canvas, surface, tint, one primary), the type ladder (52 display, 42 title,
   28 subtitle, 24 lead, 18 body-lg, 16 body, 14 small, 12 micro), the spacing
   ladder (8, 12, 16, 20, 24, 32, 40, section 80), card radius 12, card
   padding 32, and pill actions. NOT adopted: Mercury's hues and its light
   type weights. Deep pine takes the night role and burnt copper takes the
   primary action role; they are Permit Roundup's own identity anchors.
   Archivo keeps its 700 to 900 display weights because this audience reads
   authority, not lightness. One micro-rule borrowed from the Stripe file:
   tabular figures on every money and count numeral.
   Craft floor (Impeccable) and motion rules (Emil Kowalski) are baked into
   the tokens below: contrast is fixed here, not per component. */
:root{
  --pine-950:#0B1F18;        /* night frame: hero, footer, dark bands */
  --pine-800:#14332A;        /* dark surface, one step up from the frame */
  --pine-600:#1E4D3D;        /* dark mid */
  --paper:#FFFFFF;           /* canvas. White, never beige. */
  --paper-2:#EFF4F1;         /* surface tint: alt sections, visual wells */
  --paper-3:#E3ECE7;         /* deeper tint inside visuals */
  --ink:#131E19;             /* body text: 17.11:1 on canvas */
  --muted:#52615A;           /* secondary text, stepped from ink: 6.53:1 on canvas, 5.87:1 on tint */
  --line:#D9E2DC;            /* hairlines on light */
  --line-strong:#82938A;     /* input boundaries: 3.24:1 on canvas */
  --line-dark:#2A4A3E;       /* hairlines on the night frame */
  --line-dark-strong:#5F7D6F;/* button boundary on the night frame: 3.80:1 */
  --copper:#BC3F0B;          /* the one primary action color: 5.45:1 on canvas, white on it 5.45:1 */
  --copper-dark:#973105;     /* action hover and press */
  --brass:#E3A82B;           /* highlight on dark only: 8.09:1 on pine-950. Never text on light. */
  --radius:12px;             /* cards (Mercury md) */
  --radius-lg:16px;          /* large panels (Mercury lg) */
  --radius-sm:8px;           /* inputs, small visuals */
  /* Mercury type ladder, snapped to named steps */
  --fs-display:52px;
  --fs-title:42px;
  --fs-subtitle:28px;
  --fs-lead:24px;
  --fs-body-lg:18px;
  --fs-body:16px;
  --fs-sm:14px;
  --fs-xs:12px;
  /* Mercury spacing ladder */
  --sp-1:8px;
  --sp-2:12px;
  --sp-3:16px;
  --sp-4:20px;
  --sp-5:24px;
  --sp-6:32px;
  --sp-7:40px;
  --sp-section:80px;
  /* Emil Kowalski motion tokens: strong ease-out, UI under 300ms */
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --font-display:"Archivo","Inter",-apple-system,"Segoe UI",sans-serif;
  --font-brand:"Anton","Archivo",sans-serif;
  --font-logo:"Zilla Slab","Archivo",serif;
  --font-body:"Inter",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:"SFMono-Regular",ui-monospace,"Cascadia Mono",Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-color:var(--pine-600) var(--paper-2)}
@font-face{font-family:"Anton";src:url("fonts/anton-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Zilla Slab";src:url("fonts/zilla-slab-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
body{margin:0;font-family:var(--font-body);font-size:var(--fs-body-lg);line-height:1.62;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
/* Browser surfaces, themed from the palette (Impeccable craft floor) */
::selection{background:var(--pine-800);color:#fff}
:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--paper-2)}
::-webkit-scrollbar-thumb{background:var(--pine-600);border-radius:99px;border:3px solid var(--paper-2)}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--font-display);letter-spacing:-.01em;margin:0;text-wrap:balance}
h2{font-size:clamp(30px,3.8vw,var(--fs-title));line-height:1.15;font-weight:800}
h3{font-size:var(--fs-body-lg);font-weight:700}
p{margin:0}
a{color:var(--copper);transition:color 160ms var(--ease-out)}
/* No kicker or eyebrow labels above headings anywhere on this site.
   Headings carry their own weight (Impeccable, absolute ban). */
section{padding:var(--sp-section) 0}
.sec-head{max-width:700px;margin-bottom:var(--sp-7)}
.sec-head p{color:var(--muted);margin-top:var(--sp-3);font-size:var(--fs-body-lg);max-width:66ch}
.sec-head.wide{max-width:820px}

/* Nav */
header.site{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(6px)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:var(--sp-3);padding-bottom:var(--sp-3)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);font-family:var(--font-display);font-weight:900;font-size:22px;letter-spacing:-.02em}
.brand .mark{width:36px;height:36px;border-radius:9px;background-color:var(--pine-950);color:transparent;font-size:0;letter-spacing:0;flex:none;position:relative}
.brand .mark::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 20V10h5v10zM9.5 20V4.5H15V20zM17 20v-8h4.5v8z' fill='%23FFFFFF'/%3E%3Crect x='11.3' y='8.3' width='2' height='2' fill='%23E3A82B'/%3E%3C/svg%3E") center/25px no-repeat}
footer.site .brand .mark::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 20V10h5v10zM9.5 20V4.5H15V20zM17 20v-8h4.5v8z' fill='%230B1F18'/%3E%3Crect x='11.3' y='8.3' width='2' height='2' fill='%23BC3F0B'/%3E%3C/svg%3E")}
.brand em{font-style:normal;color:var(--copper)}
.nav nav{display:flex;align-items:center;gap:26px}
.nav nav a{color:var(--ink);text-decoration:none;font-size:var(--fs-body);font-weight:500;position:relative}
.nav nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--copper);transform:scaleX(0);transform-origin:left;transition:transform 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .nav nav a:hover{color:var(--copper)}
  .nav nav a:not(.btn):hover::after{transform:scaleX(1)}
}
.nav nav a.btn{color:#fff}
@media(max-width:820px){.nav nav a:not(.btn){display:none}}
@media(max-width:480px){.nav{gap:12px}.nav a.btn{white-space:nowrap;padding:10px 16px;font-size:14.5px}.brand{font-size:19px}}

/* Buttons: Mercury pill actions, one saturated color.
   Press feedback per Emil: scale 0.97 on :active, 160ms strong ease-out. */
.btn{display:inline-block;background:var(--copper);color:#fff;padding:12px 24px;border-radius:999px;text-decoration:none;font-family:var(--font-display);font-weight:700;font-size:var(--fs-body);border:1px solid var(--copper);cursor:pointer;transition:background 160ms var(--ease-out),border-color 160ms var(--ease-out),color 160ms var(--ease-out),transform 160ms var(--ease-out)}
.btn:hover{background:var(--copper-dark);border-color:var(--copper-dark)}
.btn:active{transform:scale(0.97)}
.btn.ghost{background:transparent;color:#fff;border-color:var(--line-dark-strong)}
.btn.ghost:hover{border-color:var(--brass);color:var(--brass);background:transparent}
.btn.light{background:#fff;color:var(--pine-950);border-color:#fff}
.btn.light:hover{background:var(--paper-2)}

/* Hero. v4 composition (the dealt moment for this page): an oversized
   headline block, a full-bleed illustration horizon, then the edition sheet
   pulled up over the art and offset from the left edge. Deliberate tension,
   not two polite columns. The display size steps past the Mercury ladder on
   purpose; the ladder still governs every other surface. */
.hero{background:var(--pine-950);background-image:linear-gradient(rgba(201,214,207,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(201,214,207,.05) 1px,transparent 1px);background-size:44px 44px;color:#fff;position:relative;overflow:hidden}
.hero .hl{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 30 3, 60 10, 118 5' fill='none' stroke='%23E3A82B' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 100% .13em no-repeat;padding-bottom:.07em}
.hero-seal{justify-self:end;align-self:center;width:172px;height:172px;transform:rotate(-8deg);color:var(--brass)}
.hero-seal svg{width:100%;height:100%;display:block}
@media(max-width:1280px){.hero-seal{width:134px;height:134px}}
@media(max-width:1080px){.hero-seal{display:none}.hero-lede{grid-template-columns:minmax(0,560px) auto}}
.hero-top{padding-top:84px;padding-bottom:44px;position:relative;z-index:1}
.hero h1{font-size:clamp(42px,6.4vw,80px);line-height:1.03;letter-spacing:-.02em;font-weight:900;max-width:960px}
.hero-lede{display:grid;grid-template-columns:minmax(0,520px) auto 1fr;gap:20px 56px;align-items:start;margin-top:var(--sp-6)}
@media(max-width:860px){.hero-lede{grid-template-columns:1fr}}
.hero .sub{font-size:var(--fs-body-lg);line-height:1.62;color:#C9D6CF;max-width:560px}
.hero-side{display:grid;gap:var(--sp-2);justify-items:start}
.hero-art img{display:block;width:100%;height:clamp(210px,30vw,360px);object-fit:cover;object-position:center 62%}
.hero-stage{position:relative;z-index:2;padding-bottom:var(--sp-section)}
.hero-stage .sheet{margin-top:-92px;max-width:730px;margin-left:clamp(0px,5vw,76px)}
@media(max-width:640px){.hero-stage .sheet{margin-top:-52px;margin-left:0}}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-note{margin-top:var(--sp-3);font-size:var(--fs-sm);color:#8FA89D}

/* The stamp motif */
.stamp{color:var(--copper);opacity:.9;transform:rotate(-11deg);flex:none}
.stamp.on-dark{color:var(--brass);opacity:.85}

/* The full edition sheet: the product, rendered at reading size */
.sheet{background:#fff;color:var(--ink);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 32px 70px rgba(0,0,0,.42)}
.sheet-mast{background:var(--pine-800);color:#fff;padding:var(--sp-4) var(--sp-5);display:flex;justify-content:space-between;align-items:center;gap:18px}
.sheet-mast .wm{font-family:var(--font-display);font-weight:900;font-size:19px;letter-spacing:-.01em}
.sheet-mast .wm em{font-style:normal;color:var(--brass)}
.sheet-mast .ed{font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:#B9CCC2;font-family:var(--font-display);font-weight:700;margin-top:3px}
.sheet-mast .stamp{width:74px;height:74px}
.sheet-sub{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:var(--sp-2) var(--sp-5);background:var(--paper-2);border-bottom:1px solid var(--line);font-size:var(--fs-sm);color:var(--muted)}
.sheet-sub b{color:var(--pine-800);font-family:var(--font-display)}
.sheet-rows{padding:6px 0}
.prow{display:grid;grid-template-columns:70px 1fr;gap:16px;padding:var(--sp-3) var(--sp-5);border-bottom:1px solid var(--line)}
.prow:last-child{border-bottom:0}
.prow .v{font-family:var(--font-display);font-weight:800;font-size:var(--fs-body-lg);color:var(--pine-800);line-height:1.2}
.prow .d{font-size:var(--fs-body);line-height:1.5}
.prow .meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:7px;font-size:var(--fs-sm);color:var(--muted)}
.prow .g{font-weight:600;color:var(--pine-800)}
.pin{width:13px;height:13px;color:var(--copper);flex:none;vertical-align:-2px}
.tag{display:inline-block;font-family:var(--font-display);font-size:var(--fs-xs);font-weight:700;letter-spacing:.07em;text-transform:uppercase;background:var(--paper-3);color:var(--pine-800);border-radius:999px;padding:3px 10px}
.tag.hot{background:#F7E3D8;color:var(--copper-dark)}
.sheet-board{border-top:1px solid var(--line);padding:var(--sp-3) var(--sp-5) var(--sp-4);background:#FBFCFB}
.sheet-board .bh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.sheet-board .bh b{font-family:var(--font-display);font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--pine-800)}
.sheet-board .bh a{font-size:var(--fs-sm);font-weight:600;text-decoration:none}
.board-row{display:flex;align-items:baseline;gap:12px;padding:6px 0;font-size:var(--fs-sm);border-bottom:1px dashed var(--line)}
.board-row:last-child{border-bottom:0}
.board-row .rk{font-family:var(--font-display);font-weight:900;color:var(--copper);width:18px}
.board-row .nm{font-weight:600}
.board-row .dt{margin-left:auto;color:var(--muted);font-size:var(--fs-sm);white-space:nowrap}
@media(max-width:560px){
  .board-row{flex-wrap:wrap;row-gap:2px}
  .board-row .dt{margin-left:30px}
  .sheet-mast{padding:var(--sp-4)}
  .prow,.sheet-sub,.sheet-board,.sheet-foot{padding-left:var(--sp-4);padding-right:var(--sp-4)}
  .prow{grid-template-columns:58px 1fr;gap:12px}
}
.sheet-foot{padding:var(--sp-3) var(--sp-5);background:var(--pine-950);color:#C9D6CF;font-size:var(--fs-sm);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sheet-foot b{color:var(--brass);font-weight:700}

/* Legacy compact edition card (kept for compatibility) */
.edition{background:#fff;color:var(--ink);border-radius:var(--radius);overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.edition-head{background:var(--paper-2);border-bottom:1px solid var(--line);padding:14px 20px;display:flex;justify-content:space-between;align-items:baseline}
.edition-head b{font-family:var(--font-display);font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.edition-head span{font-size:13px;color:var(--muted)}
.edition-row{padding:14px 20px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:64px 1fr;gap:14px}
.edition-row .v{font-family:var(--font-display);font-weight:800;font-size:17px;color:var(--pine-800)}
.edition-row .d{font-size:14.5px;line-height:1.45}
.edition-row .g{font-size:13.5px;color:var(--muted);margin-top:2px}
.edition-foot{padding:13px 20px;background:var(--pine-950);color:#C9D6CF;font-size:13.5px}
.edition-foot b{color:var(--brass);font-weight:700}

/* Tabular figures on every money and count numeral (Stripe file, adopted) */
.stat .n,.impact .n,.tier .amount,.prow .v,td.val,.rank-row .fig,.sheet-sub,.mini-t .mv{font-variant-numeric:tabular-nums}

/* Stat strip */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:64px;padding-top:var(--sp-7);border-top:1px solid var(--line-dark);position:relative;z-index:1}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat .n{font-family:var(--font-display);font-size:var(--fs-title);font-weight:900;line-height:1;color:#fff}
.stat .n span{color:var(--brass)}
.stat .l{font-size:var(--fs-sm);color:#8FA89D;margin-top:8px;line-height:1.45}

/* Impact wall */
.impact{background:var(--paper-2);border-bottom:1px solid var(--line);padding:64px 0}
.impact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
@media(max-width:760px){.impact-grid{grid-template-columns:1fr}}
.impact .n{font-family:var(--font-display);font-size:clamp(84px,11vw,132px);letter-spacing:-.02em;font-weight:900;color:var(--pine-950);line-height:.95}
.impact .l{color:var(--muted);margin-top:8px;font-size:var(--fs-body)}
.impact .src{grid-column:1/-1;font-size:var(--fs-sm);color:var(--muted);max-width:75ch}

/* Cards and steps */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-6)}
.step .num{font-family:var(--font-display);font-size:14px;font-weight:800;color:var(--copper);letter-spacing:.1em}
.step h3{margin:12px 0 8px}
.step p{color:var(--muted);font-size:16px}
.check{list-style:none;margin:0;padding:0}
.check li{padding:8px 0 8px 32px;position:relative;font-size:var(--fs-body);border-bottom:1px solid var(--line)}
.check li:last-child{border-bottom:0}
.check li::before{content:"";position:absolute;left:0;top:12px;width:18px;height:18px;border-radius:50%;background:var(--pine-800) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5 4.8 9 10 3.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/11px no-repeat}

/* Feature panels: what's inside an edition */
.panels{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
@media(max-width:960px){.panels{grid-template-columns:1fr}}
.panel{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:#fff;display:flex;flex-direction:column}
.panels>*,.trades>*,.timeline>*,.price-grid>*,.faq-grid>*,.cta-grid>*{min-width:0}
.panel .viz{background:var(--paper-2);border-bottom:1px solid var(--line);padding:var(--sp-5);min-height:238px;overflow:hidden}
.panel .body{padding:var(--sp-6)}
.panel .body h3{margin-bottom:8px}
.panel .body p{color:var(--muted);font-size:var(--fs-body)}
/* Mini project list visual */
.mini-t{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.mini-t td{padding:10px 12px;border-bottom:1px solid var(--line);font-size:var(--fs-sm);vertical-align:top;line-height:1.4}
.mini-t tr:last-child td{border-bottom:0}
.mini-t .mv{font-family:var(--font-display);font-weight:800;color:var(--pine-800);white-space:nowrap;font-size:var(--fs-sm)}
.mini-t .mg{color:var(--muted);font-size:var(--fs-xs)}
/* Ranked leaderboard visual */
.rank{display:grid;gap:9px}
.rank-row{display:grid;grid-template-columns:26px 1fr auto;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px}
.rank-row .rk{font-family:var(--font-display);font-weight:900;font-size:17px;color:var(--copper)}
.rank-row .nm{font-weight:600;font-size:14px;line-height:1.3}
.rank-row .bar{height:5px;border-radius:99px;background:var(--paper-3);margin-top:6px;overflow:hidden}
.rank-row .bar i{display:block;height:100%;background:var(--pine-600);border-radius:99px}
.rank-row .fig{font-family:var(--font-display);font-weight:800;font-size:var(--fs-sm);color:var(--pine-800);white-space:nowrap;text-align:right}
.rank-row .fig small{display:block;font-family:var(--font-body);font-weight:500;color:var(--muted);font-size:var(--fs-xs)}
/* CSV visual */
.csv{background:var(--pine-950);border-radius:var(--radius);padding:16px 18px;font-family:var(--font-mono);font-size:var(--fs-xs);line-height:1.75;color:#B9CCC2;overflow-x:auto;white-space:pre}
.csv .h{color:var(--brass)}
.csv .n{color:#fff}

/* Trade panels */
.trades{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5)}
@media(max-width:900px){.trades{grid-template-columns:1fr}}
.trade{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);display:flex;flex-direction:column}
.trade .thead{padding:var(--sp-6) var(--sp-6) var(--sp-5);color:#fff;position:relative}
.trade.dump .thead{background:var(--pine-800)}
.trade.clean .thead{background:var(--pine-600)}
.trade .thead .stamp{position:absolute;top:20px;right:22px;width:62px;height:62px}
.trade .thead h3{font-size:var(--fs-subtitle);line-height:1.2;max-width:340px}
.trade .thead p{color:#C9D6CF;font-size:var(--fs-body);margin-top:8px;max-width:400px}
.trade .tbody{padding:var(--sp-6);background:#fff;display:flex;flex-direction:column;gap:var(--sp-5);flex:1}
.trade .lbl{font-family:var(--font-display);font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--pine-600);color:var(--pine-800);font-weight:600;font-size:var(--fs-sm);border-radius:999px;padding:5px 13px}
.tagrow{display:grid;gap:8px}
.tagline{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-body);background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px}
.tagline b{font-family:var(--font-display);color:var(--copper-dark);white-space:nowrap}
/* No thick colored side borders (Impeccable refuse list): the why block is a
   tinted panel in the same treatment as the tag rows, not a side rule. */
.trade .why{font-size:var(--fs-body);color:var(--ink);background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-3) var(--sp-4)}
.trade .why b{font-family:var(--font-display)}

/* Seam: a filled skyline silhouette that steps a light section down into a
   dark one, so bands meet like a roofline instead of a stack of blocks. */
.seam{color:var(--pine-950);line-height:0;margin-bottom:-1px}
.seam svg{display:block;width:100%;height:52px}

/* The Monday timeline section is the page's mid-page night moment:
   pine-950 with a faint blueprint grid ruled over it. Text on it steps
   from the surface hue, never neutral gray (Impeccable craft floor). */
#how{background-color:var(--pine-950);background-image:linear-gradient(rgba(201,214,207,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(201,214,207,.055) 1px,transparent 1px);background-size:44px 44px;color:#fff}
#how .timeline::before{background:var(--line-dark)}
#how .tnode .dot{background:var(--pine-800);border-color:var(--line-dark-strong);color:#fff}
#how .tnode.final .dot{background:var(--copper);border-color:var(--copper);color:#fff}
#how .tnode .when{color:var(--brass)}
#how .tnode h3{color:#fff}
#how .tnode p{color:#A9BCB2}

/* Monday timeline */
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;margin-top:8px}
@media(max-width:900px){.timeline{grid-template-columns:1fr;gap:26px}}
.timeline::before{content:"";position:absolute;top:27px;left:4%;right:4%;height:2px;background:var(--line)}
@media(max-width:900px){.timeline::before{display:none}}
.tnode{padding:0 18px;position:relative;text-align:left}
.tnode:first-child{padding-left:0}
.tnode .dot{width:54px;height:54px;border-radius:50%;background:#fff;border:2px solid var(--pine-800);display:grid;place-items:center;font-family:var(--font-display);font-weight:900;font-size:16px;color:var(--pine-800);position:relative;z-index:1;margin-bottom:18px}
.tnode.final .dot{background:var(--copper);border-color:var(--copper);color:#fff;width:64px;height:64px;font-size:12.5px;letter-spacing:.02em;text-align:center;line-height:1.15;margin-top:-5px}
.tnode.final .dot.pill{width:fit-content;min-width:64px;height:44px;border-radius:999px;padding:0 16px;font-size:13.5px;white-space:nowrap;margin-top:0}
section[id],footer[id]{scroll-margin-top:92px}
.tnode .when{font-family:var(--font-display);font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--copper)}
.tnode h3{margin:10px 0 8px;font-size:var(--fs-body-lg)}
.tnode p{color:var(--muted);font-size:var(--fs-body)}

/* Tables */
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
table{width:100%;border-collapse:collapse;background:#fff}
.tblwrap table{min-width:640px}
th,td{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--line);text-align:left;font-size:var(--fs-body);vertical-align:top}
th{background:var(--paper-2);font-family:var(--font-display);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--pine-800)}
tr:last-child td{border-bottom:0}
td.val{font-family:var(--font-display);font-weight:800;color:var(--pine-800);white-space:nowrap}

/* Pricing */
.toggle{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px;gap:4px;margin-bottom:var(--sp-6)}
.toggle button{border:0;background:transparent;padding:9px 20px;border-radius:999px;font-family:var(--font-display);font-weight:700;font-size:var(--fs-body);color:var(--muted);cursor:pointer;transition:background 160ms var(--ease-out),color 160ms var(--ease-out),transform 160ms var(--ease-out)}
.toggle button:active{transform:scale(0.97)}
.toggle button[aria-pressed="true"]{background:var(--pine-950);color:#fff}
/* Brass is dark-surface only (2.12:1 on white fails the floor). The save note
   is copper-dark on the light pill (7.62:1) and brass once its pill is the
   pressed dark one (8.09:1). */
.toggle .save{color:var(--copper-dark);font-size:13px;margin-left:6px}
.toggle button[aria-pressed="true"] .save{color:var(--brass)}
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:840px;align-items:start}
@media(max-width:760px){.price-grid{grid-template-columns:1fr}}
.tier{border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-6);background:#fff;position:relative}
.tier.hot{border:2px solid var(--pine-950)}
.tier .tag{position:absolute;top:-13px;right:22px;background:var(--copper);color:#fff;font-family:var(--font-display);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.tier h3{font-size:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
.tier .amount{font-family:var(--font-display);font-size:60px;font-weight:900;line-height:1.05;margin:12px 0 4px}
.tier .per{color:var(--muted);font-size:var(--fs-body);margin-bottom:18px}
.tier .check li{font-size:var(--fs-body)}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 48px}
@media(max-width:760px){.faq-grid{grid-template-columns:1fr}}
.faq-grid div{padding:var(--sp-4) 0;border-bottom:1px solid var(--line)}
.faq-grid b{font-family:var(--font-display);display:block;margin-bottom:6px;font-size:var(--fs-body)}
.faq-grid p{color:var(--muted);font-size:16px}

/* CTA + form */
.cta-band{background:var(--pine-950);color:#fff}
.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media(max-width:900px){.cta-grid{grid-template-columns:1fr}}
.cta-band h2{color:#fff}
.cta-band .lead{color:#C9D6CF;margin-top:14px;font-size:18px}
form{background:#fff;color:var(--ink);border-radius:var(--radius);padding:var(--sp-6)}
form label{display:block;font-weight:600;margin:14px 0 5px;font-size:14px}
form label:first-child{margin-top:0}
form input,form select{width:100%;padding:11px 12px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);font-size:var(--fs-body);font-family:var(--font-body);background:#fff;color:var(--ink);caret-color:var(--copper);transition:border-color 160ms var(--ease-out)}
form input:focus,form select:focus{outline:2px solid var(--copper);outline-offset:1px;border-color:var(--copper)}
::placeholder{color:var(--muted);opacity:1}
form .btn{margin-top:20px;width:100%;font-size:var(--fs-body)}
.form-note{font-size:var(--fs-sm);color:var(--muted);margin-top:12px;min-height:18px}

/* Skyline line-art motif */
.skyline{display:block;width:100%;height:54px;color:var(--line-dark);opacity:.55}
.skyline.light{color:var(--line);opacity:.8}

/* Footer */
footer.site{background:var(--pine-950);color:#8FA89D;padding:0 0 52px;font-size:var(--fs-sm)}
footer.site .skyline{margin-bottom:38px;color:var(--line-dark-strong);opacity:.85}
@media(min-width:1500px){.hero .wrap{max-width:1340px}}
footer.site .cols-f{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer.site a{color:#C9D6CF;text-decoration:none}
footer.site a:hover{color:var(--brass)}
footer.site .brand{color:#fff;margin-bottom:10px}

/* Subpage hero */
.page-hero{background:var(--pine-950);color:#fff;padding:64px 0 0;position:relative;overflow:hidden}
.page-hero h1{font-size:clamp(32px,4.6vw,var(--fs-title));line-height:1.15;font-weight:900;max-width:780px}
.page-hero p{color:#C9D6CF;margin-top:16px;max-width:780px;font-size:var(--fs-body-lg)}
.page-hero .skyline{margin-top:var(--sp-7);position:relative;z-index:1}
.page-hero .stamp{width:92px;height:92px;margin-bottom:18px}

/* Legal pages */
.legal{max-width:820px;padding-top:44px;padding-bottom:64px}
.legal h1{font-size:32px;font-weight:900;margin:22px 0 6px}
.legal h2{font-size:19px;margin-top:28px}
.legal p{margin-top:10px;font-size:16.5px}
.legal a{color:var(--copper)}
.draft{background:#FDF6E0;border:1px solid var(--brass);border-radius:10px;padding:13px 17px;font-weight:600;font-size:15.5px}

/* Reveal motion, reworked to the Emil Kowalski rules: the page's one motion
   system. Entering elements use the strong ease-out curve, transform and
   opacity only, 260ms (UI stays under 300ms), an 8px rise instead of a
   travel, and a 60ms stagger inside grid groups. The old system ran 600ms
   on the weak built-in ease. Reduced motion keeps the content fully
   visible with no movement at all. */
html.js .reveal{opacity:0;transform:translateY(8px);transition:opacity 260ms var(--ease-out),transform 260ms var(--ease-out)}
html.js .reveal.in{opacity:1;transform:none}
.panels .panel:nth-child(2),.trades .trade:nth-child(2),.timeline .tnode:nth-child(2){transition-delay:60ms}
.panels .panel:nth-child(3),.timeline .tnode:nth-child(3){transition-delay:120ms}
.timeline .tnode:nth-child(4){transition-delay:180ms}
@media (prefers-reduced-motion: reduce){
  html.js .reveal{opacity:1;transform:none;transition:none;transition-delay:0ms}
  html{scroll-behavior:auto}
}
.note{font-size:var(--fs-sm);color:var(--muted)}

/* Brand type system (Nov 9, 2026): Anton, a condensed poster grotesque,
   carries the brand voice anywhere the page speaks as the brand: headlines,
   the wordmark, the big numerals, the price, and the edition masthead.
   Headlines set in uppercase like a posted permit notice. Archivo stays
   the UI voice (buttons, labels, subheads), Inter the reading voice.
   Legal pages do not load Anton and fall back to Archivo by design. */
html[data-type="service"] h1,html[data-type="service"] h2{font-family:var(--font-brand);font-weight:400;text-transform:uppercase;letter-spacing:.006em}
html[data-type="service"] h2{line-height:1.08}
html[data-type="service"] .hero h1{font-size:clamp(50px,7.4vw,100px);line-height:1.0;letter-spacing:.004em;max-width:1020px}
html[data-type="service"] .brand{font-family:var(--font-logo);font-weight:700;text-transform:uppercase;letter-spacing:.015em;font-size:22px}
html[data-type="service"] .brand em{color:inherit}
html[data-type="service"] .stat .n,html[data-type="service"] .impact .n,html[data-type="service"] .tier .amount{font-family:var(--font-brand);font-weight:400}
html[data-type="service"] .sheet-mast .wm{font-family:var(--font-logo);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:20px}
html[data-type="service"] .sheet-mast .wm em{color:inherit}
html[data-type="service"] .btn{letter-spacing:.01em}

/* Hero load choreography: the headline rises, the lede follows, the seal
   stamps in like a filing stamp (fast drop, slight overshoot, settle at
   its -8deg rest), and the edition sheet rises last. Transform and opacity
   only, everything settles inside about a second, and the whole sequence
   exists only when JS is present; reduced motion gets the static page. */
@keyframes riseIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes stampIn{0%{opacity:0;transform:scale(2.3) rotate(-26deg)}55%{opacity:1}78%{transform:scale(.93) rotate(-6.2deg)}100%{opacity:1;transform:scale(1) rotate(-8deg)}}
@keyframes sheetIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
html.js .hero h1{animation:riseIn 560ms var(--ease-out) both}
html.js .hero-lede{animation:riseIn 560ms var(--ease-out) 120ms both}
html.js .hero-seal{animation:stampIn 520ms cubic-bezier(.16,1,.3,1) 300ms both}
html.js .hero-stage .sheet{animation:sheetIn 640ms var(--ease-out) 380ms both}
@media (prefers-reduced-motion: reduce){
  html.js .hero h1,html.js .hero-lede,html.js .hero-seal,html.js .hero-stage .sheet{animation:none}
}
@media(max-width:640px){html[data-type="service"] .hero h1{font-size:clamp(40px,12vw,50px)}}
@media(max-width:480px){html[data-type="service"] .brand{font-size:19.5px;letter-spacing:.01em}html[data-type="service"] .nav a.btn{padding:9px 13px}}

/* Hero depth layer: a surveyor's site plan ruled over the pine field,
   plus a soft brass glow behind the seal. Pure decoration, aria-hidden,
   behind the hero content. */
.hero-plan{position:absolute;top:0;right:0;width:min(800px,64vw);height:580px;color:#C9D6CF;opacity:.5;pointer-events:none;z-index:0}
.hero-plan svg{width:100%;height:100%;display:block}
.hero::after{content:"";position:absolute;top:-150px;right:-90px;width:580px;height:580px;border-radius:50%;background:radial-gradient(closest-side,rgba(227,168,43,.09),transparent);pointer-events:none;z-index:0}
@media(max-width:860px){.hero-plan{opacity:.3;width:100vw;height:500px}}

/* Rotating launch city in the headline. The word swaps with a short
   slide and fade; reduced motion and no-JS both keep Austin static. */
.h1-line{display:block}
.city-rot{color:var(--brass)}
.city-word{display:inline-block;transition:opacity 240ms var(--ease-out),transform 240ms var(--ease-out)}
.city-word.out{opacity:0;transform:translateY(-45%)}
.city-word.in-prep{transition:none;opacity:0;transform:translateY(45%)}
@media(max-width:640px){.h1-city{font-size:.92em}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(max-width:480px){html[data-type="service"] .brand .mark{width:32px;height:32px}}

/* Logo lockup, small screens: the slab wordmark is wide, so below 560px
   the header name stacks PERMIT over ROUNDUP, a masthead-style variant
   that keeps the CTA on the bar at phone widths. */
@media(max-width:560px){header.site .brand .wm-text{display:flex;flex-direction:column;line-height:1.04;gap:1px}}

/* Pricing grid (Nov 10, 2026): single flat price card. */
.price-grid.tiers{grid-template-columns:repeat(3,1fr)}
@media(max-width:1024px){.price-grid.tiers{grid-template-columns:1fr}}
.tier-cities{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--copper);margin:2px 0 10px;line-height:1.5}

.price-grid.single{grid-template-columns:1fr;max-width:600px;margin-left:auto;margin-right:auto}