@import "tokens.css";

/* ClearParcels. One stylesheet. Self-hosted fonts only. No third-party request.
   Token values are Noa's tokens.css sha8 534d2dcb. Legacy names alias those tokens. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "Urbanist";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/urbanist-500.woff2") format("woff2");
}
@font-face {
  font-family: "Urbanist";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/urbanist-600.woff2") format("woff2");
}
@font-face {
  font-family: "Urbanist";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/urbanist-800.woff2") format("woff2");
}

:root {
  --brand: var(--cp-brand);
  --brand-deep: var(--cp-action);
  --brand-wash: var(--cp-accent-soft);
  --ink: var(--cp-text);
  --muted: var(--cp-text-2);
  --line: var(--cp-line);
  --bg: var(--cp-surface);
  --panel: var(--cp-surface-2);
  --maxw: var(--cp-layout-content-max);
  --action-hover: #05655D;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--cp-font-body);
  font-weight: var(--cp-weight-regular);
  font-size: var(--cp-type-body-size);
  line-height: var(--cp-type-body-line);
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--cp-layout-margin-phone); }
.narrow { max-width: var(--cp-layout-measure-max); }

a { color: var(--cp-link); }
a:hover { color: var(--ink); }

h1, h2, h3 {
  font-family: var(--cp-font-display);
  font-weight: var(--cp-weight-semibold);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
}
h1 { font-size: clamp(2rem, 5vw, 3.5rem); margin: 0 0 1rem; }
h2 { font-size: var(--cp-type-display-m-size); line-height: var(--cp-type-display-m-line); margin: 0 0 .8rem; }
h3 { font-size: var(--cp-type-display-s-size); line-height: var(--cp-type-display-s-line); margin: 0 0 .4rem; }
p { margin: 0 0 1rem; }
.lede {
  font-family: var(--cp-font-body);
  font-size: var(--cp-type-lead-size);
  line-height: var(--cp-type-lead-line);
  font-weight: var(--cp-weight-regular);
  color: var(--muted);
}

.site-head {
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: rgba(255, 255, 255, .96);
  z-index: 10;
}
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-top: .8rem; padding-bottom: .8rem; flex-wrap: wrap;
}
.logo { display: inline-flex; align-items: center; padding: .2rem 0; }
.logo img { height: 22px; width: 160px; display: block; }
nav ul { list-style: none; display: flex; gap: 1.4rem; margin: 0; padding: 0; flex-wrap: wrap; }
nav a { text-decoration: none; color: var(--muted); font-size: var(--cp-type-label-size); line-height: var(--cp-type-label-line); }
nav a:hover, nav a[aria-current="page"] { color: var(--ink); }
nav a[aria-current="page"] { font-weight: var(--cp-weight-semibold); }

section { padding: 3.5rem 0; }
section.tight { padding: 2.2rem 0; }
.panel { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.hero { padding: 4.5rem 0 3rem; }
.hero h1 { max-width: 20ch; }
.hero .lede { max-width: 58ch; }

.eyebrow {
  font-size: .78rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--brand-deep); font-weight: var(--cp-weight-semibold); margin: 0 0 .7rem;
}

.btn {
  display: inline-block; padding: .7rem 1.2rem; border-radius: var(--cp-radius-md);
  background: var(--cp-action); color: var(--cp-on-action); text-decoration: none;
  font-family: var(--cp-font-body);
  font-weight: var(--cp-weight-medium);
  font-size: var(--cp-type-label-size);
  line-height: var(--cp-type-label-line);
  border: 1px solid var(--cp-action);
}
.btn:hover { background: var(--action-hover); color: var(--cp-on-action); }
.btn.ghost { background: transparent; color: var(--brand-deep); }
.btn.ghost:hover { background: var(--brand-wash); color: var(--brand-deep); }
.actions { display: flex; gap: .8rem; flex-wrap: wrap; margin: 1.6rem 0 0; }

.grid { display: grid; gap: 1.2rem; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

.card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--cp-radius-md); padding: 1.3rem 1.4rem; }
.card p:last-child { margin-bottom: 0; }
.card .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--brand-wash); color: var(--brand-deep);
  font-weight: var(--cp-weight-semibold); font-size: .9rem; margin-bottom: .6rem;
}

.trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--cp-accent-soft); }
.trust ul {
  list-style: none; margin: 0; padding: 1.1rem 0; display: grid; gap: .6rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); font-size: .95rem;
}
.trust li { padding-left: 1.6rem; position: relative; }
.trust li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .7rem; height: .7rem; border-radius: 2px; background: var(--brand);
}

.note {
  background: var(--cp-accent-soft);
  border: 0;
  border-left: 4px solid var(--cp-action);
  border-radius: var(--cp-radius-md);
  padding: 1rem 1.2rem;
  color: var(--ink);
}
.note strong { color: var(--ink); }
.note p:last-child { margin-bottom: 0; }

ul.plain { list-style: none; padding: 0; margin: 0 0 1rem; }
ul.plain li { padding-left: 1.5rem; position: relative; margin: .45rem 0; }
ul.plain li::before {
  content: ""; position: absolute; left: .15rem; top: .62em;
  width: .45rem; height: .45rem; border-radius: 50%; background: var(--brand);
}

.callout {
  border-left: 4px solid var(--cp-action);
  background: var(--cp-accent-soft);
  padding: 1.2rem 1.4rem;
  border-radius: 0 var(--cp-radius-md) var(--cp-radius-md) 0;
}
.callout p:last-child { margin-bottom: 0; }

.cta-band { background: var(--ink); color: #fff; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #c3ccd8; }
.cta-band .btn { background: var(--cp-action); border-color: var(--cp-action); color: var(--cp-on-action); }
.cta-band .btn:hover { background: var(--action-hover); color: var(--cp-on-action); }
.cta-band a:not(.btn) { color: var(--cp-color-teal-light); }

.mail { font-weight: var(--cp-weight-semibold); white-space: nowrap; }

figure.diagram { margin: 2rem 0 0; }
figure.diagram svg { width: 100%; height: auto; max-width: 45rem; display: block; }
figcaption { color: var(--muted); font-size: .9rem; margin-top: .6rem; }


.tag {
  display: inline-block;
  font-family: var(--cp-font-body);
  font-size: var(--cp-type-caption-size);
  line-height: var(--cp-type-caption-line);
  font-weight: var(--cp-weight-medium);
  padding: 2px 8px;
  border-radius: var(--cp-radius-sm);
}
.tag.open { background: var(--cp-accent-soft); color: var(--cp-action); }
.tag.none, .tag.notyet { background: var(--cp-surface-2); color: var(--cp-text-2); }
.tag.notread { background: var(--cp-surface-2); color: var(--cp-text); }

:focus-visible { outline: 3px solid var(--cp-focus); outline-offset: 2px; border-radius: 3px; }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff;
  padding: .7rem 1rem; z-index: 20; text-decoration: none;
}
.skip:focus { left: .5rem; top: .5rem; }

@media (min-width: 768px) {
  .wrap { padding-left: var(--cp-layout-margin-wide); padding-right: var(--cp-layout-margin-wide); }
}

@media (max-width: 640px) {
  .site-head { position: static; }
  nav ul { gap: .5rem 1.1rem; }
  nav a { font-size: .9rem; }
  section { padding: 2.6rem 0; }
  .hero { padding: 2.6rem 0 2rem; }
  figure.diagram { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  .site-head, .cta-band, .actions { display: none; }
  body { font-size: 11pt; }
  .note, .callout, .trust { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

.dual-cta { flex-wrap: wrap; gap: .75rem 1rem; }
.cta-lead { margin: 1.2rem 0 .6rem; font-weight: var(--cp-weight-semibold); }
.cta-note { margin-top: .75rem; font-size: .95rem; color: var(--muted); max-width: 36rem; }
.cta-band .cta-note { color: var(--cp-color-teal-light); }
.cta-band .btn.ghost { background: transparent; color: var(--cp-color-teal-light); border-color: var(--cp-color-teal-light); }
.cta-band .btn.ghost:hover { background: rgba(255,255,255,.08); color: #fff; }

.lookup-form label { display: block; font-weight: var(--cp-weight-semibold); margin: 1rem 0 .35rem; }
/* Every /lookup input (parcel ID, email, address) matches the buttons: full width, the same height
   and 12px radius, slate border, deep-teal focus (Tomer 2026-10-13, MAILBOX-DESIGN Part B). */
.lookup-form input[type="text"],
.lookup-form input[type="email"] {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  font: inherit;
  font-size: 1rem;
  line-height: 1.25;
  padding: .75rem 1rem;
  border: 1px solid var(--muted);
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
}
.lookup-form input[type="text"]:focus,
.lookup-form input[type="email"]:focus { border-color: var(--cp-focus); }
.lookup-form .btn, .v2 .lookup-form .btn { min-height: 48px; }
/* /lookup in the sitewide shell: v2-main already pads the column, so the #87 .wrap does not. */
.v2 :is(.lookup-hero, .lookup-result, .lookup-reserve, .lookup-confirm) > .wrap { padding-left: 0; padding-right: 0; }
button.btn { cursor: pointer; font: inherit; font-weight: var(--cp-weight-semibold); font-size: 1rem; }
.lookup-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.lookup-turnstile {
  border: 1px dashed var(--muted);
  background: var(--panel);
  padding: .8rem 1rem;
  margin: 1rem 0;
  max-width: 24rem;
}
.lookup-facts { margin: 1rem 0; }
.lookup-facts div { margin: 0 0 .35rem; }
.lookup-facts dt { display: inline; font-weight: var(--cp-weight-semibold); }
.lookup-facts dt::after { content: ": "; }
.lookup-facts dd { display: inline; margin: 0; }
.lookup-result table { width: 100%; border-collapse: collapse; margin: 1rem 0; border-bottom: 2px solid var(--ink); }
.lookup-result th, .lookup-result td {
  text-align: left;
  border-bottom: 1px solid var(--line);
  padding: .4rem .2rem;
  vertical-align: top;
}
.lookup-result th {
  font-weight: var(--cp-weight-semibold);
  color: var(--muted);
  border-bottom: 2px solid var(--ink);
}
.lookup-result td.num, .lookup-result th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   2026-10-07 site redesign, phases 0 and 1. Copy on these blocks is a draft
   for Noa and Itay (docs/copy-drafts/2026-10-07-site-redesign.md).
   --------------------------------------------------------------------------- */

/* Phase 0: the bot-check slot is a mock until Turnstile has a site key. No empty box on the page. */
.lookup-turnstile[data-turnstile-mode="mock"] { display: none; }

/* Phase 0: on phones the nav is one swipeable row under the logo, not two wrapped lines. */
@media (max-width: 640px) {
  .site-head nav { width: 100%; }
  .site-head nav ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: .15rem; }
  .site-head nav ul::-webkit-scrollbar { display: none; }
  .site-head nav li { flex: none; }
}

/* Home hero: copy on the left, a sample report card on the right. */
.hero.home {
  background:
    radial-gradient(60rem 26rem at 85% -10%, var(--cp-accent-soft) 0, rgba(230, 247, 245, 0) 60%),
    linear-gradient(var(--bg), var(--cp-color-mist));
}
.hero-split { display: grid; gap: 2.5rem; align-items: center; }
.hero-split h1 { max-width: 16ch; font-size: clamp(2rem, 4.2vw, 3.15rem); }
@media (min-width: 900px) { .hero-split { grid-template-columns: 1.05fr .95fr; gap: 3.5rem; } }

ul.reassure, ul.ticks { list-style: none; padding: 0; }
ul.reassure { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin: 1.1rem 0 0; font-size: .92rem; color: var(--muted); }
ul.ticks { margin: 1.4rem 0 0; display: grid; gap: .8rem; }
ul.reassure li, ul.ticks li { position: relative; padding-left: 1.6rem; }
ul.reassure li::before, ul.ticks li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: var(--brand-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.3 2.3 4.7-4.8' stroke='%2300786E' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 1.05rem no-repeat;
}

.report-card {
  margin: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 1.3rem 1.3rem 1rem;
  position: relative; overflow: hidden;
}
@media (min-width: 900px) { .report-card { transform: rotate(-1deg); } }
.rc-top { display: flex; justify-content: space-between; align-items: baseline; gap: .4rem 1rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: .7rem; }
.rc-title { font-family: var(--cp-font-display); font-weight: var(--cp-weight-semibold); font-size: 1.1rem; margin: 0; }
.rc-meta { font-size: .78rem; color: var(--muted); margin: 0; }
.rc-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .65rem 0; border-bottom: 1px dashed var(--line); margin: 0; }
.rc-office { font-weight: var(--cp-weight-semibold); font-size: .92rem; }
.rc-sub { display: block; font-weight: var(--cp-weight-regular); color: var(--muted); font-size: .78rem; }
.rc-amt { font-family: var(--cp-font-display); font-size: 1.2rem; white-space: nowrap; text-align: right; }
.rc-amt .tag { margin-left: .4rem; vertical-align: .15em; }
.sample-note, .example-banner { margin: 0 0 .85rem; font-size: .95rem; line-height: 1.45; color: var(--muted); }
.example-banner:last-child { margin: .85rem 0 0; }
ul.rc-check { list-style: none; padding: 0; margin: .8rem 0 0; font-size: .85rem; }
ul.rc-check li { position: relative; padding-left: 1.5rem; margin: .35rem 0; }
ul.rc-check li::before { content: ""; position: absolute; left: 0; top: .15em; width: .95rem; height: .95rem; border: 1.5px solid var(--brand-deep); border-radius: 4px; }
.report-card figcaption { text-align: right; font-size: .75rem; margin-top: .6rem; }

.card .icon { width: 2.4rem; height: 2.4rem; border-radius: 10px; background: var(--brand-wash); display: grid; place-items: center; margin-bottom: .8rem; }

/* Price cards: one price model per page, never side by side with another price. */
.card.price-card { padding: 1.8rem; }
.card.price-card.featured { border: 2px solid var(--cp-action); }
.price { margin: 0 0 .4rem; color: var(--muted); }
.price .amount { display: block; font-family: var(--cp-font-display); font-weight: var(--cp-weight-semibold); font-size: 3.5rem; line-height: 1; color: var(--ink); margin-bottom: .35rem; }
.card.price-card.dark { background: var(--ink); border-color: var(--ink); }
.card.price-card.dark h3 { color: #fff; }
.card.price-card.dark p { color: #c3ccd8; }
.card.price-card.dark .btn { background: #fff; border-color: #fff; color: var(--ink); }
.card.price-card.dark .btn:hover { background: var(--brand-wash); }
.price-hero { margin-top: 1.6rem; padding: 1.5rem 1.6rem; border: 2px solid var(--cp-action); border-radius: 14px; background: var(--bg); max-width: 34rem; }
.price-hero .lede { margin: .4rem 0 0; }

figure.founder { margin: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 1.6rem 1.8rem; }
figure.founder p { font-size: 1.15rem; line-height: 1.6; margin: 0 0 .8rem; }
figure.founder figcaption { margin: 0; font-size: .95rem; }

.faq-list { margin-top: 1rem; }
.faq-list details { border-bottom: 1px solid var(--line); padding: 1rem .2rem; }
.faq-list summary { cursor: pointer; font-weight: var(--cp-weight-semibold); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; color: var(--brand-deep); font-size: 1.3rem; line-height: 1; }
.faq-list details[open] summary::after { content: "\2212"; }
.faq-list details p { margin: .6rem 0 0; color: var(--muted); }

/* The public sample report: the real renderer's output for an invented parcel. */
.sample-label { display: inline-block; background: var(--ink); color: #fff; font-size: .8rem; padding: .2rem .75rem; border-radius: 999px; margin: 0 0 1rem; }
.sample-frame { position: relative; overflow: hidden; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 1.5rem 1.6rem; max-width: 52rem; }
.report-card::before, .sample-frame::before {
  content: "EXAMPLE";
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%) rotate(-32deg);
  font-family: var(--cp-font-display);
  font-weight: var(--cp-weight-semibold);
  font-size: 3.4rem;
  letter-spacing: .16em;
  color: var(--muted);
  opacity: .22;
  pointer-events: none;
  z-index: 0;
  white-space: nowrap;
}
.report-card > *, .sample-frame > * { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------------
   2026-10-07 site redesign, phase 2. Draft copy, same list (D30 onward).
   --------------------------------------------------------------------------- */

/* Hero demo. The finished card is the base state. The script in SAMPLE_CARD (site/build.py) adds
   .rc-wait while the card is off screen and swaps it for .rc-play once it is seen: the parcel line
   types in, each office row is read in turn, its amount lands, then the checklist. About 3.6 s,
   once. Reduced motion, no script or print: the finished card. */
@media screen {
  .rc-wait .rc-meta, .rc-wait .rc-row, .rc-wait .rc-check li { opacity: 0; }
}
.rc-row:nth-of-type(1) { --d: .55s; }
.rc-row:nth-of-type(2) { --d: 1.25s; }
.rc-row:nth-of-type(3) { --d: 1.95s; }
.rc-check li:nth-child(1) { --d: 2.85s; }
.rc-check li:nth-child(2) { --d: 3.05s; }
.rc-check li:nth-child(3) { --d: 3.25s; }
.rc-play .rc-meta { animation: rc-type .6s steps(24, end) .05s backwards; }
.rc-play .rc-row { position: relative; overflow: hidden; animation: rc-in .35s ease-out var(--d) backwards; }
.rc-play .rc-row::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(0, 175, 161, 0), rgba(0, 175, 161, .16), rgba(0, 175, 161, 0));
  animation: rc-scan .75s ease-in-out var(--d) backwards;
}
.rc-play .rc-amt { animation: rc-pop .35s cubic-bezier(.2, .9, .3, 1.3) calc(var(--d) + .65s) backwards; }
.rc-play .rc-check li { animation: rc-in .35s ease-out var(--d) backwards; }
@keyframes rc-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes rc-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes rc-scan { from { opacity: 1; transform: translateX(-100%); } to { opacity: 1; transform: translateX(100%); } }
@keyframes rc-pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }

/* Audience cards: one decorative line icon each. */
.card .icon { color: var(--brand-deep); }

/* /lookup: a step bar that follows the visitor, the form beside a "what you get" box. */
.lookup-hero { padding-top: 2.4rem; }
ol.steps { list-style: none; padding: 0; margin: 0 0 2rem; display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; font-size: .9rem; color: var(--muted); }
ol.steps li { display: flex; align-items: center; gap: .5rem; }
ol.steps span {
  display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  border: 1.5px solid var(--line); font-weight: var(--cp-weight-semibold); font-size: .8rem; line-height: 1; background: var(--bg);
}
ol.steps li[aria-current="step"] { color: var(--ink); font-weight: var(--cp-weight-semibold); }
ol.steps li[aria-current="step"] span { background: var(--cp-action); border-color: var(--cp-action); color: #fff; }
ol.steps li.done span { background: var(--brand-wash); border-color: var(--brand-wash); color: var(--brand-deep); }
.lookup-split { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 900px) { .lookup-split { grid-template-columns: minmax(0, 1fr) 21rem; gap: 3.5rem; } }
.lookup-aside { background: var(--bg); border: 2px solid var(--cp-action); border-radius: 14px; padding: 1.4rem 1.5rem; }
.lookup-aside .price .amount { font-size: 2.8rem; }
.lookup-aside ul.ticks { margin: 1rem 0 0; gap: .6rem; font-size: .95rem; }
.lookup-aside .aside-link { margin: 1.1rem 0 0; }
.lookup-form .hint { margin: .45rem 0 0; font-size: .9rem; color: var(--muted); }
.lookup-form .fine { font-size: .85rem; color: var(--muted); max-width: 36rem; }
details.fold { border: 1px solid var(--line); border-radius: var(--cp-radius-md); padding: .8rem 1rem; margin: 1rem 0; max-width: 40rem; background: var(--panel); }
details.fold summary { cursor: pointer; font-weight: var(--cp-weight-semibold); }
details.fold p { font-size: .95rem; }
/* The email and confirmation steps continue the step-1 column: same left edge, no extra gap. */
.lookup-reserve, .lookup-confirm { padding-top: 0; }
.lookup-form .fine { margin: .8rem 0 1.2rem; }
/* The pay-later promise sits beside the button it is about. */
.lookup-form .promise { background: var(--brand-wash); border-radius: var(--cp-radius-md); padding: .8rem 1rem; max-width: 40rem; }
@media (max-width: 640px) {
  ol.steps { flex-wrap: nowrap; gap: .8rem; font-size: .8rem; margin-bottom: 1.4rem; }
  ol.steps li { gap: .35rem; white-space: nowrap; }
  ol.steps span { width: 1.35rem; height: 1.35rem; font-size: .72rem; }
}

/* Two-button start on /lookup (Noa file 18, 351df1ad): one column, every choice a real
   full-width button at least 48 px tall. Only the flag-on page uses these ids and classes. */
.lookup-hero [hidden] { display: none !important; }
.lookup-start .btn, #address-open, #address-to-parcel, #start-over-parcel, #start-over-address {
  display: block; width: 100%; min-height: 48px; text-align: center; box-sizing: border-box;
}
/* The primary button sits 1rem above the outlined one under it, the same gap the outlined pair has. */
#lookup-check, #address-check, #address-continue { margin-bottom: 1rem; }
.lookup-start p { margin: .9rem 0 0; }
.lookup-start .hint { margin: .35rem 0 0; color: var(--muted); }
#address-list { list-style: none; margin: .35rem 0 0; padding: 0; border: 1px solid var(--line, #ccc); border-radius: 8px; }
#address-list li { padding: .7rem .8rem; }
/* a11y: the tint alone is ~1.1:1; the inset bar marks the keyboard-selected option at 3:1+ */
#address-list li[aria-selected="true"] { background: var(--brand-wash); box-shadow: inset 4px 0 0 var(--cp-focus); }

/* ------------------------------------------------------------------ Site redesign v2 (2026-10-11)
   Work doc section 1: one column, mobile first (~390px), white cards, soft grey borders, 12px radius.
   Design A (2026-10-11): one accent, var(--cp-accent) deep teal, for buttons, ticks and links.
   The hamburger is a <details> element: no script. */
body.v2 { background: #f6f8f9; }
.v2-wrap { max-width: 40rem; margin: 0 auto; padding: 0 1.1rem; }
.v2-head { background: #fff; border-bottom: 1px solid #e3e8ec; }
.v2-head .v2-wrap { display: flex; align-items: center; gap: .75rem; min-height: 3.5rem; position: relative; }
.v2-head .logo { margin-right: auto; }
.v2 .btn, .v2-btn, .v2-cta { background: var(--cp-accent); border-color: var(--cp-accent); color: #fff; border-radius: 12px; }
.v2 .btn:hover { filter: brightness(.94); }
.v2-cta { padding: .45rem .8rem; font-size: .9rem; text-decoration: none; }
.v2-menu > summary { list-style: none; cursor: pointer; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 12px; }
.v2-menu > summary::-webkit-details-marker { display: none; }
.v2-menu .bars, .v2-menu .bars::before, .v2-menu .bars::after { display: block; width: 1.25rem; height: 2px; background: var(--ink, #07111f); content: ""; position: relative; }
.v2-menu .bars::before { position: absolute; top: -6px; }
.v2-menu .bars::after { position: absolute; top: 6px; }
.v2-menu nav { position: absolute; right: 1.1rem; top: 3.4rem; background: #fff; border: 1px solid #e3e8ec; border-radius: 12px; padding: .5rem 0; min-width: 12rem; z-index: 10; box-shadow: 0 8px 24px rgba(7,17,31,.08); }
.v2-menu nav ul { display: block; list-style: none; margin: 0; padding: 0; }
.v2-menu nav li a { display: block; padding: .6rem 1rem; color: var(--ink, #07111f); font-size: 1rem; }
.v2-main { max-width: 40rem; margin: 0 auto; padding: 1.25rem 1.1rem 2rem; }
.v2-hero, .v2-card, .v2-band { background: #fff; border: 1px solid #e3e8ec; border-radius: 12px; padding: 1.4rem 1.2rem; margin-bottom: 1rem; }
.v2-hero h1 { font-size: 1.75rem; line-height: 1.2; margin: 0 0 .6rem; }
.v2-sub { color: var(--muted, #4a5866); margin: 0 0 1rem; }
.v2-actions { margin: 1rem 0 .5rem; }
.v2-actions .btn { display: block; width: 100%; text-align: center; padding: .85rem 1rem; }
.v2-small { font-size: .92rem; margin: .4rem 0; }
.v2 a { color: var(--cp-accent); }
.v2 .btn, .v2 .v2-cta { color: #fff; }
.v2-ticks, .v2-trust { list-style: none; padding: 0; margin: .8rem 0; }
.v2-ticks li, .v2-trust li { padding-left: 1.5rem; position: relative; margin: .35rem 0; }
.v2-ticks li::before, .v2-trust li::before { content: ""; position: absolute; left: .2rem; top: .45rem; width: .55rem; height: .3rem; border-left: 2px solid var(--cp-accent); border-bottom: 2px solid var(--cp-accent); transform: rotate(-45deg); }
.v2-steps { list-style: none; padding: 0; margin: 0 0 .8rem; }
.v2-steps li { display: flex; gap: .7rem; align-items: center; margin: .5rem 0; }
.v2-steps .n { width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--cp-accent); color: #fff; display: grid; place-items: center; font-size: .85rem; flex: none; }
.v2-strong { font-weight: 600; margin: 0; }
.v2-mandatory { font-size: .9rem; margin: 0 0 .8rem; }
.cp-details { background: #fff; border: 1px solid #e3e8ec; border-radius: 12px; padding: .8rem 1.2rem; margin: 1rem 0; font-size: .92rem; }
.cp-details > summary { cursor: pointer; color: var(--cp-accent); }
.cp-details .d-hide { display: none; }
.cp-details[open] .d-show { display: none; }
.cp-details[open] .d-hide { display: inline; }
.sr { font-size: .95rem; }
.sr-band { background: #f3f6f8; border-radius: 8px; padding: .4rem .7rem; font-weight: 600; }
.sr-bill { border-top: 1px solid #e3e8ec; padding-top: .6rem; margin-top: .6rem; }
/* Formal report (sample-report-v3, strings file 27): black, white and gray only. */
.sr-formal { color: #111; font-size: .85rem; line-height: 1.5; }
.sr-formal .sr-band { background: none; border-radius: 0; text-align: center; color: #666; font-weight: 500; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
.sr-lh { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; padding: 1rem 0 .8rem; border-bottom: 1px solid #bbb; }
.sr-lh .sr-logo { height: 34px; width: auto; }
.sr-r { text-align: right; margin-left: auto; }
.sr-title { font-family: var(--cp-font-display); font-weight: 800; font-size: 1.35rem; margin: 0; }
.sr-m { color: #555; font-size: .8rem; margin: 0; }
.sr-hd { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem 1rem; margin: 1.2rem 0; }
.sr-hd div { display: grid; grid-template-columns: 7.5rem 1fr; gap: .6rem; }
.sr-hd dt { color: #666; }
.sr-hd dd { margin: 0; }
.sr-checked { color: #444; }
.sr-table { width: 100%; border-collapse: collapse; }
.sr-table th { text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #111; padding: .45rem .4rem; }
.sr-table td { border-bottom: 1px solid #ddd; padding: .6rem .4rem; vertical-align: top; }
.sr-table .n { text-align: right; font-variant-numeric: tabular-nums; }
.tb-faq table.sr-table + p { margin-top: 16px; }
.sr-note { color: #444; font-size: .8rem; margin-top: .5rem; }
.sr-formal h3 { font-size: .85rem; font-weight: 600; margin: 1.4rem 0 .3rem; }
.sr-steps { margin: 0; padding-left: 1.25rem; }
.sr-fn { margin-top: 1.2rem; font-size: .72rem; color: #666; }
.sr-fn p, .sr-formal .sr-foot { margin: .15rem 0; }
.sr-formal .sr-foot { font-size: .72rem; color: #767676; }
.sr-formal .sr-foot-top { border-top: 1px solid #ccc; padding-top: .6rem; margin-top: 1.2rem; }
/* Desktop: the sample report breaks out of the 40rem column so its table cells do not wrap. */
@media (min-width: 960px) { .v2-main > .sample-frame { max-width: none; margin-left: calc(50% - 28rem); margin-right: calc(50% - 28rem); } }
@media (max-width: 600px) { .sr-lh { flex-wrap: wrap; } .sr-hd { grid-template-columns: 1fr; } .sr-table { font-size: .78rem; } }
@media (min-width: 768px) {
  .v2-menu { display: contents; }
  .v2-menu > summary { display: none; }
  .v2-menu nav { position: static; border: 0; box-shadow: none; padding: 0; min-width: 0; display: block; }
  .v2-menu nav ul { display: flex; gap: 1.1rem; }
  .v2-menu nav li a { padding: 0; font-size: .95rem; }
  .v2-head .v2-wrap { max-width: 64rem; }
}
.v2-cta { white-space: nowrap; }
.v2-progress { list-style: none; display: flex; gap: .4rem; max-width: 40rem; margin: 0 auto; padding: .5rem 1.1rem .8rem; }
.v2-progress li { flex: 1; font-size: .8rem; color: var(--muted, #4a5866); border-top: 4px solid #e3e8ec; padding-top: .3rem; }
.v2-progress li.on { border-top-color: var(--cp-accent); color: var(--ink, #07111f); }
.v2 .lookup-form .v2-btn, .v2-lookup .v2-hero > .v2-btn { display: block; width: 100%; min-height: 48px; margin-top: .8rem; }
.v2 .linkish { background: none; border: 0; padding: 0; color: var(--cp-accent); text-decoration: underline; font: inherit; cursor: pointer; }
.v2 #v2-list { list-style: none; margin: .3rem 0 0; padding: 0; border: 1px solid #e3e8ec; border-radius: 12px; }
.v2 #v2-list li { min-height: 48px; padding: .7rem .8rem; cursor: pointer; border-bottom: 1px solid #eef1f4; }
.v2 #v2-list li[aria-selected="true"] { background: #eef7f2; box-shadow: inset 4px 0 0 var(--cp-focus); }
.v2-legacy { background: #fff; border: 1px solid #e3e8ec; border-radius: 12px; overflow: hidden; margin-bottom: 1rem; }
.v2-legacy .wrap { max-width: none; padding-left: 1.2rem; padding-right: 1.2rem; }

/* ------------------------------------------------------------------ Sitewide footer (strings 26)
   One footer on every page. Visible: logo, links, copyright; the legal lines sit in a closed
   <details> labelled N664 (no script). Links: a wrapped centred row, 44px tap targets. */
.cp-foot { background: #fff; border-top: 1px solid #e3e8ec; padding: 1.5rem 0 1.25rem; font-size: .9rem; line-height: 1.55; color: var(--muted, #4a5866); text-align: center; }
.cp-foot-wrap { max-width: 64rem; margin: 0 auto; padding: 0 1.1rem; display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.cp-foot .logo img { width: 140px; height: auto; }
.cp-foot nav { width: 100%; }
.cp-foot-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .5rem; }
.cp-foot-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .6rem; color: var(--ink, #07111f); text-decoration: none; font-size: .95rem; }
.cp-foot-links a:hover { color: var(--cp-accent); text-decoration: underline; }
.cp-foot-legal { max-width: 40rem; width: 100%; }
.cp-foot-legal > summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .6rem; cursor: pointer; color: var(--cp-accent); font-weight: 600; }
.cp-foot-legal > summary { list-style: none; }
.cp-foot-legal > summary::-webkit-details-marker { display: none; }
.cp-foot-legal > summary::after { content: ""; width: .4rem; height: .4rem; margin: 0 0 .2rem .55rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.cp-foot-legal[open] > summary::after { margin-bottom: -.2rem; transform: rotate(-135deg); }
.cp-foot-body { text-align: left; border-top: 1px solid #e3e8ec; padding-top: .8rem; margin-top: .25rem; }
.cp-foot-body p { margin: 0 0 .6rem; }
.cp-foot-copy { margin: 0; font-size: .85rem; }
.cp-foot a:focus-visible, .cp-foot-legal > summary:focus-visible { outline: 2px solid var(--cp-accent); outline-offset: 2px; }

/* ------------------------------------------------------------------ Design A (2026-10-11)
   Approved reference design A (A-evolved), brand book tokens only: Urbanist 800 headlines, Inter
   body, deep teal #00786E for buttons and accents, tint hero and header, mist cards, slate
   secondary text, line hairlines, ink footer and CTA band. One block for every page: the v2
   pages, the #87 shell (legal, Terms, Privacy, /lookup) and the legacy bodies inside .v2-legacy.
   Tap targets 44px. Contrast (WCAG AA, tests/test_design_a.py): deep teal on white 5.37:1,
   on tint 4.85:1; white on deep teal 5.37:1; slate on mist 6.46:1; #C9D3DD on ink 12.48:1. */
body.v2 { background: var(--cp-surface); }
h1, h2 { font-family: var(--cp-font-display); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
h1 { font-size: clamp(2.25rem, 6vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.1; margin-bottom: 1rem; }
.v2 h3 { font-family: var(--cp-font-body); font-weight: var(--cp-weight-semibold); font-size: 1.125rem; line-height: 1.35; }
.price .amount, .rc-title { font-weight: 800; }
.eyebrow { font-size: 13px; letter-spacing: .12em; color: var(--cp-accent); }

/* Header: tint, flush with the hero. */
.v2-head, .site-head { background: var(--cp-accent-soft); border-bottom: 0; }
.site-head nav a, .v2-menu nav li a { color: var(--ink); font-weight: var(--cp-weight-medium); }
.v2-menu > summary { width: 44px; height: 44px; }
.v2-menu nav li a { display: flex; align-items: center; min-height: 44px; padding: 0 1rem; }
.site-head nav a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 768px) {
  .v2-head .v2-wrap, .cp-foot-wrap { max-width: 70rem; }
  .v2-menu nav li a { padding: 0; font-size: 15px; }
  /* Newer browsers hide a closed <details>' content even under display: contents: show the menu row. */
  .v2-menu::details-content { display: contents; content-visibility: visible; }
  .v2-menu nav { background: none; margin-right: .4rem; }
  .v2-menu { order: 1; }
  .v2-cta { order: 2; }
}

/* Buttons: deep teal, 12px radius, at least 44px tall. */
.btn, .v2 .btn, .v2-btn, .v2-cta {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  background: var(--cp-accent); border: 1px solid var(--cp-accent); color: #fff;
  border-radius: 12px; padding: .75rem 1.5rem; font-weight: var(--cp-weight-semibold); font-size: 1rem; line-height: 1.25; text-decoration: none;
}
.btn:hover, .v2 .btn:hover { background: var(--action-hover); border-color: var(--action-hover); color: #fff; filter: none; }
.btn.ghost, .v2 .btn.ghost { background: transparent; color: var(--cp-accent); }
.btn.ghost:hover { background: var(--cp-accent-soft); color: var(--cp-accent); }
.v2-actions .btn { display: flex; padding: .9rem 1.5rem; font-size: 1.0625rem; }
.v2 .v2-cta { padding: 0 .85rem; font-size: .9rem; white-space: nowrap; }
.v2-head .logo, .v2-menu > summary { flex: none; }
/* 390px phones: logo, the header button and the 44px menu button fit on one row. */
@media (max-width: 420px) {
  .v2-head .v2-wrap { gap: .4rem; padding: 0 .75rem; }
  .v2-head .logo img { width: 124px; height: auto; }
  .v2 .v2-cta { padding: 0 .6rem; font-size: .85rem; }
}
.v2-main a:not(.btn) { color: var(--cp-accent); text-underline-offset: 3px; }
.v2-small a { display: inline-flex; align-items: center; min-height: 44px; font-weight: var(--cp-weight-medium); }

/* Hero: full-bleed tint (box-shadow + clip-path keep the section in its column, no overflow). */
.v2-main { padding-top: 0; }
.v2-hero, .v2-legacy > .hero, body:not(.v2) .hero, .lk-band { background: var(--cp-accent-soft); }
.v2-hero, .v2-legacy > .hero, .lk-band {
  border: 0; border-radius: 0; box-shadow: 0 0 0 100vmax var(--cp-accent-soft); clip-path: inset(0 -100vmax);
  margin: 0 0 2rem; padding: 1.5rem 0 3rem;
}
.v2-hero h1, .lk-band h1 { font-size: clamp(2.25rem, 7vw, 3.25rem); margin: 0 0 1rem; }
/* /lookup (BAND-ARCHIVE 1): the band holds the step bar, heading and intro; the section under it is white. */
.v2 .lookup-hero { padding-top: 0; background: none; }
.lk-band .lede { margin-bottom: 0; }
.v2-sub, .v2 .lede { color: var(--cp-text-2); font-size: 1.1875rem; line-height: 1.55; }
.v2-legacy { background: none; border: 0; border-radius: 0; overflow: visible; }
.v2-legacy .wrap { padding-left: 0; padding-right: 0; }
.v2-legacy .hero { padding-top: 1.5rem; }

/* Cards: mist, no border, 16px radius. The sample report keeps a white sheet. */
.v2-card, .card, .cp-details { background: var(--cp-surface-2); border: 0; border-radius: 16px; }
.v2-card { padding: 1.5rem; }
.panel .card { background: var(--cp-surface); }
.v2-card.sample-frame { background: var(--cp-surface); border: 1px solid var(--line); }
.cp-details > summary { display: flex; align-items: center; min-height: 44px; color: var(--cp-accent); font-weight: var(--cp-weight-semibold); }

/* Ticks and the bold-number row (the steps list: big deep-teal numbers, slate captions). */
.v2-ticks li::before, .v2-trust li::before { border-color: var(--cp-accent); }
.v2-steps { margin: 0; }
.v2-steps li { gap: 1rem; margin: 0; padding: .9rem 0; border-top: 1px solid var(--line); color: var(--cp-text-2); }
.v2-steps li:first-child { border-top: 0; }
.v2-steps .n {
  width: auto; height: auto; min-width: 2.75rem; background: none; border-radius: 0; display: block;
  font-family: var(--cp-font-display); font-weight: 800; font-size: 2.75rem; line-height: 1; letter-spacing: -.02em; color: var(--cp-accent);
}
.v2-stats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0 0 2.5rem; }

/* Icon cards. */
.v2-feat { display: grid; gap: 18px; margin: 0 0 2.5rem; }
.v2-icard { background: var(--cp-surface-2); border-radius: 16px; padding: 1.5rem; }
.v2-icard .ic { width: 44px; height: 44px; border-radius: 10px; background: var(--cp-accent); display: grid; place-items: center; margin-bottom: 14px; }
.v2-icard h3 { margin: 0; }
/* /about (strings file 34): four cards, 2x2 on tablet; the CTA centered under them. */
@media (min-width: 600px) and (max-width: 899px) {
  .v2-feat:has(> .v2-icard:nth-child(4)) { grid-template-columns: repeat(2, 1fr); }
}
.about-cta .v2-actions { display: flex; justify-content: center; }
/* /contact hero (strings file 36, Addendum A): copy, trust points and the button beside a white
   contact card; a "What happens next" row under it. */
.ct-hero .v2-sub { max-width: 32rem; margin-bottom: 1.25rem; }
.ct-points { list-style: none; padding: 0; margin: 0 0 1.75rem; display: grid; gap: .7rem; }
.ct-points li { display: flex; align-items: flex-start; gap: .65rem; font-weight: var(--cp-weight-medium); color: var(--ink); }
.ct-points svg { flex: none; margin-top: .15rem; padding: 3px; box-sizing: content-box; border-radius: 50%; background: var(--cp-accent); color: #fff; }
.ct-hero .v2-actions { margin: 0; }
.ct-hero .v2-actions svg, .ct-social svg, .ct-note svg { flex: none; }
.ct-hero .v2-actions .btn { gap: .55rem; }
.ct-card { background: #fff; border-radius: 20px; padding: 1.75rem 1.5rem; margin: 2rem 0 0; box-shadow: 0 18px 48px rgba(0, 120, 110, .12); }
.ct-card h2 { font-family: var(--cp-font-display); font-weight: 800; font-size: 1.5rem; letter-spacing: -.01em; margin: 0 0 1rem; }
.ct-row { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .9rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.ct-row p { margin: 0; flex: 1 1 10rem; min-width: 0; overflow-wrap: anywhere; font-size: 1.0625rem; font-weight: var(--cp-weight-semibold); color: var(--ink); }
.ct-row .mail { text-decoration: none; }
.ct-row .mail:hover { text-decoration: underline; }
.ct-ic { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--cp-accent-soft); color: var(--cp-accent); display: grid; place-items: center; }
.ct-label { display: block; font-size: .8rem; font-weight: var(--cp-weight-semibold); letter-spacing: .06em; text-transform: uppercase; color: var(--cp-text-2); margin: 0 0 .15rem; }
.ct-copy { min-height: 44px; min-width: 5.5rem; padding: 0 1rem; border: 1px solid var(--cp-accent); border-radius: 12px; background: #fff; color: var(--cp-accent); font: inherit; font-weight: var(--cp-weight-semibold); cursor: pointer; }
.ct-copy:hover { background: var(--cp-accent-soft); }
.ct-copy:focus-visible, .ct-social .btn:focus-visible { outline: 3px solid var(--cp-accent); outline-offset: 2px; }
.ct-copied { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ct-social { padding: 1rem 0; border-top: 1px solid var(--line); }
.ct-social p { margin: 0; }
.ct-social p + p { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.ct-social .btn { display: inline-flex; gap: .45rem; width: auto; padding: .55rem 1rem; border-radius: 999px; border-color: var(--line); color: var(--ink); font-size: .95rem; }
.ct-social .btn:hover { border-color: var(--cp-accent); color: var(--cp-accent); background: var(--cp-accent-soft); }
.ct-note { display: flex; align-items: flex-start; gap: .5rem; margin: 0; padding: 1rem 1rem; border-radius: 12px; background: var(--cp-surface-2); color: var(--cp-text-2); font-size: .95rem; }
.ct-note svg { color: var(--cp-accent); margin-top: .15rem; }
.ct-social + .ct-note, .ct-row + .ct-note { margin-top: .25rem; }
.ct-next { padding: .5rem 0 0; margin: 0 0 2.5rem; }
.ct-next h2 { font-family: var(--cp-font-display); font-weight: 800; font-size: clamp(1.6rem, 4vw, 2rem); letter-spacing: -.02em; margin: 0 0 1.25rem; }
.ct-next .hiw-steps { margin: 0; }
@media (max-width: 899px) {
  .ct-next .hiw-steps li { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; padding: 1.25rem; }
  .ct-next .hiw-steps .n { grid-row: span 2; min-width: 1.6rem; font-size: 2.5rem; margin: 0; }
}
/* /contact (strings file 36): FAQ accordion, About strip, callout band. */
.ct-faq h3 { margin: 0; font-size: 1rem; }
.acc-btn { display: flex; justify-content: space-between; gap: 1rem; width: 100%; min-height: 44px; padding: 1rem .2rem; background: none; border: 0; border-bottom: 1px solid var(--line); font: inherit; font-weight: var(--cp-weight-semibold); color: var(--ink); text-align: left; cursor: pointer; }
.acc-btn::after { content: "+"; color: var(--brand-deep); font-size: 1.3rem; line-height: 1; }
.acc-btn[aria-expanded="true"]::after { content: "\2212"; }
.acc-panel p { margin: .6rem .2rem 1rem; color: var(--muted); }
.ct-faq { margin-bottom: 2.5rem; }
.ct-about h2 { margin-top: 0; }
.ct-callout { border-left: 4px solid var(--cp-accent); background: var(--cp-accent-soft); border-radius: 8px; padding: .9rem 1.2rem; margin: 0 0 2rem; }
.ct-callout p { margin: .2rem 0; }

/* Report mock: a white sheet with a soft shadow, tilted on wide screens. */
.report-card { border: 0; border-radius: 16px; box-shadow: 0 24px 60px rgba(7, 17, 31, .16); }
.hero-mock .sample-note { color: var(--cp-text-2); }

/* CTA band: ink, like the footer. */
.v2-band { background: var(--ink); color: #fff; border: 0; border-radius: 20px; padding: 2rem 1.5rem; }
.v2-band > p:first-child { font-family: var(--cp-font-display); font-weight: 800; font-size: clamp(1.5rem, 4vw, 2.25rem); line-height: 1.1; letter-spacing: -.02em; color: #fff; }
.v2-band p { color: #C9D3DD; }
.v2-band a:not(.btn) { color: var(--cp-color-teal-light); }
.cta-band { background: var(--ink); }
.v2-legacy .cta-band { border-radius: 20px; padding-left: 1.5rem; padding-right: 1.5rem; }

/* Wide layout (home and property managers): hero copy beside the report mock, 3-up rows. */
.v2-wide .v2-main { max-width: 70rem; padding-left: 1.4rem; padding-right: 1.4rem; }
@media (min-width: 900px) {
  .v2-wide .v2-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; padding: 2.5rem 0 3.5rem; }
  .v2-wide .v2-hero h1, .lk-band h1 { font-size: clamp(2.75rem, 5.2vw, 4.25rem); }
  .v2-wide .lk-band { padding: 2.5rem 0 3.5rem; }
  .v2-wide .v2-actions { display: flex; align-items: center; gap: 1.2rem; }
  .v2-wide .v2-actions .btn { display: inline-flex; width: auto; }
  .report-card { transform: rotate(-1.5deg); }
  .v2-wide .v2-stats .v2-steps { display: grid; grid-template-columns: repeat(3, 1fr); }
  .v2-wide .v2-stats .v2-steps li { display: block; border-top: 0; border-left: 1px solid var(--line); padding: 1.5rem 1.25rem; }
  .v2-wide .v2-stats .v2-steps li:first-child { border-left: 0; }
  .v2-wide .v2-stats .v2-steps .n { font-size: 3rem; margin-bottom: .4rem; }
  .v2-feat { grid-auto-flow: column; grid-auto-columns: 1fr; }
  .v2-wide .v2-band { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 2.5rem 2rem; }
  .v2-wide .v2-band .v2-actions { margin: 0; flex: none; }
}

/* Footer: ink. The logo swaps to the on-dark lockup by CSS, so the footer HTML (pinned on the legal
   pages) is unchanged; the img stays for its alt text (opacity, not visibility). */
.cp-foot { background: var(--ink); border-top: 0; color: #C9D3DD; padding: 2rem 0 1.6rem; }
.cp-foot .logo { background: url("logo-on-dark.svg") center / contain no-repeat; }
.cp-foot .logo img { opacity: 0; }
.cp-foot-links a { color: #fff; }
.cp-foot-links a:hover { color: var(--cp-color-teal-light); }
.cp-foot-legal > summary { color: var(--cp-color-teal-light); }
.cp-foot-body { border-top-color: #3a4250; }
.cp-foot-body a, .cp-foot a.mail { color: var(--cp-color-teal-light); }
.cp-foot-body strong { color: #fff; }
.cp-foot a:focus-visible, .cp-foot-legal > summary:focus-visible { outline-color: var(--cp-color-teal-light); }

/* Home mini of the formal report (strings file 28): sample-report-v3 letterhead, gray bars for text. */
.sr-mini { margin: 0; }
.sr-mini-page { background: #fff; border: 1px solid #ddd; border-radius: 4px; box-shadow: 0 10px 30px rgba(17, 17, 17, .08); padding: 1rem 1.3rem 1.2rem; color: #111; font-size: .62rem; max-width: 26rem; margin: 0 auto; }
.sr-mini-page i { display: block; height: .42rem; border-radius: 2px; background: #e6e6e6; }
.sr-mini .srm-band { margin: 0; } .sr-mini .srm-band i { width: 55%; margin: 0 auto; height: .3rem; }
.sr-mini .sr-lh { padding: .7rem 0 .55rem; }
.sr-mini .sr-lh .sr-logo { height: 20px; }
.sr-mini .sr-title { font-size: .85rem; }
.sr-mini .srm-date { width: 6rem; margin: .3rem 0 0 auto; height: .32rem; }
.srm-facts { display: grid; grid-template-columns: 3rem 1fr 3rem 1fr; gap: .35rem .6rem; margin: .9rem 0 1rem; }
.srm-facts i:nth-child(odd) { background: #efefef; }
.srm-head, .srm-row { display: grid; grid-template-columns: 1.4fr .7fr 1.1fr 1fr .9fr; gap: .5rem; align-items: center; }
.srm-head { border-bottom: 1px solid #111; padding: 0 0 .3rem; color: #333; font-weight: 600; font-size: .5rem; line-height: 1.2; }
.srm-row { border-bottom: 1px solid #ddd; padding: .55rem 0; }
.srm-fn { display: grid; gap: .3rem; margin-top: 1rem; } .srm-fn i { height: .3rem; } .srm-fn i:last-child { width: 70%; }
.sr-mini figcaption { margin-top: .7rem; text-align: center; color: var(--cp-text-2); font-size: .9rem; }

/* /pricing price box (strings file 29): one deep-teal brand box, white text, the price large. */
.price-box { background: var(--cp-action); color: var(--cp-on-action); border-radius: 16px; padding: 1.75rem 1.5rem; max-width: 30rem; box-shadow: 0 12px 32px rgba(0, 120, 110, .22); }
.price-box p { margin: 0; color: inherit; }
.pb-eyebrow { font-size: .8rem; font-weight: var(--cp-weight-semibold); letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.pb-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 .6rem !important; }
.pb-amount { font-family: var(--cp-font-display); font-weight: var(--cp-weight-semibold); font-size: clamp(3.5rem, 12vw, 4.75rem); line-height: 1; }
.pb-unit { font-size: 1.15rem; }
.pb-sub { font-size: 1.05rem; line-height: 1.5; }
.price-box .v2-actions { margin: 1.25rem 0 0; }
.price-box .btn { background: var(--cp-on-action); color: var(--cp-action); }
.price-box .btn:hover { background: var(--cp-accent-soft); color: var(--cp-action); }
.pb-details { max-width: 30rem; margin-top: 1rem; }

/* /how-it-works (strings file 31): numbered step cards, a one-row "what you get" strip, the price box centred. */
.hiw-label { font-size: .8rem; font-weight: var(--cp-weight-semibold); letter-spacing: .08em; text-transform: uppercase; color: var(--cp-accent); margin: 0 0 1rem; }
.hiw-steps { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 18px; }
.hiw-steps li { background: var(--cp-surface-2); border-radius: 16px; padding: 1.5rem; }
.hiw-steps .n { display: block; font-family: var(--cp-font-display); font-weight: 800; font-size: 3rem; line-height: 1; letter-spacing: -.02em; color: var(--cp-accent); margin-bottom: .6rem; }
.hiw-steps h3 { margin: 0 0 .35rem; }
.hiw-steps p { margin: 0; color: var(--cp-text-2); }
.hiw-get { margin: 0 0 2.5rem; }
.hiw-price { margin: 0 0 2.5rem; }
.hiw-price .price-box { margin: 0 auto; text-align: center; }
.hiw-price .pb-price { justify-content: center; }
@media (min-width: 900px) {
  .hiw-steps { grid-template-columns: repeat(3, 1fr); }
  .hiw-get { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .hiw-price .v2-actions { justify-content: center; }
  .hiw-get li { margin: 0; }
}

/* Strings file 32: the rest of the site in design A, reusing the cards, mini report and price box. */
.v2-icard p { margin: .35rem 0 0; color: var(--cp-text-2); }
.sr-badge { display: inline-block; margin: 0 0 .6rem; padding: .2rem .65rem; border-radius: 999px; background: var(--cp-accent); color: #fff; font-size: .8rem; font-weight: var(--cp-weight-semibold); }
.sr-mini { text-align: center; }
.tb-towns { margin: -1.5rem 0 2.5rem; color: var(--cp-text-2); }
.tb-visual { display: grid; gap: 1rem; max-width: 24rem; margin: 0 auto; width: 100%; }
.tb-bill { background: #fff; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 10px 30px rgba(17, 17, 17, .08); padding: 1rem 1.2rem; }
.tb-bill:nth-child(2) { margin-left: 2rem; }
.tb-label { margin: 0 0 .7rem; font-weight: var(--cp-weight-semibold); color: var(--ink); }
.tb-bill i { display: block; height: .45rem; border-radius: 2px; background: #e6e6e6; margin: .4rem 0; }
.tb-bill i:last-child { width: 60%; }
/* Strings file 33: office links under the bill cards; the FAQ after the price box. */
.tb-links p { margin: 0; color: var(--cp-text-2); }
.tb-links a { display: inline-block; min-height: 44px; line-height: 44px; margin-right: 1.2rem; }
.tb-faq { max-width: 40rem; margin: 2.5rem auto 0; }
.legal-updated { color: var(--cp-text-2); }
.nf-hero { text-align: center; }
.nf-hero .v2-actions { display: flex; flex-direction: column; gap: .75rem; align-items: center; }
.nf-hero .v2-actions .btn { width: 100%; max-width: 20rem; justify-content: center; }
.v2-lookup .v2-main { max-width: 70rem; }
.v2-lookup .v2-main > :not(.lk-hero) { max-width: 40rem; margin-left: auto; margin-right: auto; }
.lk-card { background: #fff; border-radius: 16px; padding: 1.4rem 1.2rem; box-shadow: 0 10px 30px rgba(17, 17, 17, .08); }
.lk-hero .v2-feat { margin: 1.5rem 0 0; }
.v2-legal .v2-main { max-width: 70rem; }
.legal-head, .legal-body { max-width: 45rem; }
.legal-toc { background: var(--cp-surface-2); border-radius: 16px; padding: 1rem 1.2rem; margin: 0 0 1.5rem; font-size: .92rem; }
.legal-toc p { margin: 0 0 .4rem; font-weight: var(--cp-weight-semibold); }
.legal-toc ol { margin: 0; padding: 0; list-style: none; }
.legal-toc li { margin: .25rem 0; }
@media (min-width: 900px) {
  .v2-wide .tb-visual { margin: 0; }
  .ct-card { margin: 0; padding: 2rem; }
  .ct-hero { align-items: center; }
  .v2-lookup .lk-hero:not([hidden]) { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; padding: 2.5rem 1.5rem; }
  .v2-lookup .lk-hero h1 { font-size: clamp(2.75rem, 5.2vw, 4.25rem); }
  .lk-hero .v2-feat { grid-column: 1 / -1; }
  .legal-layout { display: grid; grid-template-columns: 15rem minmax(0, 45rem); column-gap: 3rem; align-items: start; }
  .legal-head, .legal-body { grid-column: 2; }
  .legal-toc { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 1rem; margin: 1.5rem 0 0; }
}
.toc-a { display: block; scroll-margin-top: 1rem; }

/* ------------------------------------------------------------------ Spec 42 (Noa N916-N952, 2026-10-14)
   /lookup clarity and the /reserved page. Design A tokens only: deep teal, mint, mist, 8px rows. */
/* B4: a visible pressed state on every button, and the locked loading state with a spinner. */
.btn { transition: filter 100ms ease-out; }
.btn:active { filter: brightness(.82); }
.btn.is-busy, .btn[disabled] { cursor: progress; opacity: .85; }
.btn.is-busy::before {
  content: ""; display: inline-block; width: 1em; height: 1em; margin: 0 .5em -.15em 0; box-sizing: border-box;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: cp-spin .8s linear infinite;
}
@keyframes cp-spin { to { transform: rotate(360deg); } }
/* The N946 step line takes the old step bar's place at the top of the mint band. */
.lk-step { margin: 0 0 .8rem; color: var(--cp-action); font-weight: var(--cp-weight-semibold); font-size: .95rem; }
.lk-typing { margin: .35rem 0 0; }
/* B5: the address dropdown as a card: 8px radius, hover and active rows, matched text in bold. */
#address-list { background: var(--bg); box-shadow: 0 6px 18px rgba(16, 42, 52, .12); overflow: hidden; max-height: 22rem; overflow-y: auto; }
#address-list li { border-top: 1px solid var(--line); }
#address-list li:first-child { border-top: 0; }
#address-list li:hover { background: var(--cp-surface-2); }
#address-list li strong { font-weight: var(--cp-weight-semibold); }
/* B5: the confirm card and the N933 matched card: one card each, teal border, no tick. */
.lk-confirm, .lk-match {
  background: var(--bg); border: 2px solid var(--cp-action); border-radius: 12px; padding: 1.1rem 1.2rem; margin: 1rem 0 1.2rem;
  scroll-margin-top: 1rem;
}
.lk-confirm .eyebrow { margin: 0 0 .3rem; font-size: .85rem; }
.lk-confirm h2, .lk-match h2 { font-size: 1.35rem; margin: 0 0 .5rem; }
.lk-confirm .hint { margin: .2rem 0 .6rem; color: var(--muted); }
.lk-match p:last-child { margin-bottom: 0; }
/* M42-G: the short source line reads as body copy; "Learn more" opens the full N433 under it. */
.lk-confirm .lk-source { margin: .6rem 0 .2rem; }
.lk-more { margin: 0 0 .8rem; }
.lk-more summary { cursor: pointer; color: var(--cp-link); text-decoration: underline; display: inline-block; min-height: 24px; }
.lk-more p { margin: .4rem 0 0; }
.lk-privacy { margin: .6rem 0; }
/* Noa 2026-10-24: one price or no-card line per screen. While the email step (with N1193) shows, N1204 keeps only its first sentence. */
.v2-main:has(#lookup-reserve:not([hidden])) .lk-n1204-rest { display: none; }
.lookup-reserve { scroll-margin-top: 1rem; }
/* Fix (c) 2026-10-24: on a phone the email step reads email field, the Terms line, the Reserve
   button, then every other line in page order. Layout only: no copy and no markup moves. */
@media (max-width: 480px) {
  #reserve-form { display: flex; flex-direction: column; }
  #reserve-form > * { order: 3; }
  #reserve-form > label[for="reserve-email"], #reserve-email, #reserve-email-error { order: 0; }
  #reserve-form > .reserve-assent { order: 1; }
  #reserve-form > button[type="submit"], #reserve-error { order: 2; }
}
/* M42 item 13: on step 2 the price box no longer sets the hero row's height, so the matched card
   sits right under the fine print, beside the box; the step 2 column keeps clear of the box. */
@media (min-width: 900px) {
  .v2-main:has(#lookup-reserve:not([hidden])) .lookup-split { position: relative; }
  .v2-main:has(#lookup-reserve:not([hidden])) .lookup-aside { position: absolute; top: 0; right: 0; width: 21rem; }
  .v2-main:has(#lookup-reserve:not([hidden])) .lookup-reserve .narrow { max-width: min(var(--cp-layout-measure-max), calc(100% - 24.5rem)); }
}
/* /reserved: the hero band, then white cards; the status pill is neutral grey, no tick. */
.v2-reserved .v2-main > section, .v2-reserved .v2-actions { max-width: 40rem; }
.v2-reserved .rs-summary, .v2-reserved .rs-about, .v2-reserved .rs-contact, .v2-reserved .rs-follow { margin: 0 0 1rem; }
.v2-reserved .rs-summary h2, .v2-reserved .rs-next h2, .v2-reserved .rs-about h2, .v2-reserved .rs-contact h2,
.v2-reserved .rs-follow h2 { font-size: 1.35rem; margin: 0 0 .6rem; }
.rs-summary dd { overflow-wrap: anywhere; }
.rs-pill { display: inline-block; margin: .4rem 0 0; padding: .3rem .8rem; border-radius: 999px; background: #e6eaed; color: var(--ink); font-size: .9rem; font-weight: var(--cp-weight-medium); }
.rs-next { margin: 1.5rem 0; }
.rs-next .hiw-steps p { margin: 0; }
.rs-note { color: var(--muted); }
.rs-fallback { font-size: clamp(1.5rem, 4.5vw, 2.1rem); }

/* Social landing hero (2026-10-20, Fix 2). Hidden until a social arrival. Scoped so a plain
   /lookup, whose address form is not inside this block, keeps its spacing. */
.sl-hero[hidden] { display: none !important; }
.sl-hero {
  margin: 0 0 1.25rem;
  padding: .35rem 0 .85rem;
}
.lookup-hero .sl-hero h1 {
  max-width: 22em;
  margin: 0 0 .35rem;
  font-size: 1.45rem;
  line-height: 1.15;
  letter-spacing: -.02em;
}
.sl-line { margin: 0 0 .55rem; color: var(--cp-text-2); font-size: .98rem; line-height: 1.35; }
.sl-trust { margin: .45rem 0 0; color: var(--cp-text-2); font-size: .8rem; line-height: 1.3; }
.sl-hero .lookup-form label { margin: .1rem 0 .2rem; }
.sl-hero .hint { margin: .15rem 0; font-size: .82rem; line-height: 1.3; }
.sl-hero #address-check { margin-top: .35rem; margin-bottom: .25rem; width: 100%; }
.sl-hero #address-hint, .sl-hero #address-typing { display: none !important; }
.v2-head .v2-cta[hidden] { display: none !important; }
.sl-visual { display: block; margin: .85rem 0 0; color: inherit; text-decoration: none; }
.sl-visual:focus-visible { outline: 2px solid var(--cp-accent); outline-offset: 3px; }
.sl-band { margin: .55rem 0 0; text-align: center; color: var(--cp-text-2); font-size: .82rem; line-height: 1.35; }
.sl-hero .sr-mini-page { max-width: 18rem; }
@media (min-width: 900px) {
  .sl-hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 2rem; align-items: start; padding: 1rem 0 1.5rem; }
  .lookup-hero .sl-hero h1 { font-size: 2.05rem; }
  .sl-visual { margin: 0; }
  .sl-hero .sr-mini-page { max-width: 24rem; }
}