/* INSITE.
 *
 * Dark navy hero and feature bands, paper sections between them, one emerald
 * accent, a serif for headlines and a grotesk for everything else. Figures use the
 * same grotesk with tabular digits so they hold their column while the sliders move.
 *
 * Layout is fixed above 960px: one 1240px container, fixed type sizes, so the
 * page composes identically on every desktop resolution. Below 960px it stacks.
 *
 * Trap, it broke this page once: never size a text measure with
 * padding-right:calc(100% - Nch); percentages resolve against the containing
 * block, not the element. Use max-width.
 */

:root{
  /* INSITE brand, INS-001 Chapter 2.3 — the official four, then a lighter blue
     ramp built off the navy. v2 (Saim 2026-08-30: "do a lighter blue"): the near
     black ground of v1 is gone; every dark surface is now brand navy or lighter. */
  --brand-navy:#153a5b;      /* InSite Navy, primary */
  --brand-green:#3e7c59;     /* Infrastructure Green, secondary */
  --brand-slate:#6b7280;     /* Slate Gray */
  --brand-paper:#f5f7fa;     /* Light Gray */
  --brand-green-2:#8abf88;   /* Success Green, the green parcels in the mark */

  --navy:#153a5b;
  --navy-2:#1b4a72;
  --navy-3:#245b88;
  --ink:#12314b;
  --ink-2:#46586c;
  --ink-3:#6b7280;
  --paper:#f5f7fa;
  --paper-2:#eaf1f8;
  --white:#ffffff;
  --line:#dfe7f0;
  --line-dark:rgb(255 255 255 / .16);
  --accent:#3e7c59;
  --accent-2:#8abf88;
  --accent-deep:#2f5f44;
  --accent-ink:#08251a;
  --flag:#e0736a;            /* the old way: fees paid in cash at the counter */
  --flag-ink:#2a0f0d;
  --blue:#3e7cb5;
  --blue-2:#6ba3d6;
  --blue-3:#a8c9e6;
  --text-d:#f2f7fc;
  --text-d2:#c2d6e8;
  --text-d3:#93b2cd;
  --serif:"Newsreader","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Geist","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"Geist","Segoe UI",system-ui,-apple-system,sans-serif;
  --content:1240px;
  --gutter:40px;
  --nav:68px;
  --r-xl:28px;
  --r-lg:20px;
  --r-md:14px;
  --ease:cubic-bezier(.32,.72,0,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav) + 12px);}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
h1,h2,h3,h4,p,dl,dd,figure,ul,ol{margin:0;}
h1,h2,h3,h4{line-height:1.1;font-weight:600;letter-spacing:-.01em;}
h1,h2{text-wrap:balance;}
.serif{font-family:var(--serif);font-weight:500;font-variation-settings:"opsz" 72;letter-spacing:-.012em;}
html[data-font="sans"]{--serif:var(--sans);}
html[data-font="sans"] .serif,html[data-font="sans"] .hero h1{font-weight:600;letter-spacing:-.03em;font-variation-settings:normal;}
a{color:inherit;}
img,svg{display:block;max-width:100%;}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em;}

.wrap{width:100%;max-width:var(--content);margin-inline:auto;padding-inline:var(--gutter);}
.section{padding:120px 0;position:relative;}
.section > .wrap > h2,.section h2.serif{font-size:44px;max-width:20ch;color:var(--ink);}
.section.dark h2{color:var(--text-d);}
.lead{max-width:62ch;margin-top:18px;font-size:18px;color:var(--ink-2);line-height:1.6;}
.dark .lead{color:var(--text-d2);}
.body{margin-top:16px;color:var(--text-d2);max-width:56ch;}

.eyebrow-pill{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;
  padding:5px 12px;border-radius:999px;border:1px solid rgb(15 26 43 / .12);
  background:rgb(15 26 43 / .04);color:var(--accent-deep);
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
}
.eyebrow-pill.dark,.dark .eyebrow-pill{border-color:var(--line-dark);background:rgb(255 255 255 / .05);color:var(--accent-2);}

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  font:inherit;font-size:15px;font-weight:600;white-space:nowrap;
  border-radius:999px;border:1px solid transparent;padding:12px 8px 12px 22px;
  cursor:pointer;text-decoration:none;
  transition:transform .35s var(--ease),background-color .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.btn .arr{
  width:30px;height:30px;border-radius:999px;display:grid;place-items:center;
  background:rgb(0 0 0 / .12);font-size:15px;
  transition:transform .45s var(--ease),background-color .35s var(--ease);
}
.btn:hover .arr{transform:translate(2px,-1px) scale(1.06);}
.btn:active{transform:scale(.98);}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 1px 0 rgb(255 255 255 / .25) inset,0 8px 24px -12px rgb(47 191 131 / .7);}
.btn-primary:hover{background:var(--accent-2);}
.btn-primary[disabled]{background:#c7d0dc;color:#5b6675;cursor:default;box-shadow:none;}
.btn-ghost{background:transparent;color:var(--text-d);border-color:rgb(255 255 255 / .22);padding-right:22px;}
.btn-ghost:hover{border-color:rgb(255 255 255 / .5);background:rgb(255 255 255 / .05);}
.btn-sm{font-size:14px;padding:8px 6px 8px 16px;}
.btn-sm .arr{width:26px;height:26px;font-size:13px;}
.btn-wide{width:100%;justify-content:space-between;padding-left:22px;}
@media (prefers-reduced-motion:reduce){.btn,.btn .arr{transition:none;}}

/* ── chrome ─────────────────────────────────────────────────────────────── */
.nav{
  height:var(--nav);position:sticky;top:0;z-index:40;
  background:rgb(21 58 91 / .86);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgb(255 255 255 / .06);
}
.nav-in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:32px;}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text-d);}
.mark{width:68px;height:auto;flex:none;}
.mark rect{fill:var(--brand-navy);}
.mark .g{fill:var(--brand-green-2);}
.mark .w{fill:var(--brand-paper);stroke:var(--brand-navy);stroke-width:3;}
/* On the navy nav and footer the navy parcels would vanish, so the mark
   inverts there — same geometry, light parcels. INS-001 permits a reversed
   lockup; it does not permit changing the grid. */
.nav .mark rect,footer .mark rect{fill:#dbe8f5;}
.nav .mark .g,footer .mark .g{fill:var(--brand-green-2);}
.nav .mark .w,footer .mark .w{fill:transparent;stroke:#bcd3e8;stroke-width:3;}
/* Lockup proportion, measured off Dennis's INS-001 header artwork
   (2026-08-31): the INSITE cap height is 0.88x the height of the parcel mark,
   with a gap of about 0.27x. Ours was 0.28x - the wordmark read as a caption
   next to the logo instead of being part of it. Geist's cap is 0.73em, so
   font-size = 0.88 x mark-height / 0.73 = 1.2 x mark-height. Everything below
   derives from --mark-h so nav, footer and the apply page stay in step. */
.brand,.foot .b{--mark-h:44px;}
/* 2026-09-07 (Saim: "fix the insite logo, dennis gets pissed about that"): the lockup is
   Dennis's OWN artwork (INS-001 "INSTIE header - logo.png", July 2026) as an image -
   gfx/insite-logo-reversed.png on navy, gfx/insite-logo.png on light grounds - never a
   redrawn grid or a substitute typeface. The PNG is 600x152 with the parcel grid 121 tall,
   so height = 1.26 x the mark height keeps the sizes measured on 08-31. */
/* 2026-09-07 (Saim, fourth time): Dennis's EXACT logo = the SVG on his own site (insite-ca.org),
   used verbatim (gfx/insite-lockup-dennis.svg = the same drawing cropped to grid + INSITE(tm);
   gfx/insite-logo-dennis.svg = with the divider and tagline). He has no reversed version, so on
   navy it sits on a white plate. Height: the grid is 124 of the 134 viewBox units. */
.logo-plate{display:inline-block;background:#fff;border-radius:6px;padding:5px 10px 4px;line-height:0;}
.lockup{height:calc(var(--mark-h) * 1.08);width:auto;display:block;}
.wordmark{font-weight:600;letter-spacing:.06em;font-size:calc(var(--mark-h) * 1.2);line-height:1;}
.wordmark sup{font-size:.30em;top:-.7em;position:relative;font-weight:400;}
.nav nav{display:flex;align-items:center;gap:30px;}
.nav nav a{font-size:14px;color:var(--text-d2);text-decoration:none;white-space:nowrap;transition:color .3s var(--ease);}
.nav nav a:hover{color:var(--text-d);}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero{
  position:relative;overflow:hidden;color:var(--text-d);
  padding:72px 0 176px;
  background:
    radial-gradient(900px 520px at 85% 10%, rgb(107 163 214 / .30), transparent 62%),
    radial-gradient(760px 520px at 8% 96%, rgb(62 124 181 / .26), transparent 62%),
    linear-gradient(165deg,#1b4a72 0%,var(--brand-navy) 52%,#245b88 100%);
}
.orb{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;will-change:transform;}
.orb-a{width:620px;height:620px;right:-140px;top:-220px;background:rgb(107 163 214 / .42);animation:drift 22s var(--ease) infinite alternate;}
.orb-b{width:520px;height:520px;left:-200px;bottom:-260px;background:rgb(62 124 181 / .34);animation:drift 26s var(--ease) infinite alternate-reverse;}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-40px,36px,0)}}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center;}
/* the second sentence answers the first — give it its own line so the hero
   reads as two beats instead of wrapping mid-clause (Dennis, 2026-08-31) */
.hero h1 .h1-turn{display:block;}
/* the tagline is set in caps (Saim 2026-08-31). Caps run wider than the old
   sentence case, so the size tracks the viewport and the tracking goes
   positive — a fixed 62px broke "BUILD SMARTER." over two lines on a
   1280px laptop, which is a wrap BETWEEN beats, not inside one. */
.hero h1{font-family:var(--serif);font-weight:500;font-variation-settings:"opsz" 72;font-size:clamp(34px,4.2vw,54px);line-height:1.1;letter-spacing:.01em;text-transform:uppercase;max-width:none;}
.hero .sub{margin-top:24px;font-size:19px;color:var(--text-d2);max-width:44ch;}
/* one dominant CTA (Objective 1) - the second action is a link, not a competing button */
.hero-secondary{align-self:center;font-size:14px;color:var(--text-d2);text-decoration:none;border-bottom:1px solid rgb(255 255 255 / .25);padding-bottom:2px;}
.hero-secondary:hover{color:var(--text-d);}
.hero-cta{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap;}
/* Saim 2026-09-02: the calculator's heading sits in the hero as a subtitle and
   descriptor under the main title and descriptor (the footnote line is gone). */
.hero-sub2{margin-top:30px;max-width:none;}
.hero-sub2 h2{margin:0;font-family:var(--serif);font-weight:500;font-variation-settings:"opsz" 72;font-size:clamp(22px,2.1vw,28px);line-height:1.15;letter-spacing:.01em;text-transform:uppercase;color:var(--text-d);}
.hero-sub2 h2 .h1-turn{display:block;} /* "Public-agency financing." / "Unlocked." - the same turn as the h1 */
.hero-sub2 p{margin:12px 0 0;font-size:17px;line-height:1.5;color:var(--text-d2);max-width:none;}
html[data-font="sans"] .hero-sub2 h2{font-weight:600;letter-spacing:-.02em;font-variation-settings:normal;}
.hero-art{position:relative;}
.hero-glow{position:absolute;inset:8% -6% -6% -6%;background:radial-gradient(closest-side,rgb(59 125 224 / .45),transparent 70%);filter:blur(40px);}
@keyframes float{0%,100%{transform:translate3d(0,0,0) rotate(-.4deg)}50%{transform:translate3d(0,-12px,0) rotate(.2deg)}}
@media (prefers-reduced-motion:reduce){.orb{animation:none;}}
/* five funding milestones on one rail: equal columns, a numbered node centred on each,
   the line runs node to node, everything centred under its node */
.rail{list-style:none;padding:0;margin:0;position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));}
.rail::before{content:"";position:absolute;left:10%;right:10%;top:16px;height:1px;background:linear-gradient(90deg,rgb(110 163 242 / .55),rgb(255 255 255 / .22) 55%,rgb(94 227 168 / .85));}
.step{position:relative;padding:0 14px;text-align:center;}
.node{position:relative;display:grid;place-items:center;width:32px;height:32px;margin:0 auto;border-radius:50%;background:var(--navy);border:1.5px solid var(--blue-2);color:var(--blue-2);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;box-shadow:0 0 0 5px var(--navy);}
.step.last .node{background:var(--accent);border-color:var(--accent-2);color:var(--accent-ink);box-shadow:0 0 0 5px var(--navy),0 8px 28px rgb(47 191 131 / .45);}
.step h3{margin-top:18px;min-height:2.5em;font-size:16px;line-height:1.25;font-weight:600;letter-spacing:-.01em;color:var(--text-d);text-wrap:balance;display:flex;align-items:flex-start;justify-content:center;}
.step p{margin:6px auto 0;font-size:13.5px;line-height:1.55;color:var(--text-d3);text-wrap:pretty;}

/* ── the model ──────────────────────────────────────────────────────────── */
/* v2: the stage title lives INSIDE this section now, so the card no longer
   straddles the band above it. In v1 the -112px pull lifted the card over the
   dark hero's empty bottom padding; here it landed on the heading text
   (2026-08-30: it covered 36px of the h2 and 58px of the lead). */
.model-sec{padding:120px 0 96px;}
.model-shell{
  margin-top:48px;position:relative;z-index:2;
  padding:6px;border-radius:var(--r-xl);
  background:rgb(21 58 91 / .55);border:1px solid rgb(255 255 255 / .16);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 50px 100px -40px rgb(21 58 91 / .55);
}
.model{
  border-radius:calc(var(--r-xl) - 6px);background:linear-gradient(180deg,#1d5080,#153a5b);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .12);color:var(--text-d);
  padding:24px 28px 26px;
}
.model-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-bottom:16px;border-bottom:1px solid var(--line-dark);}
.model-head h2{font-size:26px;color:var(--text-d);}
.model-head .eyebrow-pill{margin-bottom:9px;}
.model-note{font-size:12.5px;color:var(--text-d3);max-width:30ch;text-align:right;padding-bottom:2px;}
.model-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:34px;margin-top:20px;}
.controls{display:grid;gap:16px;align-content:start;}
.ctrl-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;}
.ctrl-row label{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-d2);}
.ctrl-row output{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:15px;font-weight:500;color:var(--text-d);}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:3px;margin-top:10px;border-radius:2px;cursor:pointer;
  background:linear-gradient(to right,var(--accent) 0,var(--accent) var(--fill,40%),rgb(255 255 255 / .12) var(--fill,40%),rgb(255 255 255 / .12) 100%);
}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:4px solid var(--accent);box-shadow:0 2px 10px rgb(0 0 0 / .4);cursor:pointer;transition:transform .3s var(--ease);}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12);}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:4px solid var(--accent);box-shadow:0 2px 10px rgb(0 0 0 / .4);cursor:pointer;}
.assump{margin-top:2px;border-top:1px solid var(--line-dark);padding-top:12px;}
.assump summary{cursor:pointer;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-d2);list-style:none;display:flex;align-items:center;gap:10px;}
.assump summary::-webkit-details-marker{display:none;}
.assump summary::before{content:"+";color:var(--accent-2);font-weight:600;font-size:16px;}
.assump[open] summary::before{content:"\2212";}
.arow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:7px 0;border-bottom:1px solid var(--line-dark);font-size:12.5px;color:var(--text-d2);}
.arow b{font-weight:500;font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--text-d);white-space:nowrap;}
.arow input{width:3.4rem;font:inherit;font-family:var(--mono);text-align:right;padding:3px 6px;margin-right:4px;border:1px solid var(--line-dark);border-radius:8px;background:rgb(0 0 0 / .25);color:var(--text-d);}
.afoot{margin-top:10px;font-size:12px;color:var(--text-d3);line-height:1.55;}
.results{border-left:1px solid var(--line-dark);padding-left:34px;}
.figures{display:grid;}
.fig{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--line-dark);}
.fig dt{font-size:13px;color:var(--text-d2);}
/* The rate WITH the special tax is the number a developer is actually weighing,
   and it sat in the same grey as the words around it (Saim 2026-08-31). Pull it
   out. The rate today stays quiet so the two read as a before and after. */
#r-taxeff{font-weight:700;color:var(--accent-2);font-size:14px;letter-spacing:-.01em;}
.fig dd{font-size:17px;font-weight:500;white-space:nowrap;color:var(--text-d);}
.fig-major{padding:14px 0 12px;display:grid;gap:2px;}
.fig-major dt{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2);}
.fig-major dd{font-size:40px;line-height:1;color:var(--text-d);letter-spacing:-.03em;}
.binding{margin-top:12px;font-size:12.5px;color:var(--text-d3);line-height:1.5;}
.binding span{color:var(--text-d2);}
.fit{margin-top:10px;padding:9px 13px;border-radius:var(--r-md);background:rgb(47 191 131 / .12);border:1px solid rgb(47 191 131 / .3);font-size:13px;color:#a8efcf;}
.fit.out{background:rgb(59 125 224 / .12);border-color:rgb(59 125 224 / .35);color:#bdd6f7;}
.results .btn-wide{margin-top:14px;}

/* ── double bezel shells ────────────────────────────────────────────────── */
.shell{padding:8px;border-radius:var(--r-xl);background:rgb(15 26 43 / .04);border:1px solid rgb(15 26 43 / .08);}
.shell > *{border-radius:calc(var(--r-xl) - 8px);background:var(--white);box-shadow:inset 0 1px 0 rgb(255 255 255 / .9),0 30px 60px -40px rgb(15 26 43 / .25);}
.shell.good{background:rgb(47 191 131 / .08);border-color:rgb(47 191 131 / .25);}
.dark-shell{background:rgb(255 255 255 / .05);border-color:var(--line-dark);}
.dark-shell > *{background:linear-gradient(180deg,#111f36,#0d1a2d);box-shadow:inset 0 1px 0 rgb(255 255 255 / .1);}
.art-frame{padding:8px;border-radius:var(--r-xl);background:rgb(255 255 255 / .05);border:1px solid var(--line-dark);}
.art-frame img{width:100%;height:auto;border-radius:calc(var(--r-xl) - 8px);}

/* ── caps ───────────────────────────────────────────────────────────────── */
.caps{background:var(--white);}
.caps-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr);gap:56px;align-items:center;margin-top:48px;}
.cap-outcome{padding:30px 32px;}
.cap-outcome .k{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);}
.cap-outcome .v{font-size:52px;line-height:1;color:var(--accent-deep);margin-top:10px;letter-spacing:-.03em;}
.cap-outcome .n{font-size:14.5px;color:var(--ink-2);margin-top:14px;}
.cap-list{display:grid;gap:26px;}
.cap{display:grid;gap:8px;}
.cap-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;}
.cap-name{font-size:15.5px;color:var(--ink-2);}
.cap-val{font-size:16px;font-weight:500;white-space:nowrap;color:var(--ink);}
.cap-track{height:14px;background:#edf0f5;border-radius:999px;overflow:hidden;}
.cap-bar{height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,var(--blue),var(--blue-2));transition:width .7s var(--ease),background-color .4s var(--ease);}
.cap.is-binding .cap-bar{background:linear-gradient(90deg,var(--accent-deep),var(--accent));}
.cap.is-binding .cap-name{color:var(--ink);font-weight:600;}
.cap-why{font-size:13px;color:var(--ink-3);}
@media (prefers-reduced-motion:reduce){.cap-bar{transition:none;}}

/* ── obligation (dark band) ─────────────────────────────────────────────── */
.dark{background:var(--navy);color:var(--text-d);}
.obligation{overflow:hidden;background:radial-gradient(800px 600px at 100% 100%,rgb(59 125 224 / .22),transparent 60%),var(--navy);}
.obligation .arc{position:absolute;right:-8%;bottom:-38%;width:58%;max-width:none;opacity:.55;pointer-events:none;mix-blend-mode:screen;-webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent 72%);mask-image:radial-gradient(closest-side,#000 40%,transparent 72%);}
.obl-grid{position:relative;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:center;margin-top:48px;}
.obl-art{display:grid;gap:20px;min-width:0;}
/* the tract map. No float here - the lots handing over IS the motion, and two
   competing animations in one frame read as noise (Saim 2026-08-31). */
.plat{
  position:relative;width:100%;height:auto;border-radius:var(--r-xl);
  border:1px solid rgb(255 255 255 / .14);
  box-shadow:0 40px 80px -30px rgb(0 0 0 / .7),0 0 0 8px rgb(255 255 255 / .04);
  font-family:var(--sans);
}
/* A lot is a parcel, an empty building envelope and a finished footprint. Selling
   it swaps the dashed pad for the house and turns the parcel blue. */
.plat .lot-area{fill:rgb(47 191 131 / .16);stroke:rgb(94 227 168 / .55);stroke-width:2;transition:fill .55s var(--ease),stroke .55s var(--ease);}
.plat .lot.sold .lot-area{fill:rgb(59 125 224 / .14);stroke:rgb(110 163 242 / .5);}
.plat .env{fill:none;stroke:rgb(255 255 255 / .16);stroke-width:1.5;stroke-dasharray:8 6;transition:opacity .55s var(--ease);}
.plat .fp{fill:rgb(110 163 242 / .32);stroke:rgb(110 163 242 / .6);stroke-width:1.5;opacity:0;transition:opacity .55s var(--ease);}
.plat .lot.sold .env{opacity:0;}
.plat .lot.sold .fp{opacity:1;}
.plat .street{fill:rgb(255 255 255 / .07);}
.plat .curb{stroke:rgb(255 255 255 / .30);stroke-width:2;}
.plat .centerline{stroke:rgb(255 255 255 / .16);stroke-width:2;stroke-dasharray:24 16;}
.plat .zone{fill:none;stroke:var(--accent-2);stroke-width:2.5;stroke-dasharray:12 9;opacity:.75;}
.plat .lbl{font-size:21px;font-weight:500;letter-spacing:.16em;fill:var(--text-d3);}
.plat .zone-lbl{fill:var(--accent-2);}
.plat .lotnum text{font-size:26px;font-weight:500;fill:rgb(238 242 247 / .82);font-variant-numeric:tabular-nums;}
.plat .north text{font-size:20px;font-weight:600;fill:rgb(238 242 247 / .8);}
.plat .title-block .t1{font-size:22px;font-weight:600;letter-spacing:.08em;fill:var(--text-d);}
.plat .title-block .t2{font-size:18px;font-weight:500;letter-spacing:.06em;fill:var(--text-d3);}
.plat .title-block .t3{font-size:18px;font-weight:500;letter-spacing:.06em;fill:var(--accent-2);font-variant-numeric:tabular-nums;}
.plat .key text{font-size:22px;font-weight:500;fill:var(--text-d2);}
.plat .sw-mine{fill:rgb(47 191 131 / .5);stroke:var(--accent);stroke-width:1.5;}
.plat .sw-sold{fill:rgb(59 125 224 / .3);stroke:var(--blue-2);stroke-width:1.5;}
@media (prefers-reduced-motion:reduce){.plat .lot-area,.plat .env,.plat .fp{transition:none;}}
/* ── the hero parcel map ──────────────────────────────────────────────────
   Its own subdivision - a crescent road, not the straight tract in section 07 -
   laid on a ground plane in PERSPECTIVE. "Angled" means receding, not turned
   sideways (Saim 2026-08-31), so this is a real 3D transform: the far edge of the
   map is smaller than the near edge. Feathered so it dissolves into the hero.
   The float has to carry the whole transform, because animating `transform`
   would otherwise wipe the perspective out. */
.pmap-stage{position:relative;margin:0;perspective:1500px;}
.pmap{
  border:0;box-shadow:none;border-radius:0;background:none;
  width:132%;max-width:none;margin:14px 0 0 -14%;
  transform-origin:50% 46%;
  transform:rotateX(54deg) rotateZ(-13deg);
  -webkit-mask-image:radial-gradient(closest-side at 50% 50%,#000 44%,transparent 92%);
          mask-image:radial-gradient(closest-side at 50% 50%,#000 44%,transparent 92%);
  animation:pmapfloat 16s ease-in-out infinite;
}
@keyframes pmapfloat{
  0%,100%{transform:rotateX(54deg) rotateZ(-13deg) translate3d(0,0,0);}
  50%    {transform:rotateX(54deg) rotateZ(-13deg) translate3d(0,-22px,0);}
}
/* the map reads better high, with the headline beside its upper half */
.hero-grid{align-items:start;}
.hero-copy{padding-top:30px;}
@media (prefers-reduced-motion:reduce){
  .pmap{animation:none;transform:rotateX(54deg) rotateZ(-13deg);}
}
.legend{display:flex;gap:18px;font-size:12.5px;color:var(--text-d3);}
.legend span{display:flex;align-items:center;gap:7px;}
.sw{width:11px;height:11px;border-radius:3px;flex:none;}
.sw.mine{background:rgb(47 191 131 / .5);border:1px solid var(--accent);}
.sw.gone{background:rgb(59 125 224 / .3);border:1px solid var(--blue-2);}

/* ── permit day ─────────────────────────────────────────────────────────── */

/* ── legal basis ────────────────────────────────────────────────────────── */
.legal{background:var(--white);}
.legal-card{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:48px;align-items:center;
  padding:64px;border-radius:var(--r-xl);
  background:radial-gradient(700px 400px at 100% 0%,rgb(47 191 131 / .14),transparent 60%),radial-gradient(600px 400px at 0% 100%,rgb(59 125 224 / .16),transparent 60%),linear-gradient(160deg,#eef2fb,#e9f5f0);
  border:1px solid rgb(15 26 43 / .06);
}
.mech-list{list-style:none;padding:0;margin:40px 0 0;display:grid;gap:0;}
.mech-list li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:20px;padding:24px 0;border-top:1px solid rgb(15 26 43 / .1);}
.ico{width:44px;height:44px;padding:10px;border-radius:12px;background:var(--white);border:1px solid rgb(15 26 43 / .08);stroke:var(--accent-deep);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}
.mech-list .cite{font-family:var(--mono);font-size:12.5px;color:var(--accent-deep);}
.mech-list h3{font-size:19px;margin-top:6px;}
.mech-list p{font-size:15px;color:var(--ink-2);margin-top:8px;max-width:58ch;}
.legal-art img{width:100%;height:auto;border-radius:var(--r-lg);box-shadow:0 40px 70px -40px rgb(15 26 43 / .5);}

/* ── comparison ─────────────────────────────────────────────────────────── */
.compare{background:var(--white);padding-bottom:0;}
.table-shell{margin-top:40px;}
.tablewrap{overflow-x:auto;padding:8px;}
table{width:100%;border-collapse:collapse;min-width:720px;font-size:15px;}
th,td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;}
thead th{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;}
thead th.ins{color:var(--accent-deep);}
tbody th{font-weight:500;color:var(--ink-2);}
td.ins{color:var(--ink);font-weight:500;background:rgb(47 191 131 / .08);}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0;}

/* ── closing call ───────────────────────────────────────────────────────── */
/* the card was flush against the top of its section (Saim 2026-08-31) */
.cta-sec{background:var(--white);padding:104px 0 120px;}
.cta-card{
  /* one centred column (Saim 2026-08-31): the closing ask reads stronger on the
     axis of the card than pushed to one side against a photo. */
  position:relative;overflow:hidden;display:grid;justify-items:center;text-align:center;
  padding:72px 64px;border-radius:var(--r-xl);color:var(--text-d);
  background:radial-gradient(700px 500px at 100% 100%,rgb(59 125 224 / .35),transparent 60%),linear-gradient(160deg,#0a1230,#0f2650);
  box-shadow:0 60px 100px -50px rgb(11 22 38 / .7);
}
.orb-c{width:480px;height:480px;left:-160px;top:-200px;background:rgb(107 163 214 / .30);z-index:1;}
.cta-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.cta-card::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgb(8 16 42 / .74),rgb(12 32 68 / .9));}
.cta-copy{position:relative;z-index:2;}
.cta-sec .cta-copy h2.serif{font-size:44px;color:var(--text-d);max-width:16ch;margin-inline:auto;}
.cta-copy p{margin:18px auto 28px;font-size:17px;color:var(--text-d2);max-width:44ch;}

/* ── reveal ─────────────────────────────────────────────────────────────── */
.will-reveal{opacity:0;transform:translateY(28px);filter:blur(6px);}
.is-in{opacity:1;transform:none;filter:none;}
[data-reveal]{transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);}
@media (prefers-reduced-motion:reduce){[data-reveal]{transition:none;opacity:1;transform:none;filter:none;}}

/* ── screening and application ──────────────────────────────────────────── */
.screening{background:var(--white);}
/* The application is a long data-entry form. On the saturated mid-blue it was
   hard to read for any length of time (Saim 2026-08-31) even though the raw
   contrast was fine - it is the saturation, not the ratio. Neutral slate keeps
   every white-on-dark rule below working and lets the type sit forward. */
/* Saim 2026-09-02: the application wears the hero's gradient */
.apply{background:radial-gradient(900px 520px at 85% 10%, rgb(107 163 214 / .30), transparent 62%),radial-gradient(760px 520px at 8% 96%, rgb(62 124 181 / .26), transparent 62%),linear-gradient(165deg,#1b4a72 0%,var(--brand-navy) 52%,#245b88 100%);color:var(--text-d);padding-top:0;}
/* the shared nav is navy-tinted; on the slate application it read as a seam */
.on-slate .nav{background:rgb(21 58 91 / .9);}
.on-slate footer{background:#122f4b;}

.apply .lead{color:var(--text-d2);}
.apply .recap{background:rgb(255 255 255 / .04);border:1px solid var(--line-dark);box-shadow:0 30px 60px -40px rgb(0 0 0 / .6);position:sticky;top:calc(var(--nav) + 20px);}
.apply .recap h3{color:var(--text-d3);border-bottom-color:var(--line-dark);}
.apply .recap li,.apply .recap dl > div{border-bottom-color:var(--line-dark);color:var(--text-d2);}
.apply .recap strong,.apply .recap dd{color:var(--text-d);}
.apply .recap .foot{color:var(--text-d2);}
.apply form.stack{max-width:none;gap:26px;}
.apply .field label{color:var(--text-d2);}
.apply .field .opt{color:var(--text-d3);}
.apply .field select,.apply .field input,.apply form.stack textarea{background:rgb(255 255 255 / .05);border-color:var(--line-dark);color:var(--text-d);}
.apply .field input::placeholder,.apply form.stack textarea::placeholder{color:var(--text-d3);}
.apply .field select:focus-visible,.apply .field input:focus-visible,.apply form.stack textarea:focus-visible{border-color:var(--accent);box-shadow:0 0 0 4px rgb(47 191 131 / .2);background:rgb(255 255 255 / .08);}
.apply form.stack legend{color:var(--text-d);border-bottom-color:var(--line-dark);}
.apply form.stack legend .opt{color:var(--text-d3);}
/* The dark-theme override for the application's small print. A .field-other rule
   was once inserted INTO this selector, splitting it - which dropped the override
   and left .note/.formfoot painting --ink-3 (a light-theme grey) on navy at about
   1.9:1. Lifted to --text-d2: --text-d3 only reaches 3.9:1 at these sizes. */
.apply .note,.apply .formfoot,.apply .pk-note,.apply .foot{color:var(--text-d2);}
/* the free-text that appears when Construction Status is "Other" */
.field-other{margin-top:10px;}
.apply .checks{border-top-color:var(--line-dark);}
.apply .checks li{border-bottom-color:var(--line-dark);}
.apply .checks label{color:var(--text-d2);}
/* fee-table agency cells were also under 4.5:1 at 12px */
.apply .fee-table td{color:var(--text-d2);}

/* The packet reads as the paper form it is: a numbered section rule, then ruled
   tables with tabular figures. Section 2 is visibly ours, not an input area. */
.pk-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start;padding-top:14px;border-top:1px solid var(--line-dark);}
.pk-head h3{font-size:22px;color:var(--text-d);font-family:var(--serif);font-weight:500;}
.pk-head p{margin-top:7px;font-size:14px;line-height:1.6;color:var(--text-d2);max-width:62ch;}
.pk-n{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgb(255 255 255 / .06);border:1px solid var(--line-dark);color:var(--text-d2);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;}
.pk-head-2 .pk-n{background:var(--accent);border-color:var(--accent-2);color:var(--accent-ink);box-shadow:0 8px 28px rgb(47 191 131 / .35);}
.pk-auto{display:grid;gap:22px;padding:24px;border-radius:var(--r-lg);background:rgb(47 191 131 / .05);border:1px solid rgb(47 191 131 / .22);}
.pk-block h4{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-2);margin-bottom:12px;}
.pk-tbl{width:100%;border-collapse:collapse;font-size:14px;}
.pk-tbl th,.pk-tbl td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--line-dark);vertical-align:top;}
.pk-tbl thead th{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-d3);padding-bottom:8px;}
.pk-tbl tbody td{color:var(--text-d2);}
.pk-tbl tbody td:first-child{color:var(--text-d);font-weight:500;}
.pk-tbl td.r,.pk-tbl th.r{text-align:right;padding-right:0;font-variant-numeric:tabular-nums;}
.pk-tbl td.c,.pk-tbl th.c{text-align:center;}
.pk-tbl tfoot th{font-size:14px;text-transform:none;letter-spacing:0;color:var(--text-d);padding-top:14px;border-bottom:0;}
.pk-tbl tfoot td{padding-top:14px;border-bottom:0;font-size:19px;font-weight:600;color:var(--accent-2);}
/* The full schedule runs to 30+ lines, so it is set tighter than the summary
   above it: smaller type, half the row padding, the agency and basis muted so
   the fee name and the number lead, and the amount column on tabular figures so
   the digits line up down the page (Saim 2026-08-28: "smaller font, neat table
   - not clunky"). */
.pk-tbl-sm{font-size:12px;line-height:1.4;}
.pk-tbl-sm th,.pk-tbl-sm td{padding:5px 10px 5px 0;border-bottom:1px solid var(--line-dark);}
.pk-tbl-sm thead th{font-size:10px;letter-spacing:.09em;padding-bottom:6px;}
.pk-tbl-sm tbody td:first-child{font-weight:500;max-width:32ch;}
.pk-tbl-sm tbody td:nth-child(2),.pk-tbl-sm tbody td:nth-child(3){color:var(--text-d2);}
.pk-tbl-sm tbody td:nth-child(3){text-transform:capitalize;white-space:nowrap;}
.pk-tbl-sm td.r{font-variant-numeric:tabular-nums;white-space:nowrap;}
.pk-tbl-sm td.c{color:var(--text-d2);}
/* Per Lot (right-aligned) ran straight into Eligible (Saim 2026-09-14): room between the two */
.pk-tbl-sm th.r,.pk-tbl-sm td.r{padding-right:22px;}
.pk-tbl-sm th.c,.pk-tbl-sm td.c{padding-left:6px;min-width:64px;}
/* the schedule foot: per-lot totals, then the project total set apart */
.pk-tbl-sm tfoot th{color:var(--text-d2);font-weight:500;text-align:left;padding-top:8px;}
.pk-tbl-sm tfoot td{color:var(--text-d);font-weight:600;padding-top:8px;}
.pk-tbl-sm tfoot tr:first-child th,.pk-tbl-sm tfoot tr:first-child td{border-top:1px solid var(--line-dark);}
.pk-tbl-sm tfoot tr.grand th,.pk-tbl-sm tfoot tr.grand td{border-top:1px solid rgb(255 255 255 / .22);color:var(--accent-2);font-weight:700;}

.pk-tbl-sm tbody tr:last-child td{border-bottom:0;}
.pk-tbl .muted{color:var(--text-d3);font-style:italic;font-weight:400;}
.pk-agency{font-size:12.5px;color:var(--text-d3);display:block;margin-top:2px;}
.pk-note{margin-top:10px;font-size:12.5px;line-height:1.55;color:var(--text-d3);}
.pk-details{margin-top:14px;}
.pk-details summary{cursor:pointer;font-size:13px;color:var(--text-d2);padding:8px 0;}
.pk-details summary:hover{color:var(--accent-2);}
.pk-total dl,#pk-ladder{display:grid;gap:0;}
#pk-ladder > div{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:11px 0;border-bottom:1px solid var(--line-dark);font-size:14px;color:var(--text-d2);}
#pk-ladder > div:last-child{border-bottom:0;border-top:1px solid rgb(47 191 131 / .35);margin-top:6px;padding-top:16px;}
#pk-ladder dt{margin:0;}
#pk-ladder dd{margin:0;font-variant-numeric:tabular-nums;font-weight:500;color:var(--text-d);text-align:right;}
#pk-ladder > div:last-child dt{font-size:16px;color:var(--text-d);font-weight:600;}
#pk-ladder > div:last-child dd{font-size:26px;font-weight:600;color:var(--accent-2);}
.pk-flag{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:rgb(255 200 60 / .14);color:#f0c74e;border:1px solid rgb(255 200 60 / .3);}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.tick{display:flex;align-items:center;gap:11px;font-size:14px;color:var(--text-d2);cursor:pointer;font-weight:400;}
.pk-entry input{font:inherit;font-size:14px;width:100%;padding:9px 11px;border-radius:10px;background:rgb(255 255 255 / .05);border:1px solid var(--line-dark);color:var(--text-d);}
/* The entry table's inputs are form fields and must look like the rest of the
   form, not like a separate widget: same 3px corner, same hairline, same
   restrained focus (Saim 2026-08-28: "your fields need to be formatted the same
   way as the rest of the form not the rounded corners"). They kept a 10px
   radius because they live in a <td> rather than a .field. */
.apply .pk-entry input{
  border-radius:3px;background:rgb(255 255 255 / .04);
  border:1px solid rgb(255 255 255 / .13);transition:border-color .3s var(--ease),box-shadow .3s var(--ease);}
.apply .pk-entry input::placeholder{color:var(--text-d3);}
.apply .pk-entry input:focus-visible{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);background:rgb(255 255 255 / .06);}
/* The two money columns read as figures, right-aligned on tabular digits. */
.apply .pk-entry td.r input{text-align:right;font-variant-numeric:tabular-nums;}
/* Column heads match the form's label voice. */
.apply .pk-entry thead th{font-size:10.5px;letter-spacing:.08em;}
.pk-entry td{padding:6px 10px 6px 0;}
.btn-ghost{background:transparent;border:1px solid var(--line-dark);color:var(--text-d2);}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-2);}
.btn-sm{padding:9px 16px;font-size:13px;justify-self:start;}
@media (max-width:960px){.trio{grid-template-columns:1fr;}.apply .recap{position:static;}.pk-auto{padding:16px;}}
.split{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:56px;align-items:start;margin-top:40px;}
.recap{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px 18px;box-shadow:0 30px 60px -40px rgb(15 26 43 / .25);}
.recap h3{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding-bottom:12px;border-bottom:1px solid var(--line);}
.recap ul,.recap dl{list-style:none;margin:6px 0 0;padding:0;}
.recap li,.recap dl > div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink-2);}
.recap strong,.recap dd{font-weight:500;color:var(--ink);margin:0;text-align:right;}
.recap .foot{margin-top:14px;font-size:12.5px;color:var(--ink-3);line-height:1.5;}
form.stack{display:grid;gap:18px;align-content:start;max-width:40rem;}
.field{display:grid;gap:7px;}
.field label{font-size:13px;font-weight:600;color:var(--ink-2);}
.field .opt{color:var(--ink-3);font-weight:400;}
.field select,.field input,form.stack textarea{font:inherit;font-size:15px;color:var(--ink);padding:12px 14px;background:var(--white);border:1px solid #d3d9e3;border-radius:12px;width:100%;transition:border-color .3s var(--ease),box-shadow .3s var(--ease);}
form.stack textarea{resize:vertical;min-height:6rem;line-height:1.55;}
.field input::placeholder,form.stack textarea::placeholder{color:#98a3b3;}
.field select:focus-visible,.field input:focus-visible,form.stack textarea:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgb(47 191 131 / .18);}
[aria-invalid="true"]{border-color:#d9534f !important;}
.note{font-size:12.5px;color:var(--ink-3);line-height:1.5;}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
form.stack .btn-primary{justify-self:start;}
.formfoot{font-size:13px;color:var(--ink-3);max-width:56ch;line-height:1.5;}
form.stack fieldset{border:0;margin:0;padding:0;display:grid;gap:16px;}
form.stack legend{padding:0 0 10px;width:100%;font-size:16px;font-weight:600;border-bottom:1px solid var(--line);}
form.stack legend .opt{font-weight:400;color:var(--ink-3);font-size:13px;}
.checks{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);}
.checks li{border-bottom:1px solid var(--line);}
.checks label{display:flex;align-items:center;gap:12px;padding:11px 2px;font-size:15px;color:var(--ink-2);cursor:pointer;}
.checks input{appearance:none;-webkit-appearance:none;width:18px;height:18px;flex:none;border:1px solid #c5cdd9;border-radius:6px;background:var(--white);display:grid;place-content:center;cursor:pointer;transition:border-color .3s var(--ease),background-color .3s var(--ease);}
.checks input::before{content:"";width:8px;height:8px;border-radius:2px;transform:scale(0);background:var(--white);transition:transform .3s var(--ease);}
.checks input:checked{border-color:var(--accent-deep);background:var(--accent-deep);}
.checks input:checked::before{transform:scale(1);}
.checks label:hover{color:var(--ink);}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.status,.apply-status{font-size:14.5px;line-height:1.55;margin:0;}
.status:empty,.apply-status:empty{display:none;}
.status.err,.apply-status.err{color:#c8423c;}
.status.ok,.apply-status.ok{padding:14px 16px;border-radius:12px;background:rgb(47 191 131 / .12);border:1px solid rgb(47 191 131 / .35);color:#146b47;}

/* ── footer ─────────────────────────────────────────────────────────────── */
footer{background:#070f1c;color:var(--text-d3);}
.foot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:64px;padding-top:72px;padding-bottom:56px;font-size:13.5px;line-height:1.6;}
.foot .b{display:flex;align-items:center;gap:12px;color:var(--text-d);font-weight:600;letter-spacing:.06em;margin-bottom:10px;font-size:calc(var(--mark-h) * 1.2);line-height:1;}
.foot .b sup{font-size:.30em;top:-.7em;position:relative;font-weight:400;}
.outro{position:relative;overflow:hidden;text-align:center;padding:110px var(--gutter) 40px;background:radial-gradient(900px 420px at 50% 120%,rgb(59 125 224 / .5),transparent 65%),radial-gradient(500px 300px at 50% 130%,rgb(47 191 131 / .35),transparent 60%);}
.outro .serif{font-size:44px;color:var(--text-d);max-width:30ch;margin:0 auto;}
.outro .copy{margin-top:56px;font-size:12.5px;color:var(--text-d3);}

/* ── stack below 960 ────────────────────────────────────────────────────── */
/* Project site (address <-> APN lookup) — sits above the sliders in the dark card. */
.site-block{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding-bottom:16px;border-bottom:1px solid var(--line-dark);
  border-radius:12px;transition:background-color .5s var(--ease),box-shadow .5s var(--ease);}
/* Until a site is set the calculator is running on a placeholder fee, so this
   block asks to be filled: a tinted ground, a soft ring, and a Start Here pill
   that breathes. The moment a parcel resolves it all drops away. */
.site-block.is-empty{
  background:rgb(47 191 131 / .07);
  box-shadow:0 0 0 1px rgb(94 227 168 / .35), 0 0 26px -6px rgb(47 191 131 / .35);
  padding:14px 14px 16px;margin:-6px -14px 0;
}
.site-flagpill{display:none;margin-left:9px;padding:3px 9px;border-radius:999px;
  font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-ink);background:var(--accent-2);vertical-align:2px;}
.site-block.is-empty .site-flagpill{display:inline-block;animation:sitepulse 2.4s ease-in-out infinite;}
.site-block.is-empty input::placeholder{color:rgb(226 240 232 / .6);}
@keyframes sitepulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.site-block.is-empty .site-flagpill{animation:none;}} /* minmax(0,…): an auto track would grow to the rate table's content and overflow the column */
.site-hint{font-size:11.5px;color:var(--text-d3);text-align:right;max-width:36ch;line-height:1.4;}
.site-hint.found{color:var(--accent-2);}
.site-fields{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:10px;}
.lookup{position:relative;}
.lookup input{width:100%;font:inherit;font-size:14px;padding:9px 12px;border:1px solid var(--line-dark);border-radius:9px;background:rgb(0 0 0 / .25);color:var(--text-d);transition:border-color .3s var(--ease);}
.lookup input::placeholder{color:var(--text-d3);}
.lookup input:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgb(47 191 131 / .18);}
#in-apn{font-family:var(--mono);font-variant-numeric:tabular-nums;}
.lookup-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;margin:0;padding:6px 0;list-style:none;max-height:280px;overflow:auto;background:#0b1728;border:1px solid var(--line-dark);border-radius:12px;box-shadow:0 24px 60px -20px rgb(0 0 0 / .7);}
.lookup-list li{padding:9px 13px;cursor:pointer;display:grid;gap:2px;font-size:14px;line-height:1.35;color:var(--text-d);}
.lookup-list li b{font-weight:500;}
.lookup-list li span{font-size:12px;color:var(--text-d3);}
.lookup-list li[aria-selected="true"],.lookup-list li:hover{background:rgb(47 191 131 / .14);}
.lookup-list li[aria-selected="true"] b,.lookup-list li:hover b{color:var(--accent-2);}
.lookup-list li.empty{cursor:default;color:var(--text-d3);}
.site-rate{margin:0;font-size:12.5px;line-height:1.45;color:var(--text-d3);}
.site-rate.found{color:var(--text-d);}
.site-rate.found::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:8px;vertical-align:1px;}
.fig[hidden],.taxnote[hidden]{display:none;} /* a display rule on .fig would otherwise beat the hidden attribute */
.taxnote{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--text-d3);}
.fees-block{gap:8px;}
.fee-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:9px;}
.fees-block select,.fees-block select:focus-visible,.fee-size{margin-top:4px;}
.fee-status{margin:1px 0 0;font-size:12.5px;line-height:1.45;color:var(--text-d3);}
.fee-status.found{color:var(--text-d);}
.fee-status.found::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:8px;vertical-align:1px;}
.fee-items{margin:0;min-width:0;font-size:13px;color:var(--text-d3);}
.fee-items summary{cursor:pointer;color:var(--accent-2);list-style:none;display:inline-block;padding:2px 0;}
.fee-items summary::-webkit-details-marker{display:none;}
.fee-items summary::after{content:"\2193";margin-left:6px;font-size:11px;}
.fee-items[open] summary::after{content:"\2191";}
.fee-items > div{margin-top:8px;padding:10px 12px;border:1px solid var(--line-dark);border-radius:10px;background:rgb(0 0 0 / .25);min-width:0;overflow:hidden;}
.fee-table{width:100%;min-width:0;border-collapse:collapse;table-layout:fixed;font-size:12.5px;}
.fee-table td{padding:4px 0 !important;border-bottom:0;vertical-align:top;line-height:1.35;color:var(--text-d);overflow-wrap:anywhere;}
.fee-table td.num{text-align:right;white-space:nowrap;width:6.5em;padding-left:12px;font-family:var(--mono);font-variant-numeric:tabular-nums;}
.fee-table td.tag{width:5.5em;text-align:right;color:var(--text-d3);font-size:11px;}
.fee-table tr + tr td{border-top:1px solid rgb(255 255 255 / .06);}
.fee-table tr.fee-total td{border-top:1px solid var(--line-dark);padding-top:7px;font-weight:600;}
.fee-src{margin:10px 0 0;color:var(--text-d3);font-size:12px;line-height:1.45;}
.fee-manual{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-d3);margin-top:2px;}
#in-fees[hidden]{display:none;}
@media (max-width:640px){
  /* the full-size lockup plus the Apply button overflows a phone; shrink the
     whole lockup, keeping Dennis's mark:wordmark ratio intact */
  .brand,.foot .b{--mark-h:26px;}
  .brand .mark,.foot .b .mark{width:40px;}
  .lockup{height:calc(var(--mark-h) * 1.08);}
  .logo-plate{padding:4px 8px 3px;}
  /* apply.html's bar carries the lockup AND a long "Back To The Model" button:
     170 + 32 + 189 does not fit 390px, and it overflowed by 3px even before the
     lockup grew. Let the bar wrap on phones rather than shrink the wordmark. */
  .nav-in .btn{font-size:13px;padding-inline:14px;}
  .nav-in{flex-wrap:wrap;gap:12px;}
  .nav{height:auto;min-height:var(--nav);}
.fee-grid{grid-template-columns:1fr;}}
.site-flag{margin:6px 0 0;font-size:12.5px;line-height:1.45;color:var(--gold, #d4a855);}
/* The jurisdiction the address resolved to. Same family as the tax-rate line —
   both are facts the address decided, so they read as one block. */
.site-jur{margin:0;font-size:12.5px;line-height:1.45;color:var(--text-d3);}
.site-jur span{color:var(--text-d3);}   /* the label stays quiet, the name reads */
.site-jur.found{color:var(--text-d);}
.site-jur.found::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:8px;vertical-align:1px;}
@media (max-width:640px){.site-fields{grid-template-columns:1fr;}}
@media (max-width:960px){
  :root{--gutter:20px;}
  .section{padding:72px 0;}
  .model-sec{padding:72px 0 64px;}
  .section h2.serif,.section > .wrap > h2{font-size:34px;}
  .nav nav{display:none;}
  .hero{padding:48px 0 150px;} /* room between the last milestone and the model card that straddles the edge */
  .hero-grid,.model-grid,.caps-grid,.obl-grid,.legal-card,.split,.pair,.foot{grid-template-columns:minmax(0,1fr);}
  .hero h1{font-size:32px;max-width:none;}
  .rail{grid-template-columns:minmax(0,1fr);gap:26px;}
  .rail::before{left:16px;right:auto;top:16px;bottom:16px;width:1px;height:auto;background:linear-gradient(180deg,rgb(110 163 242 / .55),rgb(255 255 255 / .22) 55%,rgb(94 227 168 / .85));}
  .step{padding:0 0 0 48px;text-align:left;}
  .node{position:absolute;left:0;top:0;margin:0;}
  .step h3{margin-top:5px;min-height:0;display:block;}
  .step p{max-width:none;margin-left:0;}
  .model{padding:20px 16px 22px;}
  .model-head{flex-direction:column;align-items:flex-start;gap:8px;}
  .model-note{text-align:left;}
  /* "Project Site" broke over two lines fighting its hint for the row. Stack them. */
  .site-block .ctrl-row{flex-direction:column;align-items:flex-start;gap:3px;}
  .site-hint{text-align:left;max-width:none;}
  .results{border-left:0;padding-left:0;border-top:1px solid var(--line-dark);padding-top:24px;}
  .fig-major dd{font-size:34px;}
  .legal-card,.cta-card{padding:32px 24px;}
  .cta-copy h2,.outro .serif{font-size:32px;}
  .obligation .arc{display:none;}
}


/* ── application packet fixes, found by rendering it (2026-08-28) ──────────── */
/* [hidden] loses to display:grid/flex on the same element, so the owner block and
   the delinquency explanation were both visible while switched off. */
/* [hidden] must beat display:grid/flex anywhere on the page, not just in the
   application — the fee-grid dropdowns stayed on screen without this. */
[hidden]{display:none !important;}
/* The aside was collapsing: minmax(0,320px) lets the first column shrink toward
   zero once the form beside it is wide, which wrapped the recap to a few
   characters per line. Give it a real width. */
.apply .split{grid-template-columns:320px minmax(0,1fr);gap:48px;}
/* A checkbox is not a text input: the shared field rule was stretching it to the
   full row with 12px of padding, which pushed its label to the far right. */
.field input[type=checkbox],.field input[type=radio]{width:auto;padding:0;flex:0 0 auto;accent-color:var(--accent);}
.apply .field label.tick{justify-content:flex-start;font-weight:400;}
.apply .field input[type=month]{color-scheme:dark;}
@media (max-width:960px){.apply .split{grid-template-columns:1fr;gap:28px;}}
/* .foot is the site footer's two-column grid; the recap's own footnote carries the
   same class and was inheriting it — a 64px gap and 72px of top padding inside a
   320px card, which wrapped the sentence to a few words per line. */
.recap .foot{display:block;padding:0;gap:0;}
/* A grid/flex child will not shrink below its content unless told to, so the wide
   packet tables were pushing the whole page into horizontal scroll on a phone.
   Let the columns shrink, and let a table scroll inside its own block instead. */
.apply .split > form.stack{min-width:0;}
.pk-auto,.pk-block{min-width:0;}
.pk-block{overflow-x:auto;}
form.stack fieldset{min-width:0;}
form.stack fieldset:has(.pk-entry){overflow-x:auto;}
@media (max-width:760px){
  .pk-tbl{min-width:540px;}
  .pk-block h4,.pk-note,.pk-details{position:sticky;left:0;}
}
.ctrl-lbl{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-d2);}

/* The project type control on the calculator (Saim 2026-08-28: options exactly as
   the INS-203 application prints them). Styled like the rest of the dark card
   rather than a raw browser select. */
.ctrl > select{font:inherit;font-size:13.5px;width:100%;padding:9px 12px;border-radius:9px;
  background:rgb(255 255 255 / .05);border:1px solid var(--line-dark);color:var(--text-d);
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-d3) 50%),linear-gradient(135deg,var(--text-d3) 50%,transparent 50%);
  background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;}
.ctrl > select:hover{border-color:rgb(255 255 255 / .2);}
.ctrl > select option{background:var(--navy-2);color:var(--text-d);}
/* A long assumption value (the jurisdiction's valuation source) was squeezing its
   label into a one-word column. Let the VALUE wrap inside its own column instead,
   so short rows stay on one line exactly as before. */
.arow > span{flex:1 1 auto;min-width:0;}
.arow b{white-space:normal;text-align:right;max-width:62%;}

/* ── The application reads as a filing, not a sign-up ──────────────────────
   Saim 2026-08-28: "its too clunky it looks like im signing up for some
   advertisement, these are institutional sophisticated housing developers".
   Consumer forms are round, roomy and glow on focus. A term sheet is square,
   dense and quiet. Three moves: square the corners and halve the padding,
   shrink labels to tracked small caps so the ANSWER is the loudest thing in
   each field, and replace the 4px accent glow with a hairline.
   The On File panel also stops eating 376px of permanent width (320 + 56 gap)
   — it becomes a masthead strip across the top and the form takes the page. */
.apply .split{grid-template-columns:minmax(0,1fr);gap:26px;}
.apply .recap{position:static;border-radius:4px;padding:0;background:transparent;box-shadow:none;border:0;border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);}
.apply .recap h3{padding:14px 0 0;border-bottom:0;font-size:10px;letter-spacing:.14em;}
.apply .recap dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:0;margin:10px 0 0;}
.apply .recap dl > div{display:block;padding:10px 0 14px;border-bottom:0;}
.apply .recap dt{font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--text-d3);}
.apply .recap dd{margin-top:5px;text-align:left;font-size:15px;font-weight:500;color:var(--text-d);font-variant-numeric:tabular-nums;}
.apply .recap .foot{margin:0;padding:0 0 14px;font-size:11.5px;}

.apply form.stack{max-width:64rem;gap:22px;}
.apply fieldset{margin:0;}
.apply form.stack legend{font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--text-d3);padding-bottom:9px;width:100%;border-bottom:1px solid var(--line-dark);}
.apply .field{gap:5px;}
.apply .field label{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-d2);} /* text-d2 since 2026-09-07: 10.5px caps at text-d3 measured 4.1:1 on the card, under the 4.5 readability bar */
.apply .field .opt{text-transform:none;letter-spacing:0;font-weight:400;}
.apply .field select,.apply .field input,.apply form.stack textarea{
  font-size:14px;padding:9px 11px;border-radius:3px;
  background:rgb(255 255 255 / .04);border:1px solid rgb(255 255 255 / .13);color:var(--text-d);}
.apply .field select:focus-visible,.apply .field input:focus-visible,.apply form.stack textarea:focus-visible{
  border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);background:rgb(255 255 255 / .06);}
.apply .pair{gap:18px;}
/* A numbered clause, not a badge: square, hairline, no glow. */
.apply .pk-n{width:26px;height:26px;border-radius:3px;font-size:12px;background:transparent;border:1px solid rgb(255 255 255 / .22);color:var(--text-d2);box-shadow:none;}
.apply .pk-head-2 .pk-n{background:transparent;border-color:var(--accent);color:var(--accent-2);box-shadow:none;}
.apply .pk-head{gap:14px;padding-top:18px;}
.apply .pk-head h3{font-size:17px;letter-spacing:.01em;}
.apply .pk-head p{font-size:13px;margin-top:5px;}
.apply .field label.tick{font-size:13px;text-transform:none;letter-spacing:0;font-weight:400;color:var(--text-d2);}
@media (max-width:760px){ .apply .recap dl{grid-template-columns:repeat(auto-fit,minmax(126px,1fr));} }

/* ── On File: a ledger panel, not loose text ───────────────────────────────
   Saim 2026-08-28: "the top on file needs to not be so plain, box it or add
   color". Boxed, lifted off the navy, with an accent edge and hairline cell
   rules so it reads as the record it is. Colour is used once, on the edge —
   the figures stay white so they carry the weight. */
.apply .recap{
  border:1px solid rgb(255 255 255 / .12);border-left:2px solid var(--accent);
  border-radius:4px;background:rgb(255 255 255 / .04);padding:14px 20px 4px;}
.apply .recap h3{padding:0;color:var(--accent-2);letter-spacing:.15em;}
.apply .recap dl{gap:0;margin-top:12px;}
.apply .recap dl > div{padding:10px 22px 14px 0;margin-right:22px;border-right:1px solid rgb(255 255 255 / .08);min-width:0;}
.apply .recap dl > div:last-child{border-right:0;}
.apply .recap dd{font-size:15px;line-height:1.35;overflow-wrap:anywhere;}
.apply .recap .foot{padding-bottom:12px;border-top:1px solid rgb(255 255 255 / .08);padding-top:10px;}

/* ── The full schedule is the substance: make it look clickable ────────────
   Saim: "draw attention to this Preliminary fee schedule". It had become a
   muted line of small caps and read as a footnote. Now a bordered bar with the
   accent marker and an accent hover — restrained, but plainly a control. */
.apply .pk-details{border-top:0;padding-top:0;margin-top:16px;}
.apply .pk-details>summary{
  display:flex;align-items:center;gap:9px;padding:10px 13px;
  border:1px solid rgb(47 191 131 / .35);border-radius:3px;
  background:rgb(47 191 131 / .07);color:var(--accent-2);font-size:11.5px;
  transition:background .2s var(--ease),border-color .2s var(--ease);}
.apply .pk-details>summary:hover{background:rgb(47 191 131 / .13);border-color:var(--accent);color:var(--accent-2);}
.apply .pk-details>summary::before{content:"+";width:auto;font-size:14px;line-height:1;}
.apply .pk-details[open]>summary{margin-bottom:14px;}
.apply .pk-details>summary .cnt{margin-left:auto;color:var(--text-d3);font-weight:500;letter-spacing:.04em;}

/* A derived field is shown, not asked: no input affordance, no focus ring. */
.apply .field input[readonly]{background:transparent;border-color:rgb(255 255 255 / .09);color:var(--text-d2);cursor:default;}
.apply .field input[readonly]:focus-visible{border-color:rgb(255 255 255 / .09);box-shadow:none;}


/* ════════════════════════════════════════════════════════════════════════════
   v2 — Dennis's funnel (2026-08-30). Ten numbered stages on one page, the
   heavier levels (resources, eligibility) on their own. Everything below reuses
   the v1 shells and rhythm; only the funnel furniture is new.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── stage tags: the funnel's numbering, quieter than a pill ─────────────── */
.stage-tag{
  display:inline-flex;align-items:center;margin-bottom:16px;
  font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-deep);
}
.stage-tag::before{
  content:"";width:26px;height:1px;margin-right:12px;background:currentColor;opacity:.5;
}
.stage-tag.dark,.dark .stage-tag{color:var(--accent-2);}
.hero .stage-tag{color:var(--text-d2);}

/* A stage title that keeps its own section (only #screening-cta now: it is the
   sitewide Apply target and the section it introduces stays hidden until the
   user opens screening). It has to carry the band of what follows, or the card
   below butts straight into the lead. */
.stage-lead{padding-bottom:0;}
.stage-lead.tight{padding-top:96px;padding-bottom:0;}
.stage-lead.on-white{background:var(--white);padding-bottom:56px;}
.lead.wide{max-width:74ch;}
h2.serif.big{max-width:20ch;}

/* ── 02 solution ────────────────────────────────────────────────────────── */
.sol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:52px;}
.sol{padding:28px 26px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);}
.sol-n{display:block;font-weight:600;font-size:17px;color:var(--ink);margin-bottom:10px;letter-spacing:-.01em;}
.sol p{font-size:14.5px;line-height:1.65;color:var(--ink-2);}

/* ── 03 the sixty-second explainer ──────────────────────────────────────── */
.explain{background:linear-gradient(168deg,var(--navy) 0%,var(--navy-2) 55%,var(--navy-3) 100%);}
.dark-lead{color:var(--text-d2);}

/* ── 06 seven-stage rail ────────────────────────────────────────────────── */
.rail-7{grid-template-columns:repeat(7,1fr);}
.rail-6{grid-template-columns:repeat(6,1fr);}
.timeline .rail{margin-top:52px;}

/* ── 08 three-way comparison ────────────────────────────────────────────── */
table.cmp3 th[scope=row]{width:24%;}
table.cmp3 td{width:25.33%;}
.cmp-foot{margin-top:22px;font-size:13.5px;color:var(--ink-3);max-width:80ch;}

/* ── 09 developer resources ─────────────────────────────────────────────── */
.res-teaser{background:var(--paper-2);}
.res-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:48px;}
.res{
  display:block;padding:30px 28px;border-radius:var(--r-lg);text-decoration:none;
  border:1px solid var(--line);background:var(--white);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.res:hover{transform:translateY(-3px);border-color:var(--blue-3);box-shadow:0 18px 40px -28px rgb(21 58 91 / .45);}
.res-k{display:block;font-family:var(--serif);font-size:22px;color:var(--ink);margin-bottom:10px;}
.res p{font-size:14.5px;line-height:1.65;color:var(--ink-2);margin-bottom:16px;}
.res-go{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--blue);}
.res:hover .res-go .arr{transform:translateX(4px);}
.res-go .arr{transition:transform .35s var(--ease);}

/* ── inner pages (resources, eligibility) ───────────────────────────────── */
.page-hero{
  background:linear-gradient(168deg,var(--navy) 0%,var(--navy-2) 100%);
  color:var(--text-d);padding:64px 0 72px;
}
.page-hero h1{font-family:var(--serif);font-size:clamp(34px,4.4vw,54px);line-height:1.06;letter-spacing:-.02em;max-width:22ch;}
.page-hero p{margin-top:18px;font-size:17px;line-height:1.65;color:var(--text-d2);max-width:70ch;}
.doc{padding:76px 0;}
.doc h2{font-family:var(--serif);font-size:clamp(26px,3vw,36px);letter-spacing:-.02em;margin-bottom:14px;color:var(--ink);}
.doc h3{font-size:17px;font-weight:600;margin:26px 0 8px;color:var(--ink);}
.doc p,.doc li{font-size:15px;line-height:1.72;color:var(--ink-2);}
.doc ul,.doc ol{margin:10px 0 10px 22px;}
.doc li{margin-bottom:7px;}
.doc .block{padding:34px 0;border-top:1px solid var(--line);}
.doc .block:first-child{border-top:0;}
.qa{border-top:1px solid var(--line);}
.qa details{border-bottom:1px solid var(--line);}
.qa summary{
  cursor:pointer;list-style:none;padding:18px 0;font-size:16px;font-weight:600;color:var(--ink);
  display:flex;justify-content:space-between;gap:20px;align-items:center;
}
.qa summary::-webkit-details-marker{display:none;}
.qa summary::after{content:"+";font-weight:400;font-size:20px;color:var(--blue);}
.qa details[open] summary::after{content:"\2212";}
.qa details > div{padding:0 0 20px;max-width:80ch;}
.eligible{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:34px;}
.elig-card{padding:28px 26px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--white);}
.elig-card.yes{border-color:rgb(62 124 89 / .4);background:rgb(138 191 136 / .07);}
.elig-card h3{font-family:var(--serif);font-size:21px;margin-bottom:14px;color:var(--ink);}
.elig-card li{margin-bottom:9px;font-size:14.5px;}

@media (max-width:1080px){
  .sol-grid{grid-template-columns:1fr;}
  .res-grid{grid-template-columns:1fr;}
  .rail-7,.rail-6{grid-template-columns:repeat(2,1fr);}
  .eligible{grid-template-columns:1fr;}
}

/* the nav is sticky, so every anchor target needs to clear it */
section[id],div[id]{scroll-margin-top:calc(var(--nav) + 18px);}
.brand{gap:12px;}
.nav .wordmark{font-size:calc(var(--mark-h) * 1.2);}

/* Stage 05 is white and stage 06 was falling through to the page's own paper,
   which reads as the same surface (Saim 2026-08-31). Give 06 the blue-tinted
   paper the resources teaser already uses, and move the node halos onto it -
   they punch the rail line through, so they have to match the ground. */
.timeline{background:var(--paper-2);}
/* The funding rail was built inside the dark hero, so its type and nodes are
   light-on-dark. v2 lifts it out into its own light section (stage 06), which
   made the headings invisible and put a navy halo round every node. These are
   the light-ground equivalents — same rail, readable on paper. */
.timeline .rail::before{
  background:linear-gradient(90deg,var(--blue-3),var(--line) 55%,var(--accent-2));
}
.timeline .node{
  background:var(--white);border-color:var(--blue);color:var(--blue);
  box-shadow:0 0 0 5px var(--paper-2);
}
.timeline .step.last .node{
  background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:0 0 0 5px var(--paper-2),0 8px 24px rgb(62 124 89 / .35);
}
.timeline .step h3{color:var(--ink);}
.timeline .step p{color:var(--ink-2);}
/* seven across is tight at 1240px — trim the gutters and the type a little */
.timeline .step{padding:0 9px;}
.timeline .step h3{font-size:15px;}
.timeline .step p{font-size:13px;}
@media (max-width:1080px){
  .timeline .node{position:absolute;left:0;top:0;margin:0;box-shadow:none;}
  .timeline .step.last .node{box-shadow:none;}
}

/* ── the two routes (Dennis 2026-08-31) ─────────────────────────────────────
   The point of the section is the comparison, so it is drawn, not described:
   same fees, same agencies, different payer and different day. */
.routes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:44px;}
.route{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);padding:26px 24px 22px;}
.route-tag{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;margin-bottom:20px;}
.route-old .route-tag{color:var(--ink-2);background:rgb(15 23 42 / .06);}
.route-new .route-tag{color:#256b3e;background:rgb(122 181 106 / .18);}
.route-new{background:rgb(122 181 106 / .12);border-color:rgb(122 181 106 / .5);box-shadow:0 18px 40px -30px rgb(21 58 91 / .45);}
.route-new .route-flow li + li{border-top-color:rgb(122 181 106 / .3);}
.route-flow{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;}
.route-flow li{position:relative;padding:12px 0 12px 0;}
.route-flow li + li{border-top:1px solid var(--line);}
.route-flow b{display:block;font-size:16px;color:var(--ink);letter-spacing:-.01em;}
.route-flow span{display:block;font-size:13.5px;color:var(--ink-2);margin-top:3px;}
.route-out{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:14px;line-height:1.6;color:var(--ink-2);}
.route-new .route-out b{font-family:var(--mono);font-variant-numeric:tabular-nums;color:#256b3e;}
@media (max-width:860px){.routes{grid-template-columns:minmax(0,1fr);}}

/* Dennis wants numbers, diagrams and models to lead - not title, paragraph,
   title, paragraph. Only three beats keep a full serif title; every other
   section gets this compact line and lets the visual under it do the talking. */
/* must out-specify `.section > .wrap > h2 {font-size:44px}` above */
.sec-label,.section > .wrap > h2.sec-label,.section h2.sec-label{
  font-family:var(--sans);font-size:19px;font-weight:600;letter-spacing:-.015em;
  line-height:1.35;color:var(--ink);margin:0 0 4px;max-width:38ch;}
/* The light-mode rule above is `.section > .wrap > h2.sec-label` (0,3,1), which
   OUT-SPECIFIES a plain `.section.dark .sec-label` (0,3,0) — so both dark
   sections were painting their heading --ink #12314b on --navy #153a5b, a
   contrast ratio of about 1.1:1. Invisible (Saim 2026-08-31). The dark
   override has to mirror the same shapes to win. */
.dark .sec-label,.section.dark .sec-label,
.section.dark > .wrap > h2.sec-label,.section.dark h2.sec-label{color:var(--text-d);}
.sec-label + .routes,.sec-label + .caps-grid,.sec-label + .obl-grid{margin-top:36px;}

/* ── v3: the two-slider model (Saim 2026-09-02) ─────────────────────────────
   "Simplify the calculator, make it 2 sliders only ... make the calculator
   hover over the top hero and the 2nd hero in the middle." The card is the
   same block twice. Each copy is the first thing in a LIGHT section and pulls
   up over the empty bottom padding of the DARK band before it - the v1 straddle
   - so the title above it and the card can never fight for the same band. */
/* Trimmed 2026-09-02 so the card's top edge shows above the fold on a 1280x720
   laptop (it sat at 724px, just under it): 72/285 -> 60/245 puts it near 645px. */
/* clip sideways only: the map art overflows the hero, the card must hang out of its bottom */
.hero{padding-top:60px;padding-bottom:0;overflow-x:clip;overflow-y:visible;}
html,body{overflow-x:clip;}
/* Saim 2026-09-02: the card hangs about a sixth of its height over the next section */
.model-wrap{position:relative;z-index:2;margin-bottom:-84px;}
.model-wrap .model-shell{margin-top:56px;}

/* the card itself: two controls left, the number right */
.model-lite .model-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;margin-top:22px;}
.model-lite .controls{gap:24px;padding-top:4px;align-content:space-between;height:100%;}
.model-basis{margin:0;padding-top:14px;border-top:1px solid var(--line-dark);font-size:13px;color:var(--text-d3);display:flex;justify-content:space-between;gap:16px;}
.model-basis b{color:var(--text-d);font-weight:500;font-size:15px;}
.model-lite .fig-major{padding:4px 0 14px;}
.model-lite .fig-major dd{font-size:48px;}
.model-lite .binding{margin-top:14px;}
.recap .foot{margin-top:14px;font-size:12.5px;color:var(--ink-3);line-height:1.5;}
@media (max-width:960px){
  .hero{padding-bottom:0;}
  .model-wrap{margin-bottom:-56px;}
  /* one column on phones: two columns clipped the funding figure at 390px */
  .model-lite .model-grid{grid-template-columns:minmax(0,1fr);gap:28px;}
  .model-lite .controls{height:auto;}
  .model-wrap .model-shell{margin-top:32px;}
  .model-lite .fig-major dd{font-size:38px;}
}

/* ── "Run Your Project" glow (Saim 2026-09-02) ───────────────────────────────
   Any link to the calculator scrolls to it and runs this once: a soft
   Success-Green halo that swells and settles, drawn with a filter so the
   card's own border and shadow are untouched. */
@keyframes modelGlow{
  0%{filter:drop-shadow(0 0 0 rgb(138 191 136 / 0));}
  25%{filter:drop-shadow(0 0 26px rgb(138 191 136 / .95)) drop-shadow(0 0 70px rgb(138 191 136 / .55));}
  55%{filter:drop-shadow(0 0 18px rgb(138 191 136 / .7)) drop-shadow(0 0 50px rgb(138 191 136 / .35));}
  100%{filter:drop-shadow(0 0 0 rgb(138 191 136 / 0));}
}
.model-shell.is-glow{animation:modelGlow 2.6s cubic-bezier(.2,.7,.2,1) 1;}
@media (prefers-reduced-motion:reduce){.model-shell.is-glow{animation-duration:.01s;}}

/* ── How Funding Happens: three phases over seven stages (Saim's mockup 2026-09-02) ──
   Default (no JS / reduced motion) = the finished, lit state. motion.js adds .pre (dim)
   then .play (the ~15 s choreography) when the section scrolls into view. Colours: --ph
   per phase runs light green (1) to dark green (3); --a/--b colour each line segment. */
.phases{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);align-items:end;}
.phase{position:relative;text-align:center;padding:0 8px 34px;}
/* six stages since 2026-09-13 (Screening folded into Financing Request): 1-3, 4-5, 6 */
.phase-1{grid-column:1 / 4;} .phase-2{grid-column:4 / 6;} .phase-3{grid-column:6 / 7;}
.phase-num{display:inline-grid;place-items:center;width:22px;height:22px;margin-right:9px;border-radius:50%;background:var(--ph);color:#fff;font-size:12px;font-weight:600;vertical-align:middle;}
.phase-name{font-size:13.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);vertical-align:middle;}
.phase-desc{display:block;margin-top:6px;font-size:13px;color:var(--ink-2);}
.phase-bracket{position:absolute;bottom:0;height:16px;border-top:1.5px solid var(--ph);border-left:1.5px solid var(--ph);border-right:1.5px solid var(--ph);border-radius:6px 6px 0 0;}
.phase-1 .phase-bracket{left:calc(100% / 6);right:calc(100% / 6);}
.phase-2 .phase-bracket{left:25%;right:25%;}
.phase-3 .phase-bracket{left:50%;right:auto;width:0;border-top:0;border-right:0;border-radius:0;height:22px;}
/* phase 3 owns one narrow column: widen its box symmetrically so the title stays on one
   line, centred on node 7 (the bracket keeps its 50% centre because the margins match) */
.phase-3{margin-left:-58px;margin-right:-58px;padding-left:0;padding-right:0;}
.phase-3 .phase-name{white-space:nowrap;}
/* every phase block is the same height (two descriptor lines), so the three titles and the
   three brackets sit on the same lines whether a descriptor wraps or not */
.phase-desc{max-width:26ch;margin-left:auto;margin-right:auto;text-wrap:balance;min-height:2.6em;line-height:1.3;}
.timeline .rail{margin-top:22px;}
.timeline .rail::before{display:none;}
.timeline .step{overflow:visible;}
.timeline .step::after{content:"";position:absolute;top:15px;left:50%;width:100%;height:2px;background:var(--line);z-index:0;}
.timeline .step.last::after{display:none;}
.timeline .seg{position:absolute;top:15px;left:50%;width:100%;height:2px;background:linear-gradient(90deg,var(--a),var(--b));z-index:1;}
.timeline .node{position:relative;z-index:2;border-color:var(--ph);color:var(--ph);background:#fff;transition:none;}
.timeline .step.last .node{background:var(--ph);border-color:var(--ph);color:#fff;box-shadow:0 0 0 5px var(--paper-2),0 8px 28px rgb(47 95 68 / .45);}
/* dim state before play */
.timeline.pre .phase{opacity:0;}
.timeline.pre .step h3,.timeline.pre .step p{opacity:.32;}
.timeline.pre .node{border-color:var(--line);color:var(--ink-3);}
.timeline.pre .step.last .node{background:#fff;border-color:var(--line);color:var(--ink-3);box-shadow:none;}
.timeline.pre .seg{opacity:0;}
/* play */
.timeline.play .phase{animation:phaseIn 1.4s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s);}
.timeline.play .step h3,.timeline.play .step p{animation:textOn 1.2s ease both;animation-delay:var(--d,0s);}
.timeline.play .node{animation:nodeOn 1.2s ease both;animation-delay:var(--d,0s);}
.timeline.play .step.last .node{animation:nodeOnLast 1.4s ease both;animation-delay:var(--d,0s);}
.timeline.play .seg{animation:segOn 1.1s ease both;animation-delay:var(--ds,0s);}
@keyframes phaseIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@keyframes textOn{from{opacity:.32;}to{opacity:1;}}
@keyframes nodeOn{from{border-color:var(--line);color:var(--ink-3);transform:scale(1);}55%{transform:scale(1.16);}to{border-color:var(--ph);color:var(--ph);transform:scale(1);}}
@keyframes nodeOnLast{from{background:#fff;border-color:var(--line);color:var(--ink-3);box-shadow:none;transform:scale(1);}55%{transform:scale(1.2);}to{background:var(--ph);border-color:var(--ph);color:#fff;box-shadow:0 0 0 5px var(--paper-2),0 8px 28px rgb(47 95 68 / .45);transform:scale(1);}}
@keyframes segOn{from{opacity:0;}to{opacity:1;}}
@media (max-width:960px){
  .phases{display:none;}
  .timeline .rail{margin-top:52px;}
  .timeline .rail::before{display:block;}
  .timeline .rail-7,.timeline .rail-6{grid-template-columns:1fr;}
  .timeline .step{padding:0 0 0 48px;}
  .timeline .node{position:absolute;left:0;top:0;}
  .timeline .step::after,.timeline .seg{display:none;}
  .step.phase-start{margin-top:44px;}
  .step.phase-start::before{content:attr(data-phase);position:absolute;top:-30px;left:0;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ph);}
  .rail > .step.phase-start:first-child{margin-top:34px;}
}
@media (prefers-reduced-motion:reduce){.timeline.pre .phase,.timeline.pre .seg{opacity:1;}.timeline.pre .step h3,.timeline.pre .step p{opacity:1;}.timeline.play *{animation:none!important;}}

/* ── Request For Financing: progress bar, tighter checklist, uploads (Saim 2026-09-02) ── */
.progress{position:sticky;top:var(--nav);z-index:20;margin:0 0 26px;padding:12px 16px 12px;background:rgb(21 58 91 / .82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgb(255 255 255 / .14);border-radius:12px;}
.progress-in{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:8px;}
.progress-lbl{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-d2);}
.progress-pct{font-size:13px;color:var(--text-d);font-variant-numeric:tabular-nums;}
.progress-bar{height:6px;border-radius:999px;background:rgb(255 255 255 / .12);overflow:hidden;}
.progress-bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--accent-2),var(--accent));transition:width .45s cubic-bezier(.2,.7,.2,1);}
.progress.is-done .progress-bar i{box-shadow:0 0 14px rgb(138 191 136 / .7);}
.progress.is-done .progress-pct{color:var(--accent-2);}
.apply .checks{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;border-top:0;}
.apply .checks li{border-bottom:1px solid rgb(255 255 255 / .1);}
.apply .checks label{padding:7px 2px;font-size:14px;gap:10px;}
.upload{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;}
.upload-btn{cursor:pointer;}
.upload-hint{font-size:12.5px;color:var(--text-d3);}
.upload-list{list-style:none;margin:6px 0 0;padding:0;flex-basis:100%;display:grid;gap:4px;}
.upload-list li{display:flex;align-items:center;gap:10px;padding:6px 10px;border:1px solid rgb(255 255 255 / .14);border-radius:8px;background:rgb(255 255 255 / .04);font-size:13px;}
.upload-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-d);}
.upload-size{color:var(--text-d3);font-variant-numeric:tabular-nums;}
.upload-rm{border:0;background:none;color:var(--text-d3);font-size:18px;line-height:1;cursor:pointer;padding:0 2px;}
.upload-rm:hover{color:#fff;}
@media (max-width:640px){.apply .checks{grid-template-columns:1fr;}}

/* ── Obligation + How Funding Happens as ONE light section (Saim 2026-09-02): the card's
   light ground flows into it, then the dark Sixty Seconds section follows. ── */
.obligation{background:var(--paper-2);padding:160px 0 84px;}
.obligation .obl-copy h2.serif{color:var(--ink);}
.obligation .obl-copy .lead,.obligation .obl-copy .body{color:var(--ink-2);}
.obligation .timeline{background:none;padding:0;margin-top:56px;}
.obligation .timeline .stage-tag{color:var(--accent-deep);}
.obligation .timeline h2.sec-label{color:var(--ink);}
.obligation .phases{margin-top:36px;}
@media (max-width:960px){.obligation{padding:104px 0 64px;}.obligation .timeline{margin-top:40px;}}


/* closing card, smaller (Saim 2026-09-02: "way too big"); tagline removed */
.cta-sec{padding:64px 0 80px;}
.cta-card{padding:52px 32px;min-height:0;}
.cta-sec .cta-copy h2.serif{font-size:32px;margin-bottom:22px;}
@media (max-width:960px){.cta-card{padding:36px 22px;}.cta-sec .cta-copy h2.serif{font-size:26px;}}
/* footer outro without the tagline (Saim 2026-09-02: "way too big") */
.outro{padding:34px var(--gutter) 30px;}
.outro .copy{margin-top:0;}

/* hero: titles closer to their descriptors (Saim 2026-09-02) */
.hero .sub{margin-top:4px;}
.hero-sub2{margin-top:46px;}
.hero-sub2 p{margin-top:2px;}

/* footer closing strip: flat, no glow, and shorter (Saim 2026-09-02) */
.outro{background:none;padding:22px var(--gutter) 24px;border-top:1px solid rgb(255 255 255 / .08);}
.outro::before,.outro::after{display:none;}
footer > .wrap{padding-top:56px;padding-bottom:40px;}
/* the whole closing section wears the hero gradient (Saim 2026-09-02) */
footer{background:radial-gradient(900px 520px at 85% 10%, rgb(107 163 214 / .22), transparent 62%),radial-gradient(760px 520px at 8% 96%, rgb(62 124 181 / .2), transparent 62%),linear-gradient(165deg,#1b4a72 0%,var(--brand-navy) 52%,#245b88 100%);}
.foot{padding-top:52px;padding-bottom:36px;}
.outro{border-top:1px solid rgb(255 255 255 / .12);}
.outro .copy{color:var(--text-d2);}

/* the application page is thousands of pixels tall: pin the hero gradient to the viewport so
   every screenful looks like the hero instead of one gradient stretched thin (Saim 2026-09-02) */
.apply{background-attachment:fixed,fixed,fixed;background-size:auto,auto,100% 100vh;}
@media (max-width:960px){.apply{background-attachment:scroll,scroll,scroll;background-size:auto;}}
footer{background:radial-gradient(900px 520px at 85% 10%, rgb(107 163 214 / .30), transparent 62%),radial-gradient(760px 520px at 8% 96%, rgb(62 124 181 / .26), transparent 62%),linear-gradient(165deg,#1b4a72 0%,var(--brand-navy) 52%,#245b88 100%);}

/* ── Application categories (Saim 2026-09-03): collapsible, numbered, auto-advance ──
   The application is a DARK section (.section.dark.apply) and its fields keep the
   dark-theme colours (light text on translucent boxes), so the card behind them must
   be dark too. Shipped white on 09-03 by mistake: every field read as white-on-white
   ("the fields are all white, can't see anything" - Saim 2026-09-07). Same vocabulary
   as .apply .recap: 4% white fill, hairline border, square corners. */
.acc{border:1px solid var(--line-dark);border-radius:4px;background:rgb(255 255 255 / .04);overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease;}
.acc.is-open{border-color:var(--accent-2);box-shadow:0 20px 40px -30px rgb(0 0 0 / .7);}
.acc-head{margin:0;}
.acc-btn{display:flex;align-items:center;gap:14px;width:100%;padding:16px 18px;background:none;border:0;text-align:left;cursor:pointer;font:inherit;color:var(--text-d);}
.acc-btn:hover{background:rgb(255 255 255 / .04);}
.acc-num{flex:0 0 28px;height:28px;border-radius:3px;display:grid;place-items:center;font-size:13px;font-weight:700;background:rgb(255 255 255 / .08);border:1px solid rgb(255 255 255 / .18);color:var(--text-d2);}
.acc.is-open .acc-num{background:var(--accent);border-color:var(--accent);color:#fff;}
.acc.is-done .acc-num{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff;}
.acc-title{flex:1 1 auto;font-size:16px;font-weight:700;letter-spacing:.01em;color:var(--text-d);}
.acc-title .opt{font-weight:400;color:var(--text-d3);}
/* Mandatory fields (Saim 2026-09-15). Not colour alone: the word itself says Required. */
.field label .req{margin-left:8px;padding:1px 6px;border-radius:3px;font-size:9.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:#2a1f06;background:#e0b75f;vertical-align:middle;}
.req-legend{margin:0 0 2px;font-size:12px;color:var(--text-d3);}
.req-legend b{color:#e0b75f;font-weight:700;}
/* what the homeowner actually pays, per year and per month - the two figures a buyer reads (2026-09-15) */
.pk-tbl tbody td.strong{color:var(--text-d);font-weight:600;}
.pk-tbl tbody td.r.strong{font-size:15px;}
.acc-state{font-size:12px;font-weight:600;color:var(--accent-2);}
.acc.is-done .acc-state::before{content:"\2713\00a0 Complete";}
.acc-chev{flex:0 0 auto;width:10px;height:10px;border-right:2px solid var(--text-d3);border-bottom:2px solid var(--text-d3);transform:rotate(45deg);transition:transform .25s ease;margin-right:4px;}
.acc.is-open .acc-chev{transform:rotate(-135deg);}
.acc-body{padding:4px 18px 18px;display:grid;gap:16px;overflow:hidden;max-height:6000px;transition:max-height .35s ease,opacity .25s ease,padding .25s ease;}
.acc:not(.is-open) .acc-body{max-height:0;opacity:0;visibility:hidden;padding-top:0;padding-bottom:0;}
.acc-foot{display:flex;justify-content:flex-end;padding-top:4px;}
@media (prefers-reduced-motion:reduce){.acc-body,.acc-chev,.acc{transition:none;}}

/* The line-by-line schedule (Saim 2026-09-07, reworked 2026-09-15: "these 2 titles need to be a lot more
   prominent, also color their sections"). Two kinds of money that must never be confused: what INSITE can
   finance, and what the builder pays at the counter up front. So each group is a colour-banded block with a
   heading you cannot skim past, and the band carries an edge rule so it still reads without colour. */
.pk-sum{margin:0 0 4px;font-size:13px;color:var(--text-d2);padding:8px 0;}
.pk-sum .cnt{color:var(--text-d3);}
.pk-static>.pk-sum{cursor:default;}

/* Saim 2026-09-15: "the 2 titles are not noticeable they need to be very noticeable since they are 2
   sections" - so each heading is a SOLID band across the table, dark type on colour, not tinted text. */
.pk-group td{font-size:15px;font-weight:700;letter-spacing:.01em;text-transform:none;line-height:1.25;
  padding-top:13px;padding-bottom:12px;border-bottom:0;}
.pk-group td:first-child{padding-left:11px;border-radius:4px 0 0 4px;}
.pk-group td:last-child{border-radius:0 4px 4px 0;}
.pk-group td.r{font-size:17px;font-weight:700;}
.pk-group.elig+tr td,.pk-group.review+tr td,.pk-group.inel+tr td{border-top:0;}

.pk-group.elig td{background:#8abf88;color:#0b1f12;}
.pk-group.review td{background:#e0b75f;color:#2a1f06;}
.pk-group.inel td{background:#eda478;color:#2c1608;}

tr.pk-elig td{background:rgb(138 191 136 / .08);}
tr.pk-review td{background:rgb(224 183 95 / .07);}
tr.pk-inel td{background:rgb(237 164 120 / .08);color:var(--text-d2);}

/* No left edge rule: in the horizontally scrolling table it sat under the sticky first column and the
   text rode over it (Saim 2026-09-15: "its overlapping the side bar you put in, keep the colors i like
   that"). The band colour and the coloured heading carry the distinction on their own. */

tr.pk-elig td.c{color:var(--accent-2);font-weight:600;}
tr.pk-inel td.c{color:#eda478;font-weight:600;font-style:italic;}
tr.pk-review td.c{color:#e0b75f;font-weight:600;}

/* ── Logo without the white plate (Saim 2026-09-13: "im not feeling the white background behind insite logo everywhere").
   Dennis's logo has no reversed version and may not be recoloured (vault: INSITE — Logo), so instead of a white box on navy,
   the chrome it sits on is light on every page: a white header bar and a paper footer. The navy/green artwork sits straight. */
.nav,.on-slate .nav{background:rgb(255 255 255 / .97);border-bottom:1px solid #e4e1d9;-webkit-backdrop-filter:none;backdrop-filter:none;}
.logo-plate{background:transparent;padding:0;border-radius:0;}
.brand{--mark-h:32px;}
.nav nav a{color:#465262;}
.nav nav a:hover{color:#1a3e6c;}
footer,.on-slate footer{background:#f4f3ef;color:#6b727c;border-top:1px solid #e4e1d9;}
footer .foot p,footer p{color:#6b727c;}
.foot .b{--mark-h:30px;color:#15202c;}
.outro,footer .outro{border-top:1px solid #e4e1d9;background:none;}
.outro .copy{color:#6b727c;}
@media (max-width:960px){ .brand,.foot .b{--mark-h:24px;} }

/* ── Landing calculator, narrower and more compact (Saim 2026-09-13: "make the calculator less wide and bring it in make
   it smaller"). It was the full 1160px content width; now it is a centred card of at most 860px with tighter
   padding, a smaller headline figure, and the sliders close together instead of spread down the column. */
.model-wrap .model-shell{max-width:860px;margin-inline:auto;}
.model-wrap .model{padding:18px 22px 20px;}
.model-wrap .model-head{padding-bottom:12px;}
.model-wrap .model-head h2{font-size:22px;}
.model-wrap .model-head .eyebrow-pill{margin-bottom:7px;}
.model-wrap .model-lite .model-grid{gap:30px;margin-top:16px;}
.model-wrap .model-lite .controls{gap:20px;align-content:center;height:100%;}
.model-wrap .model-lite .fig-major{padding:2px 0 10px;}
.model-wrap .model-lite .fig-major dd{font-size:38px;}
.model-wrap .fig{padding:6px 0;}
.model-wrap .model-lite .binding{margin-top:10px;font-size:12px;}
.model-wrap .results .btn-wide{margin-top:12px;padding-top:11px;padding-bottom:11px;font-size:14px;}
@media (max-width:960px){
  .model-wrap .model-shell{max-width:none;}
  .model-wrap .model-lite .controls{height:auto;}
  .model-wrap .model-lite .fig-major dd{font-size:34px;}
}

/* "or see how it works" lives in the calculator's head now (Saim 2026-09-13), across from the title */
.model-head .model-how{align-self:flex-end;display:inline-flex;align-items:center;gap:6px;padding-bottom:3px;font-size:13.5px;color:var(--text-d2);text-decoration:none;border-bottom:1px solid rgb(255 255 255 / .25);white-space:nowrap;}
.model-head .model-how:hover{color:var(--text-d);border-bottom-color:rgb(255 255 255 / .6);}
@media (max-width:960px){ .model-head .model-how{align-self:flex-start;} }

/* The Structure, at the top of the Structure Memo (moved off the home page 2026-09-13). Scoped under .doc .block so the
   memo's own p/h3 rules don't flatten it. */
.doc .block .memo-glance{margin:22px 0 8px;padding:22px 24px 8px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:12px;background:#fff;}
.doc .block .memo-glance-k{margin:0;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep);}
.doc .block .memo-glance-h{margin:6px 0 0;font-family:var(--serif);font-size:24px;line-height:1.2;font-weight:500;color:var(--ink);}
.doc .block .memo-glance ol{list-style:none;margin:14px 0 0;padding:0;}
.doc .block .memo-glance li{display:grid;gap:3px;margin:0;padding:14px 0;border-top:1px solid var(--line);}
.doc .block .memo-glance .cite{font-family:var(--mono);font-size:12.5px;color:var(--accent-deep);}
.doc .block .memo-glance b{font-size:16px;font-weight:600;color:var(--ink);}
.doc .block .memo-glance li > span:last-child{font-size:14.5px;line-height:1.55;color:var(--ink-2);}

/* ── The whole transaction, four moves: ONE animation (Saim 2026-09-13) ──────────────────────────────────────────────
   Centred header, a two-way toggle with a sliding thumb, and a glass frame holding one stage. Both panels share the
   stage's single grid cell on one ground line: the old way (2 red steps, centred) and the new way (4 green steps).
   .st[data-way] says which is on; the other's steps are faded down and blurred, the risers shrunk to the ground.
   Leaving steps go first (quick, right to left), arriving steps rise after (left to right), then their outlines draw. */
.explain{position:relative;overflow:hidden;}
.explain::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgb(255 255 255 / .04) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255 / .04) 1px,transparent 1px);
  background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 58%,#000,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 58%,#000,transparent 75%);}
.explain::after{content:"";position:absolute;left:50%;top:58%;width:980px;height:560px;transform:translate(-50%,-50%);pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgb(138 191 136 / .16),transparent 72%);filter:blur(20px);transition:background 1.2s var(--ease);}
.explain:has(.st[data-way="old"])::after{background:radial-gradient(closest-side,rgb(224 115 106 / .15),transparent 72%);}
.explain > .wrap{position:relative;z-index:1;}

.st{--ease-out:cubic-bezier(.22,1,.36,1);}
.st-intro{text-align:center;max-width:640px;margin:0 auto;}
.st-intro h2.serif{margin:14px 0 0;font-size:clamp(30px,3.4vw,44px);line-height:1.08;letter-spacing:-.015em;color:#fff;text-wrap:balance;}
.st-intro p{margin:14px auto 0;max-width:46ch;font-size:16.5px;line-height:1.55;color:var(--text-d2);}

.st-head{display:flex;justify-content:center;margin:30px 0 26px;}
.st-tabs{position:relative;display:inline-grid;grid-template-columns:auto auto;padding:5px;border-radius:999px;background:rgb(255 255 255 / .05);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .12),0 20px 40px -24px rgb(4 20 38 / .8);}
.st-thumb{position:absolute;top:5px;bottom:5px;left:0;width:var(--tw,50%);transform:translateX(var(--tx,5px));border-radius:999px;
  background:rgb(138 191 136 / .2);box-shadow:inset 0 0 0 1px rgb(138 191 136 / .6),0 0 24px -4px rgb(138 191 136 / .45);
  transition:transform .6s var(--ease),width .6s var(--ease),background-color .6s var(--ease),box-shadow .6s var(--ease);}
.st[data-way="old"] .st-thumb{background:rgb(224 115 106 / .22);box-shadow:inset 0 0 0 1px rgb(224 115 106 / .65),0 0 24px -4px rgb(224 115 106 / .45);}
.st-tab{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:11px 22px;border:0;border-radius:999px;background:transparent;color:var(--text-d3);font:600 14px var(--sans);letter-spacing:.01em;cursor:pointer;transition:color .4s var(--ease);}
.st-tab::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.5;transition:background-color .4s,opacity .4s;}
.st-tab:hover{color:#fff;}
.st-tab:active{transform:translateY(1px);}
.st-tab:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px;}
.st-tab[aria-selected="true"]{color:#fff;}
.st-tab.is-old[aria-selected="true"]::before{background:var(--flag);opacity:1;}
.st-tab.is-new[aria-selected="true"]::before{background:var(--accent-2);opacity:1;}

/* the frame: a glass tray around the stage */
.st-frame{padding:6px;border-radius:30px;background:rgb(255 255 255 / .04);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .1);}
.st-core{border-radius:24px;background:linear-gradient(180deg,rgb(12 42 68 / .6),rgb(12 42 68 / .3));box-shadow:inset 0 1px 0 rgb(255 255 255 / .07);overflow:hidden;}
.st-stage{display:grid;padding:44px 40px 0;}
.st-panel{grid-area:1 / 1;align-self:end;min-width:0;}
.st-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px 18px 40px;border-top:1px solid rgb(255 255 255 / .06);background:rgb(255 255 255 / .02);}
.st-sums{display:grid;}
.st-sum{grid-area:1 / 1;margin:0;font:500 15px/1.4 var(--sans);transition:opacity .5s var(--ease),transform .5s var(--ease);}
.st-sum.is-old{color:#f3c1bb;} .st-sum.is-new{color:var(--accent-2);}
.st[data-way="old"] .st-sum.is-new,.st:not([data-way="old"]) .st-sum.is-old{opacity:0;transform:translateY(6px);}
.st[data-way="old"] .st-sum.is-old,.st:not([data-way="old"]) .st-sum.is-new{transition-delay:.9s;}
.st.is-pre .st-sum{opacity:0;}

/* stairs */
.st-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;position:relative;}
.st-steps-2{grid-template-columns:repeat(2,25%);justify-content:center;}
.st-steps::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgb(255 255 255 / .16);}
.st-step{--u:58px;--c:var(--accent-2);--fill:rgb(138 191 136 / calc(.05 + var(--h) * .035));display:flex;flex-direction:column;min-width:0;}
#st-old .st-step{--c:var(--flag);--fill:rgb(224 115 106 / calc(.06 + var(--h) * .04));}
.st-body{padding:0 22px 20px 0;max-width:280px;}
.st-step + .st-step .st-body{padding-left:20px;}
.st-n{display:block;font:500 28px/1 var(--serif);letter-spacing:-.02em;color:rgb(255 255 255 / .34);font-variant-numeric:tabular-nums;}
.st-ico{display:grid;place-items:center;width:40px;height:40px;margin:14px 0 12px;border-radius:12px;background:rgb(255 255 255 / .05);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .1);color:var(--c);}
.st-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.st-body h3{margin:0;font:600 17.5px/1.25 var(--sans);letter-spacing:-.015em;color:#fff;text-wrap:balance;}
.st-body p{margin:7px 0 0;font-size:14px;line-height:1.55;color:var(--text-d2);text-wrap:pretty;}
.st-riser{position:relative;height:calc(var(--h) * var(--u) + 24px);background:linear-gradient(180deg,var(--fill),rgb(255 255 255 / 0) 115%);transform-origin:bottom;}
.st-riser::before,.st-riser::after{content:"";position:absolute;left:0;background:var(--c);}
.st-riser::before{top:0;width:2px;height:var(--u);transform-origin:bottom;}
.st-step:first-child .st-riser::before{height:100%;}
.st-riser::after{top:0;right:0;height:2px;transform-origin:left;box-shadow:0 0 16px 0 var(--c);}
.st-fact{position:absolute;left:20px;right:12px;top:15px;display:flex;align-items:center;gap:8px;font:500 13px/1.3 var(--sans);color:var(--text-d);}
.st-step:first-child .st-fact{left:16px;}
.st-fact::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 0 4px rgb(138 191 136 / .14);}
#st-old .st-fact{color:#f6cdc8;}
#st-old .st-fact::before{box-shadow:0 0 0 4px rgb(224 115 106 / .16);}

/* on / off, and the choreography */
.st-step{transition:opacity .55s var(--ease-out),transform .8s var(--ease-out),filter .55s var(--ease-out);}
.st-riser{transition:transform .8s var(--ease-out);}
.st-riser::before{transition:transform .45s cubic-bezier(.5,0,.2,1);}
.st-riser::after{transition:transform .6s cubic-bezier(.45,0,.2,1);}
.st-fact{transition:opacity .5s var(--ease-out);}
/* off: the panel that is not showing (and everything before the first run) */
.st[data-way="old"] #st-new,.st:not([data-way="old"]) #st-old{pointer-events:none;}
.st[data-way="old"] #st-new .st-step,.st:not([data-way="old"]) #st-old .st-step,.st.is-pre .st-step{
  opacity:0;transform:translateY(26px);filter:blur(6px);transition-delay:calc((3 - var(--i)) * 60ms);}
.st[data-way="old"] #st-new .st-riser,.st:not([data-way="old"]) #st-old .st-riser,.st.is-pre .st-riser{transform:scaleY(.15);}
.st[data-way="old"] #st-new .st-riser::before,.st:not([data-way="old"]) #st-old .st-riser::before,.st.is-pre .st-riser::before{transform:scaleY(0);transition-duration:.2s;}
.st[data-way="old"] #st-new .st-riser::after,.st:not([data-way="old"]) #st-old .st-riser::after,.st.is-pre .st-riser::after{transform:scaleX(0);transition-duration:.2s;}
.st[data-way="old"] #st-new .st-fact,.st:not([data-way="old"]) #st-old .st-fact,.st.is-pre .st-fact{opacity:0;transition-duration:.2s;}
/* on: arrive after the other way has left, left to right */
.st[data-way="old"] #st-old .st-step,.st:not([data-way="old"]) #st-new .st-step{transition-delay:calc(.45s + var(--i) * 150ms);}
.st[data-way="old"] #st-old .st-riser,.st:not([data-way="old"]) #st-new .st-riser{transition-delay:calc(.5s + var(--i) * 150ms);}
.st[data-way="old"] #st-old .st-riser::before,.st:not([data-way="old"]) #st-new .st-riser::before{transition-delay:calc(1.05s + var(--i) * 150ms);}
.st[data-way="old"] #st-old .st-riser::after,.st:not([data-way="old"]) #st-new .st-riser::after{transition-delay:calc(1.35s + var(--i) * 150ms);}
.st[data-way="old"] #st-old .st-fact,.st:not([data-way="old"]) #st-new .st-fact{transition-delay:calc(1.6s + var(--i) * 150ms);}

.st-replay{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border:0;border-radius:999px;background:transparent;color:var(--text-d3);font:500 13px var(--sans);cursor:pointer;transition:color .2s,background-color .2s;}
.st-replay svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.st-replay:hover{color:#fff;background:rgb(255 255 255 / .06);}
.st-replay:active{transform:translateY(1px);}
.st-replay:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px;}

@media (max-width:1080px){
  .st-stage{padding:32px 24px 0;}
  .st-foot{padding-left:24px;}
  .st-step{--u:50px;}
  .st-body{padding-right:14px;}
  .st-step + .st-step .st-body{padding-left:14px;}
  .st-body h3{font-size:16px;}
  .st-body p{font-size:13.5px;}
  .st-fact{left:14px;font-size:12.5px;}
}
/* phones and small tablets: each step is a row whose riser is a bar growing 40 / 60 / 80 / 100% wide */
@media (max-width:820px){
  .st-intro h2.serif{font-size:30px;}
  .st-head{margin:24px 0 18px;}
  .st-tabs{width:100%;grid-template-columns:1fr 1fr;}
  .st-tab{padding:10px 8px;font-size:13px;}
  .st-frame{border-radius:24px;}
  .st-core{border-radius:19px;}
  .st-stage{padding:22px 18px 18px;}
  .st-panel{align-self:start;}
  #st-old{align-self:center;}
  .st-steps,.st-steps-2{grid-template-columns:minmax(0,1fr);gap:26px;justify-content:stretch;}
  .st-steps::after{display:none;}
  .st-step{position:relative;}
  .st-body,.st-step + .st-step .st-body{max-width:none;padding:0 0 12px;}
  .st-ico{position:absolute;margin:0;right:0;top:0;width:36px;height:36px;}
  .st-body h3{margin-top:10px;padding-right:48px;}
  .st-riser{height:42px;width:calc(20% + var(--h) * 20%);background:linear-gradient(90deg,var(--fill),rgb(255 255 255 / .01));transform-origin:left;}
  #st-old .st-riser{width:calc(40% + var(--h) * 20%);}
  .st-riser::before{height:100%;}
  .st-fact,.st-step:first-child .st-fact{left:14px;top:50%;transform:translateY(-50%);white-space:nowrap;}
  .st[data-way="old"] #st-new .st-riser,.st:not([data-way="old"]) #st-old .st-riser,.st.is-pre .st-riser{transform:scaleX(.1);}
  .st-foot{padding:12px 18px 10px;}
  .explain::after{width:600px;height:900px;}
}
@media (prefers-reduced-motion:reduce){.st-step,.st-riser,.st-riser::before,.st-riser::after,.st-fact,.st-sum,.st-thumb{transition:none !important;}}

/* ── Hero survey grid (Saim 2026-09-13). The floating notes and the facts row that came with it were removed the same
   day ("get rid of the floating cards in the top hero" / "get rid of this"). */
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgb(255 255 255 / .045) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255 / .045) 1px,transparent 1px);
  background-size:64px 64px;background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(ellipse 62% 70% at 72% 26%,#000 0%,transparent 72%);
          mask-image:radial-gradient(ellipse 62% 70% at 72% 26%,#000 0%,transparent 72%);}
.hero > .wrap{position:relative;z-index:1;}

/* ── Hero, shorter (Saim 2026-09-13: "the blue part doesnt need to be so long, shorten the height alot of dead space") ──
   less air above the headline, between the two statements, and above the calculator; the tract map is pulled up
   beside the headline and scaled a touch, and on phones it no longer needs its own tall block. */
.hero{padding-top:34px;}
.hero-copy{padding-top:6px;}
.hero-sub2{margin-top:26px;}
.model-wrap .model-shell{margin-top:30px;}
.pmap{margin-top:-18px;}
@media (max-width:960px){
  .hero{padding-top:26px;}
  .hero-copy{padding-top:0;}
  .hero-sub2{margin-top:20px;}
  .hero-grid{gap:0;}
  .hero-art{margin-top:-28px;margin-bottom:-36px;}
  .model-wrap .model-shell{margin-top:12px;}
}

/* ── Hero type from v4 (Saim 2026-09-14: "i like this part - put this on v3" / "just like u have it same font same style
   in the top hero replacing what we have"). Fraunces for the two statements with each turn in italic green, Hanken
   Grotesk for the descriptors, the second statement set off by a green rule, and the headline's words rising out of a
   blur on load. The headline is sized so "Rethink permit fees." holds one line in the hero's left column at every
   desktop width. Replaces the uppercase Newsreader treatment above. ── */
.hero .hero-copy h1.hx-title{font-family:"Fraunces","Iowan Old Style",Georgia,serif;font-optical-sizing:auto;font-variation-settings:normal;font-weight:450;font-size:clamp(38px,4.6vw,62px);line-height:1.04;letter-spacing:-.012em;text-transform:none;color:#fff;max-width:none;}
.hero .hero-copy h1.hx-title .hx-turn{display:block;font-style:italic;color:#8abf88;}
.hero .hero-copy .hx-sub{font-family:"Hanken Grotesk","Segoe UI",system-ui,sans-serif;margin-top:22px;font-size:19px;line-height:1.62;color:#c2d6e8;max-width:46ch;}
.hero .hero-copy .hx-sub2{margin-top:36px;padding-left:20px;border-left:2px solid rgb(138 191 136 / .6);}
.hero .hero-copy .hx-sub2 h2{font-family:"Fraunces","Iowan Old Style",Georgia,serif;font-optical-sizing:auto;font-variation-settings:normal;font-weight:450;font-size:clamp(24px,2.3vw,30px);line-height:1.25;letter-spacing:-.01em;text-transform:none;color:#fff;}
.hero .hero-copy .hx-sub2 h2 .hx-turn2{font-style:italic;color:#8abf88;}
.hero .hero-copy .hx-sub2 p{font-family:"Hanken Grotesk","Segoe UI",system-ui,sans-serif;margin-top:8px;font-size:16.5px;line-height:1.62;color:#93b2cd;max-width:48ch;}
.hx-w{display:inline-block;}
@keyframes hxRise{from{opacity:0;transform:translateY(18px);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes hxUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .hx-w{animation:hxRise .8s cubic-bezier(.22,1,.36,1) both;animation-delay:var(--d,0s);}
  .hero .hero-copy .hx-sub{animation:hxUp .8s cubic-bezier(.22,1,.36,1) .55s both;}
  .hero .hero-copy .hx-sub2{animation:hxUp .9s cubic-bezier(.22,1,.36,1) .8s both;}
}
@media (max-width:960px){
  .hero .hero-copy h1.hx-title{font-size:clamp(36px,9.6vw,54px);}
  .hero .hero-copy .hx-sub{font-size:17px;margin-top:16px;}
  .hero .hero-copy .hx-sub2{margin-top:24px;padding-left:16px;}
  .hero .hero-copy .hx-sub2 h2{font-size:23px;}
  .hero .hero-copy .hx-sub2 p{font-size:15.5px;}
}