/* Plotlay: the page is a drawing set. Drafting film, blue ink, red markup. */
:root {
  --film: #f2efe6; --film-2: #ebe7da; --ink: #1d4f91; --ink-2: #163c6e; --ink-soft: rgba(29, 79, 145, .14);
  --text: #1f2a37; --muted: #5b6573; --red: #cf3b26; --rule: rgba(29, 79, 145, .35);
  --sans: 'IBM Plex Sans', system-ui, sans-serif; --cond: 'IBM Plex Sans Condensed', 'Arial Narrow', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace; --hand: 'Caveat', 'Bradley Hand', cursive;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--text); font: 16.5px/1.6 var(--sans); background: var(--film);
  /* faint 5 mm drafting grid */
  background-image: linear-gradient(var(--ink-soft) 1px, transparent 1px), linear-gradient(90deg, var(--ink-soft) 1px, transparent 1px);
  background-size: 22px 22px; background-attachment: fixed;
}
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(242, 239, 230, .2), rgba(242, 239, 230, .78) 60%); }
a { color: var(--ink); text-underline-offset: 3px; }
.mono { font-family: var(--mono); }
.small { font-size: 14px; color: var(--muted); }
h1, h2 { font-family: var(--cond); color: var(--ink-2); margin: 0; letter-spacing: -.01em; }
h2 { font-size: clamp(30px, 4.2vw, 46px); line-height: 1.05; font-weight: 700; margin-bottom: 30px; text-transform: uppercase; }

/* drawing border with zone references (fixed, like looking at one sheet) */
.frame { position: fixed; inset: 10px; border: 2px solid var(--ink); pointer-events: none; z-index: 5; }
.frame::after { content: ''; position: absolute; inset: 18px; border: 1px solid var(--rule); }
.ruler { position: absolute; display: flex; font: 600 11px var(--mono); color: var(--ink); }
.ruler.top { left: 18px; right: 18px; top: 0; height: 18px; }
.ruler.left { top: 18px; bottom: 18px; left: 0; width: 18px; flex-direction: column; }
.ruler span { flex: 1; display: flex; align-items: center; justify-content: center; }
.ruler.top span + span { border-left: 1px solid var(--rule); }
.ruler.left span + span { border-top: 1px solid var(--rule); }

.sheet { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 40px 56px 40px; }
section { position: relative; padding: 72px 0 84px; border-bottom: 1px solid var(--rule); }
.sheet-tag { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 26px; display: flex; align-items: center; gap: 10px; }
.sheet-tag b { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1.5px solid var(--ink); border-radius: 50%; color: var(--ink); font-size: 12px;
  background: linear-gradient(var(--ink), var(--ink)) center / 100% 1.5px no-repeat; line-height: 1; }
.sheet-tag b { background: none; }

/* masthead */
.masthead { display: flex; align-items: center; gap: 26px; padding: 14px 0; border-bottom: 2px solid var(--ink); position: sticky; top: 12px; z-index: 6;
  background: rgba(242, 239, 230, .97); box-shadow: 0 -14px 0 var(--film); backdrop-filter: blur(6px); margin: 0 -14px; padding-left: 14px; padding-right: 14px; }
.mark { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 700 22px var(--cond); color: var(--ink-2); text-transform: uppercase; letter-spacing: .02em; }
.mark img { border-radius: 7px; }
.register { display: flex; margin-left: auto; border: 1px solid var(--rule); }
.register a { text-decoration: none; color: var(--text); font: 500 13px var(--mono); padding: 7px 12px; text-transform: uppercase; letter-spacing: .04em; }
.register a + a { border-left: 1px solid var(--rule); }
.register a i { font-style: normal; color: var(--ink); margin-right: 6px; }
.register a:hover { background: var(--ink); color: var(--film); } .register a:hover i { color: var(--film); }
.open { font: 600 14px var(--mono); color: var(--film); background: var(--ink); text-decoration: none; padding: 9px 14px; text-transform: uppercase; letter-spacing: .04em; }
.open:hover { background: var(--red); }

/* 01 hero */
.hero { padding-top: 56px; }
.hero-grid { display: grid; grid-template-columns: 1fr 1.08fr; gap: 54px; align-items: center; }
.hero h1 { font-size: clamp(46px, 6.6vw, 86px); line-height: .94; font-weight: 700; text-transform: uppercase; }
.hero h1 u { text-decoration: none; position: relative; color: var(--red); }
.hero h1 u::after { content: ''; position: absolute; left: -2%; right: -4%; bottom: -.02em; height: .14em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C40 2 70 11 110 6 S170 3 198 7' fill='none' stroke='%23cf3b26' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.lede { font-size: 18.5px; margin: 26px 0 30px; max-width: 520px; }
.issue { display: flex; align-items: stretch; border: 2px solid var(--ink); max-width: 500px; background: #faf8f1; }
.issue label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink); padding: 0 12px; display: flex; align-items: center; border-right: 1px solid var(--rule); white-space: nowrap; }
.issue input { flex: 1; min-width: 0; border: 0; background: transparent; font: 16px var(--mono); padding: 14px 12px; color: var(--text); outline: none; }
.issue button { border: 0; background: var(--ink); color: var(--film); font: 600 15px var(--cond); text-transform: uppercase; letter-spacing: .06em; padding: 0 22px; cursor: pointer; }
.issue button:hover { background: var(--red); }
.issue button:disabled { opacity: .6; }
#signup-msg { margin-top: 12px; max-width: 500px; }
#signup-msg.ok { color: #1f6b3a; } #signup-msg.err { color: var(--red); }

/* the pinning demo */
.demo { position: relative; margin: 0; border: 2px solid var(--ink); background: #f8f6ef; box-shadow: 8px 8px 0 var(--ink-soft); }
.demo svg { display: block; width: 100%; height: auto; touch-action: none; }
.demo .road { stroke: #9aa3ad; stroke-width: 1.2; fill: none; }
.demo .kerb { stroke: #9aa3ad; stroke-width: .8; stroke-dasharray: 2 4; fill: none; }
.demo .road-name { font: 600 11px var(--mono); fill: #7b8591; text-anchor: middle; letter-spacing: .3em; }
.demo .lots path { fill: none; stroke: #7b8591; stroke-width: 1.3; stroke-dasharray: 10 3 2 3; }
.demo .lot { font: 600 13px var(--mono); fill: #7b8591; text-anchor: middle; }
.demo .roof { fill: rgba(123, 133, 145, .14); stroke: #7b8591; stroke-width: 1.1; }
.demo .target { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 4 3; }
.demo .trees circle { fill: none; stroke: #6f8f6a; stroke-width: 1.2; stroke-dasharray: 3 2; }
.demo .north path { fill: var(--ink); } .demo .north text { font: 600 11px var(--mono); fill: var(--ink); }
.plan { cursor: grab; }
.plan.dragging { cursor: grabbing; }
.plan .paper { fill: #fffef9; fill-opacity: .82; stroke: var(--ink); stroke-width: 2.4; }
.plan .walls { fill: none; stroke: var(--ink); stroke-width: 2.4; }
.plan .door { fill: none; stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 2; }
.plan text { font: 600 10px var(--mono); fill: var(--ink); letter-spacing: .04em; pointer-events: none; }
.plan .area { fill: var(--red); font-size: 10px; }
.plan .pins circle { fill: var(--red); stroke: #fff; stroke-width: 2; opacity: 0; transition: opacity .3s; }
.demo.done .plan .pins circle { opacity: 1; }
.demo.done .plan { cursor: default; }
.pinned { opacity: 0; transition: opacity .5s .25s; pointer-events: none; }
.demo.done .pinned { opacity: 1; }
.pinned .dim path { stroke: var(--red); stroke-width: 1.2; fill: none; }
.pinned text { font: 600 11px var(--mono); fill: var(--red); paint-order: stroke; stroke: #f8f6ef; stroke-width: 4px; stroke-linejoin: round; }
.pinned .res text { font-size: 10px; fill: var(--ink); }
.demo figcaption { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid var(--rule); padding: 9px 12px; font-size: 12px; color: var(--muted); }
.demo figcaption button { font: 600 12px var(--mono); color: var(--ink); background: none; border: 1px solid var(--ink); padding: 5px 10px; cursor: pointer; text-transform: uppercase; }
.demo figcaption button:hover { background: var(--ink); color: var(--film); }
.demo.done figcaption button { visibility: hidden; }
.stamp { position: absolute; right: 22px; bottom: 58px; border: 3px solid var(--red); color: var(--red); padding: 6px 12px; transform: rotate(-7deg) scale(1.6); opacity: 0;
  transition: transform .35s cubic-bezier(.2, 1.6, .5, 1), opacity .2s; font-family: var(--mono); text-align: center; background: rgba(248, 246, 239, .85); }
.stamp b { display: block; font-size: 22px; letter-spacing: .18em; }
.stamp span { font-size: 11px; }
.demo.done .stamp { opacity: 1; transform: rotate(-7deg) scale(1); }

.redline { font: 700 23px/1.1 var(--hand); color: var(--red); }
.note-drag { position: absolute; left: 22px; top: -38px; transform: rotate(-3deg); transition: opacity .3s; }
.demo.done .note-drag, .demo.moved .note-drag { opacity: 0; }

/* 02 schedule */
.schedule { width: 100%; border-collapse: collapse; border: 2px solid var(--ink); background: rgba(250, 248, 241, .9); }
.schedule th { font: 600 12px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--film); background: var(--ink); text-align: left; padding: 10px 14px; }
.schedule td { padding: 16px 14px; border-top: 1px solid var(--rule); vertical-align: top; }
.schedule td + td, .schedule th + th { border-left: 1px solid var(--rule); }
.schedule td b { font: 700 19px var(--cond); color: var(--ink-2); text-transform: uppercase; }
.schedule .mk { width: 64px; text-align: center; font: 600 15px var(--mono); color: var(--red); }
.schedule td.mono { font-size: 13px; color: var(--ink); width: 23%; }
.schedule tbody tr:hover { background: rgba(29, 79, 145, .05); }
.aside { position: absolute; right: 0; top: 70px; transform: rotate(4deg); }

/* 03 method */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 2px solid var(--ink); }
.steps li { padding: 24px 20px 10px; border-right: 1px solid var(--rule); }
.steps li:last-child { border-right: 0; }
.steps b { display: block; font: 700 21px var(--cond); text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; }
.detail { display: grid; grid-template-rows: 1fr 1fr; width: 50px; height: 50px; border: 2px solid var(--ink); border-radius: 50%; margin-bottom: 16px;
  font: 600 15px/1 var(--mono); color: var(--ink); text-align: center; overflow: hidden; }
.detail { align-items: center; }
.detail i { font-style: normal; font-size: 11px; border-top: 1.5px solid var(--ink); align-self: stretch; display: grid; place-items: center; }

/* 04 field */
.field-grid { display: grid; grid-template-columns: 340px 1fr; gap: 70px; align-items: center; }
.phone-dwg { position: relative; margin: 0; }
.phone-dwg svg { width: 100%; height: auto; }
.phone-dwg .body { fill: none; stroke: var(--ink); stroke-width: 2.4; }
.phone-dwg .screen { fill: rgba(29, 79, 145, .06); stroke: var(--ink); stroke-width: 1.2; }
.phone-dwg .dimline path { stroke: var(--red); stroke-width: 1; fill: none; }
.phone-dwg .dimline text { font: 600 11px var(--mono); fill: var(--red); }
.phone-dwg .acc { fill: rgba(29, 79, 145, .12); stroke: var(--ink); stroke-dasharray: 3 3; animation: breathe 2.6s ease-in-out infinite; transform-origin: 150px 150px; }
@keyframes breathe { 50% { transform: scale(1.18); } }
.phone-dwg .me { fill: var(--ink); stroke: #fff; stroke-width: 2.5; }
.phone-dwg .walked { fill: none; stroke: var(--red); stroke-width: 2; stroke-dasharray: 5 4; }
.phone-dwg .rows rect { fill: none; stroke: var(--rule); }
.phone-dwg .rows .done { fill: rgba(31, 107, 58, .08); }
.phone-dwg text { font: 600 10px var(--mono); fill: var(--ink-2); }
.phone-dwg .ok { fill: #1f6b3a; }
.phone-dwg .btn { fill: var(--ink); }
.phone-dwg .btn-t { fill: var(--film); font-size: 11px; letter-spacing: .08em; }
.note-phone { position: absolute; left: -26px; top: 96px; transform: rotate(-8deg); font-size: 21px; }
.spec { display: grid; grid-template-columns: 150px 1fr; margin: 0; border-top: 2px solid var(--ink); }
.spec dt, .spec dd { padding: 14px 0; border-bottom: 1px solid var(--rule); margin: 0; }
.spec dt { font: 600 13px var(--mono); text-transform: uppercase; color: var(--ink); letter-spacing: .04em; padding-right: 16px; }

/* 05 fees */
.fees-wrap { position: relative; }
.fees { width: 100%; border-collapse: collapse; border: 2px solid var(--ink); background: rgba(250, 248, 241, .9); table-layout: fixed; }
.fees th, .fees td { padding: 13px 14px; border-top: 1px solid var(--rule); text-align: center; }
.fees td + td, .fees th + td, .fees th + th { border-left: 1px solid var(--rule); }
.fees thead th { font: 700 19px var(--cond); text-transform: uppercase; color: var(--film); background: var(--ink); border-top: 0; }
.fees tbody th { text-align: left; font: 500 14px var(--sans); color: var(--muted); width: 26%; }
.fees td { color: var(--ink); font: 500 14px var(--mono); }
.fees .p { font: 700 34px/1 var(--cond); color: var(--ink-2); padding: 20px 10px; }
.fees .p small { display: block; font: 500 11px var(--mono); color: var(--muted); margin-top: 6px; text-transform: uppercase; letter-spacing: .04em; }
.fees .go a { display: inline-block; font: 600 13px var(--mono); text-transform: uppercase; text-decoration: none; border: 1.5px solid var(--ink); padding: 8px 10px; color: var(--ink); }
.fees .go a.solid, .fees .go a:hover { background: var(--ink); color: var(--film); }
.fees .go a.solid:hover { background: var(--red); border-color: var(--red); }
.cloud { position: absolute; pointer-events: none; overflow: visible; }
.cloud path { fill: none; stroke: var(--red); stroke-width: 2.2; }
.note-fees { position: absolute; top: -40px; transform: rotate(-4deg); white-space: nowrap; }

/* 06 notes */
.gn { margin: 0; padding: 0; list-style: none; counter-reset: n; columns: 2; column-gap: 54px; }
.gn li { counter-increment: n; break-inside: avoid; position: relative; padding: 0 0 18px 42px; }
.gn li::before { content: counter(n) '.'; position: absolute; left: 0; top: 0; font: 600 15px var(--mono); color: var(--red); }
.gn b { font: 700 15px var(--mono); text-transform: uppercase; color: var(--ink-2); letter-spacing: .02em; }

/* title block footer */
.titleblock { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr .5fr .8fr 1.2fr; border: 2px solid var(--ink); margin: 56px 0 24px; background: rgba(250, 248, 241, .95); }
.tb-cell { padding: 10px 12px; border-left: 1px solid var(--ink); font: 500 14px var(--mono); color: var(--ink-2); display: flex; flex-direction: column; justify-content: center; }
.tb-cell:first-child { border-left: 0; }
.tb-cell i { font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.tb-brand { flex-direction: row; align-items: center; gap: 12px; }
.tb-brand img { border-radius: 8px; }
.tb-brand b { display: block; font: 700 20px var(--cond); text-transform: uppercase; }
.tb-brand span { font-size: 11px; color: var(--muted); }
.tb-rev, .tb-dwg { font-size: 18px; font-weight: 600; }
.tb-go { background: var(--ink); }
.tb-go a { color: var(--film); text-decoration: none; font: 600 15px var(--cond); text-transform: uppercase; letter-spacing: .06em; }
.tb-go:hover { background: var(--red); }

/* legal pages */
.legal { padding: 64px 0 80px; max-width: 760px; }
.legal h1 { font-size: 46px; text-transform: uppercase; }
.legal h2 { font-size: 21px; margin: 36px 0 8px; text-transform: uppercase; }
.legal .updated { font: 500 13px var(--mono); color: var(--muted); }

@media (max-width: 1020px) {
  .hero-grid, .field-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; } .steps li:nth-child(2) { border-right: 0; }
  .register { display: none; }
  .open { margin-left: auto; }
  .titleblock { grid-template-columns: 1fr 1fr 1fr; } .tb-cell { border-top: 1px solid var(--ink); }
  .aside { display: none; }
  .phone-dwg { max-width: 320px; margin: 0 auto; }
}
@media (max-width: 680px) {
  .frame { display: none; }
  .sheet { padding: 16px 16px 24px; }
  .masthead { top: 0; margin: 0 -16px; }
  section { padding: 52px 0 60px; }
  .steps { grid-template-columns: 1fr; } .steps li { border-right: 0; border-bottom: 1px solid var(--rule); }
  .schedule thead { display: none; }
  .schedule tr { display: grid; grid-template-columns: 52px 1fr; border-top: 1px solid var(--rule); }
  .schedule td { border: 0 !important; padding: 8px 10px; }
  .schedule td.mk { grid-row: span 3; padding-top: 14px; }
  .schedule td.mono { width: auto; }
  .fees-wrap { overflow-x: auto; }
  .fees { min-width: 620px; }
  .cloud, .note-fees { display: none; }
  .gn { columns: 1; }
  .spec { grid-template-columns: 1fr; } .spec dt { border-bottom: 0; padding-bottom: 0; }
  .note-phone { left: 0; }
  .titleblock { grid-template-columns: 1fr 1fr; }
  .issue { flex-wrap: wrap; } .issue label { display: none; } .issue button { padding: 12px 18px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }