/* Sent Your Way: the job docket. Paper, canary copy, carbon ink.
   Archivo at width 62.5 and weight 900 is the logo face and the headline face;
   Archivo at normal width is the reading face; IBM Plex Mono is for numbers and dockets. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,62.5,800;0,62.5,900;0,100,400;0,100,600;0,100,700;1,100,400&family=IBM+Plex+Mono:wght@400;600&display=swap');

:root {
  --paper: #fbfaf4;
  --page: #f3f1e7;
  --canary: #f4d94e;
  --canary-soft: #fbf0b8;
  --carbon: #2238a6;
  --carbon-deep: #182a80;
  --carbon-soft: #e3e7f8;
  --ink: #16182a;
  --ink-soft: #2a2d44;
  --muted: #585c70;
  --line: #d8d4c3;
  --line-soft: #e8e4d6;
  --good: #1d7a45;
  --warn: #a4570c;
  --d: "Archivo", "Arial Narrow", Impact, sans-serif;   /* display: pair with font-stretch 62.5% */
  --b: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --m: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper); color: var(--ink);
  font: 400 17px/1.6 var(--b); font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--canary); color: var(--ink); }
:focus-visible { outline: 3px solid var(--carbon); outline-offset: 2px; }
img { max-width: 100%; height: auto; }
.wrap { max-width: 1080px; margin: 0 auto; padding-inline: clamp(18px, 4vw, 44px); }

/* display type helper: every heading, plate, cta and big number */
h1, h2, h3, .plate, .cta, .d, .price-plate .n, .figure .n, .worth-out .n, .worth-verdict .vn, .worth-verdict .mark,
.l20-plate, .r90-plate, .stamps span, .creed span, .terr-trade, .terr-card h3, .steps h3, .steps li::before, .fence h3,
.ask-answer mark.biz, .bar-val, .month-ctl output, .verdict-out .plate, .aicheck-out .verdict h3, .aicheck-out .bots b,
.bcheck h3, .bcheck .stamp, .m-h1, ul.svq-list li b, .tally.big b, ul.theatres .st, ul.theatres .stn, .map-tip b,
.terr-jump a, .pick-row button, form.sheet button, form.aicheck button, .fence.offer > article.fits::after, .rail90 li::before, .ladder td.pos, dl.qa dt, .proof .n, h1.entry-title, ol.moves > li::before, ol.moves h3, .fixture .nm, article.entry h3 {
  font-family: var(--d); font-stretch: 62.5%; font-weight: 900; letter-spacing: .01em;
}
.mono { font-family: var(--m); }

/* small caps label, the docket pencil */
.pencil {
  font-family: var(--m); font-size: 12.5px; letter-spacing: .08em;
  color: var(--muted); text-transform: uppercase; line-height: 1.6;
}
.pencil a { color: var(--carbon); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---------- masthead ---------- */
header.mast { background: var(--paper); border-bottom: 2px solid var(--ink); position: sticky; top: 0; z-index: 20; }
.mast-inner { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-block: 12px; }
.wordmark { display: inline-flex; align-items: center; text-decoration: none; line-height: 0; }
.wordmark img { height: 34px; width: auto; display: block; }
.mast-note { align-self: center; display: none; }
nav.plates { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; align-items: center; min-width: 0; }
nav.plates a {
  font-family: var(--d); font-stretch: 62.5%; font-weight: 800; font-size: 17px; letter-spacing: .03em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; padding: 9px 11px 8px; border-bottom: 3px solid transparent;
}
nav.plates a:hover { border-bottom-color: var(--ink); }
nav.plates a[aria-current="page"] { border-bottom-color: var(--carbon); color: var(--carbon); }
nav.plates a.biz { background: var(--carbon); color: var(--paper); padding: 10px 14px 9px; margin-left: 6px; border: 0; border-radius: 3px; }
nav.plates a.biz:hover { background: var(--carbon-deep); }
nav.plates a.biz[aria-current="page"] { background: var(--carbon-deep); color: var(--paper); }
@media (min-width: 900px) { .mast-note { display: inline; margin-left: 4px; font-size: 11.5px; } }

/* ---------- the stacked headline ---------- */
.board { padding-block: clamp(44px, 8vw, 92px) clamp(28px, 5vw, 52px); position: relative; }
h1 { font-size: 0; }                         /* the visible headline is the plateline; h1 stays for machines */
.plateline { display: flex; flex-wrap: wrap; gap: 0 .22em; align-items: baseline; }
.plateline + .plateline { margin-top: -.02em; }
.plate {
  font-size: clamp(2.9rem, 9.4vw, 6.6rem); line-height: .92; text-transform: uppercase;
  color: var(--ink); letter-spacing: .005em; text-wrap: balance;
}
.plate.gold { color: var(--carbon); }
@media (prefers-reduced-motion: no-preference) {
  .slot-in .plate { animation: slot .6s cubic-bezier(.16, 1, .3, 1) backwards; }
  .slot-in .plateline:nth-child(2) .plate { animation-delay: .1s; }
  .slot-in .plateline:nth-child(3) .plate { animation-delay: .2s; }
  @keyframes slot { from { transform: translateY(.3em); opacity: 0; } }
}
.standfirst { max-width: 58ch; margin-top: 26px; font-size: clamp(1.08rem, 1.6vw, 1.3rem); line-height: 1.5; }
.standfirst strong { color: var(--carbon); font-weight: 700; }

.cta-row { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; align-items: center; }
.cta {
  font-size: 20px; letter-spacing: .03em; text-transform: uppercase; line-height: 1;
  background: var(--carbon); color: var(--paper); text-decoration: none;
  padding: 15px 20px 13px; display: inline-flex; align-items: center; gap: 10px; border-radius: 3px;
  box-shadow: 0 2px 0 var(--carbon-deep);
}
.cta::after { content: ""; width: 14px; height: 14px; border-right: 3px solid currentColor; border-top: 3px solid currentColor; transform: rotate(45deg) scale(.7); margin-left: 2px; }
.cta:hover { background: var(--carbon-deep); transform: translateY(-1px); }
.cta.quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.cta.quiet::after { display: none; }
.cta.quiet:hover { background: var(--ink); color: var(--paper); transform: none; }
.cta[aria-disabled="true"] { opacity: .6; pointer-events: none; }

/* ---------- sections ---------- */
section { padding-block: clamp(40px, 6vw, 76px); }
section.rail { border-top: 1px solid var(--line); }
section.rail:nth-of-type(even) { background: var(--page); }
h2 {
  font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: .98; text-transform: uppercase;
  text-wrap: balance; margin-bottom: 12px; letter-spacing: .005em;
}
h2 .tick { color: var(--carbon); }
h3 { font-size: 1.5rem; line-height: 1.05; text-transform: uppercase; }
.lead { max-width: 62ch; color: var(--ink-soft); font-size: 1.08rem; }
p { max-width: 66ch; }
p + p { margin-top: 1em; }
a { color: var(--carbon); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.fine, .fineprint { margin-top: 18px; font-size: .92rem; color: var(--muted); max-width: 72ch; }
.tablewrap, .compare-wrap, .ladder-wrap { overflow-x: auto; margin-top: 22px; }

/* ---------- steps (how it works) ---------- */
.steps { list-style: none; padding: 0; margin-top: 26px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: step; }
.steps li { background: var(--paper); border: 1.5px solid var(--line); border-radius: 6px; padding: 22px 22px 24px; counter-increment: step; position: relative; }
.steps li::before { content: counter(step, decimal-leading-zero); display: inline-grid; place-items: center; font-size: 26px; line-height: 1; width: 44px; height: 44px; background: var(--canary); color: var(--ink); border-radius: 6px; margin-bottom: 14px; }
.steps li:nth-child(2)::before { background: var(--carbon); color: var(--paper); }
.steps h3 { font-size: 1.5rem; margin-bottom: 8px; }
.steps p { color: var(--ink-soft); font-size: .98rem; }

/* ---------- fence: the card row ---------- */
.fence { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; }
.fence > article { background: var(--paper); border: 1.5px solid var(--line); border-radius: 6px; padding: 24px 22px 22px; position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fence > article.gold-sign { background: var(--canary-soft); border-color: var(--canary); }
.fence.purpose { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.fence h3 { font-size: 1.45rem; line-height: 1.05; }
.fence h3 a { color: inherit; text-decoration-color: var(--carbon); }
.fence p { font-size: .98rem; color: var(--ink-soft); }
.fence .who { font-family: var(--m); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--carbon); margin: 0; }
.fence .more { margin-top: auto; padding-top: 10px; font-weight: 700; }
.fence .more a { text-decoration: none; }
.fence .more a:hover { text-decoration: underline; }
.fence .rent { font-family: var(--m); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.fence ul.terms { list-style: none; padding: 0; display: grid; gap: 7px; margin-top: 4px; }
.fence ul.terms li { font-size: .94rem; line-height: 1.45; padding-left: 22px; position: relative; color: var(--ink-soft); }
.fence ul.terms li::before { content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 7px; border-left: 2.5px solid var(--carbon); border-bottom: 2.5px solid var(--carbon); transform: rotate(-45deg); }
.fence .best { font-size: .92rem; margin-top: 4px; }
.fence .best b { font-family: var(--m); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; color: var(--carbon); }
.fence.offer > article.fits { outline: 3px solid var(--carbon); outline-offset: -3px; }
.fence.offer > article.fits::after { content: "FITS YOU"; position: absolute; top: 12px; right: 12px; font-size: 1rem; letter-spacing: .06em; background: var(--canary); color: var(--ink); padding: .35em .55em .25em; border-radius: 3px; transform: rotate(3deg); }
.dim { display: none; }

/* ---------- the area check form: the canary band ---------- */
.waitlist { background: var(--canary); color: var(--ink); border-top: 2px solid var(--ink); }
.waitlist h2 { color: var(--ink); }
.waitlist h2 .tick { color: var(--carbon) !important; }
.waitlist .lead, .waitlist > .wrap > p { color: var(--ink); }
form.sheet { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; max-width: 800px; background: var(--paper); border: 2px solid var(--ink); border-radius: 6px; padding: 24px; box-shadow: 8px 8px 0 var(--ink); }
form.sheet label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: .95rem; }
form.sheet label.full { grid-column: 1 / -1; }
form.sheet label > input, form.sheet label > select, form.sheet label > textarea { margin-top: auto; }
form.sheet .hint { font-weight: 400; color: var(--muted); font-size: .85rem; }
form.sheet input, form.sheet select, form.sheet textarea {
  font: 400 16px/1.4 var(--b); color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--ink); border-radius: 3px; padding: 11px 12px; caret-color: var(--carbon); width: 100%;
}
form.sheet textarea { resize: vertical; }
form.sheet input::placeholder, form.sheet textarea::placeholder { color: #8d90a0; }
form.sheet input:focus-visible, form.sheet select:focus-visible, form.sheet textarea:focus-visible { outline: 3px solid var(--carbon); outline-offset: 1px; }
form.sheet select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
form.sheet button {
  grid-column: 1 / -1; justify-self: start; cursor: pointer; border: 0; border-radius: 3px;
  font-size: 20px; letter-spacing: .03em; text-transform: uppercase;
  background: var(--carbon); color: var(--paper); padding: 15px 24px 13px; box-shadow: 0 2px 0 var(--carbon-deep);
}
form.sheet button:hover { background: var(--carbon-deep); }
form.sheet + p.fine, .waitlist p.fine { color: var(--ink-soft); }
.waitlist a { color: var(--ink); }
.direct-line { margin-top: 22px; font-weight: 600; }
.direct-line .mono { background: var(--ink); color: var(--canary); padding: 3px 8px; font-weight: 600; user-select: all; }

/* ---------- direct band (contact) ---------- */
section.direct { background: var(--ink); color: var(--paper); border-top: 0; padding-block: clamp(30px, 5vw, 52px); }
.direct-inner { display: grid; grid-template-columns: 1fr auto; gap: 18px 36px; align-items: center; }
.direct-inner > div { min-width: 0; }
section.direct h2 { color: var(--paper); font-size: clamp(1.5rem, 3vw, 2.2rem); }
section.direct h2 .tick { color: var(--canary); }
section.direct p { color: #d9dbe6; max-width: 60ch; }
section.direct .reach { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px 14px; }
section.direct .reach span { font-family: var(--m); font-weight: 600; color: var(--canary); border: 1.5px solid #4a4f6e; padding: 5px 10px; border-radius: 3px; user-select: all; }
section.direct .cta { background: var(--canary); color: var(--ink); box-shadow: 0 2px 0 #c9b23a; }
section.direct .cta:hover { background: #ffe978; }
@media (max-width: 720px) { .direct-inner { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
footer { border-top: 2px solid var(--ink); background: var(--ink); color: #d9dbe6; padding-block: 30px 40px; }
.foot-inner { display: grid; gap: 14px 28px; align-items: start; }
footer .foot-logo img { height: 40px; width: auto; }
footer .pencil { color: #a9abbd; }
footer .pencil a { color: #e8e9f0; }
footer .pencil a:hover { color: var(--canary); }

/* ---------- moves: numbered notes ---------- */
ol.moves { list-style: none; counter-reset: mv; padding: 0; margin-top: 10px; }
ol.moves > li { counter-increment: mv; display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line); }
ol.moves > li::before { content: counter(mv); font-size: 2rem; line-height: 1; background: var(--canary); color: var(--ink); align-self: start; padding: .22em .4em .12em; border-radius: 4px; min-width: 1.6em; text-align: center; }
ol.moves h3 { font-size: 1.35rem; margin-bottom: 6px; }
ol.moves p { color: var(--ink-soft); }

/* ---------- straight answers ---------- */
dl.qa { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
dl.qa .q { background: var(--paper); border: 1.5px solid var(--line); border-radius: 6px; padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
dl.qa dt { font-size: 1.3rem; line-height: 1.05; text-transform: uppercase; text-wrap: balance; }
dl.qa dt::before { content: "Q. "; color: var(--carbon); }
dl.qa dd { margin: 0; font-size: .98rem; color: var(--ink-soft); max-width: 60ch; }
dl.qa dd a { font-weight: 600; }
dl.qa .q:last-child:nth-child(odd) { grid-column: 1 / -1; }
dl.qa .q:last-child:nth-child(odd) dd { max-width: 100ch; }
@media (max-width: 720px) { dl.qa { grid-template-columns: 1fr; } }
section.answers { background: var(--page); }

/* ---------- ticks ---------- */
.ticks, ul.plain-ticks, ul.record, .inbrief ul { padding-left: 0; list-style: none; display: grid; gap: 10px; margin-top: 14px; max-width: 72ch; }
.ticks li, ul.plain-ticks li, ul.record li, .inbrief li { padding-left: 30px; position: relative; }
.ticks li::before, ul.plain-ticks li::before, ul.record li::before, .inbrief li::before { content: ""; position: absolute; left: 0; top: .45em; width: 16px; height: 9px; border-left: 3px solid var(--carbon); border-bottom: 3px solid var(--carbon); transform: rotate(-45deg); }
.ticks.cross li::before { width: 16px; height: 3px; border: 0; background: var(--warn); transform: rotate(45deg); top: .75em; }
.inbrief { border: 1.5px solid var(--line); background: var(--paper); border-radius: 6px; padding: 16px 20px 14px; margin: 18px 0 22px; }
.inbrief .pencil { margin: 0 0 8px; color: var(--carbon); }
.byline { margin-top: 14px; font-size: 12px; max-width: none; }
.byline a { color: var(--ink); }
.byline time { white-space: nowrap; color: var(--ink); }

/* ---------- proof strip and figures ---------- */
.proof, .figures { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 22px; }
.figures { grid-template-columns: repeat(3, 1fr); }
.figure { background: var(--paper); border: 1.5px solid var(--line); border-radius: 6px; padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.figure .n { font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1; color: var(--carbon); font-variant-numeric: tabular-nums; }
.figure .l { font-family: var(--m); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.figure.gold { background: var(--canary); border-color: var(--canary); }
.figure.gold .n, .figure.gold .l { color: var(--ink); }
.warmap-sec .pencil { margin-top: 10px; }
@media (max-width: 900px) { .proof { grid-template-columns: 1fr 1fr; } .figures { grid-template-columns: 1fr 1fr; } }

/* ---------- compare tables ---------- */
.compare, table.ladder, .facts-table { width: 100%; border-collapse: collapse; font-size: 15.5px; background: var(--paper); border: 1.5px solid var(--line); border-radius: 6px; overflow: hidden; }
.compare th, .compare td, .ladder th, .ladder td, .facts-table th, .facts-table td { text-align: left; padding: 12px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th, .ladder th, .facts-table thead th { font: 600 12px/1.3 var(--m); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--page); }
.compare tr:last-child td, .compare tr:last-child th, .ladder tr:last-child td { border-bottom: 0; }
.compare tr.us td, .compare tr.us th { background: var(--canary-soft); }
.compare tr.us th { color: var(--carbon); }
.ladder .num { text-align: right; font-variant-numeric: tabular-nums; }
.ladder td.num { white-space: nowrap; }
.ladder td.pos { font-size: 19px; width: 3ch; }
.ladder td.site { font-weight: 600; }
.ladder td .ground { display: block; font-size: 13.5px; color: var(--muted); font-weight: 400; }
.ladder .stat { font-family: var(--m); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border: 1.5px solid currentColor; border-radius: 99px; }
.ladder .stat.vacant { color: var(--muted); }
.ladder tr.leader td { background: var(--canary-soft); }
.ladder-note { margin-top: 16px; max-width: 70ch; }
.register td.pencil { white-space: nowrap; }
@media (max-width: 720px) {
  .compare thead { display: none; }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: 100%; }
  .compare tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .compare th, .compare td { border: 0; padding: 2px 12px; }
  .compare td[data-l]::before { content: attr(data-l) ": "; font: 600 12px/1 var(--m); text-transform: uppercase; color: var(--muted); }
}

/* ---------- pricing ---------- */
.price-plate { display: inline-flex; align-items: baseline; gap: 12px; background: var(--canary); color: var(--ink); padding: 14px 18px 12px; margin-top: 20px; border-radius: 6px; flex-wrap: wrap; }
.price-plate .n { font-size: clamp(50px, 9vw, 80px); line-height: 1; }
.price-plate .u { font: 600 13px/1.25 var(--m); text-transform: uppercase; letter-spacing: .05em; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 18px; }
.two-col h3.pencil { font-family: var(--m); font-stretch: 100%; font-weight: 600; font-size: 12.5px; color: var(--carbon); }
@media (max-width: 720px) { .two-col { grid-template-columns: 1fr; } }

/* ---------- what is an enquiry worth ---------- */
.worth { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; max-width: 780px; }
.worth label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.worth label input { margin-top: auto; }
.worth .hint { font-weight: 400; font-size: .85rem; color: var(--muted); }
.worth input { font: inherit; padding: 11px 12px; border: 1.5px solid var(--ink); border-radius: 3px; background: var(--paper); color: var(--ink); }
.worth input:focus-visible { outline: 3px solid var(--carbon); outline-offset: 1px; }
.worth-out { grid-column: 1 / -1; border: 1.5px solid var(--line); background: var(--paper); border-radius: 6px; padding: 18px 20px; display: grid; gap: 8px; }
.worth-out .n { font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1; color: var(--carbon); font-variant-numeric: tabular-nums; }
.worth-verdict { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; background: var(--canary-soft); color: var(--ink); border: 2px solid var(--ink); border-radius: 6px; padding: 16px 20px; box-shadow: 6px 6px 0 var(--ink); }
.worth-verdict .mark { flex: none; width: 64px; height: 64px; display: grid; place-items: center; font-size: 2.4rem; line-height: 1; background: var(--ink); color: var(--paper); border-radius: 6px; }
.worth-verdict.yes .mark { background: var(--good); color: var(--paper); }
.worth-verdict.no .mark { background: var(--warn); color: var(--paper); }
.worth-verdict .vbody { min-width: 0; display: grid; gap: 4px; }
.worth-verdict .vn { font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.05; }
.worth-verdict .vt { font-size: 1.02rem; line-height: 1.45; }
.worth > .pencil { grid-column: 1 / -1; margin: 0; line-height: 1.7; }
@media (max-width: 600px) { .worth { grid-template-columns: 1fr; } .worth-verdict { align-items: flex-start; } .worth-verdict .mark { width: 52px; height: 52px; font-size: 2rem; } }

/* ---------- territories ---------- */
.crumbs { margin-bottom: 14px; }
.crumbs a { color: inherit; }
.terr-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.terr-jump a { font-size: 16px; line-height: 1; letter-spacing: .03em; text-transform: uppercase; text-decoration: none; background: var(--paper); color: var(--ink); padding: 10px 12px 9px; border: 1.5px solid var(--line); border-radius: 3px; }
.terr-jump a:hover, .terr-jump a:focus-visible { border-color: var(--ink); background: var(--canary); }
.terr-grid { list-style: none; padding: 0; margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.terr { background: var(--paper); color: var(--ink); padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 4px; border: 1.5px solid var(--line); border-top: 6px solid var(--line); border-radius: 6px; min-width: 0; }
.terr.available { border-top-color: var(--canary); }
.terr.claimed { opacity: .7; }
.terr.coming { border-top-color: var(--carbon-soft); }
.terr-stat { font: 600 11.5px/1 var(--m); letter-spacing: .1em; color: var(--muted); }
.terr.available .terr-stat, .terr-card.available .terr-stat { color: var(--carbon); }
.terr-trade { font-size: 24px; line-height: 1.02; text-transform: uppercase; overflow-wrap: anywhere; }
.terr-reg { font-weight: 600; }
.terr-reg a { color: inherit; text-decoration: none; }
.terr-reg a:hover { text-decoration: underline; }
.terr .terr-imp { color: var(--muted); font-size: 12px; }
.terr-cta { margin-top: auto; padding-top: 10px; font-weight: 700; color: var(--carbon); text-decoration: none; }
.terr-cta:hover { text-decoration: underline; }
.terr-cta.off { color: var(--muted); font-weight: 400; }
.terr-card { border: 1.5px solid var(--line); background: var(--paper); border-radius: 6px; padding: 22px 22px 20px; margin-top: 16px; display: grid; gap: 8px; }
.terr-card h3 { font-size: clamp(26px, 4vw, 34px); line-height: 1; }
.terr-card.available { border-color: var(--canary); border-width: 2px; }
.terr-card .terr-stat { font-size: 12px; }
section.terr-band { background: var(--canary-soft); }

/* ---------- about ---------- */
.board-split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px 48px; align-items: start; }
.board-split .board-text { min-width: 0; }
.portrait { margin: 14px 0 0; border: 2px solid var(--ink); background: var(--ink); border-radius: 6px; overflow: hidden; transform: rotate(1.2deg); align-self: start; box-shadow: 8px 8px 0 var(--canary); }
.portrait img { display: block; width: 100%; height: auto; }
.portrait figcaption.pencil { padding: 9px 12px; color: #a9abbd; background: var(--ink); }
@media (max-width: 760px) { .board-split { grid-template-columns: 1fr; } .portrait { order: -1; max-width: 220px; transform: rotate(-1deg); margin: 0 0 8px; } }
.ladder20 { list-style: none; padding: 0; margin: 26px 0 0; position: relative; display: grid; gap: 22px; max-width: 760px; }
.ladder20::before { content: ""; position: absolute; left: 118px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.ladder20::after { content: ""; position: absolute; left: 118px; top: 0; width: 2px; height: 0; background: var(--carbon); transition: height 2.2s cubic-bezier(.2, .7, .2, 1); }
.twenty.in .ladder20::after { height: 100%; }
.ladder20 li { display: grid; grid-template-columns: 96px 1fr; gap: 6px 44px; align-items: start; position: relative; opacity: 0; transform: translateX(-10px); transition: opacity .5s ease, transform .5s ease; }
.twenty.in .ladder20 li { opacity: 1; transform: none; }
.twenty.in .ladder20 li:nth-child(2) { transition-delay: .3s } .twenty.in .ladder20 li:nth-child(3) { transition-delay: .6s } .twenty.in .ladder20 li:nth-child(4) { transition-delay: .9s } .twenty.in .ladder20 li:nth-child(5) { transition-delay: 1.2s } .twenty.in .ladder20 li:nth-child(6) { transition-delay: 1.5s }
.ladder20 li::before { content: ""; position: absolute; left: 112px; top: 10px; width: 14px; height: 14px; border-radius: 50%; background: var(--carbon); box-shadow: 0 0 0 3px var(--paper); }
.l20-year { font-family: var(--m); font-size: 12.5px; letter-spacing: .08em; color: var(--muted); padding-top: 10px; text-align: right; }
.l20-plate { grid-column: 2; font-size: 1.35rem; line-height: 1; text-transform: uppercase; color: var(--ink); justify-self: start; padding-top: 8px; }
.l20-plate.gold { color: var(--carbon); }
.l20-note { grid-column: 2; color: var(--ink-soft); max-width: 56ch; }
@media (prefers-reduced-motion: reduce) { .ladder20::after { transition: none; } .ladder20 li { opacity: 1; transform: none; transition: none; } }
@media (max-width: 720px) { .ladder20::before, .ladder20::after { left: 7px; } .ladder20 li { grid-template-columns: 1fr; gap: 6px; padding-left: 30px; } .ladder20 li::before { left: 1px; } .l20-year { text-align: left; padding-top: 0; } .l20-plate, .l20-note { grid-column: 1; } }
/* rubber stamps: how I work, the creed */
.stamps, .creed { display: flex; flex-wrap: wrap; gap: 14px 16px; margin-top: 22px; }
.stamps span, .creed span {
  font-size: 1.15rem; line-height: 1; letter-spacing: .05em; text-transform: uppercase;
  color: var(--carbon); border: 3px solid var(--carbon); border-radius: 6px; padding: .55em .75em .45em;
  transform: rotate(-1.5deg); background: var(--paper);
}
.stamps span:nth-child(even), .creed span:nth-child(even) { transform: rotate(1.4deg); }
.stamps span.gold, .creed span.gold { color: var(--ink); border-color: var(--ink); background: var(--canary); }
.purpose-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(220px, .9fr); gap: 20px 56px; align-items: start; margin-top: 18px; }
.purpose-grid .lead + .lead { margin-top: 1em; }
.creed { display: grid; gap: 10px; justify-items: start; padding-top: 6px; }
.creed span:nth-child(even) { transform: rotate(1.2deg) translateX(10px); }
@media (max-width: 900px) { .purpose-grid { grid-template-columns: 1fr; } .creed { display: flex; } .creed span, .creed span:nth-child(even) { transform: none; } }

/* ---------- the map: the continent in canary ---------- */
section.warmap-sec { padding-bottom: clamp(20px, 3vw, 36px); }
.warmap-grid { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 26px; }
.warmap-grid > * { min-width: 0; }
figure.board-map { margin: 0; position: relative; border: 2px solid var(--ink); border-radius: 6px 6px 0 0; background: var(--paper); overflow: hidden; }
figure.board-map svg.warmap { display: block; width: 100%; height: auto; }
.warmap .sea { fill: var(--paper); }
.warmap .grid { color: var(--ink); opacity: .06; }
.warmap .coast { fill: var(--canary); stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; paint-order: stroke; }
.warmap .borders, .warmap .localb { fill: none; stroke: var(--ink); stroke-opacity: .35; stroke-width: 1; stroke-dasharray: 4 5; }
.warmap .state { font-family: var(--m); fill: var(--ink); fill-opacity: .6; letter-spacing: .12em; font-weight: 600; }
.warmap .scale path { stroke: var(--muted); stroke-width: 1.2; fill: none; }
.warmap .scale text { font-family: var(--m); fill: var(--muted); letter-spacing: .1em; }
.warmap .pin .dot { fill: var(--carbon); stroke: var(--paper); stroke-width: 2.5; paint-order: stroke; }
.warmap .pin .ring { fill: none; stroke: var(--carbon); stroke-width: 1.6; }
.warmap .pin .lbl { font-family: var(--m); font-size: 12.5px; letter-spacing: .04em; font-weight: 600; fill: var(--ink); text-transform: uppercase; paint-order: stroke; stroke: var(--paper); stroke-width: 3.5; stroke-linejoin: round; }
.warmap .pin .count { font-family: var(--d); font-stretch: 62.5%; font-weight: 900; font-size: 15px; fill: var(--paper); pointer-events: none; }
.warmap .pin { cursor: pointer; outline: none; }
.warmap .pin:hover .dot, .warmap .pin:focus-visible .dot, .warmap .pin.hot .dot { fill: var(--ink); }
.warmap .pin:focus-visible .dot { stroke: var(--canary); }
.warmap .theatre .leader { stroke: var(--ink); stroke-width: 1.1; stroke-dasharray: 3 4; fill: none; opacity: .6; }
.warmap .theatre .target { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.warmap .theatre .disc { fill: var(--page); }
.warmap .theatre .local { fill: var(--canary); stroke: var(--ink); stroke-width: 1.2; stroke-opacity: .8; }
.warmap .theatre .rim { fill: none; stroke: var(--ink); stroke-width: 2; }
.warmap .theatre .tname { font-family: var(--d); font-stretch: 62.5%; font-weight: 900; font-size: 18px; letter-spacing: .04em; fill: var(--ink); }
.warmap .theatre .tcount { font-family: var(--m); font-size: 11.5px; letter-spacing: .1em; fill: var(--muted); }
figure.board-map svg.warmap.mob { display: none; }
.map-tip { position: absolute; z-index: 2; pointer-events: none; max-width: 260px; background: var(--ink); color: var(--paper); padding: 10px 12px; border-radius: 4px; box-shadow: 0 6px 14px rgba(22, 24, 42, .25); font-size: 14px; line-height: 1.4; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; }
.map-tip.on { opacity: 1; transform: none; }
.map-tip b { font-size: 17px; letter-spacing: .03em; text-transform: uppercase; display: block; color: var(--canary); }
.map-tip .m { font-family: var(--m); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #c9cbd8; display: block; margin-top: 4px; }
figcaption.pencil { padding: 10px 12px; background: var(--page); border-top: 1px solid var(--line); }
.dispatch { border: 2px solid var(--ink); border-top: 0; border-radius: 0 0 6px 6px; background: var(--paper); padding: 18px 20px 16px; display: grid; grid-template-columns: minmax(200px, .9fr) 2.4fr; gap: 10px 28px; align-items: start; }
.dispatch > .pencil { grid-column: 1; }
.dispatch .legend { grid-column: 1; }
.tally { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 4px; }
.tally span { font-family: var(--m); font-size: 13px; letter-spacing: .04em; border: 1.5px solid var(--line); padding: 5px 11px; border-radius: 3px; }
.tally b { color: var(--carbon); font-weight: 600; }
.tally.big { margin: 0 0 8px; }
.tally.big span { font-size: 15px; }
.tally.big b { font-size: 1.9rem; margin-right: 4px; line-height: 1; vertical-align: -2px; }
.live-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--carbon); margin-right: 8px; vertical-align: 1px; }
ul.theatres { list-style: none; padding: 0; margin: 0; grid-column: 2; grid-row: 1 / span 3; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 18px; border-top: 1px solid var(--line); }
ul.theatres li { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); align-items: baseline; }
ul.theatres .st { font-size: 1.1rem; letter-spacing: .05em; color: var(--ink); }
ul.theatres .stn { font-size: 1.1rem; color: var(--carbon); justify-self: end; }
ul.theatres p { grid-column: 1 / -1; font-size: .86rem; color: var(--muted); line-height: 1.75; max-width: none; }
ul.theatres .reg { all: unset; cursor: pointer; color: var(--ink-soft); }
ul.theatres .reg b { color: var(--carbon); font-weight: 600; font-family: var(--m); }
ul.theatres .reg:hover, ul.theatres .reg:focus-visible, ul.theatres .reg.hot { color: var(--carbon); text-decoration: underline; text-underline-offset: 3px; }
.legend { margin-top: 14px; line-height: 2; }
.legend .k { display: inline-block; width: 11px; height: 11px; border-radius: 50%; vertical-align: -1px; margin-right: 4px; }
.legend .k.dot { background: var(--carbon); }
.legend .k.ring { border: 1.5px solid var(--carbon); }
@media (prefers-reduced-motion: no-preference) {
  .live-dot { animation: beacon 2.2s ease-out infinite; }
  @keyframes beacon { 0% { box-shadow: 0 0 0 0 rgba(34, 56, 166, .5); } 100% { box-shadow: 0 0 0 9px transparent; } }
  .js .board-map .coast { stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; }
  .js .board-map.in .coast { animation: draw 1.4s cubic-bezier(.4, 0, .2, 1) forwards, fillin .6s 1.1s forwards; }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes fillin { to { fill-opacity: 1; } }
  .js .board-map .borders, .js .board-map .state, .js .board-map .scale, .js .board-map .theatre .leader, .js .board-map .theatre .target, .js .board-map .theatre .inset, .js .board-map .theatre .rim, .js .board-map .theatre .tname, .js .board-map .theatre .tcount { opacity: 0; }
  .js .board-map.in .borders, .js .board-map.in .state, .js .board-map.in .scale { animation: appear .6s 1.2s forwards; }
  .js .board-map.in .theatre .leader, .js .board-map.in .theatre .target, .js .board-map.in .theatre .inset, .js .board-map.in .theatre .rim, .js .board-map.in .theatre .tname, .js .board-map.in .theatre .tcount { animation: appear .7s 1.5s forwards; }
  @keyframes appear { to { opacity: 1; } }
  .js .board-map .pin { transform-box: fill-box; transform-origin: center; transform: scale(0); opacity: 0; }
  .js .board-map.in .pin { animation: land .5s cubic-bezier(.2, 1.4, .4, 1) forwards; animation-delay: calc(1.7s + var(--d, 0) * .07s); }
  @keyframes land { to { transform: none; opacity: 1; } }
  .board-map.in .pin.new .ring { animation: pulse 2.4s ease-out infinite; animation-delay: calc(2.6s + var(--d, 0) * .07s); transform-box: fill-box; transform-origin: center; }
  @keyframes pulse { 0% { transform: scale(.85); opacity: 1; } 100% { transform: scale(1.45); opacity: 0; } }
  .js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
  .js .reveal.in { opacity: 1; transform: none; }
}
@media (max-width: 900px) { .dispatch { grid-template-columns: 1fr; } .dispatch > .pencil, .dispatch .legend { grid-column: 1; } ul.theatres { grid-column: 1; grid-row: auto; margin-top: 14px; } }
@media (max-width: 720px) { figure.board-map svg.warmap.desk { display: none; } figure.board-map svg.warmap.mob { display: block; } }

/* ---------- ask an assistant ---------- */
.ask { margin: 26px 0 0; border: 2px solid var(--ink); border-radius: 6px; background: var(--paper); max-width: 860px; overflow: hidden; }
.ask-q { background: var(--ink); padding: 18px 22px; font-family: var(--m); font-size: 1.08rem; color: var(--paper); min-height: 3.2em; display: flex; align-items: center; gap: 8px; }
.ask-prompt { color: var(--canary); font-weight: 600; }
.ask-caret { display: inline-block; width: .6em; height: 1.15em; background: var(--canary); margin-left: 2px; animation: caret 1s steps(1) infinite; }
.ask-a { background: var(--paper); color: var(--ink); padding: 18px 22px 20px; min-height: 7.5em; }
.ask-a .ask-src { margin: 0 0 10px; }
.ask-answer { font-size: 1.05rem; max-width: 62ch; margin: 0; }
.ask-answer mark.biz { background: var(--canary); color: var(--ink); font-size: 1.05em; letter-spacing: .03em; text-transform: uppercase; padding: .08em .35em .02em; border-radius: 3px; }
.ask-answer .w { opacity: 0; }
.ask-answer .w.on { opacity: 1; transition: opacity .18s ease; }
.ask figcaption.pencil { background: var(--page); }
@keyframes caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ask-caret { animation: none; } .ask-answer .w { opacity: 1; } }

/* ---------- sample page ---------- */
.sample-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px 40px; align-items: start; margin-top: 26px; }
.sample-frame { display: block; border: 2px solid var(--ink); border-radius: 6px; overflow: hidden; background: var(--ink); box-shadow: 10px 10px 0 var(--canary); text-decoration: none; }
.sample-frame img { display: block; width: 100%; height: auto; }
.sample-frame .pencil { display: block; padding: 9px 12px; color: #a9abbd; background: var(--ink); }
.sample-frame:hover .pencil { color: var(--canary); }
.sample-grid ol.moves { margin-top: 0; }
@media (max-width: 900px) { .sample-grid { grid-template-columns: 1fr; } }

/* ---------- local pages: diagram, picker, ninety days ---------- */
.pageset-fig { margin: 26px 0 0; border: 2px solid var(--ink); border-radius: 6px; overflow: hidden; background: var(--paper); }
.pageset-svg { display: block; width: 100%; height: auto; background: var(--page); }
.ps-mark { offset-distance: 0%; opacity: 0; offset-rotate: 0deg; }
.pageset.in .ps-mark { animation: ps-travel 2.8s cubic-bezier(.4, 0, .6, 1) infinite; }
@keyframes ps-travel { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.pageset-fig figcaption.pencil { background: var(--page); }
@media (prefers-reduced-motion: reduce) { .pageset.in .ps-mark { animation: none; offset-distance: 55%; opacity: 1; } }
.js .picker[hidden] { display: block; }
.pick { margin-top: 22px; display: grid; gap: 18px; max-width: 760px; }
.pick-q .pencil { margin-bottom: 8px; }
.pick-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pick-row button { font-size: 1.05rem; letter-spacing: .03em; text-transform: uppercase; line-height: 1; background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 3px; padding: .66em .85em .5em; cursor: pointer; }
.pick-row button:hover { background: var(--canary-soft); }
.pick-row button[aria-pressed="true"] { background: var(--canary); box-shadow: 0 0 0 3px var(--ink) inset; }
.pick-out { min-height: 1.6em; color: var(--ink); font-size: 1.05rem; max-width: 62ch; }
.pick-out b { color: var(--carbon); }
.rail90 { list-style: none; padding: 0; margin: 30px 0 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; position: relative; counter-reset: r90; }
.rail90::before { content: ""; position: absolute; left: 0; right: 0; top: 22px; height: 2px; background: var(--line); }
.rail90::after { content: ""; position: absolute; left: 0; top: 22px; height: 2px; width: 0; background: var(--carbon); transition: width 2.4s cubic-bezier(.2, .7, .2, 1); }
.days90.in .rail90::after { width: 100%; }
.rail90 li { counter-increment: r90; display: flex; flex-direction: column; gap: 10px; position: relative; padding-top: 48px; min-width: 0; opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.days90.in .rail90 li { opacity: 1; transform: none; }
.days90.in .rail90 li:nth-child(2) { transition-delay: .35s } .days90.in .rail90 li:nth-child(3) { transition-delay: .7s } .days90.in .rail90 li:nth-child(4) { transition-delay: 1.05s } .days90.in .rail90 li:nth-child(5) { transition-delay: 1.4s } .days90.in .rail90 li:nth-child(6) { transition-delay: 1.75s }
.rail90 li::before { content: counter(r90); position: absolute; top: 4px; left: 0; width: 38px; height: 38px; display: grid; place-items: center; font-size: 1.2rem; background: var(--canary); color: var(--ink); border: 2px solid var(--ink); border-radius: 6px; z-index: 1; }
.r90-plate { font-size: 1.1rem; letter-spacing: .02em; text-transform: uppercase; line-height: 1.1; color: var(--ink); }
.r90-note { font-size: .9rem; color: var(--ink-soft); line-height: 1.45; }
.days90 .rail90 { gap: 18px; margin-top: 34px; }
.days90 .rail90 li { padding-top: 60px; gap: 10px; }
@media (prefers-reduced-motion: reduce) { .rail90::after { transition: none; } .rail90 li { opacity: 1; transform: none; transition: none; } }
@media (max-width: 900px) { .rail90 { grid-template-columns: 1fr 1fr 1fr; } .rail90::before, .rail90::after { display: none; } }
@media (max-width: 720px) { .rail90 { grid-template-columns: 1fr; gap: 18px; padding-left: 18px; } .rail90::before, .rail90::after { display: block; left: 16px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; } .rail90::after { height: 0; width: 2px; transition: height 2.4s cubic-bezier(.2, .7, .2, 1); } .days90.in .rail90::after { height: 100%; width: 2px; } .rail90 li, .days90 .rail90 li { padding-top: 0; padding-left: 40px; } .rail90 li::before { top: 0; left: -20px; } }

/* ---------- vs hipages: flow, your month, verdict ---------- */
.flow { margin: 26px 0 0; border: 2px solid var(--ink); border-radius: 6px; overflow: hidden; background: var(--paper); max-width: 900px; }
.flow-svg { display: block; width: 100%; height: auto; background: var(--paper); }
.fl-lane { font-family: var(--m); font-size: 13px; letter-spacing: .14em; fill: var(--muted); }
.fl-divider { stroke: var(--line); stroke-width: 1; stroke-dasharray: 4 6; }
.fl-plate { fill: var(--ink); }
.fl-plate-gold { fill: var(--canary); }
.fl-plate-text { font-family: var(--d); font-stretch: 62.5%; font-weight: 900; font-size: 18px; letter-spacing: .04em; fill: var(--paper); text-anchor: middle; }
.fl-plate-gold + .fl-plate-text, .fl-lane-bottom .fl-plate-text { fill: var(--ink); }
.fl-note { font-family: var(--m); font-size: 13px; letter-spacing: .06em; fill: var(--ink); }
.fl-path { fill: none; stroke: var(--carbon); stroke-width: 2.5; marker-end: url(#fl-arrow); }
.flow figcaption.pencil { background: var(--page); }
@media (prefers-reduced-motion: no-preference) {
  .flow[data-armed] .fl-path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: flowdraw .9s ease-out forwards; }
  .flow[data-armed] .fl-lane-top .fl-path:nth-of-type(2) { animation-delay: .15s; }
  .flow[data-armed] .fl-lane-top .fl-path:nth-of-type(3) { animation-delay: .3s; }
  .flow[data-armed] .fl-lane-bottom .fl-path { animation-delay: .15s; }
  .flow[data-armed] .fl-biz { opacity: 0; animation: flowland .4s ease-out forwards; animation-delay: .9s; }
  .flow[data-armed] .fl-lane-top .fl-biz:nth-of-type(2) { animation-delay: 1.05s; }
  .flow[data-armed] .fl-lane-top .fl-biz:nth-of-type(3) { animation-delay: 1.2s; }
  .flow[data-armed] .fl-enq { animation: flowin .5s ease-out both; }
}
@keyframes flowdraw { to { stroke-dashoffset: 0; } }
@keyframes flowland { to { opacity: 1; } }
@keyframes flowin { from { transform: translateX(-40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 600px) { .fl-plate-text { font-size: 22px; } .fl-note { font-size: 16px; } .fl-lane { font-size: 16px; } }
.month { margin-top: 24px; max-width: 760px; }
.month-ctl { display: flex; flex-direction: column; gap: 10px; font-weight: 600; }
.month-ctl output { font-family: var(--d); font-stretch: 62.5%; font-weight: 900; font-size: 2.2rem; line-height: 1; background: var(--canary); color: var(--ink); padding: .18em .35em .1em; width: max-content; border-radius: 4px; }
.month-ctl input[type=range] { width: 100%; accent-color: var(--carbon); height: 32px; }
.month-proof { grid-template-columns: 1fr 1fr; }
.month .pencil { margin-top: 12px; }
.verdict { margin-top: 24px; display: grid; gap: 10px; max-width: 760px; }
.tog { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 6px; cursor: pointer; background: var(--paper); }
.tog input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tog .box { width: 22px; height: 22px; border: 2px solid var(--ink); border-radius: 3px; background: transparent; display: inline-block; }
.tog input:checked + .box { background: var(--carbon); border-color: var(--carbon); box-shadow: inset 0 0 0 4px var(--paper); }
.tog input:focus-visible + .box { outline: 3px solid var(--carbon); outline-offset: 2px; }
.tog:has(input:checked) { border-color: var(--carbon); }
.verdict-out { margin-top: 10px; border: 2px solid var(--ink); border-radius: 6px; background: var(--canary-soft); padding: 20px 22px; display: grid; gap: 12px; }
.verdict-out .plate { font-size: clamp(1.5rem, 3vw, 2.2rem); width: max-content; max-width: 100%; }
.verdict-out p { margin: 0; color: var(--ink-soft); }

/* ---------- what tradies pay: price chart ---------- */
.pricechart { margin: 26px 0 0; border: 2px solid var(--ink); border-radius: 6px; overflow: hidden; background: var(--paper); position: relative; }
.bars { padding: 18px 20px 10px; display: grid; gap: 8px; }
.bar-row { display: grid; grid-template-columns: minmax(150px, 220px) 1fr 70px; gap: 12px; align-items: center; padding: 4px 0; outline: 0; cursor: default; }
.bar-row:focus-visible, .bar-row:hover { background: var(--page); }
.bar-label { font-family: var(--m); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.bar-track { position: relative; height: 22px; background: var(--page); border-radius: 3px; }
.bar { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); max-width: 100%; background: var(--carbon); border-radius: 3px; }
.bar-row.us .bar { background: var(--canary); }
.bar-val { font-size: 1.2rem; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.bar-tip { position: absolute; left: 20px; right: 20px; bottom: 54px; background: var(--ink); color: var(--paper); padding: 8px 12px; z-index: 2; border-radius: 4px; }
.pricechart figcaption.pencil { background: var(--page); }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--carbon); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; letter-spacing: inherit; }
.bar-table { padding: 0 14px 14px; }
@media (prefers-reduced-motion: no-preference) { .pricechart[data-armed] .bar { animation: bargrow .7s ease-out both; } }
@keyframes bargrow { from { width: 0; } }
@media (max-width: 600px) { .bar-row { grid-template-columns: 1fr 60px; } .bar-label { grid-column: 1 / -1; } .bar-track { height: 18px; } }

/* ---------- found by AI: checker, board, mock-ups ---------- */
form.aicheck { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; max-width: 720px; margin-top: 22px; }
form.aicheck label { display: grid; gap: 6px; min-width: 0; }
form.aicheck input { width: 100%; box-sizing: border-box; font: inherit; font-family: var(--m); font-size: 1.05rem; padding: 13px 14px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 3px; }
form.aicheck input:focus { outline: 3px solid var(--carbon); outline-offset: 2px; }
form.aicheck button { font-size: 1.1rem; letter-spacing: .03em; text-transform: uppercase; background: var(--carbon); color: var(--paper); border: 0; border-radius: 3px; padding: 15px 22px 13px; cursor: pointer; box-shadow: 0 2px 0 var(--carbon-deep); }
form.aicheck button[disabled] { opacity: .6; cursor: wait; }
.aicheck-out { margin-top: 18px; max-width: 860px; }
.aicheck-out .verdict { border: 2px solid var(--ink); border-radius: 6px; background: var(--paper); padding: 16px 18px; display: grid; gap: 8px; }
.aicheck-out .verdict h3 { font-size: 1.4rem; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.aicheck-out .vtag { font-size: 1rem; padding: .25em .5em .15em; background: var(--page); color: var(--ink); border-radius: 3px; }
.aicheck-out .vtag.open { background: var(--good); color: var(--paper); } .aicheck-out .vtag.partly { background: var(--canary); } .aicheck-out .vtag.blocked { background: var(--ink); color: var(--paper); } .aicheck-out .vtag.unknown { background: var(--line); }
.aicheck-out p { max-width: 70ch; margin: 0; }
.aicheck-out .bots { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.aicheck-out .bots li { background: var(--page); color: var(--ink); border: 1.5px solid var(--line); border-radius: 4px; padding: 9px 10px 7px; display: grid; gap: 4px; font-family: var(--m); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.aicheck-out .bots b { font-size: 1.05rem; letter-spacing: .05em; }
.aicheck-out .bots .allowed { background: #e3f2e9; border-color: var(--good); } .aicheck-out .bots .partial { background: var(--canary-soft); border-color: var(--canary); } .aicheck-out .bots .blocked { background: var(--ink); color: var(--paper); }
.aicheck-out .bots small { font-size: 11px; opacity: .8; }
.aicheck-out .notes { margin-top: 12px; display: grid; gap: 6px; color: var(--ink-soft); font-size: .95rem; }
.aicheck-out .fail { border: 2px solid var(--warn); border-radius: 6px; background: var(--paper); padding: 14px 18px; }
.aicheck-note { margin-top: 14px; max-width: 86ch; }
@media (max-width: 600px) { form.aicheck { grid-template-columns: 1fr; } }
ol.bgrid { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; counter-reset: none; }
.bcheck { position: relative; background: var(--paper); border: 1.5px solid var(--line); border-radius: 6px; padding: 18px 18px 22px; display: grid; gap: 6px; align-content: start; min-height: 150px; }
.bcheck .bnum { font-family: var(--m); font-size: 12px; letter-spacing: .1em; color: var(--carbon); }
.bcheck h3 { font-size: 1.15rem; color: var(--ink); margin: 0; }
.bcheck p { font-size: .9rem; margin: 0; color: var(--ink-soft); }
.bcheck .stamp { position: absolute; right: 12px; bottom: 10px; font-size: 1.1rem; letter-spacing: .1em; color: var(--carbon); border: 3px solid var(--carbon); border-radius: 4px; padding: 2px 8px 0; transform: rotate(-8deg) scale(1.6); opacity: 0; }
.bcheck.on .stamp { opacity: 1; transform: rotate(-8deg) scale(1); transition: transform .25s cubic-bezier(.2, 1.4, .4, 1), opacity .15s; }
ul.bcrawlers { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bcrawler { font-family: var(--m); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; padding: 7px 11px 5px; border: 1.5px solid var(--line); border-radius: 3px; color: var(--muted); transition: background .3s, color .3s, border-color .3s; }
.bcrawler.on { background: var(--canary); color: var(--ink); border-color: var(--canary); }
@media (prefers-reduced-motion: reduce) { .bcheck .stamp { opacity: 1; transform: rotate(-8deg) scale(1); } .bcrawler { background: var(--canary); color: var(--ink); border-color: var(--canary); } }
@media (max-width: 900px) { ol.bgrid { grid-template-columns: 1fr 1fr; } }
.svq { margin-top: 24px; }
.svq-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.mock { margin: 0; border: 2px solid var(--ink); border-radius: 6px; overflow: hidden; background: var(--paper); color: var(--ink); display: grid; gap: 8px; padding: 0 0 14px; position: relative; }
.mock figcaption { background: var(--ink); color: #c9cbd8; padding: 8px 12px; }
.m-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--page); }
.m-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.m-lock { margin-left: auto; font-family: var(--m); font-size: 10.5px; letter-spacing: .1em; padding: 2px 7px 1px; background: var(--ink); color: var(--paper); border-radius: 2px; }
.m-lock.m-open { background: var(--good); }
.m-h1 { font-size: 1.3rem; text-transform: uppercase; padding: 6px 14px 0; }
.m-line { height: 8px; margin: 0 14px; width: 70%; background: var(--line); border-radius: 2px; }
.m-line-long { width: 88%; }
.m-ans { margin: 0 14px; padding: 7px 9px; font-size: .9rem; border: 2px dashed var(--line); border-radius: 3px; }
.m-ans-bad { color: var(--muted); font-style: italic; }
.m-ans-good { border-style: solid; border-color: var(--good); background: #e3f2e9; }
.m-fact { margin: 0 14px; font-family: var(--m); font-size: 11.5px; letter-spacing: .04em; padding: 6px 8px; background: var(--canary-soft); border-radius: 3px; }
.m-form { margin: 4px 14px 0; display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; }
.m-form span { height: 26px; border: 1.5px solid var(--line); border-radius: 3px; }
.m-form .m-btn { height: auto; border: 0; background: var(--carbon); color: var(--paper); font-family: var(--d); font-stretch: 62.5%; font-weight: 900; font-size: .85rem; letter-spacing: .05em; text-transform: uppercase; padding: 4px 10px 2px; }
.m-foot { margin: 6px 14px 0; display: flex; flex-wrap: wrap; gap: 6px 12px; font-family: var(--m); font-size: 11px; letter-spacing: .05em; color: var(--muted); }
.m-schema { margin-left: auto; padding: 1px 6px; background: var(--good); color: var(--paper); border-radius: 2px; }
.m-schema-none { background: var(--line); color: var(--muted); }
[data-hot] { cursor: pointer; transition: box-shadow .15s, background .15s; }
.mock [data-hot].hot { box-shadow: 0 0 0 3px var(--canary); background: var(--canary-soft); }
ul.svq-list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 6px; }
ul.svq-list li { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px 12px; align-items: center; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 4px; cursor: pointer; background: var(--paper); }
ul.svq-list li b { font-size: 1.05rem; letter-spacing: .03em; text-transform: uppercase; }
ul.svq-list li b:first-child { color: var(--muted); } ul.svq-list li b:nth-of-type(2) { color: var(--carbon); }
ul.svq-list .vs { font-family: var(--m); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
ul.svq-list .dlabel { grid-column: 1 / -1; font-size: .92rem; color: var(--ink-soft); display: none; }
ul.svq-list li.hot { border-color: var(--carbon); background: var(--carbon-soft); } ul.svq-list li.hot .dlabel { display: block; }
@media (max-width: 760px) { .svq-cards { grid-template-columns: 1fr; } ul.svq-list li { grid-template-columns: 1fr; } ul.svq-list .dlabel { display: block; } }

/* ---------- archive bits still referenced somewhere ---------- */
figure.elevation { margin: 30px 0 0; border: 1.5px solid var(--line); border-radius: 6px; background: var(--paper); padding: clamp(14px, 3vw, 28px); }
figure.elevation svg { width: 100%; height: auto; display: block; }
.factlist { display: grid; grid-template-columns: max-content 1fr; gap: 12px 26px; margin-top: 26px; max-width: 70ch; }
.factlist dt { font-family: var(--m); font-size: 12.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--carbon); padding-top: .3em; }
.factlist dd { margin: 0; max-width: 60ch; color: var(--ink-soft); }
ul.record time { font-family: var(--m); font-size: 12.5px; letter-spacing: .06em; color: var(--muted); }
article.entry { border-top: 1px solid var(--line); padding-block: 34px; }
article.entry h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 8px 0 14px; text-wrap: balance; }
h1.entry-title { font-size: clamp(1.9rem, 4.5vw, 3.4rem); line-height: 1; text-transform: uppercase; max-width: 30ch; margin-top: 20px; }

/* ---------- phones ---------- */
@media (max-width: 720px) {
  .steps, .fence { grid-template-columns: 1fr; }
  form.sheet { grid-template-columns: 1fr; padding: 18px; box-shadow: 6px 6px 0 var(--ink); }
  ol.moves > li { grid-template-columns: 1fr; gap: 10px; }
  .wordmark img { height: 28px; }
  nav.plates a { font-size: 15px; padding: 8px 8px 7px; }
  nav.plates a.biz { padding: 9px 11px 8px; }
  .mast-inner { gap: 10px; }
  .plate { font-size: clamp(2.6rem, 13vw, 4rem); }
}

/* ---------- inline diagrams drawn in the old palette: map their colours to the docket ---------- */
svg [fill="#f3ecdb"] { fill: #fbfaf4; } svg [stroke="#f3ecdb"] { stroke: #fbfaf4; }
svg [fill="#161712"] { fill: #16182a; } svg [stroke="#161712"] { stroke: #16182a; } svg [flood-color="#161712"] { flood-color: #16182a; }
svg [fill="#f0b429"] { fill: #f4d94e; } svg [stroke="#f0b429"] { stroke: #2238a6; }
svg [fill="#5c5f55"] { fill: #585c70; }
svg [fill="#3fd27c"] { fill: #2238a6; }
/* word gap in stacked headlines, scaled to the plate size rather than the body text */
.plateline { gap: 0 clamp(10px, 2.2vw, 26px); }


/* ======== launch review additions, 8 Nov ======== */
/* real h1 built from the plates */
h1.stack { font-size: inherit; display: block; }
h1.stack .plateline { display: flex; }
/* header phone */
nav.plates a.tel { display: none; font-family: var(--m); font-stretch: 100%; font-weight: 600; font-size: 14px; text-transform: none; letter-spacing: .02em; color: var(--ink); border: 0; }
@media (min-width: 1000px) { nav.plates a.tel { display: inline-block; } }
/* sticky mobile bar */
.stickybar { display: none; }
@media (max-width: 720px) {
  .stickybar { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; border-top: 2px solid var(--ink); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--ink); }
  .stickybar a { font-family: var(--d); font-stretch: 62.5%; font-weight: 900; font-size: 17px; letter-spacing: .03em; text-transform: uppercase; text-decoration: none; text-align: center; padding: 14px 10px 13px; }
  .stickybar .s-check { background: var(--canary); color: var(--ink); }
  .stickybar .s-call { background: var(--ink); color: var(--paper); }
  body { padding-bottom: 58px; }
}
/* hero with the three frames */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px 48px; align-items: center; }
.hero-grid > * { min-width: 0; }
.frames { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 10px; align-items: start; }
.frame { position: relative; display: grid; gap: 10px; min-width: 0; }
.frame .fn { position: absolute; top: -10px; left: -10px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; background: var(--carbon); color: var(--paper); font-family: var(--d); font-stretch: 62.5%; font-weight: 900; font-size: 17px; display: grid; place-items: center; border: 2px solid var(--paper); }
.frame p { font-size: 13.5px; line-height: 1.4; color: var(--ink-soft); margin: 0; }
.frame p strong { color: var(--ink); }
.farrow { align-self: center; width: 22px; height: 22px; margin-top: 60px; border-right: 3px solid var(--carbon); border-top: 3px solid var(--carbon); transform: rotate(45deg) scale(.7); }
.phone-mock { background: var(--ink); border-radius: 18px; padding: 10px; aspect-ratio: 3/4; display: flex; flex-direction: column; gap: 7px; }
.pm-bar { background: var(--paper); border-radius: 99px; padding: 7px 10px; font-family: var(--m); font-size: 10.5px; color: var(--ink); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; }
.pm-g { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--carbon); flex: none; }
.pm-res { background: #22253d; border-radius: 6px; padding: 7px 9px; display: grid; gap: 4px; }
.pm-res b { display: block; font-size: 11.5px; color: var(--paper); font-weight: 700; min-height: 12px; }
.pm-res b:empty { background: #3a3e5a; height: 8px; width: 70%; border-radius: 2px; }
.pm-res span { font-family: var(--m); font-size: 9.5px; color: #a9abbd; min-height: 10px; }
.pm-res span:empty { background: #30334c; height: 6px; width: 50%; border-radius: 2px; display: block; }
.pm-res.hit { background: var(--canary); }
.pm-res.hit b { color: var(--ink); } .pm-res.hit span { color: var(--ink-soft); }
.site-mock { position: relative; border: 2px solid var(--ink); border-radius: 8px; overflow: hidden; aspect-ratio: 3/4; background: var(--ink); }
.site-mock img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.sm-tag { position: absolute; right: 8px; bottom: 8px; background: var(--carbon); color: var(--paper); font-family: var(--d); font-stretch: 62.5%; font-weight: 900; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; padding: 6px 9px 5px; border-radius: 3px; }
/* the docket */
.docket { position: relative; background: var(--canary-soft); border: 1.5px solid var(--ink); border-radius: 6px; padding: 14px 16px 12px; font-family: var(--m); font-size: 13px; color: var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.docket .dk-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: 11.5px; }
.docket .dk-top img { height: 22px; width: auto; }
.docket .dk-row { display: flex; justify-content: space-between; gap: 12px; padding-block: 6px; border-bottom: 1px dashed #c9c3ad; }
.docket .dk-row span:first-child { color: var(--muted); flex: none; } .docket .dk-row span:last-child { text-align: right; }
.docket .dk-stamp { position: absolute; right: 10px; bottom: 14px; width: 110px; height: auto; opacity: .9; pointer-events: none; }
.docket.mini { aspect-ratio: 3/4; font-size: 10.5px; padding: 10px 11px; box-shadow: 4px 4px 0 var(--ink); overflow: hidden; }
.docket.mini .dk-top { font-size: 9.5px; margin-bottom: 4px; }
.docket.mini .dk-row { padding-block: 4px; gap: 6px; }
.docket.mini .dk-stamp { width: 76px; right: 6px; bottom: 8px; }
.get-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; align-items: start; margin-top: 26px; }
.get-grid > * { min-width: 0; }
.get-grid .docket { font-size: 14px; padding: 18px 20px 16px; }
.get-grid .docket .dk-stamp { width: 140px; bottom: 18px; }
/* canary band sections */
section.band-can { background: var(--canary); color: #16182a; border-top: 2px solid var(--ink); }
section.band-can h2, section.band-can h3, section.band-can p, section.band-can .lead { color: #16182a; }
section.band-can h2 .tick { color: var(--carbon); }
section.band-can a { color: #16182a; }
.breath { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 22px; }
.breath > div { background: #fbfaf4; border: 2px solid #16182a; border-radius: 6px; padding: 22px; min-width: 0; }
.breath .bn { display: block; font-family: var(--d); font-stretch: 62.5%; font-weight: 900; font-size: clamp(28px, 3.4vw, 40px); line-height: .98; text-transform: uppercase; margin-bottom: 10px; color: #16182a; }
.breath > div:nth-child(3) .bn { color: var(--carbon); }
.breath p { font-size: 15.5px; margin: 0; color: #2a2d44; }
section.band-can .flow { background: #fbfaf4; }
.diff-line { margin-top: 18px; font-size: 17px; font-weight: 600; max-width: none; }
.diff-line a { text-decoration-color: var(--carbon); }
/* the map on ink */
section.warmap-sec.ink { background: var(--ink); color: var(--paper); border-top: 2px solid var(--ink); padding-block: clamp(44px, 6vw, 80px); }
section.warmap-sec.ink h2 { color: var(--paper); } section.warmap-sec.ink h2 .tick { color: var(--canary); }
section.warmap-sec.ink .lead { color: #d9dbe6; }
section.warmap-sec.ink figure.board-map { border-color: #3a3e5a; background: #1b1e36; }
section.warmap-sec.ink .warmap .sea { fill: #1b1e36; }
section.warmap-sec.ink .warmap .grid { color: #fbfaf4; opacity: .06; }
section.warmap-sec.ink .warmap .coast { fill: var(--canary); stroke: #16182a; }
section.warmap-sec.ink .warmap .borders, section.warmap-sec.ink .warmap .localb { stroke: #16182a; stroke-opacity: .5; }
section.warmap-sec.ink .warmap .state { fill: #16182a; fill-opacity: .7; }
section.warmap-sec.ink .warmap .scale path { stroke: #a9abbd; } section.warmap-sec.ink .warmap .scale text { fill: #a9abbd; }
section.warmap-sec.ink .warmap .pin .dot { fill: var(--carbon); stroke: #fbfaf4; }
section.warmap-sec.ink .warmap .pin .ring { stroke: #fbfaf4; }
section.warmap-sec.ink .warmap .pin .lbl { fill: #16182a; stroke: var(--canary); }
section.warmap-sec.ink .warmap .pin:hover .dot, section.warmap-sec.ink .warmap .pin.hot .dot { fill: #16182a; stroke: var(--canary); }
section.warmap-sec.ink .warmap .theatre .leader, section.warmap-sec.ink .warmap .theatre .target, section.warmap-sec.ink .warmap .theatre .rim { stroke: #fbfaf4; }
section.warmap-sec.ink .warmap .theatre .disc { fill: #22253d; }
section.warmap-sec.ink .warmap .theatre .tname { fill: #fbfaf4; } section.warmap-sec.ink .warmap .theatre .tcount { fill: #a9abbd; }
section.warmap-sec.ink figcaption.pencil { background: #22253d; border-color: #3a3e5a; color: #a9abbd; }
section.warmap-sec.ink .dispatch { background: #1b1e36; border-color: #3a3e5a; color: var(--paper); }
section.warmap-sec.ink .tally span { border-color: #3a3e5a; color: var(--paper); } section.warmap-sec.ink .tally b { color: var(--canary); }
section.warmap-sec.ink ul.theatres { border-color: #3a3e5a; } section.warmap-sec.ink ul.theatres li { border-color: #2c3050; }
section.warmap-sec.ink ul.theatres .st { color: var(--paper); } section.warmap-sec.ink ul.theatres .stn { color: var(--canary); }
section.warmap-sec.ink ul.theatres .reg { color: #d9dbe6; } section.warmap-sec.ink ul.theatres .reg b { color: var(--canary); }
section.warmap-sec.ink ul.theatres .reg:hover, section.warmap-sec.ink ul.theatres .reg.hot { color: var(--canary); }
section.warmap-sec.ink .dispatch .pencil, section.warmap-sec.ink .legend { color: #a9abbd; }
section.warmap-sec.ink .legend .k.dot { background: var(--canary); } section.warmap-sec.ink .legend .k.ring { border-color: #fbfaf4; }
section.warmap-sec.ink .live-dot { background: var(--canary); }
section.warmap-sec.ink .proof .figure { background: #1b1e36; border-color: #3a3e5a; }
section.warmap-sec.ink .proof .n { color: var(--canary); } section.warmap-sec.ink .proof .l { color: #a9abbd; }
section.warmap-sec.ink .pencil { color: #a9abbd; }
section.warmap-sec.ink .cta.quiet { color: var(--paper); box-shadow: inset 0 0 0 2px var(--paper); }
section.warmap-sec.ink .cta.quiet:hover { background: var(--paper); color: var(--ink); }
section.warmap-sec.ink .map-tip { background: var(--canary); color: #16182a; } section.warmap-sec.ink .map-tip b { color: #16182a; } section.warmap-sec.ink .map-tip .m { color: #2a2d44; }
.pencil.note.honest { margin-top: 14px; font-size: 13px; }
/* the finder */
.finder { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; margin: 22px 0 18px; }
.finder label { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; min-width: 0; }
.finder select { font: 400 16px/1.4 var(--b); color: var(--ink); background: var(--paper); border: 1.5px solid var(--ink); border-radius: 3px; padding: 12px 36px 12px 12px; width: 100%; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%; background-size: 6px 6px; background-repeat: no-repeat; }
.finder .cta { align-self: end; justify-content: center; }
.finder [data-finder-out] { grid-column: 1 / -1; margin: 0; min-height: 1.4em; }
section.warmap-sec.ink .finder label { color: var(--paper); }
section.warmap-sec.ink .finder .cta { background: var(--canary); color: var(--ink); box-shadow: 0 2px 0 #c9b23a; }
/* brendan strip */
section.brendan { background: var(--page); }
.brendan-grid { display: grid; grid-template-columns: 220px 1fr; gap: 36px; align-items: center; }
.brendan-grid img { width: 220px; height: 220px; object-fit: cover; border-radius: 6px; border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--canary); }
.brendan-grid h2 { font-size: clamp(28px, 3.6vw, 40px); }
/* four-field form extras */
form.sheet details.more-fields { grid-column: 1 / -1; }
form.sheet details.more-fields summary { cursor: pointer; font-weight: 600; font-size: .95rem; color: var(--carbon); list-style: none; padding: 4px 0; }
form.sheet details.more-fields summary::-webkit-details-marker { display: none; }
form.sheet details.more-fields summary::before { content: "+ "; }
form.sheet details.more-fields[open] summary::before { content: "\2013  "; }
form.sheet .more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; margin-top: 14px; }
form.sheet .more-grid .full { grid-column: 1 / -1; }
/* territories: filters and site links */
.filters { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 12px 16px; align-items: end; margin-top: 18px; }
.filters label { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; min-width: 0; }
.filters label.chk { grid-template-columns: auto 1fr; align-items: center; gap: 8px; padding-bottom: 12px; }
.filters select { font: 400 16px/1.4 var(--b); color: var(--ink); background: var(--paper); border: 1.5px solid var(--ink); border-radius: 3px; padding: 11px 36px 11px 12px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%; background-size: 6px 6px; background-repeat: no-repeat; }
.filters input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--carbon); }
.filters [data-filter-count] { padding-bottom: 14px; }
.terr-links { margin-top: auto; padding-top: 10px; display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.terr-links .terr-cta { margin-top: 0; padding-top: 0; }
.terr-site { font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap; }
.terr-site:hover { color: var(--carbon); text-decoration: underline; }
.terr-card .cta-row .cta.quiet { font-size: 16px; }
/* frames on the audience pages */
.frames-sec { padding-block: 28px 36px; }
.frames-sec .frames { max-width: 820px; }
/* long notes in sentence case */
.pencil.note { text-transform: none; letter-spacing: .02em; font-size: 13px; line-height: 1.55; }
/* fold on found-by-ai */
details.fold { margin-top: 10px; }
details.fold summary { cursor: pointer; font-weight: 700; color: var(--carbon); padding: 10px 0; }
/* phones */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .breath { grid-template-columns: 1fr; }
  .get-grid { grid-template-columns: 1fr; }
  .brendan-grid { grid-template-columns: 1fr; }
  .brendan-grid img { width: 160px; height: 160px; }
  .finder { grid-template-columns: 1fr; }
  .filters { grid-template-columns: 1fr 1fr; }
  .filters label.chk, .filters [data-filter-count] { grid-column: 1 / -1; padding-bottom: 0; }
}
@media (max-width: 720px) {
  .frames { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .farrow { display: none; }
  .frame p { font-size: 12px; }
  .frame .fn { width: 24px; height: 24px; font-size: 14px; top: -8px; left: -6px; }
  .docket.mini { font-size: 8.5px; padding: 8px; } .docket.mini .dk-top { font-size: 8px; } .docket.mini .dk-stamp { width: 52px; }
  .pm-bar { font-size: 8.5px; padding: 5px 8px; } .pm-res b { font-size: 9.5px; } .pm-res span { font-size: 8px; }
  form.sheet .more-grid { grid-template-columns: 1fr; }
}

/* ---- fixes after the first render of the new home ---- */
.hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px 44px; }
.frames { grid-template-columns: 1fr 1fr 1fr; gap: 14px; align-items: start; }
.farrow { display: none; }
.frame { grid-template-rows: 200px auto; }
.phone-mock, .site-mock, .docket.mini { aspect-ratio: auto; height: 200px; overflow: hidden; }
.phone-mock { justify-content: flex-start; }
.pm-res { padding: 6px 8px; }
.frame p { font-size: 13px; }
header.mast .mast-inner { gap: 12px; }
nav.plates { gap: 2px; }
nav.plates a { font-size: 16px; padding: 9px 9px 8px; }
nav.plates a.tel { font-size: 13px; padding-inline: 8px; }
nav.plates a.biz { margin-left: 4px; padding: 10px 12px 9px; }
.mast-note { display: none !important; }
@media (min-width: 1000px) { header.mast .mast-inner { flex-wrap: nowrap; } nav.plates { flex-wrap: nowrap; } }
.terr-links { flex-direction: column; align-items: flex-start; gap: 6px; }
@media (max-width: 720px) {
  .frames { grid-template-columns: 1fr; gap: 12px; }
  .frame { grid-template-columns: 104px 1fr; grid-template-rows: auto; align-items: center; gap: 12px; }
  .phone-mock, .site-mock, .docket.mini { height: 132px; }
  .frame p { font-size: 14px; }
  .frame .fn { top: -6px; left: -6px; }
  .docket.mini { font-size: 8px; } .docket.mini .dk-top { font-size: 7.5px; } .docket.mini .dk-stamp { width: 46px; }
}

@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } .hero-text { order: 0; } .frames { order: 1; } }
/* breathing room on the small bordered chips the audit flagged */
.bcrawler, .tally span, .creds span { padding: 9px 13px 8px; }
.m-lock, .m-schema { padding: 3px 8px 2px; }
.m-ans, .m-fact { padding: 9px 11px; }
.aicheck-out .bots li { padding: 11px 12px 9px; }
.bar-tip { padding: 10px 14px; }


/* ======== the journey graphic (hero), final ======== */
.frames { display: none; }
.journey { width: 100%; max-width: 780px; justify-self: end; background: var(--page); border: 1.5px solid var(--line); border-radius: 14px; padding: 26px 22px 20px; position: relative; }
.j-row { display: grid; grid-template-columns: 24fr 9fr 40fr 9fr 24fr; align-items: center; position: relative; }
.j-row::before { content: ""; position: absolute; left: 6%; right: 6%; top: 50%; border-top: 2px dashed var(--line); }
.j-caps { display: grid; grid-template-columns: 24fr 9fr 40fr 9fr 24fr; margin-top: 18px; }
.j-cap { min-width: 0; display: grid; grid-template-columns: 26px 1fr; gap: 2px 8px; align-items: center; }
.j-cap .n { width: 26px; height: 26px; border-radius: 50%; background: var(--carbon); color: var(--paper); font-family: var(--d); font-stretch: 62.5%; font-weight: 900; font-size: 15px; display: grid; place-items: center; }
.j-cap b { font-family: var(--d); font-stretch: 62.5%; font-weight: 900; font-size: 17px; line-height: 1; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.j-cap p { grid-column: 2; margin: 0; font-size: 12.5px; line-height: 1.35; color: var(--ink-soft); }
.j-arrow { position: relative; align-self: center; height: 3px; background: var(--ink); margin-inline: 6px; z-index: 1; }
.j-arrow::after { content: ""; position: absolute; right: -2px; top: -5px; width: 11px; height: 11px; border-right: 3px solid var(--ink); border-top: 3px solid var(--ink); transform: rotate(45deg); }
.j-arrow span { position: absolute; left: 50%; top: -34px; transform: translateX(-50%); white-space: nowrap; font-family: var(--m); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: var(--paper); border: 1.5px solid var(--ink); border-radius: 99px; padding: 4px 9px; }
.j-arrow.carbon { background: var(--carbon); height: 4px; } .j-arrow.carbon::after { border-color: var(--carbon); top: -5px; }
.j-arrow.carbon span { background: var(--canary); border-color: var(--ink); color: var(--ink); }
.dev { container-type: inline-size; min-width: 0; position: relative; z-index: 2; }
/* phones */
.phone { background: var(--ink); border-radius: 22px; padding: 4% 5% 4%; aspect-ratio: 9 / 16.6; display: flex; flex-direction: column; gap: 3.5cqw; box-shadow: 0 14px 30px rgba(22, 24, 42, .22), inset 0 0 0 2px #2e3250; }
.ph-status { display: flex; justify-content: space-between; align-items: center; font-family: var(--m); font-size: 5cqw; color: #c9cbd8; padding: 1cqw 2cqw 0; }
.ph-sig { display: inline-flex; gap: 1cqw; align-items: flex-end; } .ph-sig i { width: 1.8cqw; background: #c9cbd8; display: block; border-radius: 1px; } .ph-sig i:nth-child(1) { height: 3cqw; } .ph-sig i:nth-child(2) { height: 4.5cqw; } .ph-sig i:nth-child(3) { height: 6cqw; }
.ph-search { background: var(--paper); border-radius: 99px; padding: 4.5cqw 5cqw; font-family: var(--m); font-size: 6.2cqw; color: var(--ink); white-space: nowrap; overflow: hidden; display: flex; align-items: center; gap: 3.5cqw; }
.ph-mag { flex: none; width: 5.5cqw; height: 5.5cqw; border: 1.5cqw solid var(--carbon); border-radius: 50%; }
.ph-label { font-family: var(--m); font-size: 4.6cqw; letter-spacing: .1em; text-transform: uppercase; color: #8d90a0; padding-left: 2cqw; }
.ph-res { background: #22253d; border-radius: 4cqw; padding: 4.5cqw; display: grid; gap: 2.4cqw; position: relative; }
.ph-res b { display: block; font-size: 6.8cqw; line-height: 1.1; color: var(--paper); font-weight: 700; }
.ph-res span { display: block; font-family: var(--m); font-size: 4.8cqw; color: #a9abbd; }
.ph-res small { display: block; font-size: 4.6cqw; line-height: 1.3; color: #2a2d44; }
.ph-res b:empty { height: 4.6cqw; width: 70%; background: #3a3e5a; border-radius: 2px; } .ph-res span:empty { height: 3.6cqw; width: 50%; background: #30334c; border-radius: 2px; } .ph-res small:empty { height: 3.2cqw; width: 85%; background: #2b2e47; border-radius: 2px; }
.ph-res.hit { background: var(--canary); } .ph-res.hit b { color: var(--ink); } .ph-res.hit span { color: #2a2d44; }
.ph-res.hit em { position: absolute; top: -3.4cqw; right: 4cqw; font-style: normal; font-family: var(--d); font-stretch: 62.5%; font-weight: 900; font-size: 5.2cqw; letter-spacing: .06em; text-transform: uppercase; background: var(--carbon); color: var(--paper); padding: 1.5cqw 3cqw 1cqw; border-radius: 2px; }
.ph-home { margin-top: auto; align-self: center; width: 34%; height: 1.4cqw; border-radius: 99px; background: #4a4f6e; }
.phone.tradie { gap: 3cqw; }
.ph-from { display: flex; align-items: center; gap: 3cqw; font-family: var(--m); font-size: 5.2cqw; color: #d9dbe6; padding: 1cqw 1cqw 3cqw; border-bottom: 1px solid #2e3250; }
.ph-from img { width: 9cqw; height: 9cqw; border-radius: 2.5cqw; } .ph-from small { margin-left: auto; color: #8d90a0; font-size: 4.4cqw; }
.ph-sms { background: var(--canary); color: var(--ink); border-radius: 5cqw 5cqw 5cqw 1.5cqw; padding: 4.5cqw 5cqw; font-size: 5.6cqw; line-height: 1.35; max-width: 92%; }
.ph-sms b { color: var(--carbon); }
.ph-sms.me { background: #2e3250; color: var(--paper); border-radius: 5cqw 5cqw 1.5cqw 5cqw; align-self: flex-end; max-width: 70%; }
.ph-stamp { position: absolute; right: -8cqw; bottom: 16cqw; width: 50cqw; height: auto; transform: rotate(-9deg); filter: drop-shadow(0 2px 3px rgba(22, 24, 42, .3)); }
/* browser */
.browser { background: var(--paper); border: 2px solid var(--ink); border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 10.5; display: flex; flex-direction: column; box-shadow: 0 14px 30px rgba(22, 24, 42, .16); }
.br-bar { display: flex; align-items: center; gap: 1.6cqw; padding: 2.2cqw 3cqw; background: var(--page); border-bottom: 1px solid var(--line); }
.br-bar i { width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: var(--line); display: block; }
.br-bar span { margin-left: 2cqw; font-family: var(--m); font-size: 3.4cqw; color: var(--muted); background: var(--paper); border-radius: 99px; padding: 1cqw 4cqw; flex: 1; }
.br-body { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.br-body img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.br-body::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 45%, rgba(22, 24, 42, .22)); }
.br-form { position: absolute; right: 4.5cqw; top: 6cqw; width: 40cqw; background: var(--paper); border: 1.5px solid var(--ink); border-radius: 2.4cqw; padding: 3.2cqw; display: grid; gap: 2cqw; box-shadow: 0 8px 18px rgba(22, 24, 42, .25); z-index: 1; }
.br-form b { font-family: var(--d); font-stretch: 62.5%; font-weight: 900; font-size: 5.4cqw; text-transform: uppercase; color: var(--ink); line-height: 1; margin-bottom: .6cqw; }
.br-form .f { display: block; border: 1px solid var(--line); border-radius: 1.4cqw; padding: 1.8cqw 2.4cqw; font-size: 3.5cqw; line-height: 1.25; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #fff; }
.br-form .f.tall { white-space: normal; }
.br-form .btn { display: block; text-align: center; background: var(--carbon); color: var(--paper); border-radius: 1.4cqw; padding: 2.2cqw; font-family: var(--d); font-stretch: 62.5%; font-weight: 900; font-size: 4.4cqw; text-transform: uppercase; letter-spacing: .04em; }
.br-cursor { position: absolute; right: -3cqw; bottom: -4cqw; width: 8cqw; height: 8cqw; }
.frames-sec .journey { max-width: 860px; justify-self: start; }
@media (max-width: 640px) {
  .journey { padding: 18px 14px 14px; }
  .j-row { grid-template-columns: 1fr; gap: 34px; justify-items: center; }
  .j-row::before { display: none; }
  .j-row .dev.phone { width: 58%; }
  .j-row .dev.browser { width: 100%; }
  .j-arrow { width: 3px; height: 34px; margin: -22px 0; justify-self: center; }
  .j-arrow::after { right: -4px; top: auto; bottom: -1px; transform: rotate(135deg); }
  .j-arrow span { top: 50%; left: calc(50% + 14px); transform: translateY(-50%); }
  .j-caps { grid-template-columns: 1fr; gap: 12px; margin-top: 18px; }
  .j-caps > div:empty { display: none; }
  .j-cap b { font-size: 18px; white-space: normal; } .j-cap p { font-size: 14px; }
}
@media (min-width: 901px) {
  .hero-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; }
  .hero-text .plate { font-size: clamp(2.9rem, 7.2vw, 5.4rem); }
  .j-cap b { font-size: 17px; } .j-cap p { font-size: 12.5px; }
}
@media (min-width: 641px) and (max-width: 900px) { .journey { max-width: 600px; justify-self: start; } }
/* an element cannot be its own container: spacing between phone rows lives on the children */
.phone { gap: 0; }
.phone > * + * { margin-top: 3.4cqw; }
.phone.tradie > * + * { margin-top: 3cqw; }
.ph-home { margin-top: auto; }
@media (min-width: 901px) {
  .hero-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px; }
  .journey { padding: 22px 18px 16px; }
  .hero-text .plate { font-size: clamp(2.9rem, 6.8vw, 5.1rem); }
}
/* journey finishing */
.j-cap b { white-space: normal; font-size: 16px; line-height: .98; }
.browser { aspect-ratio: 16 / 11; }
.br-form { top: 3.5cqw; right: 4cqw; width: 40cqw; padding: 2.6cqw; gap: 1.6cqw; }
.br-form b { font-size: 5cqw; }
.br-form .f { padding: 1.4cqw 2.2cqw; font-size: 3.2cqw; }
.br-form .btn { padding: 1.8cqw; font-size: 4.2cqw; }
.br-cursor { right: -2.5cqw; bottom: -3cqw; width: 7cqw; height: 7cqw; }
@media (min-width: 641px) {
  .j-arrow span { display: none; }
  .j-row { grid-template-columns: 24fr 8fr 40fr 8fr 24fr; }
  .j-caps { grid-template-columns: 24fr 8fr 40fr 8fr 24fr; }
  .j-arrow.carbon { height: 4px; }
}

.phone > .ph-home, .phone.tradie > .ph-home { margin-top: auto; }
/* the tradie phone kept its own cqw gap through specificity; kill it, drop the route line, align caption titles */
.phone.tradie { gap: 0; }
.j-row::before { display: none; }
.j-cap b { min-height: 2em; display: flex; align-items: center; }
.ph-sms { margin-top: 4cqw; }

/* ======== mobile polish (9 Nov 2026) ======== */
/* Every anchor lands with its heading clear of the sticky header (desktop) */
[id] { scroll-margin-top: 96px; }
@media (max-width: 720px) {
  /* Header: logo, then one row of links. It scrolls away; the bottom bar carries the calls to action. */
  header.mast { position: static; }
  header.mast .mast-inner { flex-direction: column; align-items: flex-start; gap: 6px; padding-block: 12px 0; }
  .wordmark img { height: 26px; }
  nav.plates { margin-left: 0; width: 100%; flex-wrap: nowrap; gap: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; justify-content: space-between; }
  nav.plates::-webkit-scrollbar { display: none; }
  nav.plates a { font-size: 15px; padding: 10px 6px 9px; white-space: nowrap; flex: none; }
  nav.plates a:first-child { padding-left: 0; }
  nav.plates a.biz, nav.plates a.tel { display: none; }
  [id] { scroll-margin-top: 12px; }
  /* The journey graphic keeps its left-to-right story at phone width instead of stacking into a tall column */
  .journey { padding: 16px 12px 14px; }
  .j-row { grid-template-columns: 23fr 7fr 42fr 7fr 23fr; gap: 0; justify-items: stretch; }
  .j-row::before { display: block; left: 4%; right: 4%; }
  .j-row .dev.phone, .j-row .dev.browser { width: auto; }
  .j-arrow { width: auto; height: 2px; margin: 0 3px; justify-self: stretch; }
  .j-arrow::after { right: -2px; top: -4px; bottom: auto; width: 7px; height: 7px; border-width: 2px; transform: rotate(45deg); }
  .j-arrow.carbon { height: 3px; }
  .j-arrow span { display: none; }
  .phone { border-radius: 12px; box-shadow: 0 8px 16px rgba(22, 24, 42, .2), inset 0 0 0 1.5px #2e3250; }
  .browser { border-radius: 6px; border-width: 1.5px; box-shadow: 0 8px 16px rgba(22, 24, 42, .14); }
  .j-caps { gap: 10px; margin-top: 16px; }
  /* Sample docket: the SENT stamp sits clear of the last row */
  .docket, .get-grid .docket { padding-bottom: 60px; }
  .docket .dk-stamp, .get-grid .docket .dk-stamp { width: 104px; right: 12px; bottom: 10px; }
  /* The marketplace diagram shows whole at phone width; its two side notes repeat the paragraph above, so they go */
  .fl-note { display: none; }
  .fl-plate-text { font-size: 24px; } .fl-lane { font-size: 18px; }
  h1, h2, h3, summary { text-wrap: balance; }
  /* Territories: two cards a row, so 65 sites take half the scrolling */
  .terr-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .terr { padding: 12px 12px 11px; gap: 3px; }
  .terr-trade { font-size: 19px; }
  .terr-reg { font-size: 14px; line-height: 1.3; }
  .terr .terr-imp { font-size: 10.5px; line-height: 1.35; }
  .terr-cta { font-size: 14px; padding-top: 8px; }
  .terr-links { font-size: 12.5px; }
  .filters { gap: 10px; }
  /* Tables never push past the screen edge: long links and source names wrap inside their cell */
  table.ladder, table.compare { table-layout: fixed; width: 100%; }
  table.ladder td, table.ladder th, table.compare td, table.compare th { overflow-wrap: anywhere; word-break: normal; }
  /* The sources register reads as stacked cards on a phone: figure, then source and date on one line */
  table.register, table.register tbody, table.register tr, table.register td { display: block; width: 100%; }
  table.register { table-layout: auto; }
  table.register thead { display: none; }
  table.register tr { padding: 12px 14px; border-bottom: 1px solid var(--line); }
  table.register td { padding: 0; border: 0; }
  table.register td:nth-child(2) { display: inline; margin-top: 6px; }
  table.register td:nth-child(2)::before { content: ""; display: block; height: 6px; }
  table.register td.pencil { display: inline; white-space: nowrap; margin-left: 8px; font-size: 11px; }
}