*{margin:0;padding:0;box-sizing:border-box}
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url("/fonts/archivo.woff2") format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("/fonts/instrument.woff2") format("woff2")}
:root{
  --surface-page:#FAFAF7;--surface-card:#FFFFFF;--surface-sunken:#F1F1EC;
  --text-strong:#191A18;--text-default:#40423D;--text-muted:#73756D;--text-faint:#9C9E96;
  --accent:#3D49B8;--accent-hover:#4A56C6;--accent-pressed:#2E3894;--accent-contrast:#FFFFFF;--accent-wash:rgba(61,73,184,0.09);
  --border-subtle:#E3E2DA;--border-strong:#CDCCC2;--border-accent:rgba(61,73,184,0.32);
  --scrim:rgba(250,250,247,0.86);
  --font-sans:'Instrument Sans',system-ui,-apple-system,sans-serif;
  --font-display:'Archivo',system-ui,sans-serif;
  --ease-brand:cubic-bezier(0.16,1,0.3,1)
}
html{scroll-behavior:smooth;background:var(--surface-page)}
body{font-family:var(--font-sans);color:var(--text-default);background:var(--surface-page);min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:var(--accent-contrast)}
.pg-wrap{max-width:1100px;margin:0 auto;padding:0 24px}
@media(min-width:768px){.pg-wrap{padding:0 40px}}

/* top banner (matches the homepage topbanner; copy lives in chrome.mjs) */
.pg-banner{background:#17182A;color:#CBCEEC;font-size:0.82rem;line-height:1.45;text-align:center;padding:9px 16px}
.pg-banner a{color:#FFFFFF;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}

/* slim band: pages without a full hero still blend the header */
.pg-hero--band{padding:calc(74px + 26px) 0 34px}

/* header */
.pg-header{position:sticky;top:0;z-index:50;background:transparent;border-bottom:1px solid transparent;transition:background .35s ease,border-color .35s ease,box-shadow .35s ease,backdrop-filter .35s ease}
.pg-header.pg-scrolled{background:var(--scrim);backdrop-filter:blur(12px);border-bottom-color:var(--border-subtle);box-shadow:0 10px 34px rgba(25,26,48,.10)}
.pg-header:not(.pg-scrolled) .pg-wordmark{color:#FFFFFF}
.pg-header:not(.pg-scrolled) .pg-nav-link{color:#FFFFFF}
.pg-header:not(.pg-scrolled) .pg-burger span{background:#FFFFFF}
.pg-header:not(.pg-scrolled) .pg-btn-ghost{border-color:rgba(255,255,255,.6)}
.pg-header-in{max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,44px);height:74px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.pg-wordmark{font-family:var(--font-display);font-size:0.97rem;font-weight:680;letter-spacing:0.22em;text-transform:uppercase;color:var(--text-strong)}
.pg-nav{display:flex;align-items:center;gap:18px}
.pg-nav .pg-btn{padding:9px 17px;font-size:13px}
/* CSS-only Resources dropdown (hover + keyboard focus; no JS on static pages).
   The padding-top bridge covers the gap so the pointer never leaves the group. */
.pg-navdrop{position:relative}
.pg-navdrop-btn{cursor:default;display:inline-flex;align-items:center;gap:5px}
.pg-navdrop-btn svg{transition:transform .2s ease}
.pg-navdrop-menu{position:absolute;top:100%;left:0;min-width:190px;padding-top:8px;opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .18s ease,transform .18s ease}
.pg-navdrop-menu>a{display:block;padding:9px 12px;font-size:0.9rem;font-weight:500;color:var(--text-strong)}
.pg-navdrop-menu>a:first-child{border-radius:14px 14px 0 0}
.pg-navdrop-menu>a:last-child{border-radius:0 0 14px 14px}
.pg-navdrop-menu>a{background:var(--surface-page);border:1px solid var(--border-strong);border-top:0}
.pg-navdrop-menu>a:first-child{border-top:1px solid var(--border-strong);box-shadow:0 -8px 24px -14px rgba(25,26,40,.2)}
.pg-navdrop-menu>a:hover{background:var(--accent-wash)}
.pg-navdrop:hover .pg-navdrop-menu,.pg-navdrop:focus-within .pg-navdrop-menu{opacity:1;transform:none;pointer-events:auto}
.pg-navdrop:hover .pg-navdrop-btn svg,.pg-navdrop:focus-within .pg-navdrop-btn svg{transform:rotate(180deg)}
@media(max-width:820px){.pg-navdrop{display:none}}
.pg-nav-link{font-size:0.9rem;font-weight:600;color:var(--text-strong);white-space:nowrap;transition:color .15s var(--ease-brand);padding:8px 4px}
.pg-nav-active{color:var(--accent)}
/* CSS-only burger + panel (generated pages ship zero JS) */
.pg-nav-toggle{display:none}
.pg-burger{display:none;width:40px;height:40px;position:relative;cursor:pointer}
.pg-burger span{position:absolute;left:10px;right:10px;height:2px;border-radius:2px;background:var(--text-strong);transition:transform .25s var(--ease-brand),top .25s var(--ease-brand)}
.pg-burger span:nth-child(1){top:16px}
.pg-burger span:nth-child(2){top:23px}
.pg-nav-toggle:checked ~ .pg-header-in .pg-burger span:nth-child(1){top:19px;transform:rotate(45deg)}
.pg-nav-toggle:checked ~ .pg-header-in .pg-burger span:nth-child(2){top:19px;transform:rotate(-45deg)}
.pg-mobmenu{display:none;background:var(--surface-page);border-bottom:1px solid var(--border-subtle);box-shadow:0 22px 40px -18px rgba(25,26,40,.28);padding:8px 0 14px}
.pg-nav-toggle:checked ~ .pg-mobmenu{display:block}
.pg-mobmenu a{display:block;padding:13px 24px;font-size:0.97rem;font-weight:550;color:var(--text-strong);border-top:1px solid var(--border-subtle)}
.pg-mobmenu a:first-child{border-top:0}
/* Terminal CTA: air above it, no divider (matches v2.css .mobmenu-cta). */
/* The rotating ring comes from .pg-btn-solid, which the markup carries next to
   .pg-mobmenu-cta (chrome.mjs) — same borrow as v2.css's .mobmenu-cta. Nothing
   about the ring is restated here: border-radius:inherit on that ::before picks
   up the 999px below, and the reduced-motion rule up there already stops it.
   Note .pg-nav>.pg-btn-solid{display:none} under 600px does NOT catch this one:
   .pg-mobmenu is a sibling of .pg-nav, not a child. Only the modifier is
   borrowed, never .pg-btn — that would overwrite the block layout here.
   (No backticks in this file: the whole sheet is one JS template literal.) */
.pg-mobmenu .pg-mobmenu-cta{margin:18px 24px 4px;padding:12px 16px;border:0;border-radius:999px;background:#17181F;color:#FFFFFF;text-align:center;font-family:var(--font-display);font-weight:640}
/* Booking sits above the funnel CTA as a second terminal button. The markup
   carries .pg-mobmenu-cta too, so this only has to undo the fill; the geometry,
   the pill radius and the centring are all inherited from the rule above.
   border:1px replaces the base rule's border:0 — which existed purely to
   suppress the .pg-mobmenu a divider — so the outline doubles as that
   suppression rather than fighting it. No .pg-btn-solid on this one, so it
   gets no rotating ring, which is what keeps the two visually ranked. */
/* margin-top 12, not the base rule's 18. A row contributes 13px of its own
   bottom padding, so 18 put 31px of air above the button against the 26px that
   separates two rows' text — and because the ghost draws a full outline where
   a row would have drawn only a hairline, that extra 5px read as a gap rather
   than as the end of the list. 12 lands the outline on the list's rhythm. */
.pg-mobmenu .pg-mobmenu-cta-ghost{margin-top:12px;margin-bottom:0;background:transparent;color:var(--text-strong);border:1px solid var(--border-strong)}
.pg-mobmenu .pg-mobmenu-cta-ghost + .pg-mobmenu-cta{margin-top:8px}
@media(max-width:820px){
  .pg-nav .pg-nav-link{display:none}
  .pg-burger{display:block}
}
/* Sign in stays down to the narrowest phone (founder, 2026-09-03) and sheds its
   pill at phone width — byte-parallel with v2.css's #nav-signin block. Both
   sheets must say the same thing or castellan.so disagrees with itself about
   whether it has a Sign in button. */
@media(max-width:600px){
  .pg-header-in{height:68px;padding-inline:16px}
  .pg-nav{gap:6px}
  .pg-nav>.pg-btn-solid{display:none}
  .pg-header .pg-nav .pg-signin{border-color:transparent;background:none;padding:6px 8px;font-size:13px}
  .pg-header .pg-nav .pg-signin:hover{background:none;color:var(--text-strong)}
  .pg-header:not(.pg-scrolled) .pg-nav .pg-signin{color:#FFFFFF}
}
@media(max-width:480px){
  .pg-header-in .pg-wordmark{font-size:0.81rem;letter-spacing:.17em}
}

/* buttons — byte-matched to the homepage .btnr spec (v2.css): ink pill with
   the animated conic ring, porcelain ghost chip. Keep in sync. */
@property --ring{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes ringSpin{to{--ring:360deg}}
.pg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-display);font-stretch:104%;font-size:14.5px;font-weight:640;padding:13px 24px;border-radius:999px;border:1px solid transparent;white-space:nowrap;transition:background .15s var(--ease-brand),border-color .15s var(--ease-brand),box-shadow .15s var(--ease-brand)}
.pg-btn-solid{background:#17181F;color:#fff;position:relative}
.pg-btn-solid::before{content:'';position:absolute;inset:-2.5px;border-radius:inherit;padding:2.5px;background:conic-gradient(from var(--ring),#4A56C6,#FF8A5C 28%,#B08CFF 55%,#4A56C6);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:ringSpin 5s linear infinite}
.pg-btn-solid:hover{box-shadow:0 0 16px 2px rgba(122,110,255,.85), 0 0 44px 12px rgba(140,120,255,.42)}
.pg-btn-ghost{border-color:var(--border-strong);color:var(--text-strong);background:var(--surface-card)}
.pg-btn-ghost:hover{background:#17181F;color:#FFFFFF;border-color:#17181F}
@media (prefers-reduced-motion: reduce){.pg-btn-solid::before{animation:none}}

/* breadcrumb */
.pg-crumbs{display:flex;flex-wrap:wrap;gap:6px;padding:18px 0 0;font-size:0.78rem;letter-spacing:0.04em;color:var(--text-faint)}
.pg-crumbs a{color:var(--text-muted)}
.pg-crumbs a:hover{color:var(--accent)}
.pg-crumbs .sep{color:var(--border-strong)}

/* hero — framed twilight sky panel, the homepage's atmosphere ported to a
   zero-JS static block: gradient field + aurora glows in pure CSS. */
.pg-hero{position:relative;overflow:hidden;margin:calc(10px - 74px) 10px 0;border-radius:26px;background:linear-gradient(178deg,#565CB8 0%,#7B81DC 36%,#A3A7EF 62%,#CDC7F1 82%,#EED3C4 100%);padding:calc(74px + 44px) 0 60px}
.pg-hero::before{content:'';position:absolute;left:8%;top:-20%;width:56vw;height:44vw;max-width:760px;max-height:520px;border-radius:50%;background:radial-gradient(closest-side,rgba(126,108,255,.55),transparent 72%);filter:blur(70px);pointer-events:none}
.pg-hero::after{content:'';position:absolute;right:-6%;bottom:-24%;width:48vw;height:38vw;max-width:640px;max-height:460px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,140,90,.45),transparent 72%);filter:blur(70px);pointer-events:none}
.pg-hero .pg-wrap{position:relative;z-index:1}
.pg-eyebrow{display:none}
h1{font-family:var(--font-display);font-stretch:106%;font-weight:680;font-size:clamp(2rem,4.4vw,3.25rem);line-height:1.05;letter-spacing:-0.022em;color:#191A2E;text-wrap:balance;max-width:22ch}
h1 em{font-style:normal;color:#FFFFFF}
.pg-lead{margin-top:20px;max-width:62ch;font-size:1.125rem;line-height:1.65;color:#2B2D54}
.pg-lead strong{color:#191A2E}
.pg-hero-cta{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.pg-cta-row{margin-top:22px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
/* A pair of buttons offered together is one choice, so they are one size. An
   inline-flex button sizes to its label, which made "Start your free analysis"
   wider than "Book a 15-minute call" and the pair read as a primary and an
   afterthought rather than two options.

   Equal grid tracks rather than flex: flex:1 1 auto distributes the leftover
   space in proportion to content, so the buttons both stretched across the
   column AND stayed unequal. Equal fr tracks inside a fit-content grid come
   out the width of the wider label and no wider. */
.pg-hero-cta{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;width:fit-content;align-items:stretch}
@media (max-width:640px){
  /* Stacked, both full width. Two buttons of different lengths one above the
     other read as a mistake rather than a pair. */
  .pg-hero-cta{grid-auto-flow:row;width:100%}
  .pg-cta-row{flex-direction:column;align-items:stretch}
  .pg-cta-row>.pg-btn{width:100%}
}
.pg-cta-alt{font-size:0.9rem;color:var(--text-muted);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--border-strong)}
.pg-cta-alt:hover{color:var(--text-strong)}
.pg-hero .pg-btn-ghost{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.26);color:#1E2044;backdrop-filter:blur(8px)}
.pg-hero .pg-btn-ghost:hover{background:rgba(255,255,255,.4);border-color:rgba(255,255,255,.8);color:#1E2044}
.pg-meta-strip{margin-top:34px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:0.7rem;letter-spacing:0.2em;text-transform:uppercase;color:rgba(43,45,84,.6)}
.pg-hero .pg-crumbs{padding:0 0 26px;color:rgba(43,45,84,.55)}
.pg-hero .pg-crumbs a{color:rgba(43,45,84,.8)}
.pg-hero .pg-crumbs a:hover{color:#191A2E}
.pg-hero .pg-crumbs .sep{color:rgba(43,45,84,.35)}

/* sections */
.pg-section{padding:52px 0;border-bottom:1px solid var(--border-subtle)}
h2{font-family:var(--font-display);font-stretch:104%;font-weight:670;font-size:clamp(1.4rem,2.6vw,1.9rem);line-height:1.15;letter-spacing:-0.02em;color:var(--text-strong);margin-bottom:18px;text-wrap:balance}
h2 em{font-style:normal;color:var(--accent)}
h3{font-family:var(--font-display);font-weight:640;font-size:1.08rem;color:var(--text-strong);margin:1.4em 0 0.5em}
.pg-section p{max-width:68ch;font-size:1.03rem;line-height:1.7;margin-bottom:1.1em}
.pg-section p:last-child{margin-bottom:0}
.pg-section .pg-note,.pg-note{font-size:0.85rem;line-height:1.6;color:var(--text-muted)}
.pg-rule{height:1px;border:0;background:linear-gradient(90deg,var(--accent),transparent);opacity:0.5;margin:22px 0}

/* cards + steps */
.pg-card{border:1px solid var(--border-subtle);border-radius:12px;background:var(--surface-card);padding:26px}
.pg-steps{display:grid;grid-template-columns:1fr;gap:clamp(18px,3vw,44px);margin-top:8px}
@media(min-width:768px){.pg-steps{grid-template-columns:repeat(3,1fr)}}
/* Step cells wear the homepage stat vocabulary: hairline top, gradient word. */
.pg-steps .pg-card{border:0;border-top:1px solid var(--border-strong);border-radius:0;background:transparent;padding:18px 0 0}
.pg-step-n{display:none}
.pg-step-name{font-family:var(--font-display);font-stretch:106%;font-weight:700;font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-0.02em;text-transform:none;margin-bottom:10px;display:block;width:fit-content;background:linear-gradient(115deg,#3D49B8 10%,#8A5CFF 55%,#FF8A5C 105%);-webkit-background-clip:text;background-clip:text;color:transparent}
.pg-card p{font-size:0.95rem;line-height:1.65;color:var(--text-muted);margin:0}

/* campaign landing pages (build-lib/campaign-page.mjs)
   Five rules, all of them additive — a campaign page is a page of this site,
   so it wears .pg-hero, .pg-section, .pg-steps, .pg-faq and .pg-cta unchanged.
   (No backticks in here: this stylesheet lives inside a JS template literal.) */
/* The line under the hero CTA. It lives on the twilight field, so it cannot
   use .pg-note's grey — that colour was chosen against porcelain and reads as
   disabled text here. Same ink family as .pg-lead, one step back. */
.pg-hero-note{margin-top:14px;font-size:0.92rem;line-height:1.55;color:#2B2D54}
/* Two figures, not three. .pg-steps is a 3-track grid at desktop width, which
   left a pair of numbers hanging in two thirds of the row. */
@media(min-width:768px){.pg-steps-two{grid-template-columns:repeat(2,1fr)}}
.pg-steps-two+p{margin-top:24px}
/* .pg-card p sets margin:0 (it was written for one-paragraph cards), so a card
   holding three lines of pricing collapsed them into a block. Scoped rather
   than fixed globally: every other card on the site is one paragraph and is
   spaced correctly today. */
.pg-cost-card p+p{margin-top:12px}
.pg-card h3:first-child{margin-top:0}
/* The photo band. Renders only when files exist under public/campaigns/<slug>/
   — the page is designed to stand without it. */
.pg-gallery{display:grid;grid-template-columns:1fr;gap:12px;margin-top:26px}
@media(min-width:640px){.pg-gallery{grid-template-columns:repeat(2,1fr)}}
/* ONE PHOTOGRAPH IS NOT HALF A ROW. The Grove page dropped to a single strip
   photo on 2026-09-05 ("we don't need a ton of resort photos just one or two is
   enough"), and a lone image in the left track of a two-column grid reads as an
   image that failed to load. The renderer sets this class from the count, so
   this stays after the media query on purpose — same specificity, later wins.
   The wider frame also suits a 16:9 source at full width; the 4/3 crop exists
   for a pair sitting side by side. */
.pg-gallery-solo{grid-template-columns:1fr}
.pg-gallery img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;border:1px solid var(--border-subtle);display:block}
/* After .pg-gallery img, not before: the two selectors have equal specificity,
   so source order is the whole of the cascade here. */
.pg-gallery-solo img{aspect-ratio:16/9}
.pg-gallery picture{display:block}

/* The hero photograph. The hero is one column on a phone (text, then picture)
   and two from 900px up, which is the width at which 62ch of lead text and a
   photograph can both be themselves. The image keeps a fixed aspect ratio so
   the twilight field does not reflow when it decodes. */
.pg-hero-art{margin-top:28px}
.pg-hero-art picture{display:block}
.pg-hero-photo{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block;border-radius:16px;border:1px solid rgba(255,255,255,.5);box-shadow:0 18px 44px -18px rgba(23,24,50,.55)}
@media(min-width:900px){
  .pg-hero-split .pg-wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;align-items:center}
  .pg-hero-art{margin-top:0}
  .pg-hero-photo{aspect-ratio:4/3}
}

/* The savings stat. ONE FIGURE, NET OF OUR FEE — this replaced a three-column
   table on 2026-09-05 ("framing savings net of fee only don't show gross… as
   simple as possible"), and the table's tabular-numeral rules went with it.

   IT IS THE SIGNUP WIZARD'S SHAPE, in the marketing site's type: small label,
   big unbreakable figure, quiet support line (.pg-note, already defined). The
   founder's other requirement was that the page "line up with what they see in
   their sign up form", and the label alone does not do that — the wizard shows
   a stat, so the page shows a stat.

   THE FIGURE NEVER WRAPS. A range that breaks across two lines stops reading
   as one number, which is exactly the failure that took the wizard off a bold
   sentence and onto this shape; it steps down at 560px instead. Tabular
   numerals keep the two ends the same width while the count-up runs. */
.pg-stat{margin:10px 0 14px}
.pg-stat-label{display:block;font-family:var(--font-display);font-size:0.76rem;font-weight:640;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-strong)}
.pg-stat-figure{display:block;margin-top:8px;font-family:var(--font-display);font-stretch:104%;font-weight:700;font-size:2.7rem;line-height:1.1;letter-spacing:-0.02em;color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:560px){
  .pg-stat-label{font-size:0.7rem;letter-spacing:0.05em}
  .pg-stat-figure{font-size:2.05rem}
}

/* "What you pay, and when" — a numbered sequence, because the four sentences
   answer four questions IN ORDER and prose loses the order. */
.pg-paylist{margin:0;padding-left:1.35em;list-style:decimal}
.pg-paylist li{font-size:1.0rem;line-height:1.65;color:var(--text-default);margin:0 0 12px}
.pg-paylist li:last-child{margin-bottom:0}
.pg-paylist li::marker{color:var(--accent);font-weight:700}
/* The standing line under the questions. Not a question, so not in the FAQ. */
.pg-standing{margin-top:22px;font-size:0.98rem;line-height:1.65;color:var(--text-strong)}

/* ── The process band ───────────────────────────────────────────────────────
   PORTED FROM src/v2/v2.css "After-you-sign band (Decagon dark rail)", which
   is the homepage's own #v2-root .afterband / .afterrail / .arow block. The
   declarations are carried over as-is; only three things changed, and each for
   a reason:

     - the #v2-root scope became .pg-afterband, because these generated
       pages are not inside the React root and must not import v2.css;
     - the reveal is gated on .pg-motion on <html> (the homepage uses
       #v2-root.js-motion), which the inline script adds. WITH JAVASCRIPT OFF
       EVERY ROW IS FULLY OPAQUE — the dimming only exists once something is
       running that can undim it, and a campaign page that hides its own steps
       from a reader is worse than one that never animates;
     - the vertical rhythm is tightened (padding, h3 size), because the
       homepage band carries four rows at full-page scale and this one carries
       three inside a page that is already short.

   The accent lives on the step's VERB and nowhere else on the page. That is
   the deliberate version of the pattern the founder rejected in headings on
   2026-09-05: one word, always the same part of speech, in the one band whose
   whole subject is the sequence of actions. */
.pg-afterband{position:relative;overflow:hidden;background:#101122;padding:clamp(56px,8vw,104px) 0}
.pg-afterband h2{color:#F2F2FB;margin-bottom:clamp(26px,5vw,52px)}
.pg-afterrail{position:relative;padding-left:clamp(34px,5vw,56px)}
.pg-arail-line{position:absolute;left:6px;top:8px;bottom:8px;width:1px;background:rgba(255,255,255,.14)}
.pg-arail-progress{position:absolute;left:0;top:0;width:1px;background:linear-gradient(180deg,#7A6EFF,#B9BFFF);box-shadow:0 0 12px 1px rgba(122,110,255,.6);height:0}
.pg-arail-progress::after{content:'';position:absolute;bottom:-5px;left:-4.5px;width:10px;height:10px;border-radius:50%;background:#B9BFFF;box-shadow:0 0 14px 3px rgba(122,110,255,.75)}
.pg-arow{padding:clamp(26px,5vh,58px) 0;max-width:58ch}
.pg-arow:first-of-type{padding-top:4px}
.pg-anum{display:block;font-family:var(--font-display);font-size:0.72rem;font-weight:700;letter-spacing:0.14em;color:rgba(185,191,255,.6);margin-bottom:10px}
.pg-motion .pg-arow{opacity:.24;transform:translateY(14px);transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1)}
.pg-motion .pg-arow.lit{opacity:1;transform:none}
.pg-arow h3{margin:0;font-family:var(--font-display);font-stretch:104%;font-weight:640;letter-spacing:-.018em;font-size:clamp(22px,3vw,34px);line-height:1.14;color:#F2F2FB}
.pg-arow .aw{color:#B9BFFF}
.pg-arow p{margin:12px 0 0;font-size:clamp(15px,1.8vw,17px);line-height:1.65;color:rgba(226,229,248,.78);max-width:52ch}
@media (prefers-reduced-motion: reduce){.pg-motion .pg-arow{opacity:1;transform:none}}

/* FAQ */
.pg-faq details{border-bottom:1px solid var(--border-subtle);padding:4px 0}
.pg-faq summary{cursor:pointer;padding:16px 0;font-size:1.02rem;font-weight:600;color:var(--text-strong);list-style:none;position:relative;padding-right:28px}
.pg-faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);color:var(--accent);font-family:var(--font-display);font-size:1.1rem}
.pg-faq details[open] summary::after{content:"–"}
.pg-faq .ans{padding:0 0 18px;max-width:68ch;font-size:0.98rem;line-height:1.7;color:var(--text-default)}

/* tables */
.pg-table-scroll{overflow-x:auto;margin:10px 0 22px}
table.pg-table{width:100%;border-collapse:collapse;font-size:0.94rem}
.pg-table th{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border-strong);color:var(--text-strong);font-weight:600;font-size:0.76rem;letter-spacing:0.06em;text-transform:uppercase;white-space:nowrap}
.pg-table td{padding:11px 12px;border-bottom:1px solid var(--border-subtle);vertical-align:top;line-height:1.55}
.pg-table td a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--border-accent)}
.pg-table .pg-dim{color:var(--text-muted)}
/* Two-column fact tables (county "at a glance", the pricing rate table). The
   row header is a <th scope="row">, so it needs the label treatment the column
   headers get without the nowrap that would blow out a narrow screen. */
.pg-table-caption{text-align:left;padding:0 0 10px;color:var(--text-muted);font-size:0.8rem;line-height:1.5}
table.pg-table-facts th[scope="row"]{width:34%;white-space:normal;border-bottom:1px solid var(--border-subtle);color:var(--text-strong);text-transform:none;letter-spacing:0;font-size:0.94rem;font-weight:600}
table.pg-table-facts td{color:var(--text-strong);font-weight:600}
/* On a phone the schedule has to be readable without scrolling sideways. The
   column headers inherit white-space:nowrap from .pg-table, which is right for
   a wide deadline table and wrong here: one 70-character header held the table
   wider than the screen, so the fee column -- the entire point of the table --
   sat off the right edge behind a horizontal scroll nobody discovers. Wrapping
   the headers lets three short rows fit a 390px screen intact.
   (No backticks in here: this stylesheet lives inside a JS template literal.) */
@media (max-width:640px){
  table.pg-table-facts th{white-space:normal;font-size:0.7rem;letter-spacing:0.04em;padding:8px 10px;vertical-align:bottom}
  table.pg-table-facts th[scope="row"]{width:52%;padding:11px 10px}
  table.pg-table-facts td{padding:11px 10px}
  .pg-table-scroll{margin-bottom:18px}
}
table.pg-table-facts .pg-dim{color:var(--text-strong)}
@media (max-width:560px){table.pg-table-facts th[scope="row"]{width:42%}}
.pg-badge{display:inline-block;font-size:0.66rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;border-radius:5px;padding:3px 8px;white-space:nowrap}
.pg-badge-ok{color:var(--accent-pressed);background:var(--accent-wash)}
.pg-badge-dim{color:var(--text-muted);border:1px solid var(--border-subtle)}
.pg-badge-info{color:var(--text-strong);background:var(--surface-sunken)}
.pg-rule{display:block;font-size:0.8rem;line-height:1.45;color:var(--text-muted);margin-top:3px}

/* sources */
.pg-sources{margin-top:10px;padding-left:1.2em;font-size:0.9rem;line-height:1.7;color:var(--text-muted)}
.pg-sources li{margin-bottom:0.35em}
.pg-sources a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--border-accent);overflow-wrap:anywhere}

/* CTA band — the homepage's night close: dark field, aurora, white tiles. */
.pg-cta{position:relative;overflow:hidden;padding:72px 0;text-align:center;background:#101122}
.pg-cta::before{content:'';position:absolute;left:10%;bottom:-30%;width:56vw;height:40vw;max-width:760px;max-height:460px;border-radius:50%;background:radial-gradient(closest-side,rgba(122,110,255,.5),transparent 72%);filter:blur(80px);pointer-events:none}
.pg-cta .pg-wrap{position:relative;z-index:1}
.pg-cta .pg-card{max-width:640px;margin:0 auto;padding:0;border:0;background:transparent}
.pg-cta h2{color:#F2F2FB}
.pg-cta .pg-note{color:rgba(226,229,248,.72)}
.pg-cta-buttons{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:22px}
/* background too, not just colour: the base .pg-btn-ghost sets
   background:var(--surface-card), which is #FFFFFF. Overriding only the
   text to #E9EBFA on this dark band left near-white type on a white pill
   -- the button was legible only as a silhouette. */
.pg-cta .pg-btn-ghost{border-color:rgba(255,255,255,.32);color:#E9EBFA;background:transparent}
.pg-cta .pg-btn-ghost:hover{border-color:rgba(255,255,255,.6);color:#FFFFFF;background:rgba(255,255,255,.08)}
.pg-tiles{display:grid;grid-template-columns:1fr;gap:12px;margin-top:26px}
@media(min-width:560px){.pg-tiles{grid-template-columns:1fr 1fr}}
.pg-tile{display:flex;flex-direction:column;gap:4px;border:0;border-radius:12px;padding:16px;background:#FFFFFF;text-align:left}
.pg-tile .lab{font-size:0.64rem;letter-spacing:0.26em;text-transform:uppercase;color:var(--text-muted)}
.pg-tile b{font-size:0.95rem;letter-spacing:0.05em;color:var(--text-strong)}
/* .pg-card p (line 145) sets margin:0 at specificity (0,1,1), which quietly
   beat the (0,1,0) of a bare .pg-locality -- so the margin below was never
   applied at ALL, at any value, and the line has been sitting flush against
   the white tiles since it shipped. Both of these paragraphs live inside
   .pg-card, so both need to out-specify that reset; raising the value alone
   changes nothing.

   34px against the 26px that opens the tile grid: the small print reads as a
   separate register from the things you can click. */
.pg-card p.pg-locality{margin-top:34px;font-size:0.78rem;letter-spacing:0.04em;color:rgba(226,229,248,.6)}
.pg-card p.pg-disclaimer{margin:14px auto 0;max-width:56ch;font-size:0.72rem;line-height:1.7;letter-spacing:0.03em;color:rgba(226,229,248,.45)}
.pg-disclaimer a{text-decoration:underline;color:rgba(226,229,248,.7)}

/* glossary (/learn) */
.pg-learn-item{display:block;padding:18px 0;border-top:1px solid var(--border-subtle);color:inherit}
.pg-learn-item:first-of-type{border-top:0}
.pg-learn-item strong{display:block;font-family:var(--font-display);font-stretch:104%;font-weight:670;font-size:1.15rem;color:var(--text-strong);margin-bottom:6px}
.pg-learn-item span{display:block;font-size:0.95rem;line-height:1.6;color:var(--text-muted);max-width:72ch}
.pg-learn-item:hover strong{color:var(--accent)}
.pg-related a{display:block;padding:10px 0;border-top:1px solid var(--border-subtle);color:var(--text-strong);font-weight:550}
.pg-related a:first-child{border-top:0}
.pg-related a:hover{color:var(--accent)}

/* footer — night register, mirroring the homepage nfoot */
.pg-footer{padding:52px 0 34px;background:#0B0C16;color:#A6ABB4}
.pg-footer-in{max-width:1100px;margin:0 auto;padding:0 24px}
.pg-footer-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px;margin-bottom:26px}
.pg-f-brand{grid-column:1/-1}
@media(min-width:768px){
  .pg-footer-cols{grid-template-columns:1.4fr 1fr 1fr}
  .pg-f-brand{grid-column:auto}
}
.pg-footer .pg-wordmark{color:#F1F2FA;display:block;margin-bottom:10px}
.pg-f-brand a{color:#A6ABB4;font-size:0.88rem}
.pg-f-col{display:flex;flex-direction:column;gap:9px}
.pg-f-h{font-size:0.68rem;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:#6E747E}
.pg-f-col a{color:#A6ABB4;font-size:0.88rem}
.pg-f-col a:hover{color:#F1F2FA}
.pg-footer-brand{max-width:78ch;font-size:0.82rem;line-height:1.7;color:#6E747E;margin-bottom:18px}
.pg-footer-legal{font-size:0.75rem;color:#6E747E;border-top:1px solid rgba(255,255,255,.1);padding-top:16px}