/* Black on white, one grey for what is off. One system sans. No icons, no
   colour, no rounded corners, no shadows. 320px first, every control at
   least 44px, the plate echo as large as the screen allows. It has to look
   right taped next to the dumbest property logo. */
:root {
  --ink: #000;
  --paper: #fff;
  /* The one grey, dark enough for small text on white (4.7:1). */
  --off: #737373;
  --target: 44px;
  --rule: 2px;
  /* Spacing: every margin, gap and padding on the door pages is one of
     these steps. --gap is the 16 the app pages were built on. */
  --s4: 4px;
  --s8: 8px;
  --s16: 16px;
  --s24: 24px;
  --s32: 32px;
  --s48: 48px;
  --s64: 64px;
  --gap: var(--s16);
  /* Type: five sizes, each with its own line, all on the 4px grid. Small
     for notes, labels and the foot; body; lead for the wordmark, the door
     labels and an opening line; h1; display for the one number a page is
     about. Above 40rem only h1 steps up. */
  --t-small: 0.875rem;
  --l-small: 1.25rem;
  --t-body: 1.125rem;
  --l-body: 1.75rem;
  --t-lead: 1.375rem;
  --l-lead: 1.75rem;
  --t-h1: 2.25rem;
  --l-h1: 2.5rem;
  --t-display: 6rem;
  --l-display: 5.5rem;
  /* Caps tracking: small caps labels open up more than large ones. */
  --caps-small: 0.08em;
  --caps-large: 0.04em;
  /* The page column: main, the foot and the cookie strip share it, so
     nothing runs the full window width. */
  --col: 32rem;
  color-scheme: light;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  background: var(--paper);
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font:
    18px/1.4 system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif;
}
main {
  max-width: var(--col);
  margin: 0 auto;
  padding: calc(var(--gap) * 2) var(--gap) calc(var(--gap) * 4);
}
h1 {
  font-size: 2.2rem;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 calc(var(--gap) / 2);
}
h2 {
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: calc(var(--gap) * 3) 0 var(--gap);
  padding-top: var(--gap);
  border-top: var(--rule) solid var(--ink);
}
p {
  margin: 0 0 var(--gap);
}
a {
  color: var(--ink);
  text-decoration-thickness: var(--rule);
  text-underline-offset: 0.2em;
}
a:hover {
  text-decoration: none;
}
::selection {
  background: var(--ink);
  color: var(--paper);
}
/* Every link and button in the page is a 44px target, including a phone
   number in a sentence: the box grows, the text does not move. */
main a,
main button {
  display: inline-block;
  min-height: var(--target);
  min-width: var(--target);
}
main a {
  padding: 10px 2px;
  line-height: 24px;
}
.quiet {
  font-size: 0.95rem;
}
.lead {
  font-size: 1.4rem;
  font-weight: 700;
}
.error {
  font-weight: 700;
  padding: calc(var(--gap) / 2) var(--gap);
  border: var(--rule) solid var(--ink);
}

/* Forms */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  margin: 0 0 calc(var(--gap) * 1.5);
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 700;
  font-size: 0.95rem;
}
button,
input,
select,
textarea {
  font: inherit;
  color: var(--ink);
  border-radius: 0;
}
input,
select,
textarea {
  width: 100%;
  min-height: var(--target);
  padding: 8px 12px;
  border: var(--rule) solid var(--ink);
  background: var(--paper);
  font-weight: 400;
}
select {
  appearance: none;
  -webkit-appearance: none;
}
.plate-input {
  font-size: 1.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  min-height: 64px;
}
button {
  min-height: 56px;
  min-width: var(--target);
  padding: 0 calc(var(--gap) * 1.5);
  border: var(--rule) solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-weight: 800;
  font-size: 1.15rem;
  cursor: pointer;
  width: 100%;
}
button:disabled {
  background: var(--off);
  border-color: var(--off);
  cursor: not-allowed;
}
.quiet-button {
  background: var(--paper);
  color: var(--ink);
  min-height: var(--target);
  font-size: 1rem;
}
:focus-visible {
  outline: var(--rule) solid var(--ink);
  outline-offset: var(--rule);
}
/* A field already has a border: focus makes that one border heavier
   instead of drawing a second ring around it. Padding shrinks by the same
   amount so the text does not jump. */
input:not([type='radio'], [type='checkbox']):focus,
select:focus,
textarea:focus {
  outline: none;
  border-width: 4px;
  padding: 6px 10px;
}
fieldset.choices {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
fieldset.choices legend {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 6px;
  padding: 0;
}
/* The whole row is the label. The control is drawn, not the browser's grey
   dot: a 44px black ring that fills when chosen. */
.choice {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 8px 12px;
  cursor: pointer;
  border: var(--rule) solid var(--ink);
  margin-top: -2px;
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}
.choice span:first-of-type {
  flex: 1;
}
.choice span:last-child {
  font-weight: 800;
}
.choice:has(input:checked) {
  font-weight: 800;
  box-shadow: inset 0 0 0 2px var(--ink);
}
.choice input,
.check input {
  appearance: none;
  -webkit-appearance: none;
  width: var(--target);
  height: var(--target);
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 3px solid var(--ink);
  background: var(--paper);
  flex: none;
  cursor: pointer;
}
.choice input {
  border-radius: 50%;
}
/* Filled black, with a paper ring inside so it still reads as a mark. */
.choice input:checked,
.check input:checked {
  background: var(--ink);
  box-shadow: inset 0 0 0 5px var(--paper);
}
.check {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  font-weight: 700;
}

/* The plate, as large as the screen allows (D2, T2). */
.plate {
  font-variant-numeric: tabular-nums slashed-zero;
  letter-spacing: 0.06em;
  font-weight: 800;
}
.echo {
  font-size: clamp(3rem, 17vw, 6rem);
  line-height: 1;
  margin: var(--gap) 0;
  padding: var(--gap) 0;
  border-top: 6px solid var(--ink);
  border-bottom: 6px solid var(--ink);
  text-align: center;
  white-space: nowrap;
  overflow-wrap: normal;
}
.facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px var(--gap);
  margin: 0 0 calc(var(--gap) * 1.5);
  font-size: 1.15rem;
}
.facts dt {
  font-weight: 400;
}
.facts dd {
  margin: 0;
  font-weight: 800;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.state,
.verdict {
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1.15;
}
.code {
  letter-spacing: 0.08em;
  overflow-wrap: anywhere;
}

/* Lists on the check page and the operator page. */
.list {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}
.list th,
.list td {
  text-align: left;
  padding: 8px 6px 8px 0;
  border-bottom: 1px solid var(--ink);
  vertical-align: top;
}
.list th {
  font-weight: 700;
  border-bottom-width: var(--rule);
}
.answer {
  margin: calc(var(--gap) * 1.5) 0;
}
.lots {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lot {
  border-top: var(--rule) solid var(--ink);
  padding: var(--gap) 0;
}
.lot h2 {
  border: 0;
  margin: 0 0 6px;
  padding: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.3rem;
}
.links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  margin-right: var(--gap);
  font-weight: 700;
}
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.row form {
  flex: 1 1 9rem;
}
.notice {
  border: var(--rule) solid var(--ink);
  padding: var(--gap);
  margin-bottom: var(--gap);
}
.req {
  font-size: 0.9rem;
}

/* The sign: one Letter sheet, read from a car window. On screen it is sized
   in viewport units so it fills whatever shows it; in print, in inches, so
   it fills the sheet. The QR is over half the sheet wide and the phone
   numbers have caps at least half an inch tall. */
main:has(.sign) {
  max-width: none;
  padding: 0;
}
.sign {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 1.2vh;
  padding: 3vh 4vw;
  text-align: center;
}
.sign > * {
  margin: 0;
}
.sign h1 {
  font-size: min(9vw, 6vh);
  overflow-wrap: anywhere;
}
.sign-lead {
  font-size: min(6.5vw, 4.4vh);
  font-weight: 800;
  letter-spacing: 0.04em;
}
.qr {
  width: min(84vw, 44vh);
}
.qr svg {
  display: block;
  width: 100%;
  height: auto;
}
.sign-url {
  font-size: min(5vw, 3.2vh);
  font-weight: 700;
  overflow-wrap: anywhere;
}
.sign-phones {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1vh;
}
.sign-phones dt {
  font-size: min(3.6vw, 2.2vh);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.sign-phones dd {
  margin: 0;
}
.sign-phone {
  font-size: min(9vw, 5.6vh);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sign-legal {
  font-size: min(2.6vw, 1.5vh);
  text-align: left;
  border-top: var(--rule) solid var(--ink);
  padding-top: 1vh;
  width: 100%;
}
.no-print {
  max-width: 32rem;
  margin: 0 auto;
  padding: var(--gap);
}
@page {
  size: letter;
  margin: 0.5in;
}
@media print {
  main {
    max-width: none;
    padding: 0;
  }
  .no-print {
    display: none;
  }
  /* 11in less two 0.5in margins. A fixed height, not min-height, so the
     sheet never spills onto a second page; the e2e prints it to a PDF and
     counts the pages. */
  .sign {
    min-height: 0;
    height: 10in;
    gap: 0.08in;
    padding: 0;
    break-inside: avoid;
  }
  .sign h1 {
    font-size: 0.6in;
  }
  .sign-lead {
    font-size: 0.42in;
  }
  .qr {
    width: 4.5in;
  }
  .sign-url {
    font-size: 0.3in;
  }
  .sign-phones {
    gap: 0.06in;
  }
  .sign-phones dt {
    font-size: 0.17in;
  }
  /* Caps about 0.7 of the size: 0.74in gives caps over 0.5in. */
  .sign-phone {
    font-size: 0.74in;
  }
  .sign-legal {
    font-size: 8.5pt;
    padding-top: 0.06in;
  }
}

/* The front door (/, /park, /owners, /privacy): the greenlit comp, screen
   for screen, set on the scales in :root and nothing else. The page is the
   phone's height; the doors and the code field sit at the bottom where a
   thumb is, the strip or the foot under them. Doors are the comp's: 72px,
   uppercase, left aligned, a second line in small. Above 40rem (a tablet,
   a laptop) the column widens, h1 steps up and the doors follow the words
   at a fixed gap instead of falling to the bottom of a tall window. */
html:not(.js) .js-only,
html.no-strip .cookie {
  display: none;
}
.foot,
.cookie {
  width: 100%;
  max-width: var(--col);
  margin-inline: auto;
}
/* The camera only where a rear camera is plausible: a touch screen with no
   hover. On a laptop the code field stands alone and the note is for
   typing. scan.js also drops the button there, and sets .no-scan when the
   browser has no camera at all. */
.scan-note {
  display: none;
}
@media (hover: none) and (pointer: coarse) {
  html.js:not(.no-scan) .scan-note {
    display: block;
  }
  html.js:not(.no-scan) .type-note {
    display: none;
  }
}
@media (hover: hover), (pointer: fine) {
  .scan {
    display: none;
  }
}
body:has(> main.door) {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
main.door {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--s16);
  padding: var(--s24) var(--s16) var(--s32);
  font-size: var(--t-body);
  line-height: var(--l-body);
}
main.door h1,
main.door h2,
main.door p {
  margin: 0;
}
main.door h1 {
  font-size: var(--t-h1);
  line-height: var(--l-h1);
  font-weight: 800;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
main.door p {
  text-wrap: pretty;
}
main.door .lead {
  font-size: var(--t-lead);
  line-height: var(--l-lead);
  font-weight: 400;
}
main.door .quiet {
  font-size: var(--t-small);
  line-height: var(--l-small);
  color: var(--off);
}
main.door .quiet.ink {
  color: var(--ink);
}
/* A heading the screen does not need but a screen reader does (/pricing,
   where the nav row already says where you are). */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The head: the wordmark, the same on every page and always a way home,
   with the funnel's nav row beside it when there is room, under it when
   there is not. Lead size at full weight with tight tracking, so it holds
   its own against the h1 under it; ".now" in regular is the mark's one
   contrast. */
.top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: var(--s24);
  margin-bottom: var(--s8);
}
main a.wordmark {
  padding: 10px 0;
  font-size: var(--t-lead);
  line-height: 24px;
  font-weight: 800;
  letter-spacing: -0.04em;
  text-decoration: none;
}
.wordmark b {
  font-weight: 400;
  letter-spacing: -0.02em;
}
.nav {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--s16);
  font-size: var(--t-small);
}
main .nav a {
  padding: 12px 0;
  line-height: var(--l-small);
}
.nav a[aria-current] {
  text-decoration: none;
  font-weight: 800;
}

/* The doors: one family. Same box, same 16 inside, same type; the second
   is the first with ink and paper swapped. The label is lead in caps, the
   line under it small, 4 apart. Pressing a door swaps it. */
.doors,
.door-stack {
  display: grid;
  gap: var(--s16);
  margin: auto 0 0;
}
main.door .btn,
main.door button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s4);
  width: 100%;
  min-height: 72px;
  padding: var(--s16);
  background: var(--ink);
  color: var(--paper);
  border: var(--rule) solid var(--ink);
  font-size: var(--t-lead);
  line-height: var(--l-lead);
  font-weight: 800;
  letter-spacing: var(--caps-large);
  text-transform: uppercase;
  text-align: left;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
main.door .btn.second,
main.door button.second,
main.door .btn:active,
main.door button:active {
  background: var(--paper);
  color: var(--ink);
}
main.door .btn.second:active,
main.door button.second:active {
  background: var(--ink);
  color: var(--paper);
}
@media (hover: hover) {
  main.door .btn:hover,
  main.door button:hover {
    background: var(--paper);
    color: var(--ink);
  }
  main.door .btn.second:hover,
  main.door button.second:hover {
    background: var(--ink);
    color: var(--paper);
  }
}
.doors small {
  font-size: var(--t-small);
  line-height: var(--l-small);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
main.door .stack {
  margin: 0;
}

/* /park: the camera, a divider, the code field, Go. The field is a door's
   height with a door's padding, and the code in it (typed or the
   placeholder) is set like the code on the sign. */
.scan {
  display: grid;
  gap: var(--s16);
}
.scan-view video {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: var(--rule) solid var(--ink);
  background: var(--ink);
}
.or {
  display: flex;
  align-items: center;
  gap: var(--s16);
  color: var(--off);
  font-size: var(--t-small);
  line-height: var(--l-small);
}
.or::before,
.or::after {
  content: '';
  flex: 1;
  border-top: var(--rule) solid var(--off);
}
main.door .field {
  gap: var(--s8);
  font-size: var(--t-small);
  line-height: var(--l-small);
  font-weight: 800;
  letter-spacing: var(--caps-small);
  text-transform: uppercase;
}
.code-input,
.code-input::placeholder {
  font-variant-numeric: tabular-nums slashed-zero;
  letter-spacing: 0.08em;
}
.code-input {
  min-height: 72px;
  padding: 0 var(--s16);
  font-size: var(--t-lead);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}
.code-input::placeholder {
  color: var(--off);
  opacity: 1;
}
.code-input:focus {
  padding: 0 14px;
}
.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s8);
  counter-reset: step;
}
.steps li {
  display: grid;
  grid-template-columns: var(--s24) 1fr;
  gap: var(--s8);
  align-items: baseline;
}
.steps li::before {
  counter-increment: step;
  content: counter(step) '.';
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* The foot: the nav row's size and rhythm, in the grey, no rule. */
.foot {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--s16);
  padding: 0 var(--s16) var(--s8);
  font-size: var(--t-small);
  line-height: var(--l-small);
}
.foot a {
  color: var(--off);
}
.foot a,
.cookie a {
  display: inline-block;
  min-height: var(--target);
  min-width: var(--target);
  padding: 12px 0;
  line-height: var(--l-small);
}
/* The cookie strip: small grey words and two text-sized answers, held to
   the bottom of the screen, so the doors lead. Every answer is still a
   44px box. */
.cookie {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--s16);
  align-items: center;
  padding: var(--s8) var(--s16);
  border-top: var(--rule) solid var(--off);
  background: var(--paper);
  color: var(--off);
  font-size: var(--t-small);
  line-height: var(--l-small);
}
/* The link in the sentence keeps its 44px box; negative margins keep the
   box from pushing the lines apart. */
.cookie a {
  margin: -12px 0;
}
.cookie-actions {
  display: flex;
  gap: var(--s16);
}
.cookie button {
  width: auto;
  min-height: var(--target);
  min-width: var(--target);
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: var(--t-small);
  line-height: var(--l-small);
  font-weight: 800;
  text-decoration: underline var(--rule);
  text-underline-offset: 0.2em;
}
.cookie button.second {
  background: none;
  color: var(--off);
  font-weight: 400;
}

/* The owner funnel (/owners, /pricing, /how-it-works, /compare): the comp's
   round two. Same head, doors and foot as the front door; added here are
   the section labels, the big price, the plain list and the tables. A wide
   table scrolls inside its box at 390px, never the page. */

/* Sections are set apart by space, not rules: a small caps label, 48
   above it, 8 under it. */
main.door h2 {
  margin: var(--s32) 0 calc(var(--s8) * -1);
  padding: 0;
  border: 0;
  font-size: var(--t-small);
  line-height: var(--l-small);
  font-weight: 800;
  letter-spacing: var(--caps-small);
  text-transform: uppercase;
}
/* A table under a label sits a full 16 below it, so the label and the
   table's own caps head never read as one row. */
main.door h2 + .tbl {
  margin-top: var(--s8);
}
/* The price is the page: the number at display size, tabular, the terms
   in body under it. */
main.door .price {
  font-size: var(--t-display);
  line-height: var(--l-display);
  font-weight: 800;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  /* The 1's side bearing at this size reads as an indent: pull the number
     back onto the column's edge (main.door p would zero a plain .price). */
  margin-left: -0.05em;
}
.price small {
  display: block;
  margin: var(--s16) 0 0 calc(var(--t-display) * 0.05);
  font-size: var(--t-body);
  line-height: var(--l-body);
  font-weight: 400;
  letter-spacing: 0;
}
/* A plain list marked with a short 2px rule, the wrap hanging under the
   text, not under the mark. */
ul.plain {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s8);
  font-weight: 700;
}
ul.plain li {
  display: grid;
  grid-template-columns: var(--s24) 1fr;
}
ul.plain li::before {
  content: '';
  width: 12px;
  margin-top: 13px;
  border-top: var(--rule) solid var(--ink);
}
main.door ul:not(.plain) {
  margin: 0;
  padding-left: var(--s24);
  display: grid;
  gap: var(--s8);
}
/* Tables: body size, tabular figures, numbers right, a lighter caps head
   row, every body row 48 tall (28 line, 10 and 9 padding, 1 rule). */
.tbl {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
}
main.door .list {
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--t-body);
  line-height: var(--l-body);
}
main.door .list th,
main.door .list td {
  padding: 10px var(--s16) 9px 0;
  border-bottom: 1px solid var(--ink);
}
main.door .list thead th {
  padding-top: 0;
  padding-bottom: 10px;
  border-bottom: var(--rule) solid var(--ink);
  vertical-align: bottom;
  color: var(--off);
  font-size: var(--t-small);
  line-height: var(--l-small);
  font-weight: 800;
  letter-spacing: var(--caps-small);
  text-transform: uppercase;
}
.list th.n,
.list td.n {
  text-align: right;
  white-space: nowrap;
}
main.door .list th.n,
main.door .list td.n {
  padding-right: 0;
  padding-left: var(--s16);
}
/* What the owner keeps is the answer the table is for. */
main.door .list td.n:last-child {
  font-weight: 800;
}
.list td.yes {
  font-weight: 800;
}
.list td.no {
  color: var(--off);
}
/* /compare is wider than a phone. The first column stays put while the
   rest scroll under it, and the right edge fades to paper over a strip
   of empty space, so a cut-off column says "more this way" and the last
   one is never faded. */
.tbl.wide {
  display: flex;
}
.tbl.wide .list {
  flex: 1 0 36rem;
  margin-right: var(--s32);
}
.tbl.wide::after {
  content: '';
  position: sticky;
  right: 0;
  flex: none;
  width: var(--s32);
  margin-left: calc(var(--s32) * -1);
  background: linear-gradient(to right, rgb(255 255 255 / 0), var(--paper));
  pointer-events: none;
}
.tbl.wide th:first-child,
.tbl.wide td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 8.5rem;
  background: var(--paper);
}

@media (min-width: 40rem) {
  body:has(> main.door) {
    --col: 40rem;
    --t-h1: 3rem;
    --l-h1: 3.5rem;
  }
  main.door {
    flex: none;
    padding-top: clamp(var(--s32), 10vh, var(--s64) * 2);
  }
  main.door .doors,
  main.door .door-stack {
    margin-top: var(--s32);
  }
  /* /compare fits the wide column: no fade, no strip held for it. */
  .tbl.wide .list {
    margin-right: 0;
  }
  .tbl.wide::after {
    display: none;
  }
  body:has(> main.door) > .foot,
  body > main.door + .cookie {
    margin-top: auto;
  }
}