/* lotmara. Layout from the owner's dashboard reference (research/saas-idea-2026-11-02/design/v3, video-frames/). Bold type, no decorative dots. */
@font-face { font-family: Geist; src: url(/fonts/geist-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: Geist; src: url(/fonts/geist-600.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: Geist; src: url(/fonts/geist-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: Geist; src: url(/fonts/geist-800.woff2) format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url(/fonts/geist-mono-600.woff2) format('woff2'); font-weight: 600; font-display: swap; }

:root {
  /* Ink and blueprint (2 Nov 2026, replaced Spruce green at the owner's ask): near-black and soft grey like the owner's
     dashboard reference, one calm ink-blue accent. Why: docs/HANDOFF.md "Colour". */
  --canvas: #e8e9ec; --panel: #fbfbfc; --panel-2: #f0f1f3; --ink: #15171b; --muted: #61666f; --line: #dfe1e5;
  --hero: #14171d; --hero-ink: #eceef2; --hero-muted: #8d939e; --accent: #3a5bc7; --chip: #e3e8f6; --chip-ink: #2d47a0;
  --hi: #9cb1f7; --prop: #4d6de0; --halo: #1e222a;
  --mono: 'Geist Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--canvas); color: var(--ink); font: 500 16px/1.5 Geist, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.wrap { max-width: 720px; margin: 0 auto; padding: 0 16px; }

.wrap.wide { max-width: 1200px; }
/* .wrap's padding shorthand would cancel main's own top and bottom room. */
main.wrap { padding-top: 12px; padding-bottom: 36px; }
@media (min-width: 760px) { .wrap.wide { padding-left: 24px; padding-right: 24px; } }
@media (min-width: 1100px) { .wrap.wide { padding-left: 48px; padding-right: 48px; } }

/* Top bar on every page (front-page direction A, picked 3 Nov: docs/front-directions/). On a phone the pills drop to
   a second row inside the bar. */
.top { padding-top: 14px; }
.bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; background: var(--panel); border-radius: 18px; padding: 8px 8px 8px 10px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; text-decoration: none; margin-right: auto; }
.logo .mark { width: 34px; height: 34px; padding: 0; border-radius: 10px; background: var(--hero); color: #fff; display: grid; place-items: center; }
.mark-i { width: 18px; height: 18px; }
.pills { display: flex; gap: 4px; }
.pills a { font-weight: 700; font-size: 15px; padding: 8px 16px; border-radius: 999px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.pills a:hover { color: var(--ink); background: var(--panel-2); }
.pills a[aria-current] { background: var(--hero); color: #fff; }
.bar-cta { font: 700 15px Geist, sans-serif; border: 0; border-radius: 999px; padding: 9px 16px; margin-left: auto; background: var(--hero); color: #fff; text-decoration: none; white-space: nowrap; cursor: pointer; }
.pills a:focus-visible, .bar-cta:focus-visible, .logo:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (max-width: 719px) {
  .pills { order: 3; flex-basis: 100%; overflow-x: auto; scrollbar-width: none; padding-top: 6px; border-top: 1px solid var(--line); }
  .pills a { padding: 7px 12px; }
}

/* Home (direction A): hero with the sample plan, tool tiles, promises, guides and blog. */
.hero-a { display: grid; gap: 22px; }
.hero-a .intro { margin: 0; }
.cta { display: flex; flex-wrap: wrap; gap: 10px; }
.cta .primary { border-radius: 14px; }
.ghost-l { display: inline-flex; align-items: center; font: 700 16px Geist, sans-serif; padding: 13px 20px; border-radius: 14px; background: var(--panel); color: var(--ink); text-decoration: none; }
.small { font-size: 14px; color: var(--muted); margin-top: 12px; }
.small a { color: var(--muted); }
.card.panel h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.more { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 14px; color: var(--chip-ink); text-decoration: none; white-space: nowrap; }
.ar { width: 14px; height: 14px; flex: none; }
.bento { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.tile { background: var(--panel-2); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 4px; text-decoration: none; transition: background .2s ease; }
.tile:hover { background: var(--chip); }
.tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.tile .art { display: block; width: 72px; height: 50px; margin-bottom: 6px; color: var(--ink); }
.tile .art svg { display: block; width: 100%; height: 100%; }
.tile .ac { stroke: var(--accent); }
.tile b { font-weight: 800; line-height: 1.25; }
.tile span:last-child { color: var(--muted); font-size: 14px; }
.tile.t0 { grid-column: span 2; display: grid; grid-template-columns: 96px 1fr; gap: 2px 14px; align-items: center; }
.tile.t0 .art { grid-row: span 2; width: 96px; height: 66px; margin: 0; }
.prom { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 12px; }
.prom div { display: flex; flex-direction: column; }
.prom b { font-weight: 800; }
.prom span { color: var(--muted); font-size: 15px; }
.two { display: grid; gap: 12px; }
.rows { list-style: none; margin-top: 8px; }
.rows li { padding: 11px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; }
.rows li:first-child { border-top: 0; }
.rows a, .post a { font-weight: 700; text-decoration: none; }
.rows a:hover, .post a:hover { text-decoration: underline; }
.rows span { color: var(--muted); font-size: 15px; }
.post { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.post a { font-size: 18px; line-height: 1.3; }
.post span:last-child { color: var(--muted); font-size: 15px; }
.date { font: 600 13px var(--mono); color: var(--chip-ink); }
@media (min-width: 700px) { .prom { grid-template-columns: 1fr 1fr; gap: 18px 28px; } }
@media (min-width: 900px) {
  .hero-a { grid-template-columns: 1fr 1.05fr; align-items: center; margin: 12px 0 8px; }
  .bento { grid-template-columns: repeat(6, 1fr); }
  .tile { grid-column: span 2; }
  .tile.t0, .tile.t1 { grid-column: span 3; display: grid; grid-template-columns: 96px 1fr; gap: 2px 14px; align-items: center; }
  .tile.t0 .art, .tile.t1 .art { grid-row: span 2; width: 96px; height: 66px; margin: 0; }
  .prom { grid-template-columns: repeat(3, 1fr); gap: 20px 28px; }
  .two { grid-template-columns: 1fr 1fr; align-items: start; }
}

.intro h1 { font-size: clamp(35px, 7vw, 56px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.04; margin-top: 28px; }
.intro h1 span { color: var(--muted); }
.lede { font-size: 17px; color: var(--muted); margin-top: 14px; max-width: 34em; }

main { display: flex; flex-direction: column; gap: 12px; padding-bottom: 36px; }
.intro { margin-bottom: 12px; }
.lede + p { margin-top: 22px; }
.card { background: var(--panel); border-radius: 22px; padding: 20px 22px; }
.card h2 { font-size: 17px; font-weight: 700; }
.card p { margin-top: 8px; color: var(--muted); }
.hero { background: var(--hero); color: var(--hero-ink); }
.row { display: flex; align-items: center; gap: 8px; }
.k { font-size: 14px; font-weight: 600; color: var(--hero-muted); }
.chip { margin-left: auto; font: 600 12px var(--mono); background: var(--chip); color: var(--chip-ink); border-radius: 7px; padding: 3px 8px; }
.foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(127,127,127,.25); font-size: 14px; color: var(--hero-muted); }
.miniplan { border-radius: 16px; background: rgba(127,127,127,.12); margin-top: 14px; overflow: hidden; }

.checks { list-style: none; margin-top: 10px; }
.checks li { position: relative; padding: 7px 0 7px 30px; }
.checks li::before { content: ''; position: absolute; left: 0; top: 9px; width: 18px; height: 18px; border-radius: 6px; background: var(--chip) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%231f6e4f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }

.foot-site { font-size: 13px; color: var(--muted); padding-bottom: 32px; }
.foot-site p + p { margin-top: 6px; }

/* site plan drawing */
.plan { display: block; width: 100%; height: auto; }
.plan .ln { stroke: var(--ink); }
.plan .house { fill: var(--panel); stroke: var(--ink); }
.plan .drive { fill: var(--line); stroke: var(--ink); }
.plan .prop { fill: var(--accent); }
.plan .pl { stroke: var(--accent); }
.plan .street { fill: var(--line); }
.plan .hatch { stroke: var(--muted); }
.plan .north { fill: var(--ink); }
.plan text { fill: var(--ink); font: 600 10px var(--mono); }
.plan .label { font: 700 10px Geist, sans-serif; letter-spacing: .06em; }
.plan .muted { fill: var(--muted); }
.plan .pt { fill: var(--accent); }
.hero .plan .ln, .hero .plan .house, .hero .plan .drive { stroke: var(--hero-ink); }
.hero .plan .house { fill: transparent; }
.hero .plan .drive { fill: rgba(127,127,127,.2); }
.hero .plan .street { fill: rgba(127,127,127,.18); }
.hero .plan .hatch { stroke: var(--hero-muted); }
.hero .plan .north { fill: var(--hero-ink); }
.hero .plan text { fill: var(--hero-ink); }
.hero .plan .muted { fill: var(--hero-muted); }
.hero .plan .pt { fill: var(--hi); }
.hero .plan .prop { fill: var(--prop); }
.hero .plan .pl { stroke: var(--hi); }

/* lot finder (/plan/) */
.go { display: inline-block; margin-top: 4px; font-weight: 700; color: var(--chip-ink); }
.find label { display: block; font-weight: 700; font-size: 15px; }
.field { display: flex; gap: 8px; margin-top: 8px; }
.field input { flex: 1; min-width: 0; font: 600 17px Geist, sans-serif; padding: 12px 14px; border: 2px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); }
.field input:focus { outline: none; border-color: var(--accent); }
.field button { font: 700 16px Geist, sans-serif; padding: 0 18px; border: 0; border-radius: 14px; background: var(--hero); color: #fff; cursor: pointer; }
.sugg { display: flex; flex-direction: column; margin-top: 8px; border-radius: 14px; background: var(--panel-2); overflow: hidden; }
.sugg[hidden] { display: none; }
.sugg button { text-align: left; font: 600 16px Geist, sans-serif; padding: 11px 14px; border: 0; background: none; color: var(--ink); cursor: pointer; }
.sugg button + button { border-top: 1px solid var(--line); }
.sugg button:hover, .sugg button:focus { background: var(--chip); outline: none; }
.msg { margin-top: 10px; font-weight: 600; color: var(--ink); }
#result { display: flex; flex-direction: column; gap: 12px; }
#result[hidden] { display: none; }
.plan-card .k { color: var(--hero-ink); font-weight: 700; font-size: 15px; }
.plan .lotfill { fill: rgba(127,127,127,.10); }
.plan .bld { fill: rgba(236,238,242,.22); stroke: var(--hero-ink); stroke-width: 1; }
.plan .bld-g { fill: rgba(236,238,242,.12); stroke-dasharray: 4 3; }
.plan .bld.mine { fill: rgba(236,238,242,.55); stroke-width: 1.6; } /* the owner's building on a shared condo lot */
.plan .bar { fill: var(--ink); }
.hero .plan .bar { fill: var(--hero-ink); }
.plan .dim { font: 600 12px var(--mono); }
.hero .plan .dim { fill: var(--hero-muted); }
.hero .plan .dim.sv { fill: var(--hi); }
.tablewrap { overflow-x: auto; margin-top: 12px; }
.lines { width: 100%; border-collapse: collapse; font-size: 15px; }
.lines th, .lines td { text-align: left; padding: 8px 6px; border-top: 1px solid var(--line); vertical-align: middle; }
.lines thead th { border-top: 0; font-size: 13px; color: var(--muted); font-weight: 600; }
.lines tbody th { font-weight: 700; white-space: nowrap; }
.lines .num { font: 600 14px var(--mono); white-space: nowrap; }
.lines input { width: 6.5em; font: 600 15px var(--mono); padding: 8px 10px; border: 2px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); }
.lines input:focus { outline: none; border-color: var(--accent); }
.flag { font: 700 13px var(--mono); white-space: nowrap; }
.flag.ok { color: var(--chip-ink); }
.flag.warn { color: #a4461b; }
.facts { margin-top: 10px; }
.facts div { display: flex; gap: 12px; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--line); }
.facts div:first-child { border-top: 0; }
.facts dt { color: var(--muted); font-weight: 600; }
.facts dd { font-weight: 700; text-align: right; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 480px) { .facts div { flex-direction: column; gap: 2px; } .facts dd { text-align: left; } .lines th, .lines td { padding: 8px 4px; } }

/* editor: street areas, structure card, sheet preview */
.sugg button { display: flex; justify-content: space-between; gap: 12px; }
.sugg button span { font-weight: 600; font-size: 14px; color: var(--muted); }
.linkbtn { font: 700 14px Geist, sans-serif; color: var(--hi); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
#plan:focus-visible { outline: 3px solid var(--hi); outline-offset: 2px; }
.plan .drag { cursor: grab; touch-action: none; }
.hero .plan .prop { fill: var(--prop); fill-opacity: .85; stroke: var(--hero-ink); stroke-width: 1.2; }
.hero .plan .sb { fill: var(--hi); font-size: 10px; paint-order: stroke; stroke: var(--halo); stroke-width: 3px; stroke-linejoin: round; }
.card h3 { font-size: 15px; font-weight: 700; margin-top: 18px; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg span { display: block; font-weight: 700; font-size: 15px; padding: 8px 14px; border-radius: 999px; background: var(--panel-2); color: var(--ink); }
.seg input:checked + span { background: var(--hero); color: #fff; }
.seg input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.sizes { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; margin-top: 14px; }
.sizes label { font-weight: 700; }
.sizes small { display: block; font-weight: 600; font-size: 13px; color: var(--muted); }
.unit { font: 600 14px var(--mono); color: var(--muted); white-space: nowrap; }
.unit input, .setb input { width: 6em; font: 600 15px var(--mono); padding: 8px 10px; border: 2px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); }
.unit input:focus, .setb input:focus { outline: none; border-color: var(--accent); }
.setb td { font: 600 14px var(--mono); color: var(--muted); }
.setb tbody tr:first-child th, .setb tbody tr:first-child td { border-top: 0; }
.ghost, .primary { font: 700 15px Geist, sans-serif; border: 0; border-radius: 12px; padding: 10px 16px; cursor: pointer; }
.ghost { background: var(--panel-2); color: var(--ink); }
.primary { background: var(--hero); color: #fff; font-size: 16px; padding: 13px 20px; }
.msg.warn { color: #a4461b; }
.note { font-size: 14px; }
.buy { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.buy .ghost { font-size: 16px; padding: 13px 18px; }
#pay-msg { font-weight: 600; color: var(--ink); }
#pay-msg[hidden] { display: none; }
.sheet { margin-top: 12px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.sheet svg { display: block; width: 100%; height: auto; }

/* Toronto checklist page */
.checked { font: 600 13px var(--mono); color: var(--muted); margin-top: 12px; }
/* No bullet dots (owner: "dont add random dots"): rows split by lines instead. */
.plainlist { list-style: none; margin-top: 8px; }
.plainlist li { padding: 9px 0; border-top: 1px solid var(--line); }
.plainlist li:first-child { border-top: 0; }
.reqs { list-style: none; margin-top: 8px; counter-reset: req; }
.reqs li { padding: 12px 0; border-top: 1px solid var(--line); }
.reqs li:first-child { border-top: 0; }
.req-h { display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; }
.req-h b { font-weight: 700; }
.reqs p { margin-top: 4px; font-size: 15px; }
.mark { flex: none; width: max-content; font: 600 12px var(--mono); border-radius: 7px; padding: 3px 8px; white-space: nowrap; }
.mark-pdf { background: var(--chip); color: var(--chip-ink); }
.mark-part { background: #f3ead9; color: #7a4f12; }
.mark-you { background: var(--panel-2); color: var(--ink); }
.mark-no { background: #f6e3da; color: #8a3412; }
.clause { font: 600 12px var(--mono); color: var(--muted); white-space: nowrap; }
@media (max-width: 480px) { .req-h { flex-direction: column; gap: 6px; } }

/* driveway and parking on /plan/ */
.hero .plan .dw { fill: rgba(236,238,242,.10); stroke: var(--hero-ink); stroke-width: 1; stroke-dasharray: 5 3; cursor: ew-resize; touch-action: none; }
.hero .plan .dw-space { fill: none; stroke: var(--hero-muted); stroke-width: 1; stroke-dasharray: 2 2; pointer-events: none; }
.hero .plan .dw-t { fill: var(--hero-muted); font-size: 10px; pointer-events: none; }
.tick { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; font-weight: 700; cursor: pointer; }
.tick input { width: 20px; height: 20px; accent-color: var(--hero); }
#dw[hidden] { display: none; }

/* start questions (public/start.js): one question per screen over the home page, X to leave. Restyled 2 Nov 2026 from
   the home page's own parts: two-tone headline, the dark drawing card, mono measurements, answers as one list. */
.start-open { overflow: hidden; }
.start { position: fixed; inset: 0; z-index: 50; background: var(--canvas); display: flex; flex-direction: column; overflow-y: auto; opacity: 0; transition: opacity .32s ease; }
.start.on { opacity: 1; }
.st-top { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 12px; width: 100%; max-width: 560px; margin: 0 auto; padding: 14px 16px; background: var(--canvas); }
.st-icon { flex: none; width: 42px; height: 42px; border: 0; border-radius: 13px; background: var(--panel); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background .2s ease; }
.st-icon:hover { background: #fff; }
.st-icon:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.st-icon svg { width: 20px; height: 20px; }
.st-icon[hidden] { visibility: hidden; display: grid; }
.st-bar { flex: 1; height: 4px; border-radius: 4px; background: rgba(20,23,29,.10); overflow: hidden; }
.st-bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--hero); transition: width .7s cubic-bezier(.16,1,.3,1); }
.st-count { flex: none; min-width: 3.6em; text-align: right; font: 600 13px var(--mono); color: var(--muted); }
.st-body { flex: 1; display: flex; flex-direction: column; padding: clamp(12px, 6vh, 72px) 16px 40px; }
.st-step { width: 100%; max-width: 480px; margin: 0 auto; }
.st-step h2 { font-size: clamp(30px, 7.6vw, 40px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.06; outline: none; text-wrap: balance; }
.st-step h2 span { display: block; color: var(--muted); }
.st-p { margin-top: 14px; color: var(--muted); font-size: 16px; }
.st-small { margin-top: 14px; color: var(--muted); font-size: 14px; }

/* every screen rises in; its parts follow one after another (--i is set per element) */
.st-anim, .st-opt { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .6s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i, 0) * 70ms); }
.st-step.in .st-anim, .st-step.in .st-opt { opacity: 1; transform: none; }
.st-step.from-back .st-anim, .st-step.from-back .st-opt { transform: translateY(-14px); }
.st-step.in.from-back .st-anim, .st-step.in.from-back .st-opt { transform: none; }
.st-step.out .st-anim, .st-step.out .st-opt { opacity: 0; transform: translateY(-16px); transition-duration: .2s; transition-delay: 0s; }

/* answers: one panel of rows, like the editor's panels; the picked row fills dark */
.st-opts { display: flex; flex-direction: column; margin-top: 24px; padding: 6px; border-radius: 22px; background: var(--panel); }
.st-opt { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; text-align: left; border: 0; border-radius: 16px; background: transparent; color: var(--ink); padding: 12px 14px; font: inherit; cursor: pointer; }
.st-opt + .st-opt::before { content: ''; position: absolute; left: 14px; right: 14px; top: 0; border-top: 1px solid var(--line); transition: opacity .2s ease; }
.st-step.in .st-opt { transition: opacity .5s ease, transform .6s cubic-bezier(.16,1,.3,1), background .25s ease, color .25s ease; }
.st-opt:hover { background: var(--panel-2); }
.st-opt:hover::before, .st-opt:hover + .st-opt::before, .st-opt.picked::before, .st-opt.picked + .st-opt::before { opacity: 0; }
.st-opt:focus-visible { outline: 3px solid var(--accent); outline-offset: 0; }
.st-step.in .st-opt:active { transform: scale(.99); }
.st-fig { flex: none; width: 40px; height: 40px; color: var(--ink); transition: color .25s ease; }
.st-fig svg { display: block; width: 100%; height: 100%; }
.st-t { flex: 1; min-width: 0; }
.st-t b { display: block; font-weight: 700; font-size: 17px; }
.st-t small { display: block; margin-top: 1px; font-weight: 600; font-size: 14px; color: var(--muted); transition: color .25s ease; }
.st-m { flex: none; font: 600 13px var(--mono); color: var(--chip-ink); white-space: nowrap; transition: color .25s ease; }
.st-tick { flex: none; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; color: #fff; }
.st-tick svg { width: 15px; height: 15px; }
.st-tick path { stroke-width: 3; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .35s ease .08s; }
.st-opts .st-tick { width: 0; margin-left: -14px; overflow: hidden; transition: width .25s ease, margin .25s ease, background .25s ease; }
.st-opt.picked { background: var(--hero); color: var(--hero-ink); }
.st-opt.picked small { color: var(--hero-muted); }
.st-opt.picked .st-fig { color: var(--hi); }
.st-opt.picked .st-m { color: var(--hi); }
.st-opt.picked .st-tick { width: 24px; margin-left: 0; background: var(--accent); }
.st-opt.picked .st-tick path { stroke-dashoffset: 0; }
/* the size panel's last row: type your own size */
.st-own { flex-wrap: wrap; row-gap: 10px; cursor: default; }
.st-own:hover { background: transparent; }
.st-own:hover::before { opacity: 1; }
.st-nums { display: flex; align-items: flex-end; gap: 8px; width: 100%; }
.st-nums label { flex: 1; min-width: 0; }
.st-nums label span { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.st-nums input { width: 100%; font: 600 16px var(--mono); padding: 11px 12px; border: 2px solid transparent; border-radius: 12px; background: var(--panel-2); color: var(--ink); transition: border-color .2s ease; }
.st-nums input:focus { outline: none; border-color: var(--hero); background: #fff; }
.st-next { flex: none; font: 700 16px Geist, sans-serif; border: 0; border-radius: 12px; padding: 13px 18px; background: var(--hero); color: #fff; cursor: pointer; }
.st-next:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.st-own .st-msg { width: 100%; margin-top: 0; min-height: 0; font-size: 14px; }
.st-own .st-msg:empty { display: none; }
.st-own.picked .st-nums input { background: rgba(236,238,242,.1); color: var(--hero-ink); }
.st-own.picked .st-nums label span { color: var(--hero-muted); }

/* the dark drawing card (same as the home page's sample plan) */
.st-card { margin-top: 22px; border-radius: 22px; background: var(--hero); color: var(--hero-ink); padding: 16px 18px 18px; }
.st-card-h { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--hero-muted); }
.st-card-h .chip { margin-left: auto; }
.st-card-f { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(127,127,127,.25); font-size: 13px; color: var(--hero-muted); }
.st-plan { display: block; width: 100%; height: auto; margin-top: 12px; border-radius: 14px; background: rgba(127,127,127,.12); overflow: visible; }
.st-street { fill: rgba(127,127,127,.2); }
.st-hl { stroke: var(--hero-muted); stroke-width: 1; }
.st-hatched { fill: url(#st-hatch-s); opacity: 0; }
.st-l { fill: none; stroke: var(--hero-ink); stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.st-b { fill: rgba(236,238,242,.14); stroke: var(--hero-ink); stroke-width: 1; opacity: 0; }
.st-s { fill: var(--prop); stroke: var(--hero-ink); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.4); }
.st-d { opacity: 0; }
.st-d path { fill: none; stroke: var(--hi); stroke-width: 1; }
.st-d text { fill: var(--hi); font: 600 11px var(--mono); }
.st-step.in .st-l { animation: st-line 1.4s cubic-bezier(.65,0,.35,1) .2s forwards; }
.st-step.in .st-b { animation: st-fade .6s ease 1.1s forwards; }
.st-step.in .st-hatched { animation: st-half .6s ease 1.1s forwards; }
.st-step.in .st-s { animation: st-pop .7s cubic-bezier(.34,1.56,.64,1) 1.5s forwards; }
.st-step.in .st-d { animation: st-fade .5s ease 2s forwards; }
@keyframes st-line { to { stroke-dashoffset: 0; } }
@keyframes st-fade { to { opacity: 1; } }
@keyframes st-half { to { opacity: .5; } }
@keyframes st-pop { to { opacity: 1; transform: none; } }
.st-lines { list-style: none; margin-top: 14px; }
.st-lines li { display: flex; align-items: center; gap: 12px; padding: 10px 0; font-weight: 600; color: var(--muted); opacity: .35; transform: translateX(-6px); transition: opacity .4s ease, transform .5s cubic-bezier(.16,1,.3,1), color .3s ease; }
.st-lines li + li { border-top: 1px solid var(--line); }
.st-lines li.go { opacity: 1; transform: none; color: var(--ink); }
.st-lines .st-tick { background: var(--panel); color: var(--chip-ink); transition: background .3s ease; }
.st-lines li.ok .st-tick { background: var(--chip); }
.st-lines li.ok .st-tick path { stroke-dashoffset: 0; }

/* address */
.st-find { margin-top: 24px; }
.st-find input { width: 100%; font: 700 20px Geist, sans-serif; padding: 16px 18px; border: 2px solid transparent; border-radius: 18px; background: var(--panel); color: var(--ink); transition: border-color .2s ease; }
.st-find input:focus { outline: none; border-color: var(--hero); }
.st-sugg { display: flex; flex-direction: column; margin-top: 8px; padding: 6px; border-radius: 20px; background: var(--panel); }
.st-sugg[hidden] { display: none; }
.st-sugg button { display: flex; justify-content: space-between; gap: 12px; text-align: left; font: 700 17px Geist, sans-serif; padding: 12px 14px; border: 0; border-radius: 14px; background: none; color: var(--ink); cursor: pointer; }
.st-sugg button span { font: 600 13px var(--mono); color: var(--muted); align-self: center; }
.st-sugg button:hover, .st-sugg button:focus { background: var(--hero); color: var(--hero-ink); outline: none; }
.st-sugg button:hover span, .st-sugg button:focus span { color: var(--hi); }
.st-msg { margin-top: 10px; font-weight: 600; min-height: 1.5em; }

/* preview: their lot in the drawing card, then stat tiles like the editor's */
.st-pv-card .st-plan { max-height: 300px; }
.st-plan .st-b { fill: url(#st-hatch); }
.st-plan .st-b.mine { fill: rgba(236,238,242,.55); stroke-width: 1.6; }
.st-wm { pointer-events: none; }
#st-wm text { fill: var(--hero-ink); opacity: .1; font: 600 10px var(--mono); }
/* what the paid PDF adds over this preview */
.st-buy { margin-top: 16px; padding: 14px 16px 6px; border-radius: 18px; background: var(--panel); }
.st-buy-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-weight: 700; }
.st-buy-h b { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.st-buy ul { list-style: none; margin-top: 6px; }
.st-buy li { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 14px; font-weight: 600; }
.st-buy li + li { border-top: 1px solid var(--line); }
.st-buy .st-tick { width: 20px; height: 20px; border-radius: 7px; background: var(--chip); color: var(--chip-ink); }
.st-buy .st-tick svg { width: 13px; height: 13px; }
.st-buy .st-tick path { stroke-dashoffset: 0; }
.st-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.st-facts div { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; background: var(--panel); border-radius: 18px; padding: 12px 12px 12px 14px; }
.st-facts dt { font-size: 13px; font-weight: 600; color: var(--muted); }
.st-facts dd { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin: 4px 0 8px; overflow-wrap: anywhere; }
.st-facts dd small { font-size: 13px; font-weight: 700; margin-left: 2px; letter-spacing: 0; }
.st-facts .chip { margin: auto 0 0; font-size: 11px; }
.st-sub { margin-top: auto; font: 600 11px var(--mono); color: var(--muted); white-space: nowrap; }
.st-facts .dark .st-sub { color: var(--hi); }
.st-facts .chip.quiet { background: var(--panel-2); color: var(--muted); }
.st-facts .dark { background: var(--hero); color: var(--hero-ink); }
.st-facts .dark dt { color: var(--hero-muted); }
.st-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 20px; }
.st-go { display: inline-block; font: 700 17px Geist, sans-serif; text-decoration: none; padding: 15px 24px; border-radius: 16px; background: var(--hero); color: #fff; transition: transform .2s ease; }
.st-go:hover { transform: translateY(-1px); }
.st-ghost { font: 700 16px Geist, sans-serif; border: 0; border-radius: 16px; padding: 15px 20px; background: var(--panel); color: var(--ink); cursor: pointer; }
.st-price { flex-basis: 100%; color: var(--muted); font-size: 14px; }
.st-price b { color: var(--ink); }

/* computer view: the question sits in the middle of the screen at reading size; the preview goes side by side */
@media (min-width: 760px) {
  .st-top { padding-top: 22px; }
  .st-x { position: fixed; top: 22px; right: 24px; z-index: 2; }
  .st-body { padding: 24px 24px 56px; }
  .st-step { margin: auto; }
  .st-step h2 { font-size: 38px; }
  .st-step.st-wide { max-width: 880px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: "card head" "card facts" "card text"; grid-template-rows: auto auto 1fr; column-gap: 28px; align-items: start; }
  .st-wide .st-pv-h { grid-area: head; }
  .st-wide .st-pv-card { grid-area: card; margin-top: 0; }
  .st-wide .st-facts { grid-area: facts; margin-top: 18px; }
  .st-wide .st-pv-t { grid-area: text; }
  .st-wide h2 { font-size: 32px; }
}
@media (min-width: 760px) and (max-height: 720px) { .st-pv-card .st-plan { max-height: 240px; } }

@media (prefers-reduced-motion: reduce) {
  .start, .st-anim, .st-opt, .st-lines li, .st-bar i, .st-tick path, .st-opts .st-tick { transition: none !important; }
  .st-l, .st-b, .st-s, .st-d { animation: none !important; opacity: 1; transform: none; stroke-dashoffset: 0; }
  .st-hatched { animation: none !important; opacity: .5; }
}

/* Before-you-pay box on /plan/ (src/legal.mjs agreeBox): the disclosures, then the box the buyer must tick. */
.agree { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.agree h3 { margin-top: 0; }
.disclose { display: grid; grid-template-columns: 7.5em 1fr; gap: 6px 14px; font-size: 14px; margin-top: 10px; }
.disclose dt { color: var(--muted); font-weight: 600; }
.disclose dd { font-weight: 500; text-align: left; }
.agree-tick { align-items: flex-start; font-weight: 600; font-size: 15px; line-height: 1.45; margin-top: 14px; }
.agree-tick input { flex: none; margin-top: 2px; }
.foot-links a { color: var(--muted); }
@media (max-width: 480px) { .disclose { grid-template-columns: 1fr; gap: 2px; } .disclose dd { margin-bottom: 8px; } }

/* Free tools (src/tools.mjs): permit checker and lot size. */
.pq .tick { grid-column: 1 / -1; margin-top: 4px; font-weight: 600; }
.pq .unit input { width: 6.5em; font: 600 15px var(--mono); padding: 8px 10px; border: 2px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); }
.answer .verdict { color: var(--ink); font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 6px; }
.need-yes { border-left: 6px solid #a4461b; }
.need-no { border-left: 6px solid var(--accent); }
.need-ask { border-left: 6px solid var(--muted); }
.lotsvg { display: block; width: 100%; height: auto; }
.lotsvg polygon { fill: rgba(255,255,255,.07); stroke: var(--hero-ink); stroke-width: 1.6; stroke-linejoin: round; }
.lotsvg text { fill: var(--hero-ink); font: 600 11px var(--mono); }
.lotsvg .street { fill: var(--hero-muted); letter-spacing: .12em; }
.lotsvg polygon.mine { fill: rgba(236,238,242,.5); stroke-width: 1; }
.condo-note { color: var(--hero-ink); font-size: 14px; line-height: 1.45; margin: 10px 0 0; }
.facts dd small { display: block; color: var(--muted); font-weight: 500; font-size: 13px; }
.zlabel { font: 700 18px var(--mono); margin-top: 6px; }
.tools-list { list-style: none; margin-top: 8px; }
.tools-list li + li { margin-top: 10px; }
.tools-list a { font-weight: 700; }
.tools-list span { display: block; color: var(--muted); margin-top: 2px; }
/* Shown only after ?nocount=1 or ?nocount=0 (public/track.js). */
.optout-banner { background: var(--chip); color: var(--chip-ink); text-align: center; font-weight: 600; padding: 6px 16px; font-size: 14px; }