/* Homeproof property check. Document aesthetic: paper, ink, one coloured edge per verdict.
   Tokens: paper #FAF8F3, ink #191C19, edge oxblood #8E2B20, ochre #96671B, moss #2C5C44,
           rule #D9DDE1, muted #5F6873, unavailable #A0A7AE, link #0F5C8C */
:root {
  /* Warm paper, printer's-ink black with a faint green cast, and status colours from oxblood, ochre and moss
     rather than a dashboard's traffic lights. Greys are mixed from the ink so nothing looks bolted on. */
  --paper: #FAF8F3; --card: #FFFFFF; --ink: #191C19; --edge: #8E2B20; --amber: #96671B; --green: #2C5C44;
  --rule: #E3DFD6; --muted: #5A5F5A; --grey: #9BA09A; --wash: #F2EFE7; --link: #1F4034;
  /* The brand colour. Deep field green: land and permanence, and not the blue every other service uses. */
  --brand: #1F4034; --brand-deep: #163026; --brand-tint: #E8EEE9;
  --red-wash: #F8EDEA; --amber-wash: #F8F1E2; --green-wash: #EBF1EC; --grey-wash: #F2EFE7;
  --brand-tint-deep: #DEE7E0; --rule-tint: #C6D5C9;        /* the pack row and its rules, on the ledger */
  --display: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --body: "Public Sans", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --radius: 4px;
  --shadow: 0 1px 1px rgba(25, 28, 25, .04), 0 12px 28px -24px rgba(25, 28, 25, .40);
  /* 20% wider than the first design (1080 / 760), at the owner's request: the page felt narrow beside others. */
  --wide: 1296px; --narrow: 912px; --header-h: 60px; --subnav-h: 48px;
}

/* ---------------------------------------------------------------- base */
* { box-sizing: border-box; }
[hidden] { display: none !important; }        /* the hidden attribute wins over any display rule below */
html { background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.5; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; padding-top: 36px; padding-bottom: 72px; scroll-margin-top: var(--header-h); }
.container { width: 100%; max-width: var(--wide); margin: 0 auto; padding-left: 24px; padding-right: 24px; }
main.narrow { max-width: var(--narrow); }

h1, h2, h3 { font-family: var(--display); font-weight: 600; margin: 0; line-height: 1.14; letter-spacing: -0.015em; }
h1 { font-size: clamp(30px, 4.6vw, 46px); overflow-wrap: anywhere; }
h2 { font-size: 24px; }
h3 { font-size: 19px; }
p { margin: 0 0 12px; }
.lead { font-size: 19px; line-height: 1.5; color: #3A4453; max-width: 60ch; }
.eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 0 0 10px; font-weight: 700; display: block; }
.eyebrow.light { color: rgba(255, 255, 255, .72); }
.muted { color: var(--muted); }
.small { font-size: 14px; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
code, pre { font-family: var(--mono); }
code { font-size: .92em; }
pre { background: var(--wash); border: 1px solid var(--rule); border-radius: var(--radius); padding: 12px 14px; overflow-x: auto; font-size: 13px; max-width: 100%; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.segmented a:focus-visible, .jump a:focus-visible, .nav a:focus-visible { outline-offset: -3px; }   /* inside clipped containers */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* The sign-up form's trap field (app/main.py SIGNUP_TRAP_FIELD): off-screen for people, still there for a bot to fill. */
.aux-row { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 12px; border-radius: var(--radius); z-index: 100; }
.skip:focus { left: 8px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------- header & footer */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--brand); border-bottom: 1px solid var(--brand-deep); }
.bar { min-height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #F7F5EF; padding: 10px 0; }
.brand .mark { width: 28px; height: 28px; flex: none; }
.brand-name { font-family: var(--display); font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }
.brand-desc { font-size: 13px; color: rgba(247, 245, 239, .68); border-left: 1px solid rgba(247, 245, 239, .28); padding-left: 10px; margin-left: 2px; }
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav a { color: rgba(247, 245, 239, .86); text-decoration: none; padding: 8px 12px; border-radius: 999px; font-size: 15px; }
.nav a:hover { background: rgba(247, 245, 239, .12); color: #F7F5EF; }
.nav a[aria-current="page"] { background: #F7F5EF; color: var(--brand); font-weight: 600; }
/* The account menu (owner, 27 Sep 2026): opens on hover, on keyboard focus within, or on the chevron (site.js). */
.nav-account { position: relative; display: inline-flex; align-items: center; }
.nav-account-toggle { background: none; border: 0; color: rgba(247, 245, 239, .86); padding: 8px 8px 8px 2px; margin-left: -8px; cursor: pointer; border-radius: 999px; line-height: 0; }
.nav-account-toggle svg { width: 14px; height: 14px; }
.nav-account-toggle:hover, .nav-account-toggle:focus-visible, .nav-account.open .nav-account-toggle { color: #F7F5EF; }
.nav-menu { display: none; position: absolute; right: 0; top: 100%; padding-top: 6px; min-width: 260px; z-index: 60; }
.nav-account:hover .nav-menu, .nav-account:focus-within .nav-menu, .nav-account.open .nav-menu { display: block; }
.nav-menu-inner { background: var(--paper); color: var(--ink); border: 1px solid var(--edge); border-radius: 12px; box-shadow: var(--shadow); padding: 8px; }
.nav-menu-inner a, .nav-menu-inner button { display: block; width: 100%; text-align: left; color: var(--ink); background: none; border: 0; padding: 8px 10px; border-radius: 8px; font: inherit; font-size: 15px; line-height: 1.3; cursor: pointer; text-decoration: none; }
.nav-menu-inner a:hover, .nav-menu-inner button:hover, .nav-menu-inner a:focus-visible, .nav-menu-inner button:focus-visible { background: var(--brand-tint); color: var(--ink); }
.nav-menu-who { margin: 0 0 6px; padding: 6px 10px 10px; border-bottom: 1px solid var(--rule); font-size: 14px; color: var(--muted); line-height: 1.45; }
.nav-menu-who strong { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.nav-menu-kind { font-size: 13px; }
.nav-menu.pinned { position: fixed; left: 16px; right: 16px; min-width: 0; }
@media (max-width: 640px) {
  .bar { padding-bottom: 6px; }
  .nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; padding-right: 32px;
         -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 6px 10px; font-size: 14px; white-space: nowrap; }
}
.site-footer { border-top: 1px solid var(--rule); background: var(--wash); }
.foot { padding-top: 26px; padding-bottom: 34px; display: grid; gap: 10px; font-size: 14px; color: var(--muted); }
.foot-row { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.foot-counters { justify-self: end; text-align: right; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12px; letter-spacing: .06em; color: var(--muted); }
.foot strong { color: var(--ink); font-family: var(--display); font-size: 17px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.foot p { margin: 0; }

/* The cookie banner (base.html, site.js; docs/google-ads-tag-plan.md). One quiet strip along the bottom of the
   window, never a modal: the page stays usable behind it and site.js pads the body by its height so nothing
   is covered for good. Both buttons are the same class, so the same weight and size. */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--card); color: var(--ink);
  border-top: 1px solid var(--rule); box-shadow: 0 -8px 24px -20px rgba(25, 28, 25, .45); }
.cookie-row { display: flex; align-items: center; gap: 8px 20px; padding-top: 10px; padding-bottom: 10px; }
.cookie-row p { margin: 0; font-size: 14px; line-height: 1.4; flex: 1 1 auto; }
.cookie-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.cookie-banner .cookie-choice { min-width: 96px; justify-content: center; text-align: center; }
@media (max-width: 640px) {
  .cookie-row { flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; padding-left: 16px; padding-right: 16px; }
  .cookie-row p { font-size: 13px; flex-basis: 100%; }
  .cookie-actions { width: 100%; }
  .cookie-banner .cookie-choice { flex: 1 1 0; padding-top: 6px; padding-bottom: 6px; }
}
@media print { .cookie-banner { display: none !important; } }

/* ---------------------------------------------------------------- controls */
.btn, button { font: inherit; font-weight: 700; padding: 11px 18px; background: var(--brand); color: #F7F5EF; border: 1px solid var(--brand);
               border-radius: var(--radius); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; line-height: 1.2; }
.btn:hover, button:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: #F7F5EF; }
.btn.quiet, button.quiet { background: transparent; color: var(--brand); border-color: var(--brand); }
.btn.quiet:hover, button.quiet:hover { background: var(--brand-tint); color: var(--brand-deep); }
.btn.light, button.light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .65); }
.btn.light:hover, button.light:hover { background: rgba(255, 255, 255, .14); }
.btn.small, button.small { padding: 7px 12px; font-size: 14px; }
input[type=text], input[type=search], input[type=password], input[type=email], input[type=number], input[type=date], select, textarea { font: inherit; padding: 12px 14px; border: 1px solid #8B939D; border-radius: var(--radius); background: #fff; width: 100%; color: var(--ink); box-sizing: border-box; }
input[type=text]:focus, input[type=search]:focus, input[type=password]:focus, input[type=email]:focus, input[type=number]:focus, input[type=date]:focus, select:focus, textarea:focus { border-color: var(--ink); }
textarea { min-height: 80px; resize: vertical; }
label { display: block; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.h-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; margin: 0 0 14px; }
.h-section { font-size: 22px; }
.h-card { font-size: 19px; }
.stack > * + * { margin-top: 44px; }
.crumbs { font-size: 14px; color: var(--muted); margin: 0 0 10px; }
.crumbs a { color: var(--muted); }
.crumbs span { margin: 0 4px; }

.card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow); }
.table-wrap { overflow-x: auto; padding: 4px 22px; }

/* status pills, dots, badges, tiers */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
        border: 1px solid var(--rule); color: var(--muted); background: var(--wash); white-space: nowrap; letter-spacing: .02em; }
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--grey); flex: none; }
.pill.RED { color: #8E0B21; background: var(--red-wash); border-color: #EFC6CC; } .pill.RED::before { background: var(--edge); }
.pill.AMBER, .pill.key { color: #7A500F; background: var(--amber-wash); border-color: #EBD6AE; } .pill.AMBER::before, .pill.key::before { background: var(--amber); }
.pill.GREEN, .pill.ready { color: #1F5C41; background: var(--green-wash); border-color: #BFDCCB; } .pill.GREEN::before, .pill.ready::before { background: var(--green); }
.dot, .sw { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: var(--grey); flex: none; }
.dot.RED, .sw.RED { background: var(--edge); } .dot.AMBER, .sw.AMBER { background: var(--amber); } .dot.GREEN, .sw.GREEN { background: var(--green); }
.dot.INK { background: var(--ink); }
.sw.ok, .sw.ready { background: var(--green); } .sw.partial, .sw.key { background: var(--amber); }
.sw.unavailable, .sw.skipped, .sw.demo, .sw.error { background: var(--grey); }
.sw.pending { background: transparent; border: 2px solid var(--grey); }
.sw.running { background: transparent; border: 2px solid var(--amber); border-top-color: transparent; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.badge { display: inline-block; font-size: 11px; padding: 2px 8px; border: 1px solid var(--rule); border-radius: 2px; color: var(--muted); white-space: nowrap; text-transform: uppercase; letter-spacing: .05em; vertical-align: middle; }
.badge.confirmed { border-color: var(--green); color: var(--green); }
.badge.pending { border-color: var(--amber); color: #7A500F; }
.badge.unanchored { border-color: var(--grey); color: var(--muted); }
.badge.failed, .badge.unsealed { border-color: var(--edge); color: var(--edge); }
.tier { display: inline-block; font-size: 12px; padding: 1px 7px; border: 1px solid var(--rule); border-radius: 2px; color: var(--muted); white-space: nowrap; }
.tier.V { border-color: var(--green); color: var(--green); }
.tier.I { border-color: #9DBBD1; color: #2F5F82; }
.tier.D { border-color: var(--amber); color: #7A500F; }
.tier.U { border-color: var(--grey); color: var(--muted); }
/* Not included: openly outside what this check covers, as against a source that failed. Deliberately
   quieter than U so a reader's eye is not drawn to it as a problem. */
.tier.N { border-style: dashed; border-color: var(--rule); color: var(--grey); }

/* ---------------------------------------------------------------- home */
.hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .85fr); gap: 40px; align-items: start; padding: 16px 0 4px; }
.hero h1 { max-width: 17ch; margin-bottom: 14px; }
@media (max-width: 880px) { .hero { grid-template-columns: 1fr; gap: 28px; } }
form.search { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin: 22px 0 12px; }
form.search input { font-size: 17px; padding: 14px 16px; box-shadow: var(--shadow); }
@media (max-width: 560px) { form.search { grid-template-columns: 1fr; } }
.demo-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.steps ol { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 16px; }
.steps li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; }
.steps .num { width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: #F7F5EF; font-family: var(--display); font-weight: 600; display: grid; place-items: center; }
.steps strong { display: block; margin-bottom: 2px; }
.steps p { margin: 0; font-size: 14px; color: var(--muted); }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { border: 1px solid var(--rule); background: var(--card); border-radius: 999px; padding: 6px 14px; font-size: 14px; }
.source-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px; }
.source { padding: 14px 16px; display: grid; gap: 4px; align-content: start; }
.source-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 14px 0; }
.stat { background: var(--wash); border-radius: var(--radius); padding: 14px 16px; }
.stat strong { font-family: var(--display); font-size: 30px; display: block; line-height: 1.1; }
.stat span { font-size: 13px; color: var(--muted); }
@media (max-width: 640px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.recent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 12px; }
a.recent { display: grid; gap: 8px; align-content: start; justify-items: start; text-decoration: none; color: var(--ink); padding: 16px 18px; }
a.recent:hover { border-color: var(--ink); }
a.recent strong { font-family: var(--display); font-size: 17px; line-height: 1.25; }

/* products */
.products { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 12px; }
/* Six prices: three across at the 1296px container (four would leave two orphans), two on a tablet, one on a
   phone. The CTA sits at the foot of each card so the buttons line up along a row. */
.products.six { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.products.six > .product { display: flex; flex-direction: column; }
.products.six > .product > .product-cta { margin-top: auto; padding-top: 6px; }
/* The free check, beneath the paid cards as a band rather than another column or an orphan. */
.product.band { margin-top: 12px; display: grid; grid-template-columns: minmax(200px, .6fr) minmax(0, 2fr) auto; gap: 8px 28px; align-items: start; }
.product.band .product-head { margin: 0; display: block; }
.product.band .product-head .price { display: block; margin-top: 4px; }
.product.band .product-cta { margin: 0; align-self: center; }
.product.band p { max-width: 68ch; }
@media (max-width: 960px) { .product.band { grid-template-columns: minmax(0, 1fr); } .product.band .product-cta { align-self: start; } }
.product { padding: 18px 20px; }
.product p { margin: 0 0 8px; font-size: 14px; }
.product-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.product h3 { font-size: 20px; }
.price { font-family: var(--display); font-size: 22px; font-weight: 600; white-space: nowrap; }
.product.featured { border-color: var(--ink); }
#pricing { scroll-margin-top: calc(var(--header-h) + 16px); }
.pro { margin-top: 12px; padding: 0; }
.pro summary { cursor: pointer; padding: 14px 20px; font-weight: 700; color: var(--ink); font-size: 16px; list-style: none; display: flex; align-items: center; gap: 10px; }
.pro summary::before { content: "+"; font-family: var(--display); font-size: 20px; width: 22px; text-align: center; }
.pro[open] summary::before { content: "\2212"; }
.pro summary::-webkit-details-marker { display: none; }
.pro-body { padding: 4px 20px 16px; border-top: 1px solid var(--rule); }
.pro-body p { margin: 0 0 8px; font-size: 14px; }

/* ---------------------------------------------------------------- certificate */
.subnav { position: sticky; top: var(--header-h); z-index: 30; background: var(--paper); border-bottom: 1px solid var(--rule); }
.subnav-in { display: flex; align-items: center; gap: 18px; min-height: var(--subnav-h); }
.subnav-address { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 600; max-width: 26%; flex: none; min-width: 0; }
.subnav-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jump { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px 0; }
.jump a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: 13px; color: var(--ink); text-decoration: none; border-radius: 999px; white-space: nowrap; }
.jump a:hover { background: var(--wash); }
.jump a.on { background: var(--ink); color: #fff; }
@media (max-width: 760px) { .subnav-address { display: none; } }

.cert-head { display: flex; justify-content: space-between; gap: 16px 24px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 22px; }
.cert-head > div:first-child { min-width: 0; flex: 1 1 420px; }
.cert-tools { display: grid; gap: 10px; justify-items: end; }
.cert-tools .view-note { margin: 0; max-width: 30rem; text-align: right; }   /* view gating: where the trade views are */
.meta { color: var(--muted); font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; }
.segmented { display: inline-flex; border: 1px solid var(--ink); border-radius: 999px; overflow: hidden; }
.segmented a { padding: 6px 14px; font-size: 14px; color: var(--ink); text-decoration: none; }
.segmented a + a { border-left: 1px solid var(--ink); }
.segmented a.on { background: var(--ink); color: #fff; }

.verdict { border-left: 12px solid var(--grey); background: var(--grey-wash); border-radius: 0 var(--radius) var(--radius) 0; padding: 18px 24px;
           display: grid; grid-template-columns: 1fr minmax(220px, 300px); gap: 12px 32px; align-items: center; margin: 0 0 24px; }
.verdict.RED { border-color: var(--edge); background: var(--red-wash); }
.verdict.AMBER { border-color: var(--amber); background: var(--amber-wash); }
.verdict.GREEN { border-color: var(--green); background: var(--green-wash); }
.verdict h2 { font-size: 26px; margin-bottom: 4px; }
.verdict p { margin: 0; }
.meter { height: 8px; background: rgba(25, 28, 25, .12); border-radius: 999px; overflow: hidden; margin-bottom: 6px; }
.meter span { display: block; height: 100%; background: var(--ink); border-radius: 999px; }
/* The certificate's count, by source (seller-notes S2): one segment per tier, in the tier badges' colours. */
.meter.stacked { display: flex; }
.meter.stacked span { border-radius: 0; flex: none; }
.meter .seg-V { background: var(--ink); } .meter .seg-I { background: #9DBBD1; } .meter .seg-D { background: var(--amber); }
.meter .seg-N, .meter .seg-U { background: var(--grey); }
.verdict .tier-means { margin-top: 4px; }
@media (max-width: 720px) { .verdict { grid-template-columns: 1fr; } }

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 22px; }
.tile { background: var(--card); border: 1px solid var(--rule); border-left: 5px solid var(--grey); border-radius: var(--radius); padding: 12px 14px 14px;
        display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink); min-height: 96px; }
.tile.RED { border-left-color: var(--edge); } .tile.AMBER { border-left-color: var(--amber); } .tile.GREEN { border-left-color: var(--green); }
.tile.empty { background: transparent; color: var(--muted); }
a.tile:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.tile .name { font-family: var(--display); font-size: 17px; font-weight: 600; }
.tile .line { font-size: 13px; color: var(--muted); }
.rag-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.RED > .rag-label, .RED .rag-label { color: #8E0B21; } .AMBER > .rag-label, .AMBER .rag-label { color: #7A500F; } .GREEN > .rag-label, .GREEN .rag-label { color: #1F5C41; }
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
.legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: var(--muted); margin-bottom: 26px; }

.section-card { background: var(--card); border: 1px solid var(--rule); border-top: 4px solid var(--grey); border-radius: var(--radius);
                padding: 20px 24px 10px; margin: 0 0 18px; scroll-margin-top: calc(var(--header-h) + var(--subnav-h) + 16px); }
.section-card.RED { border-top-color: var(--edge); } .section-card.AMBER { border-top-color: var(--amber); } .section-card.GREEN { border-top-color: var(--green); }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 12px; margin-bottom: 8px; flex-wrap: wrap; }
.section-head h2 { display: flex; align-items: center; gap: 10px; font-size: 22px; }
.finding { border-radius: var(--radius); padding: 12px 16px; margin: 8px 0 12px; border-left: 4px solid var(--grey); background: var(--grey-wash); }
.finding.RED { border-color: var(--edge); background: var(--red-wash); }
.finding.AMBER { border-color: var(--amber); background: var(--amber-wash); }
.finding.INFO { border-color: var(--green); background: var(--green-wash); }
.finding .sev { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 1px 6px; border-radius: 2px; margin-bottom: 4px; background: rgba(25, 28, 25, .08); color: var(--muted); }
.finding.RED .sev { color: #8E0B21; background: rgba(200, 16, 46, .12); } .finding.AMBER .sev { color: #7A500F; background: rgba(183, 121, 31, .16); } .finding.INFO .sev { color: #1F5C41; background: rgba(47, 125, 91, .14); }
.finding strong { display: block; margin-bottom: 2px; }
.finding p { margin: 0; font-size: 15px; max-width: 78ch; }
.finding .act { margin-top: 6px; font-size: 14px; color: var(--muted); }
.finding .act span { font-weight: 700; color: var(--ink); margin-right: 4px; }
table.items { width: 100%; border-collapse: collapse; margin: 8px 0 12px; font-size: 15px; }
table.items th { text-align: left; font-weight: 700; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; padding: 6px 12px 8px 0; border-bottom: 1px solid var(--rule); }
table.items td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.items tr:last-child td { border-bottom: 0; }
table.items td.val { font-weight: 700; }
table.items td.src { color: var(--muted); font-size: 13px; width: 18%; min-width: 7em; }
table.items td.val ul { font-weight: 400; }
table.items tr[hidden] { display: none !important; }
table.kv td:first-child { color: var(--muted); font-size: 13px; width: 130px; }
table.kv td.val { font-weight: 400; word-break: break-word; }
@media screen and (max-width: 720px) {
  table.items:not(.kv) thead { display: none; }
  table.items:not(.kv) tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--rule); }
  table.items:not(.kv) tr:last-child { border-bottom: 0; }
  table.items:not(.kv) td { display: block; border: 0; padding: 2px 0; white-space: normal; }
  table.items td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; margin-top: 4px; }
}
ul.plain { margin: 4px 0 0; padding-left: 18px; }
.apps li { margin-bottom: 6px; }
details summary { cursor: pointer; color: var(--link); font-size: 14px; }
.note { font-size: 13px; color: var(--muted); display: block; margin-top: 3px; font-weight: 400; }
/* A correction to something already sealed: one grey italic line beside the sentence it corrects, never a
   banner. It has to be readable on the certificate, in the answers pack and on the delivery page, all three of
   which use a different grey line of their own, so it only ever adds the italic. */
.correction { font-style: italic; }

form.declare { margin: 30px 0; }
form.declare fieldset { border: 0; padding: 0; margin: 14px 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 20px; }
form.declare fieldset label { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
form.declare input[type=checkbox] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--ink); flex: none; }
form.declare label > input[type=text], form.declare label > textarea { margin-top: 6px; }
@media (max-width: 640px) { form.declare fieldset { grid-template-columns: 1fr; } }

.seal { background: var(--ink); color: #fff; border-radius: var(--radius); padding: 24px 28px; margin: 36px 0 12px;
        display: grid; grid-template-columns: 1fr auto; gap: 16px 32px; align-items: center; scroll-margin-top: calc(var(--header-h) + var(--subnav-h) + 16px); }
.seal a { color: #fff; }
.seal .hash { display: block; font-size: 14px; word-break: break-all; margin: 6px 0 14px; padding: 10px 12px; background: rgba(255, 255, 255, .08); border-radius: var(--radius); }
.seal .small { color: rgba(255, 255, 255, .82); }
.seal .badge { border-color: rgba(255, 255, 255, .5); color: #fff; }
.seal .badge.confirmed { background: var(--green); border-color: var(--green); }
.seal .badge.pending { background: var(--amber); border-color: var(--amber); }
.seal .badge.failed { background: var(--edge); border-color: var(--edge); }
.seal-actions { margin-top: 14px; }
.seal-meta { margin: 12px 0 0; }
.stamp { width: 110px; height: 110px; border: 3px double rgba(255, 255, 255, .7); border-radius: 50%; display: grid; place-content: center; text-align: center; font-family: var(--display); transform: rotate(-8deg); }
.stamp span { font-size: 34px; font-weight: 600; line-height: 1; }
.stamp small { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; }
@media (max-width: 600px) { .seal { grid-template-columns: 1fr; } .stamp { display: none; } }
.anchorbox { border: 1px solid var(--rule); border-left: 6px solid var(--grey); border-radius: var(--radius); background: var(--card); padding: 16px 20px; margin-bottom: 8px; }
.anchorbox.confirmed { border-left-color: var(--green); }
.anchorbox.pending { border-left-color: var(--amber); }
.anchorbox form { display: inline; }
.back-top { position: fixed; right: 18px; bottom: 18px; width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center;
            text-decoration: none; box-shadow: var(--shadow); z-index: 20; opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
.back-top.show { opacity: 1; visibility: visible; }
.attrib { font-size: 13px; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 14px; margin-top: 24px; }
.print-only { display: none; }
form.declare { scroll-margin-top: calc(var(--header-h) + var(--subnav-h) + 16px); }

/* property pictures */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 12px; margin: 0 0 24px; }
.gallery figure { margin: 0; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; break-inside: avoid; }
.gallery img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: var(--wash); }
.gallery figcaption { padding: 8px 12px 10px; font-size: 13px; color: var(--muted); }
.gallery figcaption strong { display: block; color: var(--ink); font-family: var(--display); font-size: 15px; margin-bottom: 2px; }
.gallery .credit { display: block; font-size: 11px; margin-top: 4px; }
.running-map { margin: 20px 0 0; }
.running-map img { display: block; width: 100%; height: auto; aspect-ratio: 760 / 240; object-fit: cover; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--wash); }
.running-map figcaption { margin-top: 4px; }
a.recent .thumb { width: calc(100% + 36px); max-width: none; height: auto; aspect-ratio: 26 / 10; object-fit: cover; margin: -16px -18px 6px; border-bottom: 1px solid var(--rule); background: var(--wash); }

/* section maps */
/* A section is: findings on the left, its map pinned to the top right, then the table of items across the
   full width underneath. The map used to be `position: sticky`, so it slid down the page as you scrolled and
   never lined up with its own heading; and the table sat in the narrow left column, so its four columns were
   squeezed next to the map and lined up with nothing else in the document. The screen now uses the same grid
   the print stylesheet has always used, so the two agree. */
.section-body { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 20px; align-items: start; }
.section-body.has-map { grid-template-columns: minmax(0, 1fr) min(340px, 42%); }
.section-main { min-width: 0; }
/* `display: contents` lifts the findings and the table out to become grid items in their own right, which is
   what lets the table span both columns while the findings stay beside the map. */
.section-body.has-map .section-main { display: contents; }
.section-body.has-map .section-main > * { grid-column: 1; }
.section-body.has-map .section-main > table.items { grid-column: 1 / -1; }
/* Spanning many rows lets the map sit alongside however many findings there are. Empty rows collapse, and the
   full-width table is placed after the span, which is what puts its headings just below the image. */
.section-body.has-map .section-map { grid-column: 2; grid-row: 1 / span 40; margin: 0 0 14px; }
.section-map { margin: 6px 0 14px; }
/* Shown where the findings would be when a section raises none, so the column beside the map is not
   simply blank. */
.section-clear { color: var(--muted); font-size: 14px; margin: 8px 0 4px; }
.section-map img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--wash); }
.section-map figcaption { display: flex; flex-wrap: wrap; gap: 3px 10px; font-size: 11px; color: var(--muted); margin-top: 6px; }
.section-map .lg { display: inline-flex; align-items: center; gap: 4px; }
.section-map .lg i { display: inline-block; width: 10px; height: 10px; border: 1px solid rgba(25, 28, 25, .25); }
.section-card::after { content: ""; display: block; clear: both; }
select { font: inherit; padding: 10px 12px; border: 1px solid #8B939D; border-radius: var(--radius); background: #fff; width: 100%; color: var(--ink); margin-top: 6px; }
@media (max-width: 720px) {
  .section-body.has-map { grid-template-columns: minmax(0, 1fr); }
  .section-body.has-map .section-main { display: block; }       /* one column: no need to lift the children out */
  .section-body.has-map .section-map { grid-column: 1; grid-row: auto; }
  .section-map { margin: 4px 0 14px; }
}

/* interactive map, favourites, accounts */
.mapmodal { position: fixed; inset: 0; background: rgba(25, 28, 25, .62); z-index: 200; display: grid; place-items: center; padding: 16px; }
.mapmodal-box { background: #fff; border-radius: 8px; width: min(1040px, 96vw); height: min(82vh, 760px); display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow); }
.mapmodal-head { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--rule); }
.mapmodal-close { margin-left: auto; background: transparent; color: var(--ink); border: 1px solid var(--rule); width: 36px; height: 36px; padding: 0; font-size: 22px; line-height: 1; border-radius: 50%; display: grid; place-items: center; }
.mapmodal-close:hover { background: var(--wash); color: var(--ink); }
#mapmodal-map { flex: 1; min-height: 0; background: var(--wash); }
body.modal-open { overflow: hidden; }
.section-map img, .gallery figure[data-layers] img { cursor: zoom-in; }
.star { background: transparent; border: 1px solid var(--rule); color: var(--grey); font-size: 18px; padding: 2px 10px; border-radius: 999px; line-height: 1.4; }
.star:hover { background: var(--wash); color: var(--amber); }
.star.on { color: var(--amber); border-color: var(--amber); background: var(--amber-wash); }
.inline { display: inline; }
.auth { max-width: 520px; }
.auth-form { margin-top: 16px; }
.auth-form > label, .auth-form > .name-pair { margin-bottom: 12px; }
.auth-form label > input, .auth-form label > select { display: block; width: 100%; margin-top: 6px; }
.auth-form label { font-weight: 600; }
.auth-form label > .small { display: block; font-weight: 400; margin-top: 4px; }
.kinds { border: 0; padding: 0; margin: 4px 0 0; display: grid; gap: 8px; }
.firm { border: 0; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.firm legend { font-weight: 700; margin-bottom: 4px; }
.firm-ids, .name-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
@media (max-width: 560px) { .firm-ids, .name-pair { grid-template-columns: 1fr; } }
.kinds legend { font-weight: 700; margin-bottom: 8px; }
.kind { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--rule); border-radius: var(--radius); padding: 10px 12px; cursor: pointer; }
.kind input { margin-top: 4px; accent-color: var(--ink); }
.kind:has(input:checked) { border-color: var(--ink); background: var(--wash); }
/* The firm terms tick (sign-up, joining a firm, the firm page) and the firm page's small inline forms. */
.terms-tick { display: flex; gap: 10px; align-items: flex-start; }
.terms-tick input { margin-top: 4px; accent-color: var(--ink); flex: none; }
.firm-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.firm-actions select { width: auto; padding: 6px 10px; }
.scope-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.stack-section { margin-top: 36px; }
/* Seller declaration: each question is an explicit yes or no, never a tick box that could be missed. The
   answers sit in a fixed column on the right so a reader can scan down what was actually said. */
/* One question per row, full width. The old two-column grid put half the questions in a second column where
   they are easy to skim past, which is the very thing these answers exist to rule out. */
form.declare fieldset.declare-questions { display: block; border: 1px solid var(--rule); border-radius: var(--radius);
                                          padding: 10px 16px 14px; margin: 14px 0; }
.declare-questions { border: 1px solid var(--rule); border-radius: var(--radius); padding: 10px 16px 14px; margin: 14px 0; }
.declare-questions legend { font-weight: 700; padding: 0 6px; }
.declare-q { display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
             padding: 9px 0; border-bottom: 1px solid var(--rule); }
.declare-q:last-child { border-bottom: 0; }
.declare-ask { flex: 1 1 auto; }
.declare-answers { flex: 0 0 auto; display: flex; gap: 14px; white-space: nowrap; }
.declare-answers .opt { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-weight: 600; }
.declare-answers .opt input { margin: 0; }
@media (max-width: 640px) {
  .declare-q { flex-direction: column; gap: 6px; }
  .declare-answers { gap: 18px; }
}

/* One column like the question sections above it (the fieldset default is a two-column grid), rows then the note. */
form.declare fieldset.declare-conn, .declare-conn { display: block; border: 1px solid var(--rule); border-radius: var(--radius);
                                                    padding: 10px 16px 6px; margin: 14px 0; }
.declare-conn legend { font-weight: 700; padding: 0 6px; }
.seller-intro { margin-bottom: 18px; }

/* ---------------------------------------------------------------- verify */
.hash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 30px; }
.hash-card code { display: block; word-break: break-all; font-size: 13px; }
@media (max-width: 720px) { .hash-grid { grid-template-columns: 1fr; } }
table.chain td { font-size: 14px; }

/* ---------------------------------------------------------------- about */
.prose h2 { margin: 36px 0 10px; font-size: 24px; scroll-margin-top: calc(var(--header-h) + 16px); }
.prose p, .prose ol, .prose ul { max-width: 70ch; }
.prose ol, .prose ul { padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.toc { padding: 14px 18px; margin: 22px 0 6px; }
.toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 24px; }
.toc li { margin: 2px 0; break-inside: avoid; }
@media (max-width: 560px) { .toc ol { columns: 1; } }

/* ---------------------------------------------------------------- running, list, error */
.progress { list-style: none; padding: 0; margin: 12px 0 0; }
.progress li { padding: 9px 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 14px 1fr auto; gap: 12px; align-items: center; }
.progress li:last-child { border-bottom: 0; }
.filter { max-width: 420px; margin: 0 0 14px; }
.error-page { text-align: center; padding: 48px 0; }
.error-page .lead { margin: 12px auto 24px; }

/* ------------------------------------------------- narrow screens (last, so these win over the rules above) */
@media (max-width: 900px) {
  /* below this the nav can wrap under the brand, so the header is taller than --header-h: it stops being
     sticky and the certificate's section bar takes the top of the viewport instead */
  :root { --header-h: 0px; }
  .brand-desc { display: none; }
  .site-header { position: static; }
  .jump { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; padding: 4px 0 6px; }
}

/* ---------------------------------------------------------------- print */
@media print {
  /* Compact A4 layout: smaller type, three pictures in a row, the map beside the findings and the table across the
     full width, each section boxed as a unit (short ones move to the next page whole; long ones carry their border
     on every page) and long lists cut to their first ten entries. Playwright sets the page margins and footer. */
  html { font-size: 10.5px; line-height: 1.4; scroll-padding-top: 0; }
  /* The screen's small type is in absolute pixels (.small 14px, .section-clear 14px, .attrib 13px), larger than
     the 9.5px print table, so the seal's lines, the closing notes and the attributions ended the PDF in bigger
     type than everything above them (the owner, 25 Sep 2026). Set here, first, so every more specific print
     rule below (.section-head .small, .seal .hash and the rest) still wins. */
  .small, .section-clear { font-size: 9.5px; }
  .attrib { font-size: 8.5px; line-height: 1.4; padding-top: 8px; margin-top: 12px; }
  /* html as well as body: print_background paints the root's cream --paper below the end of body on the last page. */
  html, body { background: #fff; }
  .site-header, .site-footer, .subnav, .back-top, form, .btn, button, .noprint { display: none !important; }
  /* 1px each side: Chromium clips the last fraction of a pixel of the printable width, which took half of every full-width box's right border. Do not set this back to 0.
     main.container, not main: main carries the class container, and the .container rule below would outrank a bare main rule. */
  .container { padding: 0; }
  main.container { padding: 0 1px; max-width: none; }
  .cert-head { margin-bottom: 6px; }
  .cert-head h1, .cert-head .address { font-size: 21px; line-height: 1.15; margin: 2px 0 4px; }
  .cert-head .meta, .cert-head .meta span { font-size: 9.5px; }
  .crumbs { font-size: 9px; }
  .gallery { grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 10px; }
  .gallery figure { break-inside: avoid; }
  .gallery figcaption { padding: 4px 8px 6px; font-size: 8.5px; line-height: 1.35; }
  .gallery figcaption strong { font-size: 10.5px; margin-bottom: 1px; }
  .gallery .credit { font-size: 7.5px; margin-top: 2px; }
  .verdict { padding: 8px 14px; margin-bottom: 10px; break-inside: avoid; border-left-width: 8px; }
  .verdict h2 { font-size: 15px; margin-bottom: 2px; }
  .verdict .small { font-size: 9.5px; }
  .meter { height: 5px; margin-bottom: 3px; }
  .tiles { grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; }
  .tile { min-height: 0; padding: 5px 8px 6px; gap: 1px; border-left-width: 4px; break-inside: avoid; }
  .tile .name { font-size: 11.5px; }
  .tile .line { font-size: 9px; }
  .rag-label { font-size: 8px; }
  .legend { font-size: 9px; gap: 3px 12px; margin-bottom: 10px; }
  .tier { font-size: 8.5px; padding: 0 4px; }
  /* Every section starts a fresh page, however short the one before it was. The seal is the exception: it follows
     the last section straight on, wherever that ended. */
  .section-card { padding: 9px 12px 4px; margin: 0; border-top-width: 3px; break-before: page; break-inside: auto; box-decoration-break: clone; -webkit-box-decoration-break: clone; box-shadow: none; }
  .seal { break-before: auto; }
  .section-head { margin-bottom: 3px; break-after: avoid; }
  .section-head h2 { font-size: 14.5px; gap: 6px; }
  .section-head .small { font-size: 9px; }
  .section-body.has-map { display: grid; grid-template-columns: minmax(0, 1fr) 58mm; column-gap: 10px; align-items: start; }
  .section-body.has-map .section-main { display: contents; }
  .section-body.has-map .section-main > * { grid-column: 1; }
  .section-body.has-map .section-main > table.items { grid-column: 1 / -1; }
  .section-body.has-map .section-map { grid-column: 2; grid-row: 1 / span 40; position: static; margin: 0 0 6px; }
  .section-map img { width: 100%; height: auto; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .section-map figcaption { font-size: 8px; line-height: 1.35; }
  .finding { padding: 5px 9px; margin: 3px 0 5px; break-inside: avoid; border-left-width: 3px; }
  .finding strong { font-size: 10.5px; }
  .finding p { font-size: 9.5px; }
  .finding .act { font-size: 9px; margin-top: 3px; }
  .finding .sev { font-size: 7.5px; margin-bottom: 2px; }
  table.items { font-size: 9.5px; margin: 3px 0 4px; }
  table.items th { font-size: 8px; padding: 2px 8px 3px 0; }
  table.items td { padding: 3px 8px 3px 0; }
  table.items td.src { font-size: 8px; width: 15%; min-width: 0; }
  table.items tr { break-inside: avoid; }
  table.items tr.tall { break-inside: auto; }       /* a long list may run over the page rather than leave a blank half page */
  table.items .note { font-size: 8.5px; }
  /* A note printed under a table (the Ordnance Survey building record, the seal's "Issued by" line) is set at the
     table's own size: .small is an absolute 14px, which printed the last page's note far larger than the table
     above it. Change this with table.items's font-size (tests/test_print_frame.py ties the two). */
  .print-only.small { font-size: 9.5px; line-height: 1.4; }
  thead { display: table-header-group; }
  ul.plain { margin: 0; padding-left: 12px; }
  ul.plain li { margin: 0 0 2px; }
  ul.apps li:nth-child(n+11):not(.more) { display: none; }
  details > summary { display: none; }
  /* The verbatim registers collapse on screen and print OPEN, always. The PDF is the artefact that is sold and
     the register text is inside the seal, so a collapse that printed closed would hand the buyer a document
     silently missing words their own hash covers. Forced here as well as by the `open` attribute the renderer
     sets, so a reader printing the page from a browser gets the same document.
     It is ::details-content that does the work: a closed <details> is not hidden by anything on its children -
     Chromium hides the content slot with content-visibility - so the display rule below reveals nothing on its
     own and is kept only for engines that have not shipped the pseudo-element. Checked in the same headless
     Chromium app/pdf.py drives: with the display rule alone checkVisibility() is false. */
  details.register-text::details-content { content-visibility: visible !important; }
  details.register-text > *:not(summary) { display: block !important; }
  details.register-text > ol.register-entries { max-height: none; overflow: visible; }
  table.items tr.register { break-inside: auto; }
  .register-entries li { break-inside: avoid; margin: 0 0 3px; }
  .print-only { display: block; }
  li.print-only { display: list-item; }
  .seal { background: none; color: var(--ink); border: 2px solid var(--ink); padding: 10px 14px; break-inside: avoid; }
  .seal a, .seal .small, .seal .badge { color: var(--ink); }
  .seal .hash { background: none; border: 1px solid var(--rule); font-size: 9px; word-break: break-all; }
  .seal .badge.confirmed, .seal .badge.pending, .seal .badge.failed { background: none; }
  .seal .badge, .seal .eyebrow.light { color: var(--ink); border-color: var(--ink); }
  .stamp { border-color: var(--ink); }
  .card, .tile, .finding { box-shadow: none; }
  .dot, .sw, .meter span, .pill::before, .finding, .verdict, .tile, .section-card, .finding .sev, .tier { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a { text-decoration: none; }
}

/* "Keep this check" prompt for visitors without an account */
.save-prompt{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin:0 0 22px;border-left:4px solid var(--green,#1B7A4A)}
.save-prompt .h-card{margin:0 0 4px}
.save-prompt p{margin:0;max-width:62ch}

/* Full certificate purchase panel */
/* The certificate's buy panel: what is on the certificate already (a status card), then the ledger itself. */
.buy-block { margin: 0 0 22px; }
.buy-status { margin: 0; border-left: 4px solid var(--ink); }
.buy-status.done { border-left-color: var(--green, #1B7A4A); }
.buy-status .h-card { margin: 0 0 4px; }
.buy-status p { margin: 0; max-width: 62ch; }
.buy-block .ledger { margin-top: 12px; }
.your-documents { margin: 0 0 14px; }                       /* B4: above the buy block, on the results page */
.your-documents p + p, .your-documents ul + p { margin-top: 6px; }
.buy-form{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:220px}
.buy-form .price-line{font-size:1.4rem;margin:0}
.buy-form label{display:flex;gap:6px;align-items:center}

/* Trader identity in the footer: required on every page by the e-commerce and services regulations */
.foot-legal { font-style: normal; font-size: 13px; color: var(--muted); margin-top: 10px; line-height: 1.6; }
.foot-legal strong { color: var(--ink); }
.foot-legal a { color: var(--muted); }

/* Verdict banner: a way through to whatever still needs sorting */
.verdict h2 a { color: inherit; text-decoration: none; }
.verdict h2 a:hover { text-decoration: underline; }
.verdict h2 a::after { content: " \2193"; font-size: .8em; opacity: .55; }
.issue-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.issue-links .lead-in { font-size: 13px; color: var(--muted); margin-right: 2px; }
.issue-chip { font-size: 13px; text-decoration: none; color: var(--ink); background: rgba(255, 255, 255, .75);
              border: 1px solid var(--rule); border-left: 3px solid var(--grey); border-radius: 999px; padding: 2px 10px; }
.issue-chip:hover { box-shadow: var(--shadow); }
.issue-chip.RED { border-left-color: var(--edge); }
.issue-chip.AMBER { border-left-color: var(--amber); }
@media print { .issue-links { display: none; } .verdict h2 a::after { content: ""; } }

/* Each pricing card ends with the same action, so a plan is a route into the check rather than a dead end. */
.product-cta { margin: 14px 0 0; gap: 8px; }

/* The payment page for one property, and the offer repeated at the foot of the certificate where a reader has
   just finished the report and knows what they would be buying. */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 20px; align-items: start; }
.ticks { margin: 10px 0 0; padding-left: 18px; }
.ticks li { padding: 3px 0; font-size: 14px; }
.checkout { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px;
            border-top: 1px solid var(--rule); padding-top: 14px; }
.checkout .small { flex: 1 1 16rem; }
.buy-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px;
            margin: 26px 0; border-color: var(--brand); }
@media (max-width: 720px) { .compare { grid-template-columns: minmax(0, 1fr); } }

/* Seller declarations in an account: what still needs asking, what is out with a seller, what came back. */
.decl-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.decl-list { margin: 10px 0 0; padding-left: 0; list-style: none; }
.decl-list li { padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 14px; }
.decl-list li:last-child { border-bottom: 0; }
.decl-list .small { display: block; margin-top: 2px; }
@media (max-width: 860px) { .decl-cols { grid-template-columns: minmax(0, 1fr); } }

/* Choosing a property at a postcode: one submit button per address, drawn as a link so the list reads as a list. */
.address-list { margin: 0; padding-left: 0; list-style: none; }
.address-list li { border-bottom: 1px solid var(--rule); }
.address-list li:last-child { border-bottom: 0; }
.address-list button { display: block; width: 100%; text-align: left; background: none; border: 0; box-shadow: none;
  color: var(--link); font: inherit; padding: 10px 4px; cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px; }
.address-list button:hover { background: var(--brand-tint); text-decoration-thickness: 2px; }
.address-list .small { display: block; padding: 0 4px 8px; margin-top: -4px; }

/* What you will pay, itemised, so ticking the title plan changes a number the reader can see. */
.total-box { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--wash); padding: 12px 14px; margin: 0 0 14px; }
.total-row { display: flex; justify-content: space-between; gap: 16px; margin: 0 0 6px; font-size: 14px; }
.total-row.grand { border-top: 1px solid var(--rule); padding-top: 8px; margin: 8px 0 0; font-size: 16px; }
.total-row.grand strong { font-size: 20px; }
.total-box .pill { vertical-align: baseline; }

/* The seller's questions carry their reason and, where a "yes" needs paperwork, a place to say what and which
   document the conveyancer will want. The reason sits under the question in small type so the form still scans
   as a list of questions rather than a wall of prose. */
/* The reason runs on after the question, up to the Yes/No column, so a question is one line at desktop widths. */
.declare-why { display: inline; margin: 0 0 0 6px; font-weight: 400; font-size: 12.5px; }
/* A suggestion is marked as one. It is filled in for the seller, so it has to be the most visible thing on the
   row after the question itself, or it becomes a default nobody read. */
.declare-suggested { display: block; margin: 4px 0 0; font-weight: 400; color: var(--ink); }
/* The answer the register points at is marked, never ticked: the tick has to be the seller's own. */
.declare-answers .opt.suggested { background: var(--amber-wash); border-radius: 4px; padding: 0 6px; }
/* The date a sealed answer was first given, beside it on a re-sign. */
.declare-prov { display: block; margin: 2px 0 0; font-weight: 400; }
/* A wording we can offer but may never write in. The box beside it stays empty until the button is used. */
.declare-offer { margin: 4px 0 0; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.declare-offer q { font-style: italic; }
/* What the records say, BESIDE the question. Cited, never quoted: each row is what the item is, who says so
   and when it was read, so a seller can follow it and a conveyancer can find it in the official copy. */
/* Information under a question - what the records say, the paper a conveyancer will want, the document asked
   for at the question - is ONE grey italic line the width of the page, inside the question's own row, so the
   rule under the row separates one question from the next and what has to be answered reads apart from what
   is there to help (the owner's rule, 15 Sep 2026). Nothing in it is bold, bulleted or badged. */
.declare-q { flex-wrap: wrap; row-gap: 0; }
.declare-info { flex: 1 0 100%; margin: 3px 0 0; font-size: 12.5px; line-height: 1.45; font-style: italic;
                color: var(--muted); max-width: none; }
.declare-info a { color: var(--link); }
.declare-info .tag { font-style: normal; }
/* A row the record closed: the reason, and the control that gets it back. It sits BESIDE the row rather than
   in place of it - the row above is hidden, not removed - so reopening is an unhide. */
.declare-collapsed { margin: -2px 0 10px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  font-style: italic; }
.declare-collapsed span { flex: 1 1 24ch; }
.declare-section-shut .declare-collapsed { margin: 6px 0 0; }
/* A record and the answer disagree. Amber, above the row, never over it, and dismissible - never an override
   and never a changed answer. */
.declare-prompt { border-left: 3px solid var(--amber); background: var(--amber-wash); padding: 8px 10px;
  margin: 10px 0 4px; border-radius: 4px; }
/* The site's own red, the one every other RED on the page uses. `--red` is not in the palette, so the one
   prompt that says a sale cannot complete painted a colour that appears nowhere else. */
.declare-prompt.RED { border-left-color: var(--edge); }
.declare-prompt label.opt { display: inline-flex; gap: 6px; margin: 6px 0 0; }
/* .declare-docs and .declare-evidence are .declare-info lines now: see the rule above. */
/* What we already know: read-only, above every question, so a wrong address is caught before the answers. */
.record-known summary { cursor: pointer; }
.record-block { margin: 10px 0 0; }
.record-block ul { margin: 2px 0 0; }
.marked-list ul { margin: 6px 0 0; }
/* The promises, repeated immediately above the signature. */
.declare-undertakings ul { margin: 4px 0 0; }
/* The verbatim registers on screen: collapsed, monospaced-ish and scrollable rather than twenty screens tall. */
details.register-text > ol.register-entries { max-height: 40vh; overflow-y: auto; margin: 4px 0 0; }
.register-entries li { margin: 0 0 6px; }
.declare-ask { min-width: 0; font-size: 15px; }
/* A question arrived at from the listing checklist: sat under the sticky header, and lit until the next click. */
.declare-q { scroll-margin-top: calc(var(--header-h) + 16px); }
.declare-q:target { background: var(--amber-wash); box-shadow: inset 3px 0 0 var(--amber); margin: 0 -10px; padding-left: 10px; padding-right: 10px; }
.declare-detail, .declare-nk { padding: 0 0 10px; border-bottom: 1px solid var(--rule); margin-top: -6px; }
.declare-detail:last-child, .declare-nk:last-child { border-bottom: 0; }
.declare-detail label, .declare-nk label { display: block; margin: 0 0 4px; font-weight: 600; }
.declare-detail input, .declare-nk input { width: 100%; max-width: 100%; }
.declare-detail .muted, .declare-nk .muted { display: block; }
/* The "not known" tick beside a text or number answer, where a third radio has nowhere to sit. */
.declare-answers .nk-tick { font-weight: 600; white-space: nowrap; }
.declare-answers .nk-tick input[type=checkbox] { width: 16px; height: 16px; }
/* A drop-down, a text box, a number or a DATE on a question row is the height of a Yes/No row, not a form
   field's: the row is one line whatever kind of answer it takes. The date control is in the list because a
   browser's native one is taller and wider than everything beside it, and the owner's rule is one box size. */
.declare-q .declare-answers select,
.declare-q .declare-answers input[type="text"],
.declare-q .declare-answers input[type="date"],
.declare-q .declare-answers input[type="number"] { width: 15rem; min-width: 0; padding: 0 6px; margin: 0; font-size: 15px;
                                                   line-height: 1.2; height: 23px; }
.declare-q { align-items: center; }
@media (max-width: 720px) { .declare-q .declare-answers select,
  .declare-q .declare-answers input[type="text"],
  .declare-q .declare-answers input[type="date"],
  .declare-q .declare-answers input[type="number"] { min-width: 0; width: 100%; } }




.segmented .switch-view { display: inline-block; position: relative; }
.segmented .switch-view summary { cursor: pointer; padding: 0 10px; list-style: none; }
.segmented .switch-view[open] a { display: inline-block; }


/* Addresses that appear as you type, under the search box. */
.suggest-wrap { position: relative; }
.suggest { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; margin: 0; padding: 4px 0; list-style: none; background: #fff; border: 1px solid #8B939D; border-radius: var(--radius); box-shadow: var(--shadow); max-height: 320px; overflow-y: auto; }
.suggest li { padding: 9px 14px; cursor: pointer; font-size: 15px; line-height: 1.3; }
.suggest li:hover, .suggest li[aria-selected="true"] { background: var(--brand-tint, #eef3ee); }

/* =====================================================================
   THE LEDGER
   The buying page basket drawn as a bound day book: the left page is the
   list of what is on sale, ruled off row by row; the right page is the
   money, bound in behind a single hairline. The "I am the" selector is
   the same idea at small size — four cards sharing their borders like the
   tabbed sections of a bound index.

   Append verbatim to app/static/style.css. It replaces the .basket-rows
   block and the .search .who block; the exact old/new pairs for the rules
   to change or delete are listed in the comment at the foot of this file.
   ===================================================================== */

/* Two deeper mixes of the brand tint, so the pack row needs no hex of its own.
   They are declared here so this file appends and works on its own; fold them
   into the token block at the top of style.css when convenient (pair 1 below). */

/* ------------------------------------------------------------ the panel */
.ledger {
  /* one place to change the ruling, so the money column stays in line */
  --pad: 24px; --tick: 32px; --money: 122px;
  padding: 0; margin: 20px 0 0; overflow: clip;
}
/* The right-hand page is painted by the book, not by the column, so the
   summary can stick to the top of the window without leaving a stub of
   rule and a well of empty wash behind it on a long title. */
.ledger-book { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 326px; align-items: start; }
.ledger-book::before {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 326px; pointer-events: none;
  background: var(--wash); border-left: 1px solid var(--rule); border-radius: 0 var(--radius) 0 0;
}
.ledger-main { min-width: 0; padding: 20px var(--pad) 22px; }
.ledger-side { position: relative; min-width: 0; padding: 20px 22px 22px; display: flex; flex-direction: column; }
@media (min-width: 941px) {
  .ledger-side { position: sticky; top: calc(var(--header-h) + 12px); align-self: start; }
}

/* Rows and the column heads bleed to the panel edge, so every rule runs the
   full width of the page as a ruled book does. */
.ledger-cols, .ledger-rows .brow {
  margin-left: calc(var(--pad) * -1); margin-right: calc(var(--pad) * -1);
  padding-left: var(--pad); padding-right: var(--pad);
}

.ledger-head { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 16px; flex-wrap: wrap; }
.ledger-head h2 { font-size: 20px; }
/* the folio: which check this order belongs to, not a second copy of the address */
.ledger-head .lfolio { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ledger-note { font-size: 14px; color: var(--muted); margin: 6px 0 16px; max-width: 68ch; }

/* The one ink rule in the panel: the head of the columns. */
.ledger-cols { display: grid; grid-template-columns: var(--tick) minmax(0, 1fr) var(--money);
  column-gap: 12px; align-items: stretch; border-bottom: 1px solid var(--ink); padding-bottom: 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ledger-cols .col-item { grid-column: 2; align-self: end; }
.ledger-cols .col-money { grid-column: 3; display: flex; align-items: flex-end; justify-content: flex-end;
  border-left: 1px solid var(--rule); padding-left: 12px; }

/* --------------------------------------------------------------- a row */
/* ul.ledger-rows, not .ledger-rows: ul.plain (0,1,1) out-specifies a bare
   class and would put an 18px indent on every row. */
ul.ledger-rows { list-style: none; margin: 0; padding: 0; }
.ledger-rows .brow { border-top: 1px solid var(--rule); }
.ledger-rows .brow:first-child { border-top: 0; }
.ledger-rows .brow > label {
  display: grid; grid-template-columns: var(--tick) minmax(0, 1fr) var(--money);
  column-gap: 12px; align-items: stretch; margin: 0; cursor: pointer;
}
/* the tick box, vertically centred against the whole row */
.ledger-rows .brow > label > input[type="checkbox"] {
  grid-column: 1; grid-row: 1 / span 2; justify-self: center; align-self: center;
  width: 17px; height: 17px; margin: 0; accent-color: var(--brand); cursor: pointer;
}
.ledger-rows .brow > label > strong { grid-column: 2; grid-row: 1; align-self: end;
  padding-top: 13px; font-size: 15.5px; line-height: 1.25; }
/* a row with nothing to say ("Title plan · on this certificate") has no second
   track, so it carries its own bottom padding */
.ledger-rows .brow > label:not(:has(> .small)) > strong { padding-bottom: 13px; }
.ledger-rows .brow > label > .small { grid-column: 2; grid-row: 2; align-self: start;
  margin-top: 3px; padding-bottom: 13px; max-width: 76ch; line-height: 1.45; }
/* the money column: one cell, full row height, so its left rule joins the row
   above and below into a single line down the page */
.ledger-rows .brow > label > .price { grid-column: 3; grid-row: 1 / span 2; align-self: stretch;
  display: flex; align-items: center; justify-content: flex-end;
  border-left: 1px solid var(--rule); padding: 13px 0 13px 12px;
  font-family: var(--display); font-size: 18px; font-weight: 600; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
/* the row's own price stays; under it, when the fetched order says so, a word
   ("included", "in the bundle") set as a phrase, not a figure */
.ledger-rows .brow > label > .price:has(> .inbundle) { flex-direction: column; align-items: flex-end; justify-content: center; }
/* a price that is a sentence ("on this certificate", "included") is not display type */
.ledger-rows .brow > label > .price.said,
.ledger-rows .brow > label > .price > .inbundle { font-family: var(--body); font-size: 12.5px; font-weight: 600;
  color: var(--muted); white-space: normal; text-align: right; line-height: 1.35; letter-spacing: 0; }
.ledger-rows .brow > label > .price > .inbundle { color: var(--brand); margin-top: 2px; }
.ledger-rows .brow > label > .price > .inbundle[hidden] { display: none; }
/* a row added at no charge: its own figure is struck through, not hidden, so the reader sees what it saved */
.ledger-rows .brow.included > label > .price > .fig { text-decoration: line-through; color: var(--muted); }

/* Three states, three signals, none of them borrowed from another:
   hover is warmth, chosen is a brand rule down the margin, keyboard focus is
   the site's ochre. Ticking a row with the mouse therefore leaves the chosen
   mark on it, rather than replacing it with a focus mark. */
.ledger-rows .brow:hover { background: var(--paper); }
.ledger-rows .brow:not(.held):has(> label > input:checked) { box-shadow: inset 3px 0 0 var(--brand); }
.ledger-rows .brow:not(.held):has(> label > input:checked) > label > strong { color: var(--brand-deep); }
.ledger-rows .brow:has(:focus-visible) { background: var(--amber-wash); }
.ledger-rows .brow > label:has(> input:disabled) { cursor: default; }
/* Grey only what is out of reach — a document beyond the per-order cap. What is
   disabled because it is already in the order stays in ink: it is being paid for. */
.ledger-rows .brow > label:has(> input:disabled:not(:checked)) > strong,
.ledger-rows .brow > label:has(> input:disabled:not(:checked)) > .price { color: var(--muted); }

/* a group caption inside the ledger: the deeds are ruled off under it */
.ledger-rows .brow.lgroup { position: relative; border-top: 1px solid var(--ink); padding-top: 14px; padding-bottom: 6px; }
/* the money rule carries on down past the caption, so the column is one line */
.ledger-rows .brow.lgroup::after { content: ""; position: absolute; top: 0; bottom: 0;
  right: calc(var(--pad) + var(--money)); border-left: 1px solid var(--rule); }
.ledger-rows .brow.lgroup > .lgroup-in { display: block;
  padding-left: calc(var(--tick) + 12px); padding-right: calc(var(--money) + 12px); }
.ledger-rows .brow.lgroup .lgroup-name { display: block; font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin-bottom: 4px; }
.ledger-rows .brow.lgroup .small { display: block; max-width: 74ch; }
.ledger-rows .brow.lgroup + .brow { border-top: 0; }
/* a line that is only a note (the plan when it is not on sale yet) */
.ledger-rows .brow.muted > .small { display: block; padding: 12px 0 12px calc(var(--tick) + 12px); }
/* a note-only row still carries the money rule, so the column stays one line */
.ledger-rows .brow.muted { position: relative; }
.ledger-rows .brow.muted::after { content: ""; position: absolute; top: 0; bottom: 0;
  right: calc(var(--pad) + var(--money)); border-left: 1px solid var(--rule); }

/* ------------------------------------------------ the six products, one line each */
/* docs/buy-funnel-plan.md A3a: tick | name, with its Sample under it | one line | price, about 40px a row
   (the item rows above are 70-110px). The row is the grid, not a label: the Sample link must not sit inside
   the tick box's label. The money rule is drawn by the row, so it runs down past any line under it. */
.ledger[data-products] { --pname: 196px; }
.ledger-cols.pcols { grid-template-columns: var(--tick) var(--pname) minmax(0, 1fr) var(--money); }
.ledger-cols.pcols .col-item { grid-column: 2; }
.ledger-cols.pcols .col-what { grid-column: 3; align-self: end; }
.ledger-cols.pcols .col-money { grid-column: 4; }
.ledger-rows .prow {
  position: relative; display: grid;
  grid-template-columns: var(--tick) var(--pname) minmax(0, 1fr) var(--money);
  column-gap: 12px; align-items: center; border-top: 1px solid var(--rule);
  margin-left: calc(var(--pad) * -1); margin-right: calc(var(--pad) * -1);
  padding: 0 var(--pad);
}
.ledger-rows .prow:first-child { border-top: 0; }
.ledger-rows .prow::after { content: ""; position: absolute; top: 0; bottom: 0;
  right: calc(var(--pad) + var(--money)); border-left: 1px solid var(--rule); pointer-events: none; }
.ledger-rows .prow > input[type="checkbox"] { grid-column: 1; grid-row: 1; justify-self: center;
  width: 17px; height: 17px; margin: 0; accent-color: var(--brand); cursor: pointer; }
.ledger-rows .prow > .pname { grid-column: 2; grid-row: 1; display: flex; flex-direction: column;
  align-items: flex-start; padding: 6px 0; min-width: 0; }
.ledger-rows .prow > .pname > label { font-size: 15px; font-weight: 700; line-height: 1.2; cursor: pointer; }
.ledger-rows .prow > .pname > .psample { font-size: 11.5px; line-height: 1.25; }
.ledger-rows .prow > .pwhat { grid-column: 3; grid-row: 1; font-size: 14px; line-height: 1.3; color: var(--muted);
  cursor: pointer; min-width: 0; }
.ledger-rows .prow > .price { grid-column: 4; grid-row: 1; justify-self: end; padding-left: 12px;
  font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
/* the lines under a row: what it is here, or why it cannot be ordered; what site.js says of it; the picker */
.ledger-rows .prow > .pmore, .ledger-rows .prow > .picker { grid-column: 2 / 4; margin: 0; }
.ledger-rows .prow > .pmore { grid-row: 2; padding: 0 0 8px; line-height: 1.4; max-width: 76ch; }
.ledger-rows .prow > .pmore[data-row-overflow] { grid-row: 3; }
.ledger-rows .prow > .pmore[data-row-say] { grid-row: 4; }
.ledger-rows .prow > .picker { grid-row: 5; padding: 0 0 10px; }
/* A4: "from" before a documents row's figure until the list is known; trade's "each" after it */
.ledger-rows .prow > .price > .pfrom, .ledger-rows .prow > .price > .peach { font-family: var(--body);
  font-size: 12.5px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.ledger-rows .prow > .price > .pfrom[hidden] { display: none; }
.ledger-rows .prow:hover { background: var(--paper); }
.ledger-rows .prow:has(> input:checked) { box-shadow: inset 3px 0 0 var(--brand); }
.ledger-rows .prow:has(> input:checked) > .pname > label { color: var(--brand-deep); }
.ledger-rows .prow:has(:focus-visible) { background: var(--amber-wash); }
/* Greyed: in what is already ticked (site.js), or not orderable here (the server). Muted ink, never "unavailable". */
.ledger-rows .prow.grey > .pname > label, .ledger-rows .prow.grey > .price,
.ledger-rows .prow.off > .pname > label, .ledger-rows .prow.off > .price { color: var(--muted); font-weight: 600; }
.ledger-rows .prow.grey > input, .ledger-rows .prow.off > input,
.ledger-rows .prow.grey > .pwhat, .ledger-rows .prow.off > .pwhat,
.ledger-rows .prow.grey > .pname > label, .ledger-rows .prow.off > .pname > label { cursor: default; }
/* the document picker inside a ticked document product (A3b) */
.picker .picker-line { margin: 0 0 4px; }
.picker ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.picker li > label { display: flex; align-items: baseline; gap: 8px; font-size: 14px; line-height: 1.35; cursor: pointer; }
.picker li > label > input { margin: 0; accent-color: var(--brand); flex: none; position: relative; top: 2px; }
.picker li > label strong { font-weight: 600; }
.picker li > label .small { color: var(--muted); }
.picker .picker-cap { margin: 4px 0 0; }
/* the phone bar: the total and the button along the foot of the window (A3b, owner decision 9) */
.pbar { display: none; }

/* ----------------------------------------------------------- the summary */
.ledger-side .lhead { display: block; margin: 0 0 14px; padding-bottom: 5px; border-bottom: 1px solid var(--ink);
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ltotal { display: grid; gap: 1px; margin: 0; }
.ltotal .llabel { font-size: 13px; color: var(--muted); }
/* the bundle's name, when the order has one, above the total */
.ltotal .lname { font-family: var(--display); font-size: 19px; font-weight: 600; color: var(--brand-deep); margin-bottom: 4px; }
.ltotal .lname[hidden] { display: none; }
.ltotal strong { font-family: var(--display); font-size: 42px; line-height: 1.02; font-weight: 600;
  letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.ledger-side .lnotes { display: grid; gap: 8px; margin: 12px 0 0; }
.ledger-side .lnotes p { margin: 0; }
/* The customer's comment on an order (P3): the ledger's side column, the chooser and the documents page. */
.order-comments { margin: 12px 0; }
.order-comments label { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.order-comments p { margin: 6px 0 0; }
.ledger-side hr.lrule { border: 0; border-top: 1px solid var(--rule); margin: 16px 0 14px; }
.ledger-side .lbuy { display: grid; gap: 8px; }
.ledger-side .lbuy button, .ledger-side .lbuy .btn { width: 100%; justify-content: center; text-align: center; }
/* B2: the title before Pay. The line under the total; the refusal as a narrow amber box in place of the buttons
   (the verdict's two-column grid does not fit the money column). While /title is asked, or once it has refused,
   site.js sets data-title-state on the form and every buy button (the phone bar's too) and the account lines go. */
.ledger-side .ltitle { margin: 10px 0 0; }
.ledger-side .ltitle-refusal { display: block; margin: 0; padding: 12px 14px; border-left-width: 6px; }
.ledger[data-title-state="wait"] [data-buy-button], .ledger[data-title-state="refused"] [data-buy-button],
.ledger[data-title-state="wait"] [data-account-note], .ledger[data-title-state="refused"] [data-account-note],
.ledger[data-title-state="wait"] [data-account-over], .ledger[data-title-state="refused"] [data-account-over] { display: none !important; }

/* The promises about paying are true of every order, so they are set once
   across the foot of the panel rather than stacked in the money column where
   they would outweigh the button they sit under. */
.ledger-foot { border-top: 1px solid var(--rule); padding: 14px var(--pad) 16px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 28px; }
.ledger-foot p { margin: 0; max-width: 60ch; }

/* -------------------------------------------------------- below the ledger */
/* HM Land Registry's own copy, said once, quietly, and without a price. */
.lofficial { margin: 18px 0 0; padding-left: 14px; border-left: 2px solid var(--brand); max-width: 82ch;
  scroll-margin-top: calc(var(--header-h) + 16px); }
.lofficial p { margin: 0; }
/* the two comparison cards, kept but pushed down the page in weight */
.compare.quiet { margin-top: 24px; gap: 14px; }
.compare.quiet .card { box-shadow: none; background: transparent; padding: 16px 18px; }
.compare.quiet .h-card { font-size: 16px; }
.compare.quiet .price { font-family: var(--body); font-size: 15px; font-weight: 700; }
.compare.quiet .ticks li { padding: 2px 0; font-size: 13.5px; }
/* the tail prose keeps a measure now that the page is 1080px and not 760px */
.ledger-tail { margin-top: 16px; max-width: 82ch; }

/* --------------------------------------------------------------- narrow */
@media (max-width: 940px) {
  .ledger-book { grid-template-columns: minmax(0, 1fr); }
  .ledger-book::before { display: none; }
  .ledger-side { background: var(--wash); border-top: 1px solid var(--ink); }
  /* a full-bleed dark green bar across a tablet is the least letterhead-like
     thing on the page: the buttons stay the width of a button */
  .ledger-side .lbuy { max-width: 420px; }
  .ltotal strong { font-size: 38px; }
}
@media (max-width: 700px) {
  .ledger-foot { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
@media (max-width: 560px) {
  .ledger { --pad: 16px; --tick: 26px; --money: 84px; }
  .ledger-main { padding: 16px var(--pad) 18px; }
  .ledger-side { padding: 16px; }
  .ledger-rows .brow > label { column-gap: 10px; }
  .ledger-rows .brow > label > strong { font-size: 15px; padding-top: 11px; }
  .ledger-rows .brow > label > .small { padding-bottom: 11px; }
  .ledger-rows .brow > label > .price { font-size: 15px; padding-left: 10px; }
  .ltotal strong { font-size: 34px; }
}
/* On a phone there is no room for a money column: the price goes up beside the
   name, the description runs the full width, and the ruling goes with it. */
@media (max-width: 480px) {
  .ledger-cols { display: none; }
  .ledger-rows .brow > label { grid-template-columns: var(--tick) minmax(0, 1fr) auto; }
  .ledger-rows .brow > label > .price { grid-column: 3; grid-row: 1; align-self: end;
    border-left: 0; padding: 12px 0 0 10px; font-size: 16px; }
  /* a spoken price is a phrase, not a figure: hold it to a column width so it
     cannot crowd the name off its own line */
  .ledger-rows .brow > label > .price.said { padding-top: 13px; max-width: 9em; }
  .ledger-rows .brow > label > .price > .inbundle { max-width: 9em; }
  .ledger-rows .brow > label > .small { grid-column: 2 / 4; }
  .ledger-rows .brow.lgroup > .lgroup-in { padding-right: 0; }
  .ledger-rows .brow.lgroup::after, .ledger-rows .brow.muted::after { display: none; }
}
/* The six products below a tablet's width: the summary has dropped under the rows, so the total and the
   button ride along the foot of the window (decision 9); under 640px each row stacks as tick | name | price
   with its one line under the name, and the money rule goes. */
@media (max-width: 940px) {
  .pbar { display: flex; position: sticky; bottom: 0; z-index: 20; align-items: center; justify-content: space-between;
    gap: 12px; padding: 10px var(--pad); background: var(--card); border-top: 1px solid var(--ink);
    box-shadow: 0 -8px 20px -18px rgba(25, 28, 25, .5); }
  .pbar .pbar-total { display: flex; align-items: baseline; gap: 8px; }
  .pbar .llabel { font-size: 13px; color: var(--muted); }
  .pbar strong { font-family: var(--display); font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .pbar button { flex: none; max-width: 62%; white-space: normal; text-align: center; }
}
@media (max-width: 640px) {
  .ledger-cols.pcols { display: none; }
  .ledger-rows .prow { grid-template-columns: var(--tick) minmax(0, 1fr) auto; column-gap: 10px; }
  .ledger-rows .prow::after { display: none; }
  .ledger-rows .prow > input[type="checkbox"] { grid-row: 1 / span 2; align-self: center; }
  .ledger-rows .prow > .pname { grid-column: 2; grid-row: 1; flex-direction: row; flex-wrap: wrap; align-items: baseline;
    gap: 0 8px; padding: 9px 0 0; }  .ledger-rows .prow > .pwhat { grid-column: 2 / 4; grid-row: 2; padding: 1px 0 9px; font-size: 13.5px; }
  .ledger-rows .prow > .price { grid-column: 3; grid-row: 1; align-self: end; padding: 9px 0 0; font-size: 16px; }
  .ledger-rows .prow > .pmore, .ledger-rows .prow > .picker { grid-column: 2 / 4; }
  .ledger-rows .prow > .pmore { grid-row: 3; }
  .ledger-rows .prow > .pmore[data-row-say] { grid-row: 4; }
  .ledger-rows .prow > .picker { grid-row: 5; }
}


/* =====================================================================
   "I AM THE" — a bound index: four cards in one segmented row, sharing
   their borders the way tabbed sections of a book share a spine.
   Real radios underneath; nothing here needs script.
   ===================================================================== */

.search .who { grid-column: 1 / -1; display: block; border: 0; padding: 0; margin: 10px 0 0; }
.search .who legend { padding: 0; margin: 0 0 8px; }

.who-index { display: flex; flex-wrap: wrap; }

.who-tile { position: relative; display: block; flex: 1 1 0; min-width: 0; margin: 0 0 0 -1px; }
.who-tile:first-child { margin-left: 0; }
/* the radio itself: focusable and reachable by arrow keys, drawn by the tile.
   opacity, not display:none, so it stays a real radio group. */
.who-tile > input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0;
  opacity: 0; pointer-events: none; }

.who-face { position: relative; z-index: 1; display: grid; gap: 5px; align-content: start;
  height: 100%; padding: 12px 12px 13px; cursor: pointer;
  border: 1px solid var(--rule); background: var(--card);
  transition: background .12s ease, border-color .12s ease; }
.who-tile:first-child .who-face { border-radius: var(--radius) 0 0 var(--radius); }
.who-tile:last-child  .who-face { border-radius: 0 var(--radius) var(--radius) 0; }
.who-face:hover { background: var(--paper); }

.who-ico { width: 24px; height: 24px; color: var(--muted); display: block; }
.who-name { font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: -0.005em; }
.who-when { font-size: 12.5px; line-height: 1.3; color: var(--muted); }
.who-tick { position: absolute; top: 9px; right: 9px; width: 15px; height: 15px; color: var(--brand); opacity: 0; }

/* chosen: brand rule, brand tint, a small tick. Loud enough to be certain of,
   quiet enough to sit under a heading. */
.who-tile > input:checked + .who-face { z-index: 2; border-color: var(--brand); background: var(--brand-tint);
  box-shadow: inset 0 0 0 1px var(--brand); }
.who-tile > input:checked + .who-face .who-ico  { color: var(--brand); }
.who-tile > input:checked + .who-face .who-name { color: var(--brand-deep); }
.who-tile > input:checked + .who-face .who-when { color: var(--brand-deep); }
.who-tile > input:checked + .who-face .who-tick { opacity: 1; }

.who-tile > input:focus-visible + .who-face { z-index: 3; outline: 3px solid var(--amber); outline-offset: -3px; }

/* In Windows high contrast the tint and the brand border are both replaced by
   system colours, so the chosen tile is drawn again with a system one. */
@media (forced-colors: active) {
  .who-tile > input:checked + .who-face { outline: 2px solid Highlight; outline-offset: -2px; }
  .who-tile .who-tick { forced-color-adjust: none; color: Highlight; }
  /* the ledger's three signals are a shadow and two tints, none of which survive high contrast */
  .ledger-rows .brow:not(.held):has(> label > input:checked) { outline: 2px solid Highlight; outline-offset: -2px; }
  .ledger-rows .prow:has(> input:checked) { outline: 2px solid Highlight; outline-offset: -2px; }
  .ledger-rows .brow:has(:focus-visible) { outline: 3px solid Highlight; outline-offset: -3px; }
}

/* the band where the hero is still two columns but its left column is narrow */
@media (min-width: 621px) and (max-width: 1000px) {
  .who-face { padding: 11px 9px 12px; }
  .who-name { font-size: 14.5px; }
  .who-when { font-size: 12px; }
}
/* 2 x 2, still sharing borders, when the column is narrow */
@media (max-width: 620px) {
  .who-tile { flex: 1 1 46%; }
  .who-tile:nth-child(3) { margin-left: 0; }
  .who-tile:nth-child(n+3) { margin-top: -1px; }
  .who-tile:first-child     .who-face { border-radius: var(--radius) 0 0 0; }
  .who-tile:nth-child(2)    .who-face { border-radius: 0 var(--radius) 0 0; }
  .who-tile:nth-child(3)    .who-face { border-radius: 0 0 0 var(--radius); }
  .who-tile:last-child      .who-face { border-radius: 0 0 var(--radius) 0; }
}
@media (max-width: 380px) {
  .who-face { padding: 10px 10px 11px; }
  .who-name { font-size: 14px; }
  .who-when { font-size: 12px; }
}

/* The seller's own papers: one row per document the sale needs, a tick when it is in hand, the upload beside it. */
.sale-docs { margin-top: 24px; }
.docs-rows .doc-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 6px 14px; align-items: start;
  padding: 12px 0; border-top: 1px solid var(--rule); }
.docs-rows .doc-row:first-child { border-top: 0; }
.doc-state { width: 22px; height: 22px; border: 1px solid var(--rule); border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; color: #fff; margin-top: 2px; }
.doc-row.have .doc-state { background: var(--green); border-color: var(--green); }
/* Seller-notes S3: the star (the site's amber, as .pill.key, always with words beside it) and the rows that do
   not apply to this property, greyed and after the others. */
.need-star { color: #7A500F; background: var(--amber-wash); border: 1px solid var(--amber); border-radius: 999px;
  font-size: 12px; font-weight: 700; padding: 1px 8px; white-space: nowrap; }
.doc-row.na { color: var(--muted); }
.doc-row.na .doc-state { border-style: dashed; color: var(--muted); font-size: 9px; font-weight: 700; }
.doc-scope input[type=text] { width: 12rem; padding: 4px 8px; font-size: 13px; margin: 0 6px; }
.doc-said, .doc-scope-row { display: block; }
details.doc-scope-row summary { cursor: pointer; color: var(--link); text-decoration: underline; width: max-content; }
details.doc-scope-row[open] summary { margin-bottom: 4px; }
.doc-body { display: grid; gap: 3px; min-width: 0; }
.doc-body > .small { max-width: 70ch; }
.doc-file { display: block; }
.doc-upload { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-self: end; max-width: 100%; }
.doc-upload input[type=file] { font: inherit; font-size: 13px; width: auto; max-width: 240px; padding: 6px 8px; }
.doc-upload input[type=text] { width: 12rem; padding: 6px 8px; font-size: 13px; }
form.inline { display: inline; }
button.link { background: none; border: 0; box-shadow: none; padding: 0; color: var(--link); font: inherit; text-decoration: underline; cursor: pointer; }
button.link:hover { background: none; color: var(--brand-deep); }
@media (max-width: 720px) { .docs-rows .doc-row { grid-template-columns: 26px minmax(0, 1fr); } .doc-upload { grid-column: 2; justify-self: start; } }

/* The leasehold timeline. Every part of a step is a <span> in one <li>, so without these rules the title,
   the state word, the state sentence, what the step waits on and both statutory dates run together as a
   single line - the opposite of the layout rule the rest of the product follows. Each sentence spans the
   width, the state word is a badge beside the title, and a rule line separates one step from the next.
   `ol.plain` is here because the only list rule in this file was `ul.plain` and the timeline is ordered. */
ol.plain { margin: 4px 0 0; padding-left: 18px; }
.lease-steps .lease-step { padding: 10px 0; border-top: 1px solid var(--rule); }
.lease-steps .lease-step:first-child { border-top: 0; padding-top: 2px; }
.lease-step > span { display: block; max-width: 70ch; margin-top: 3px; }
.lease-step > strong { display: inline-block; margin-right: 8px; }
.lease-step .doc-state-word { display: inline-block; margin: 0; padding: 1px 8px; border: 1px solid var(--rule);
  border-radius: 999px; font-size: 12px; color: var(--muted); }
.lease-chaser { margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--radius); }
.lease-chaser p, .lease-chaser li { max-width: 70ch; }

/* ---------------------------------------------------------------- the declaration page
   The seller's questions moved off the foot of the certificate onto a page of their own, in named sections.
   The certificate is the printable record; this page is for answering, so it does not print at all. */
.next-step { border-left: 3px solid var(--ink); }
.next-step .row { margin-top: 12px; align-items: center; gap: 12px; }
.declaration-page .cert-tools { align-items: flex-end; gap: 10px; }
.declaration-page .cert-tools .meter-wrap { min-width: 16rem; }
/* The sub-nav costs the page 48px, and .declare-q's scroll-margin does not know about it: without this every
   link from the listing checklist lands with its question hidden under the bar. */
body.has-subnav .declare-q, body.has-subnav #q-seller_name { scroll-margin-top: calc(var(--header-h) + var(--subnav-h) + 16px); }
.declaration-page .declare-questions, .declaration-page .declare-conn { margin: 22px 0; padding: 4px 16px 14px;
  scroll-margin-top: calc(var(--header-h) + var(--subnav-h) + 16px); }
.declaration-page .declare-questions legend, .declaration-page .declare-conn legend { font-family: var(--display);
  font-size: 19px; line-height: 1.25; }
.tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 3px; vertical-align: 2px; white-space: nowrap; }
.tag.listing { background: var(--amber-wash); color: var(--amber); }
.sec-count { font-weight: 400; margin-left: 8px; white-space: nowrap; }
.declare-intro { margin: 2px 0 10px; max-width: 72ch; }
.declare-q.has-error { box-shadow: inset 3px 0 0 var(--edge); margin: 0 -10px; padding-left: 10px; padding-right: 10px; }
.field-error { display: block; color: var(--edge); font-weight: 600; }
/* Sticky to the BOTTOM, so it never competes with the header and the sub-nav for the top of the viewport. */
/* The negative margins have to match .card's own padding (20px 22px) exactly, or the bar floats inside the
   card with a white gutter down both sides and along the bottom. */
.declare-submit { position: sticky; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; margin: 18px -22px -20px; padding: 12px 22px; background: var(--paper);
  border-top: 1px solid var(--rule); }
/* On a phone the jump bar is a scroller rather than three wrapped rows inside a 48px bar. */
.declaration-page .jump { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
@media (max-width: 640px) {
  .declaration-page .declare-questions, .declaration-page .declare-conn { padding: 4px 12px 12px; }
  /* .card keeps its 20px 22px padding at every width, so the bar keeps the same gutters as the card it sits in. */
}
/* The TA6 or TA7 number a question maps to. A citation, never the form's own wording, and deliberately quiet:
   a seller does not need it and a conveyancer reading the certificate does. */
.maps-to { display: inline-block; margin-left: 8px; font-size: 11.5px; white-space: nowrap; }
/* The paper a conveyancer will ask for: a .declare-info line inside the row (see above). */
/* Questions that read as one question: four boundaries under one instruction, three papers under one heading.
   The block is indented and ruled so the eye reads the heading once and the rows as its answers. */
.declare-group { margin: 6px 0 4px; padding: 8px 0 2px 12px; border-left: 2px solid var(--rule); }
.declare-group-ask { margin: 0 0 2px; font-weight: 600; font-size: 15px; }
.declare-group-note { margin: 0 0 6px; font-style: italic; color: var(--muted); }
.declare-group .declare-q:last-child { border-bottom: 0; }
/* A tick-list. One row of nine yes/no questions would be eight answers a seller holding one certificate does
   not have; ticks wrap into a column on the right and stack under the question on a phone. */
.declare-multi { flex-wrap: wrap; white-space: normal; max-width: 26rem; gap: 4px 14px; }
.declare-multi .opt { font-weight: 400; }
.declare-multi .opt.other { flex: 1 0 100%; display: flex; flex-direction: column; align-items: stretch;
  gap: 4px; margin-top: 4px; font-size: 13px; }
.declare-multi .opt.other input[type=text] { width: 100%; }
/* An answer that starts a statutory clock, and what to do about it today. */
.declare-detail.callout { border-left: 3px solid var(--amber); background: var(--amber-wash);
  padding: 10px 12px; margin: 0 0 10px; border-bottom: 0; }
.declare-notes { display: block; margin: 8px 0 0; font-weight: 600; }
.declare-notes textarea { width: 100%; margin-top: 6px; }
@media (max-width: 640px) {
  /* Three radios plus their words do not fit one line on a phone, and a "Not known" that wraps under the row
     reads as though it belonged to the next question. They wrap together instead. */
  .declaration-page .declare-answers { flex-wrap: wrap; white-space: normal; row-gap: 8px; }
  .declaration-page .declare-multi { max-width: none; }
  .declaration-page .declare-group { padding-left: 8px; }
}
/* The form is for answering, not for printing: a printed copy of an unsigned form is a record of nothing. The
   page still prints one line saying so, rather than handing over a blank sheet with no explanation. */
@media print {
  .declaration-page main > *:not(.print-only) { display: none !important; }
  .declaration-page .print-only { display: block !important; }
}

/* ----------------------------------------------------------------- the fittings schedule (phase 5a)
   EVERY RULE BELOW IS SCOPED TO THIS PAGE, and that is the point of it rather than an accident of writing.
   The shared `.declare-answers` is `flex: 0 0 auto; display: flex; gap: 14px; white-space: nowrap` with no
   `flex-wrap` at any width, so four options can never fall onto two lines - and "Stays / We are taking it /
   There isn't one / Not settled yet" with four inputs and three gaps is about 30rem, roughly twice the 15rem
   box the shared rule fixes for every other answer. Adding `flex-wrap` to the shared class would reflow the
   live declaration's 111 signed rows, which is not a fittings decision. So the wrap lives on `.fit-answers`
   inside `.fittings-page`, the declaration renders byte-identically, and tests/test_fittings_page.py asserts
   both halves of that. */
.fittings-page .fit-answers { flex: 0 1 auto; flex-wrap: wrap; white-space: normal; row-gap: 6px;
  column-gap: 14px; max-width: 30rem; justify-content: flex-end; }
.fittings-page .fit-answers .opt { font-weight: 600; white-space: nowrap; }
/* A schedule row is a term of the contract and there are eighty-nine of them, so the sentence gets the width
   and the rule line under it does the separating. Same rule as the declaration, said for this page's class. */
.fittings-page .fit-row .declare-ask { flex: 1 1 18rem; }
/* The boxes under a row - the price, the note, the reason, the fitted flag - are the declaration's detail
   boxes with one box size, as the owner's rule has it. The radios inside one sit on a line of their own. */
.fittings-page .fit-detail input[type="text"],
.fittings-page .fit-detail input[type="number"] { width: 15rem; max-width: 100%; min-width: 0; padding: 0 6px;
  margin: 0; font-size: 15px; line-height: 1.2; height: 23px; }
.fittings-page .fit-detail label { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fittings-page .fit-inline { display: inline-flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.fittings-page .fit-inline .opt { display: inline-flex; align-items: center; gap: 5px; margin: 0; }
/* The section controls (phase 5b). A row of plain buttons under the section's intro, and one grey italic line
   under them saying what a mark is - not a box and not a banner, because a mark is a hint about which of four
   radios to hit and a banner would announce it as something that happened. The MARK ITSELF gets no rule of its
   own: it is `.declare-answers .opt.suggested`, the amber wash a record's proposal already wears, and a second
   appearance for the same meaning would be a second meaning. */
.fittings-page .fit-mark { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 2px; }
.fittings-page .fit-mark button[disabled] { opacity: .5; cursor: default; }
/* The "anything else" list at the foot of a section: a small block of empty slots, ruled off from the named
   rows above it so that a blank slot never reads as an unanswered row. */
.fittings-page .fit-free { margin: 10px 0 0; padding: 8px 0 2px 12px; border-left: 2px solid var(--rule); }
.fittings-page .fit-free-ask { margin: 0 0 2px; font-weight: 600; font-size: 15px; }
.fittings-page .fit-slot { display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  padding: 6px 0; border-bottom: 1px solid var(--rule); }
.fittings-page .fit-slot:last-child { border-bottom: 0; }
/* ONE BOX SIZE ON THE PAGE. A slot's boxes are the same 15rem and the same 23px as the boxes under a named
   row: they are the same kind of control asking the same kind of thing, and two sizes on one page is the
   reader wondering what the difference means. The label sits above its box rather than beside it, because a
   15rem box and its label do not share a line at this width. */
.fittings-page .fit-slot label { display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  margin: 0; font-weight: 600; }
.fittings-page .fit-slot input[type="text"],
.fittings-page .fit-slot input[type="number"] { width: 15rem; max-width: 100%; padding: 0 6px; margin: 0;
  font-size: 15px; line-height: 1.2; height: 23px; }
/* The 720px and 640px blocks the shared rules never wrote for a radio: at 720px a box takes the width it is
   given, and at 640px the four options stack under the sentence rather than crushing it. */
@media (max-width: 720px) {
  .fittings-page .fit-detail input[type="text"],
  .fittings-page .fit-detail input[type="number"],
  .fittings-page .fit-slot input[type="text"],
  .fittings-page .fit-slot input[type="number"] { width: 100%; }
  .fittings-page .fit-answers { max-width: 22rem; }
}
@media (max-width: 640px) {
  .fittings-page .fit-answers { max-width: none; justify-content: flex-start; row-gap: 8px; }
  .fittings-page .fit-free { padding-left: 8px; }
  .fittings-page .fit-slot { flex-direction: column; align-items: stretch; }
}
@media print {
  .fittings-page main > *:not(.print-only) { display: none !important; }
  .fittings-page .print-only { display: block !important; }
}

/* ---------------------------------------------------------------- photographs
   docs/pricing-bundles-plan.md section 8. Four photographs of homes, on the home page, How it works, sign in,
   create account, (since 26 Sep 2026, the home page's Cotswold band) Order documents and (since 28 Sep 2026, the
   How-it-works photograph) Recent checks only: never on a
   certificate, a deed, a paid page or a PDF. Each band breaks out of its column
   with negative inline margins and puts the same distance back as padding, so its text lines up with the column
   and the DOM order (and the #main skip target) is untouched; body.photo-page clips the scrollbar's share of
   100vw. The shade sits between photograph and text: white text on it is at least 4.5:1 over a white pixel
   (.78 flat is 8.6:1; the gradient is .78 or more wherever a line of text can reach). */
body.photo-page { overflow-x: clip; }
.hero-photo, .price-photo, .photo-head, .auth-hero { position: relative; isolation: isolate;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: calc(50vw - 50%); padding-right: calc(50vw - 50%); }
.photo { position: absolute; inset: 0; z-index: -2; display: block; }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-shade { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(25, 28, 25, .82) 0%, rgba(25, 28, 25, .78) 58%, rgba(25, 28, 25, .45) 100%); }

.hero.hero-photo { padding-top: 52px; padding-bottom: 56px; }
.stack > .hero-photo:first-child, .prose > .photo-head:first-child { margin-top: -36px; }   /* flush under the header */
.hero-photo .photo img { object-position: 50% 42%; }
.hero-photo .eyebrow, .photo-head .eyebrow { color: rgba(255, 255, 255, .86); }
.hero-photo h1, .hero-photo .lead, .photo-head h1 { color: #fff; }
.hero-card { margin-top: 22px; padding: 16px 20px; }
.hero-card > form.search { margin-top: 0; }
.hero-card > :last-child { margin-bottom: 0; }

/* The pricing section (docs/photos-round-2.md section 5): the Cotswold photograph behind all of it, from the
   heading to the footnote, under a flat, lighter shade because the white cards carry the prices. .65 is the
   lightest shade the brief allows: over a pure white pixel of cloud the white heading and footnote are 5.3:1
   and the subtitle, at .9 white (at .86 it was 4.45:1), 4.7:1. The min-heights are floors under the section's measured heights,
   and the picture's sizes list is worked from them (tests/test_photos.py). Under 880 px the photograph stops at
   360 px and fades (below, with the hero's phone rule), so the phone min-heights went: they no longer size it. */
.price-photo { padding-top: 40px; padding-bottom: 40px; min-height: 1100px; }        /* three columns: 1,102 px measured */
@media (max-width: 1092px) { .price-photo { min-height: 1280px; } }                  /* two columns: 1,285 px and up */
.price-photo .photo img { object-position: 55% 62%; }
.price-photo .photo-shade { background: rgba(25, 28, 25, .65); }
.price-photo > .h-row .h-section { color: #fff; }
.price-photo > .h-row .muted { color: rgba(255, 255, 255, .9); }
.price-photo > .price-foot, .price-photo > .price-foot strong { color: #fff; }

/* The Order documents page (owner, 26 Sep 2026): the pricing band's photograph, shade and phone rule behind the
   whole page (order.html carries both classes, so everything above applies). Its own: it runs from the header
   to the footer as the sign-in band does (main's 36 px and 72 px taken back, and it grows to the footer on a
   tall screen), and its min-heights, floors under the heights measured in a browser with nothing confirmed
   (tests/test_photos.py), from which the picture's sizes list is worked. Under 880 px the photograph is its
   own 360 px again, so the phone floor goes, as on the home page. The breadcrumb, eyebrow, heading, lead,
   account line and foot line sit on the shade and go white (.9 for the small grey lines, as the band's
   subtitle: 4.7:1 over a white pixel); the address box, "Ordering for" and the cards keep their white cards. */
.price-photo.order-photo { margin-top: -36px; margin-bottom: -72px; padding-top: 32px; padding-bottom: 56px; min-height: 1320px; }   /* three columns: 1,331 px measured */
@media (max-width: 1092px) { .price-photo.order-photo { min-height: 1440px; } }       /* two columns: 1,505 px here, 1,489 px with the server's fonts (26 Sep 2026): the floor sits under both */
@media (max-width: 880px) { .price-photo.order-photo { min-height: 0; padding-top: 24px; } }
main:has(> .order-photo) { display: flex; flex-direction: column; }
main > .order-photo { flex: 1 0 auto; }
.order-photo > .crumbs, .order-photo > .crumbs a, .order-photo > .eyebrow { color: rgba(255, 255, 255, .9); }
.order-photo > h1, .order-photo > .lead, .order-photo > [data-account-line], .order-photo > [data-account-line] a { color: #fff; }
/* Recent checks (owner, 28 Sep 2026): the sash-window photograph behind the whole list page, the order page's
   treatment. The list is short or long, so the floor is only what keeps the photograph in view with no checks:
   640 px, and 360 px of photograph on phones (the shared .price-photo phone rule). It fills to the footer. */
.price-photo.checks-photo { margin-top: -36px; margin-bottom: -72px; padding-top: 32px; padding-bottom: 56px; min-height: 640px; }
@media (max-width: 1092px) { .price-photo.checks-photo { min-height: 640px; } }
@media (max-width: 880px) { .price-photo.checks-photo { min-height: 0; padding-top: 24px; } }
main:has(> .checks-photo) { display: flex; flex-direction: column; }
main > .checks-photo { flex: 1 0 auto; }
.checks-photo .photo img { object-position: 50% 40%; }
.checks-photo > .h-row .eyebrow, .checks-photo > .muted, .checks-photo > .small.muted { color: rgba(255, 255, 255, .9); }
.checks-photo > .h-row h1 { color: #fff; }
.checks-photo > .scope-tabs .btn.quiet { background: rgba(255, 255, 255, .92); }
.checks-photo > .filter input { background: #fff; }

.photo-head { padding-top: 64px; padding-bottom: 40px; margin-bottom: 4px; }
.photo-head .photo img { object-position: 50% 40%; }
.photo-head h1 { max-width: 20ch; }

@media (max-width: 880px) {
  .photo-shade { background: rgba(25, 28, 25, .78); }
  .hero.hero-photo { padding-top: 36px; padding-bottom: 36px; }
  /* Stacked, the hero is the headline, the form card and the steps card, about 1,600 px tall on a phone: a
     photograph stretched over all of it showed a sixth of its width, upscaled into a brown smear. It stops
     under the headline instead and fades out; the shade still covers the whole band, so the white text below
     the photograph sits on the shade over the page (at least 8:1) and never on a light pixel. */
  .hero-photo .photo { bottom: auto; height: 480px;
    -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 62%, transparent 100%); }
  /* The pricing section, stacked, is 1,500 to 2,700 px tall: stretched over all of it the Cotswold photograph
     was drawn 4,863 px wide on a phone, 3.8x enlarged and showing 8% of its width (fix pass, photos round 2
     section 5). It stops at 360 px, the heading's part of the section, and fades into the flat shade, which
     still covers the whole section. 360 x 16/9 = 640 px drawn, so a phone at DPR 2 takes the 1280 file. */
  .price-photo .photo { bottom: auto; height: 360px;
    -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 62%, transparent 100%); }
  .photo-head { padding-top: 44px; padding-bottom: 30px; }
}
@media (max-width: 640px) {
  .hero-card { padding: 14px 14px; }
}

/* Sign in only (photos round 2): the townhouse as a full-bleed background, the hero's treatment. The band runs
   from the header to the footer (main's own 36 px above and 72 px below are taken back); .auth keeps its 520 px,
   so the form does not stretch. White eyebrow and heading on the shade; the white form card sits on top. */
.auth-hero { min-height: 640px; margin-top: -36px; margin-bottom: -72px; padding-top: 56px; padding-bottom: 64px; }
main:has(> .auth-hero) { display: flex; flex-direction: column; }   /* on a tall screen the band still meets the footer */
main > .auth-hero { flex: 1 0 auto; }
.auth-hero .photo img { object-position: 50% 45%; }
.auth-hero .eyebrow { color: rgba(255, 255, 255, .86); }
.auth-hero h1 { color: #fff; }
.auth-hero .lead { color: rgba(255, 255, 255, .92); }
@media (max-width: 880px) {
  .auth-hero .photo-shade { background: rgba(25, 28, 25, .78); }
}
@media (max-width: 640px) {
  .auth-hero { min-height: 560px; padding-top: 36px; padding-bottom: 44px; }
}

.foot-photos { font-size: 13px; }
.foot-photos a { color: var(--muted); }

@media print {
  .photo, .photo-shade, .auth-photo { display: none !important; }
  .hero-photo, .photo-head, .auth-hero { margin: 0 !important; padding: 0 !important; min-height: 0 !important; }
  .price-photo { margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; min-height: 0 !important; }
  .hero-photo .eyebrow, .photo-head .eyebrow, .auth-hero .eyebrow { color: var(--muted) !important; }
  .hero-photo h1, .hero-photo .lead, .photo-head h1, .auth-hero h1, .auth-hero .lead { color: var(--ink) !important; }
  .price-photo > .h-row .h-section { color: var(--ink) !important; }
  .price-photo > .h-row .muted, .price-photo > .price-foot, .price-photo > .price-foot strong { color: var(--muted) !important; }
  .order-photo { margin-top: 0 !important; margin-bottom: 0 !important; }
  .order-photo > h1, .order-photo > .lead, .order-photo > [data-account-line] { color: var(--ink) !important; }
  .order-photo > .crumbs, .order-photo > .crumbs a, .order-photo > .eyebrow { color: var(--muted) !important; }
  .checks-photo { margin-top: 0 !important; margin-bottom: 0 !important; }
  .checks-photo > .h-row h1 { color: var(--ink) !important; }
  .checks-photo > .h-row .eyebrow, .checks-photo > .muted, .checks-photo > .small.muted { color: var(--muted) !important; }
  .order-photo > [data-account-line] a { color: var(--link) !important; }
}