/* ==========================================================================
   Vestibule — shared stylesheet
   One file, every page. Hand-written, no build step.

   Palette (from the sales deck)
     cream     #F5F3EC
     charcoal  #262624
     gold      #E8CE6B
     rule      #D9D5C8

   Two supporting tones exist for one reason only: a rent ledger has to be
   able to say "paid" and "past due". They appear nowhere except inside the
   product mockups, as small text and status dots.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  --cream:    #F5F3EC;
  --charcoal: #262624;
  --gold:     #F7E18B;   /* brand yellow, from the logo files — blocks, fills, rules, marks */
  --gold-mid: #EAD173;   /* the same yellow, one step down — button edges and pressed states */
  --gold-ink: #8A7326;   /* same hue, dark enough for small text on cream (5.2:1) */
  --rule:     #D9D5C8;

  /* paper: the surface product mockups are drawn on. A hair lighter than
     cream so a screen reads as a screen, without going to pure white. */
  --paper:    #FBFAF6;

  /* derived */
  --ink:          var(--charcoal);
  --ink-muted:    #6E6A60;
  --ink-faint:    #96918A;
  --on-dark:          var(--cream);
  --on-dark-muted:    rgba(245, 243, 236, 0.66);
  --on-dark-faint:    rgba(245, 243, 236, 0.40);
  --rule-dark:        rgba(245, 243, 236, 0.20);

  /* ledger tones — mockups only */
  --pos: #3F6B52;
  --neg: #9A3B2F;

  /* type */
  --font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Helvetica, Arial, sans-serif;
  --track-tight:  -0.035em;

  /* measure */
  --wrap:   1200px;
  /* Marketing prose only. 66ch sits in the middle of the 60–70 band that
     stays comfortable to read; the product mockups are tabular and are
     deliberately not held to it. */
  --prose:  66ch;
  --prose-narrow: 54ch;
  --gutter: clamp(20px, 5vw, 64px);

  /* Vertical rhythm — three distinct jobs, so the page can say "new subject",
     "more of the same subject" and "inside a card" in three different voices.
     Before this there was one value doing all three, which is why every
     section landed with the same weight and the page read as a list.

       major    a new argument begins. Only a band change or a real topic
                change earns this.
       support  still the same argument, next beat of it.
       card     inside a bordered or filled box — never the band rhythm, or
                the box looks like a section.

     Two bands of the SAME tone sitting next to each other used to add their
     paddings together: 132 + 132 = 264px of nothing, with no colour change to
     explain it. That was the reported hole above the closing CTA. The
     adjacent-sibling rules further down collapse it to one interval. */
  --band-y:     clamp(72px, 8vw, 132px);
  --band-y-sm:  clamp(48px, 5vw, 84px);

  --space-major:   clamp(56px, 6.5vw, 104px);
  --space-support: clamp(32px, 3.4vw, 52px);
  --space-tight:   clamp(18px, 1.8vw, 26px);
  --space-card:    clamp(20px, 2.2vw, 30px);

  /* hover wash — a tint of the ink, never a new colour */
  --wash:       rgba(38, 38, 36, 0.038);
  --wash-dark:  rgba(245, 243, 236, 0.055);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

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

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

a { color: inherit; }

button { font: inherit; color: inherit; }

table { border-collapse: collapse; width: 100%; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection { background: var(--gold); color: var(--charcoal); }

/* --------------------------------------------------------------------------
   3. Skip link
   -------------------------------------------------------------------------- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--charcoal);
  color: var(--cream);
  padding: 14px 20px;
  font-size: 0.875rem;
  text-decoration: none;
}
.skip:focus { left: 0; }

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band {
  padding-block: var(--band-y);
  background: var(--cream);
  color: var(--ink);
}
.band--sm { padding-block: var(--band-y-sm); }

.band--dark {
  background: var(--charcoal);
  color: var(--on-dark);
}

/* hairline between two bands of the same colour */
.band--ruled { border-top: 1px solid var(--rule); }
.band--dark.band--ruled { border-top-color: var(--rule-dark); }

/* Two bands of the same tone in a row.
   Each was paying full band padding, so the join between them carried twice
   the space of any other join — with no colour change to account for it. The
   measured gap above the closing call to action was 269px at 1440, which is
   most of a laptop screen of nothing. The second band drops to the support
   interval: the two still read as separate sections, but as two beats of one
   passage rather than two unrelated pages stacked. */
.band:not(.band--dark) + .band:not(.band--dark),
.band--dark + .band--dark { padding-top: var(--space-support); }

/* A band that has been given a rule is drawing its own separation, so it does
   not also need the full interval above it. */
.band--ruled { padding-top: var(--space-major); }

/* Section header block — the eyebrow, heading and standfirst that open a
   band. Supporting content sits at the support interval below it, not at the
   band interval, which is what used to make a heading and its own content
   look like two separate things. */
/* No measure on the wrapper. ch resolves against the WRAPPER font size, not
   the heading inside it, so a limit here squeezes a 62px heading into a
   column sized for 17px body text - which is how this section first came out
   four lines deep in a 289px column with half the band empty beside it.
   .h-section carries 19ch of its own size and .lead carries 56ch of its own;
   that is where the measure belongs. */
.sec-head { max-width: none; }
.sec-head + * { margin-top: var(--space-support); }
.sec-head .h-section + .lead { margin-top: var(--space-tight); }

.stack > * + * { margin-top: var(--gap, 24px); }

/* Grid children default to a content-based minimum width, which lets the wide
   tables inside the product mockups push a track past the viewport once the
   grid collapses to one column. Allow every grid child we own to shrink; the
   tables then scroll inside .ui__scroll, which is where that belongs. */
.ui__split > *,
.ui__kpis > *,
.mock-grid > *,
.demo > *,
.price > *,
.block > *,
.cols > *,
.cta__grid > *,
.foot__top > *,
.about-block > *,
.case__head > *,
.case__block > *,
.facts li > * { min-width: 0; }

/* --------------------------------------------------------------------------
   5. Typography
   -------------------------------------------------------------------------- */

/* The scale is deliberately wide: the display sizes carry the page and body
   text stays at a readable 16px, so the jump between them does the work that
   colour and decoration are doing on a typical SaaS page. Tracking tightens
   as the size grows, which is the only way large Inter Tight sits properly. */

.display {
  font-size: clamp(3rem, 7.3vw, 6.25rem);
  line-height: 0.92;
  letter-spacing: -0.042em;
}

.h-section {
  font-size: clamp(2.125rem, 4.7vw, 3.85rem);
  line-height: 0.99;
  letter-spacing: -0.038em;
  max-width: 19ch;
}
.h-section--wide { max-width: 26ch; }

.h-sub {
  font-size: clamp(1.5rem, 2.7vw, 2.3rem);
  line-height: 1.04;
  letter-spacing: -0.038em;
}

.lead {
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  line-height: 1.5;
  max-width: 56ch;
  color: var(--ink-muted);
}
.band--dark .lead { color: var(--on-dark-muted); }

.body { max-width: var(--prose); }

.muted { color: var(--ink-muted); }
.band--dark .muted { color: var(--on-dark-muted); }

.closing {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.038em;
  font-size: clamp(1.5rem, 2.9vw, 2.45rem);
  line-height: 1.14;
  max-width: 32ch;
}

/* Eyebrow: a short gold rule, then the label. The rule marks the section; it
   doesn't pretend the sections are a numbered sequence, because they aren't. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-muted);
  margin-bottom: clamp(26px, 3.4vw, 46px);
}
.band--dark .eyebrow { color: var(--on-dark-muted); }

.eyebrow__mark {
  width: 26px;
  height: 2px;
  background: var(--gold);
  flex: none;
}

/* --------------------------------------------------------------------------
   6. Buttons and links
   -------------------------------------------------------------------------- */

/* Buttons sit flat on the page, so the hover has to come from the fill and a
   hairline that closes in — no lift, no shadow, nothing the brief rules out.
   The ghost button fills solid on hover, which is the clearest affordance
   available without depth. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border: 1px solid var(--gold-mid);
  background: var(--gold);
  color: var(--charcoal);
  cursor: pointer;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease),
              border-color 0.18s var(--ease);
}
.btn:hover { background: var(--gold-mid); border-color: #DCC25A; }
.btn:active { background: #DCC25A; border-color: #CDB24B; }

/* the one in the masthead sits lower than the page's own buttons */
.btn--sm { padding: 11px 18px; font-size: 0.875rem; }

.btn--ghost {
  background: transparent;
  color: var(--charcoal);
  border-color: var(--rule);
}
.btn--ghost:hover {
  background: var(--gold);
  border-color: var(--gold-mid);
  color: var(--charcoal);
}

.band--dark .btn {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--charcoal);
}
.band--dark .btn:hover { background: #F3E4A6; border-color: #F3E4A6; }
.band--dark .btn:active { background: #DCC05A; border-color: #DCC05A; }

.band--dark .btn--ghost {
  background: transparent;
  color: var(--cream);
  border-color: var(--rule-dark);
}
.band--dark .btn--ghost:hover {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--charcoal);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
}

/* Text links carry a resting hairline that a full-strength rule wipes across
   on hover, left to right. It reads as a drawn line rather than a colour
   change, which suits a page built out of rules. */

.link,
.link-quiet {
  position: relative;
  text-decoration: none;
  padding-bottom: 3px;
  background-image: none;
}
.link::before,
.link-quiet::before,
.link::after,
.link-quiet::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
}
.link::before, .link-quiet::before { background: var(--rule); }
.link::after, .link-quiet::after {
  background: var(--gold-ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s var(--ease);
}
.link:hover::after, .link-quiet:hover::after,
.link:focus-visible::after, .link-quiet:focus-visible::after { transform: scaleX(1); }

.band--dark .link::before, .band--dark .link-quiet::before { background: var(--rule-dark); }
.band--dark .link::after, .band--dark .link-quiet::after { background: var(--gold); }

.link-quiet {
  font-size: 0.9375rem;
  color: var(--ink-muted);
  transition: color 0.18s var(--ease);
}
.link-quiet:hover { color: var(--charcoal); }
.band--dark .link-quiet { color: var(--on-dark-muted); }
.band--dark .link-quiet:hover { color: var(--cream); }

@media (prefers-reduced-motion: reduce) {
  .link::after, .link-quiet::after { transition: none; }
}

/* --------------------------------------------------------------------------
   7. Icons — one system sitewide
      24px grid, 1.5 stroke, no fill, round caps. currentColor only.
   -------------------------------------------------------------------------- */

.ico {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico--sm { width: 18px; height: 18px; stroke-width: 1.6; }
.ico--lg { width: 30px; height: 30px; stroke-width: 1.25; }

/* --------------------------------------------------------------------------
   8. Masthead
   -------------------------------------------------------------------------- */

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--cream);
  position: sticky;
  top: 0;
  z-index: 40;
}
.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  height: 68px;
}

/* anything linked to by #id has to clear the sticky bar */
:target { scroll-margin-top: 92px; }
[id] { scroll-margin-top: 92px; }

.wordmark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--charcoal);
}
.wordmark__svg {
  display: block;
  height: 23px;
  width: auto;
  aspect-ratio: 5.5 / 1;
  fill: currentColor;
}
@media (max-width: 480px) { .wordmark__svg { height: 20px; } }

.nav {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: auto;
}

.nav__link {
  position: relative;
  font-family: var(--font-body);
  font-size: 0.875rem;
  text-decoration: none;
  color: var(--ink-muted);
  padding: 0 0 3px;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.18s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--gold-ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.24s var(--ease);
}
.nav__link:hover,
.nav__link:focus-visible { color: var(--charcoal); }
.nav__link:hover::after,
.nav__link:focus-visible::after { transform: scaleX(1); }

.band--dark .nav__link::after { background: var(--gold); }
.nav__link[aria-current="page"] { color: var(--charcoal); }
.nav__link[aria-current="page"]::after {
  background: var(--gold);
  transform: scaleX(1);
}

/* Every destination is visible in the bar. No dropdown, nothing to discover
   by hovering — on a site this size a menu that hides five links costs more
   than it saves. */

.nav__mail {
  font-size: 0.9375rem;
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
}
.nav__mail:hover { color: var(--charcoal); border-bottom-color: var(--charcoal); }

.nav__divider {
  width: 1px;
  height: 22px;
  background: var(--rule);
  flex: none;
}

.nav .btn { padding: 12px 20px; }

/* mobile toggle */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 9px;
  background: none;
  border: 1px solid var(--rule);
  padding: 10px 14px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.nav-panel { display: none; }

/* The product menu made the nav wider, so it hands over to the toggle sooner
   than it used to — below this the wordmark and the nav start to crowd. */
@media (max-width: 1023px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }

  .nav-panel[data-open="true"] {
    display: block;
    border-top: 1px solid var(--rule);
    background: var(--cream);
  }
  .nav-panel ul { list-style: none; }
  .nav-panel li + li { border-top: 1px solid var(--rule); }
  .nav-panel a {
    display: block;
    padding: 18px 0;
    text-decoration: none;
    font-size: 1.0625rem;
  }
  .nav-panel .btn { width: 100%; margin: 22px 0 28px; }
}

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */

/* Product-forward: the dashboard starts before the fold on a laptop, so the
   first thing a visitor from a sales meeting sees is the thing they were
   just shown — not an empty expanse under a headline. */
.hero { padding-block: clamp(48px, 5.5vw, 84px) clamp(0px, 2vw, 20px); }

.hero__head { max-width: 21ch; }

.hero__sub {
  margin-top: 26px;
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  line-height: 1.45;
  max-width: 52ch;
  color: var(--ink-muted);
}

.hero__cta { margin-top: 36px; }

.hero__mock { margin-top: clamp(44px, 5vw, 68px); }

/* --------------------------------------------------------------------------
   10. Column strips (what-it-is, philosophy, facts)
   -------------------------------------------------------------------------- */

.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0;
}
.cols > * {
  border-top: 1px solid var(--rule);
  /* Was 34px top / 8px bottom. The column's text finished 8px above its own
     box while 34px sat above the rule, so each column read as top-heavy and
     the band's lower edge looked unfinished. Even padding inside, and the
     paragraph now clears the gold mark properly — 20px under a 2px rule made
     the mark look detached from the sentence it introduces. */
  padding: var(--space-card) 38px var(--space-card) 0;
  transition: border-color 0.24s var(--ease);
}
.band--dark .cols > * { border-top-color: var(--rule-dark); }
.cols > *:hover { border-top-color: var(--gold); }
.col__n { transition: color 0.24s var(--ease); }

@media (min-width: 880px) {
  .cols > * + * { padding-left: 38px; border-left: 1px solid var(--rule); }
  .band--dark .cols > * + * { border-left-color: var(--rule-dark); }
}

.col__n { margin-bottom: 26px; line-height: 0; }
.col__mark {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--gold);
}
.col__p { font-size: 1.0625rem; line-height: 1.52; }

.strip-note {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--track-tight);
  font-size: clamp(1.0625rem, 1.7vw, 1.4rem);
  line-height: 1.3;
  max-width: 48ch;
}
.band--dark .strip-note { border-top-color: var(--rule-dark); }

/* --------------------------------------------------------------------------
   11. Body blocks — hairline stack, no cards
   -------------------------------------------------------------------------- */

.blocks { margin-top: clamp(44px, 5vw, 72px); }
/* two block groups run together as one continuous stack of rules */
.blocks + .blocks { margin-top: 0; }

/* --------------------------------------------------------------------------
   11b. Product summary — the homepage's overview of a product page
   Text on one side, a slice of the real screen on the other. The full
   argument lives on the page it links to.
   -------------------------------------------------------------------------- */

.summary {
  display: grid;
  gap: clamp(32px, 4vw, 60px);
  align-items: start;
  margin-top: clamp(34px, 4vw, 54px);
}
.summary > * { min-width: 0; }

@media (min-width: 1080px) {
  .summary { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }

  /* Alternate which side the screen sits on, so three summaries in a row
     don't read as the same slide three times. The tracks swap along with the
     order, so the screen keeps the wider column whichever side it lands on. */
  .summary--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .summary--flip > *:first-child { order: 2; }
  .summary--flip > *:last-child  { order: 1; }
}

/* A summary headline is a pointer to the page that argues it, so it sits a
   step below that page's own title rather than matching it. */
.summary .h-section {
  font-size: clamp(1.85rem, 3.2vw, 2.75rem);
  max-width: 20ch;
}
.summary .lead { max-width: 46ch; }
.summary .mock-cap { margin-top: 16px; }

/* Each block's top rule is its own hairline. On hover it goes gold — the
   rule is already the structure, so lighting it up is the whole interaction.
   Nothing moves, nothing lifts. */
.block {
  display: grid;
  gap: 10px 48px;
  padding-block: clamp(26px, 3vw, 38px);
  border-top: 1px solid var(--rule);
  transition: border-color 0.24s var(--ease);
}
.band--dark .block { border-top-color: var(--rule-dark); }
.block:hover { border-top-color: var(--gold); }
.block:last-child { border-bottom: 1px solid var(--rule); }
.band--dark .block:last-child { border-bottom-color: var(--rule-dark); }

@media (min-width: 900px) {
  .block { grid-template-columns: minmax(0, 7fr) minmax(0, 12fr); }
}

.block__h {
  font-size: clamp(1.15rem, 1.8vw, 1.55rem);
  line-height: 1.1;
  letter-spacing: -0.038em;
  max-width: 22ch;
}
.block__p { line-height: 1.62; max-width: 62ch; }
.band--dark .block__p { color: var(--on-dark-muted); }

.block__aside { margin-top: 26px; }

/* --------------------------------------------------------------------------
   12. In / out graphic — many messy things in, one clean thing out
   -------------------------------------------------------------------------- */

.flow {
  margin-top: clamp(48px, 6vw, 84px);
  display: grid;
  gap: 28px;
  /* Stretch, not centre. The two halves used to be 302px and 388px tall and
     vertically centred, so nothing on the left lined up with anything on the
     right and the block looked as though it had come apart. */
  align-items: stretch;
}
@media (min-width: 900px) {
  .flow {
    grid-template-columns: minmax(0, 1fr) clamp(88px, 11vw, 150px) minmax(0, 1.05fr);
    gap: 0;
  }
}

/* ---- the inputs ---- */
/* Exactly six equal rows. The converging lines are drawn against the same
   six-row division, so a label and the line that leaves it sit on the same
   centreline at every height the column can take. Change the number of
   inputs and this number changes with it — build-flow.js asserts the count. */
.flow__in {
  list-style: none;
  display: grid;
  /* The builder emits --rows, so adding an input changes the grid, the wedge,
     the fade and the drawing together. Nothing here counts them by hand. */
  grid-template-rows: repeat(var(--rows, 6), 1fr);
  margin: 0;
  padding: 0;
}
.flow__in li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.9375rem;
  color: var(--ink-muted);
  /* A wedge, set in the markup: 0, 22, 44, 44, 22, 0. The rows nearest the
     middle sit furthest right, so the ragged left edge funnels toward the
     point the lines meet. It replaces six unrelated indents. */
  padding-left: var(--indent, 0);
}
.band--dark .flow__in li { color: var(--on-dark-muted); }
.flow__in .ico { flex: none; color: var(--ink-faint); }
.band--dark .flow__in .ico { color: var(--on-dark-faint); }

/* Rows nearer the middle are a shade more present, which reads as the mess
   already starting to gather. Set per item by the builder rather than by a
   stack of :nth-child rules that would need rewriting for a seventh input. */
.flow__in li { opacity: var(--dim, 0.8); }

/* ---- the converging lines ---- */
/* preserveAspectRatio="none" lets the drawing take whatever height the row
   grid ends up at; vector-effect="non-scaling-stroke" in the markup keeps the
   hairlines hairlines while it stretches. Without the second one the lines
   would fatten and thin with the viewport. */
.flow__lines {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--gold-mid);
  overflow: visible;
}
.flow__dot { fill: var(--gold); stroke: none; }
/* The one line the six become. Heavier than the strands feeding it, so the
   eye reads six-into-one rather than seven lines of equal weight. */
.flow__stem { fill: none; stroke: var(--gold); stroke-width: 2; }
.band--dark .flow__lines { color: var(--gold); }

/* On a phone the three columns stack. Six curves turned on their side is
   spaghetti, so the drawing goes and a single rule stands in for it. */
/* On a phone the three columns stack. Seven curves turned on their side is
   spaghetti, so the drawing goes and a rule stands in for the merge. */
@media (max-width: 899px) {
  .flow__lines { display: none; }
  .flow__out { border-top: 2px solid var(--gold); padding-top: 24px; }
}

/* ---- the ledger ---- */
/* The panel is a Vestibule email, not a browser window.
   Matthew sent the September payment summary that goes out to landlords and
   asked for this to wear it: the argument lands harder when the thing on the
   right is a real artifact of the product. Colours are sampled from that
   email — white card, #CCC8B7 hairline, #9E9488 footer, butter-yellow button.

   THE RADIUS IS DELIBERATE AND LOCAL. Every other surface on this site has
   square corners; the email has round ones, and matching it means breaking
   the house rule in exactly one place. Scoped to .flow__card and .flow__btn
   so it cannot leak into the rest of the system. If the email is ever
   redesigned square, these two lines come out. */
.flow__out {
  display: grid;
  align-content: start;
  gap: 14px;
  background: none;
  border: 0;
  padding: 0;
}

.flow__brand { margin: 0; line-height: 0; }
.flow__wordmark {
  width: 104px; height: 20px;
  color: var(--ink);
  fill: currentColor;
}
.band--dark .flow__wordmark { color: var(--on-dark); }

.flow__card {
  background: #FFFFFF;
  border: 1px solid #CCC8B7;
  border-radius: 10px;
  padding: clamp(22px, 2.6vw, 32px);
  display: grid;
  gap: 16px;
}
/* The email is always on its own light paper, so the card keeps its white on
   a dark band rather than inverting — inverting it would stop it being the
   email and start it being a panel again. */
.band--dark .flow__card { border-color: #CCC8B7; }

.flow__outh {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  font-size: clamp(1.375rem, 2.1vw, 1.75rem);
  line-height: 1.15;
  color: #2A2A2A;
}
.flow__sub {
  margin: -8px 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #9E9488;
}

.flow__gets { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.flow__gets li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: #2A2A2A;
}
.flow__gets .ico { color: var(--gold-ink); margin-top: 2px; }

.flow__act { margin: 4px 0 0; }
.flow__btn {
  display: inline-block;
  background: var(--gold);
  border: 1px solid var(--gold-mid);
  border-radius: 6px;
  padding: 11px 20px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0;
  color: #1A1A1A;
  text-decoration: none;
  transition: background 0.2s var(--ease);
}
.flow__btn:hover { background: var(--gold-mid); }
.flow__btn:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 3px; }

.flow__powered { margin: 0; font-size: 0.8125rem; color: #9E9488; }

.band--dark .flow__cap { color: var(--on-dark-faint); }

/* --------------------------------------------------------------------------
   13. Problem section — the mess, unresolved
   -------------------------------------------------------------------------- */

.mess {
  margin-top: clamp(44px, 5vw, 72px);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  max-width: 940px;
}
.mess span {
  font-family: var(--font-display);
  letter-spacing: var(--track-tight);
  font-size: clamp(1.05rem, 2.2vw, 1.75rem);
  line-height: 1.2;
  color: var(--ink-muted);
  padding: 8px 18px 8px 0;
  border-bottom: 1px solid var(--rule);
}
.mess span:nth-child(2n)  { opacity: 0.62; margin-left: clamp(0px, 4vw, 56px); }
.mess span:nth-child(3n)  { opacity: 0.50; }
.mess span:nth-child(5n)  { margin-left: clamp(0px, 3vw, 34px); }

.mess span {
  transition: opacity 0.22s var(--ease), color 0.22s var(--ease),
              border-color 0.22s var(--ease);
}
.mess span:hover {
  opacity: 1;
  color: var(--charcoal);
  border-bottom-color: var(--charcoal);
}

/* --------------------------------------------------------------------------
   14. Product mockups — real markup, flat, hairline
   -------------------------------------------------------------------------- */

/* A mockup is always a light surface, including inside a charcoal band. Reset
   anything the band would otherwise recolour — the panel is a screenshot, not
   part of the band it sits on. */
.band--dark .ui .muted,
.band--dark .ui .lead { color: var(--ink-muted); }
.band--dark .ui .ui__brand { color: var(--charcoal); }

.ui {
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
}
.band--dark .ui { border-color: transparent; }
.band--dark .vd { border-color: transparent; }

/* A flat tint, not a gradient — enough to read as application chrome and
   separate the product screen from the page it sits on. */
.ui__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 20px;
  background: rgba(38, 38, 36, 0.028);
  border-bottom: 1px solid var(--rule);
}

/* the landlord's identity — the point of the tenant portal section */
.ui__brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 0.875rem;
  color: var(--charcoal);
}
.ui__brand i {
  width: 9px;
  height: 15px;
  background: var(--charcoal);
  display: block;
  flex: none;
}
.ui__brand--client i { background: #7A6A3C; }

.ui__tabs {
  display: flex;
  gap: 20px;
  font-size: 0.75rem;
  color: var(--ink-muted);
  list-style: none;
  flex-wrap: wrap;
}
.ui__tabs li {
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  cursor: default;
  transition: color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.ui__tabs li:hover { color: var(--charcoal); border-bottom-color: var(--rule); }
.ui__tabs li[aria-current] {
  color: var(--charcoal);
  font-weight: 600;
  border-bottom-color: var(--gold);
}

.ui__who {
  font-size: 0.75rem;
  color: var(--ink-muted);
  text-align: right;
}

.ui__body { padding: 20px; }
.ui__body + .ui__body { border-top: 1px solid var(--rule); }

.ui__h {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.025em;
  font-size: 1.05rem;
  line-height: 1.15;
}
.ui__label {
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-faint);
}

/* KPI row, divided by hairlines rather than boxed */
.ui__kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.ui__kpis > div {
  padding: 18px 20px;
  border-top: 1px solid var(--rule);
  transition: background-color 0.16s var(--ease);
}
.ui__kpis > div:hover { background: var(--wash); }
.ui__kpis > div:first-child { border-top: none; }
@media (min-width: 620px) {
  .ui__kpis > div { border-top: none; }
  .ui__kpis > div + div { border-left: 1px solid var(--rule); }
}
.kpi__v {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.03em;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.05;
  margin-top: 9px;
}
.kpi__s { font-size: 0.75rem; color: var(--ink-muted); margin-top: 5px; }

/* tables */
.ui__table th {
  text-align: left;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-faint);
  padding: 0 14px 10px 0;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.ui__table td {
  padding: 12px 14px 12px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.ui__table tr:last-child td { border-bottom: none; }

/* Row states. The wash bleeds a little past the text on both sides so a
   hovered row reads as a band across the table, the way it would in the
   real product. */
/* Data tables get the wash alone. A gold row marker would have to reserve its
   own width on every row, and these tables need every pixel for the figures —
   the list rows below carry the marker instead. */
.ui__table tbody tr { transition: background-color 0.14s var(--ease); }
.ui__table tbody tr:hover { background: var(--wash); }
/* numeric columns sit hard right; the left gutter keeps them off the column
   before, which otherwise collide once a panel gets narrow */
.ui__table .num,
.ui__table th.num { text-align: right; padding-left: 13px; padding-right: 0; white-space: nowrap; }
.ui__table .strong { font-weight: 600; }

/* secondary line under a name — always its own line, in tables and in lists */
.ui .sub {
  display: block;
  color: var(--ink-muted);
  font-size: 0.75rem;
  line-height: 1.35;
}
.ui .strong { font-weight: 600; }

/* Tables size to their own content. The numeric cells never wrap, so a table's
   minimum width is exactly what its figures need — no arbitrary min-width to
   clip against. It scrolls only when that minimum genuinely exceeds the panel. */
.ui__scroll { overflow-x: auto; }

/* except the rent roll: seven columns squeezed onto a phone is unreadable,
   so below tablet it scrolls rather than compresses */
@media (max-width: 899px) {
  .ui__scroll--wide table { min-width: 720px; }
}

/* status */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 3px 9px;
  border: 1px solid var(--rule);
  white-space: nowrap;
}
.tag::before {
  content: "";
  width: 5px; height: 5px;
  background: currentColor;
  border-radius: 50%;
  flex: none;
}
.tag--pos  { color: var(--pos); }
.tag--neg  { color: var(--neg); }
.tag--warn { color: #8A6A16; }
.tag--idle { color: var(--ink-muted); }

.amt--neg { color: var(--neg); }
.amt--pos { color: var(--pos); }

/* progress: a single hairline bar, no rounding, no gradient */
.ui__bar-track {
  height: 5px;
  background: var(--rule);
  margin-top: 12px;
}
.ui__bar-fill { height: 100%; background: var(--charcoal); }

/* Sparkline: six months of collection rate. One flat stroke, a hairline
   baseline, and the current month called out in gold — the only mark that
   needs to be found at a glance. */
.spark {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  margin-top: 14px;
  overflow: visible;
}
.spark .spark__line {
  fill: none;
  stroke: var(--charcoal);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.spark .spark__base { stroke: var(--rule); stroke-width: 1; }
.spark .spark__dot { fill: var(--gold); stroke: var(--charcoal); stroke-width: 1.25; }

/* attention / activity list */
.ui__list { list-style: none; }
.ui__list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 10px 12px 8px;
  margin-inline: -10px;
  border-bottom: 1px solid var(--rule);
  border-left: 2px solid transparent;
  transition: background-color 0.14s var(--ease), border-color 0.14s var(--ease);
}
.ui__list li:hover {
  background: var(--wash);
  border-left-color: var(--gold);
}
.ui__list li:last-child { border-bottom: none; }

/* the status chip firms up when its row is hovered */
.ui__list li .tag { transition: border-color 0.14s var(--ease); }
.ui__list li:hover .tag { border-color: currentColor; }
.ui__list .when { margin-left: auto; color: var(--ink-muted); font-size: 0.75rem; white-space: nowrap; }

/* on a phone a status tag like "46 days past due" can't share the row with a
   tenant name, so it drops beneath instead of pushing past the edge */
@media (max-width: 480px) {
  .ui__list li { flex-wrap: wrap; }
  .ui__list .when { margin-left: 0; width: 100%; margin-top: 6px; }
}

/* split inside a mockup */
/* Splits only go side by side once each half can hold a ledger table without
   needing its own scrollbar — below that they stack and get the full width. */
.ui__split { display: grid; }
@media (min-width: 1080px) {
  .ui__split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ui__split > * + * { border-left: 1px solid var(--rule); }
}
@media (max-width: 1079px) {
  .ui__split > * + * { border-top: 1px solid var(--rule); }
}

/* payment method choices */
.pay-opts { list-style: none; }
.pay-opts li,
.pay-opts .pay-opt {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 10px 15px 8px;
  margin-inline: -10px;
  border-bottom: 1px solid var(--rule);
  border-left: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.14s var(--ease), border-color 0.14s var(--ease);
}
.pay-opts li:hover, .pay-opts .pay-opt:hover { background: var(--wash); border-left-color: var(--gold); }
.pay-opts li:hover .radio, .pay-opts .pay-opt:hover .radio { border-color: var(--charcoal); }
.pay-opts .radio { transition: border-color 0.14s var(--ease); }
.pay-opts li:last-child, .pay-opts .pay-opt:last-child { border-bottom: none; }
.pay-opts .radio {
  width: 14px; height: 14px;
  border: 1px solid var(--ink-muted);
  border-radius: 50%;
  margin-top: 3px;
  flex: none;
}
.pay-opts li[data-selected] .radio,
.pay-opts .pay-opt[aria-checked="true"] .radio {
  border-color: var(--charcoal);
  border-width: 4px;
}
.pay-opts .name { font-weight: 600; }
.pay-opts .desc { color: var(--ink-muted); font-size: 0.75rem; }

/* fake field */
.ui__field {
  border: 1px solid var(--rule);
  padding: 10px 12px;
  color: var(--ink-muted);
  background: transparent;
}
.ui__btn {
  display: inline-block;
  background: var(--gold);
  color: var(--charcoal);
  border: 1px solid var(--gold-mid);
  padding: 11px 18px;
  font-size: 0.8125rem;
  font-weight: 600;
}
.ui__btn--quiet {
  background: transparent;
  color: var(--charcoal);
  border: 1px solid var(--rule);
}

/* statement totals */
.ui__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--charcoal);
  margin-top: 4px;
}
.ui__total .v {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.03em;
  font-size: 1.3rem;
}

/* caption under a mockup */
.mock-cap {
  margin-top: 14px;
  font-size: 0.8125rem;
  color: var(--ink-faint);
  max-width: 60ch;
}
.band--dark .mock-cap { color: var(--on-dark-faint); }

.mock { margin-top: clamp(40px, 5vw, 64px); }

/* A product screen is software, and software is wider than prose. Past a
   certain viewport the screen steps outside the text measure — up to 1400px,
   never past the gutters — so the board, the ledger and the lease pipeline get
   the room the product gives them. Below that it behaves like any other mock. */
@media (min-width: 1320px) {
  .mock--screen {
    --screen-w: min(1400px, calc(100vw - 2 * var(--gutter)));
    width: var(--screen-w);
    margin-inline: calc((100% - var(--screen-w)) / 2);
  }
}

.mock-grid {
  display: grid;
  gap: clamp(24px, 3vw, 36px);
  margin-top: clamp(40px, 5vw, 64px);
}
@media (min-width: 940px) {
  .mock-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

/* --------------------------------------------------------------------------
   15. Logo strip — wordmarks set in type, no images
   -------------------------------------------------------------------------- */

.logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(28px, 6vw, 72px);
  padding-top: 26px;
  border-top: 1px solid var(--rule);
}
.band--dark .logos { border-top-color: var(--rule-dark); }
.logos span {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: clamp(1.0625rem, 1.9vw, 1.45rem);
  color: var(--ink-muted);
  transition: color 0.2s var(--ease);
}
.band--dark .logos span { color: var(--on-dark-muted); }
.logos span:hover { color: var(--charcoal); }
.band--dark .logos span:hover { color: var(--cream); }

/* partner systems — Yardi / MRI / AppFolio, set as wordmarks */
.systems {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}
.systems span {
  border: 1px solid var(--rule);
  padding: 9px 18px;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-family: var(--font-display);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.band--dark .systems span { border-color: var(--rule-dark); }
.systems span:hover { border-color: var(--charcoal); background: var(--wash); }
.band--dark .systems span:hover { border-color: var(--cream); background: var(--wash-dark); }

/* --------------------------------------------------------------------------
   15b. Customer proof strip

   Names and marks, high on the page, in one line of the page rhythm rather
   than a band of its own. It is evidence, not an argument, and it should
   take about as long to read as a letterhead.
   -------------------------------------------------------------------------- */

.proof-strip {
  display: grid;
  gap: var(--space-tight) clamp(28px, 4vw, 56px);
  align-items: baseline;
}
@media (min-width: 900px) {
  .proof-strip { grid-template-columns: auto 1fr; }
  .proof-strip__who { grid-column: 1 / -1; }
}
.proof-strip__h {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}
.proof-strip__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px clamp(24px, 4vw, 48px);
  align-items: center;
}
.proof-strip__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: var(--track-tight);
}
.proof-strip__list img { display: block; flex: none; }
.proof-strip__who {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--ink-muted);
  max-width: var(--prose);
}

/* --------------------------------------------------------------------------
   15c. Figures drawn from the sample portfolio

   A bar and a timeline, built by build-figures.js out of the same data the
   dashboard uses. They are the argument, not an illustration beside it, so
   they carry real totals and the build fails if those totals stop adding up.
   -------------------------------------------------------------------------- */

.figs {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
}
@media (min-width: 920px) {
  .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.fig {
  margin: 0;
  padding: var(--space-card);
  border: 1px solid var(--rule);
  background: var(--paper);
  display: grid;
  align-content: start;
  gap: 16px;
}
.band--dark .fig { border-color: var(--rule-dark); background: var(--wash-dark); }

.fig__cap {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.band--dark .fig__cap { color: var(--on-dark-muted); }

.fig__big {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  line-height: 1.12;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.fig__big span {
  display: block;
  font-weight: 400;
  font-size: 0.5em;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--ink-muted);
  margin-top: 8px;
}
.band--dark .fig__big span { color: var(--on-dark-muted); }

/* ---- the collection bar ---- */
.fig__bar {
  display: flex;
  height: 10px;
  background: var(--rule);
  overflow: hidden;
}
.fig__seg { width: var(--w); display: block; }
/* Paid is the brand yellow. The other two are the ledger tones already used
   inside the product mockups - no new colours enter the palette for this. */
.fig__seg--paid    { background: var(--gold); }
.fig__seg--transit { background: var(--gold-ink); }
.fig__seg--due     { background: var(--neg); }

.fig__key { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fig__key li {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  gap: 4px 10px;
  align-items: baseline;
  font-size: 0.9375rem;
}
.fig__dot { width: 10px; height: 10px; border-radius: 2px; align-self: center; }
.fig__dot--paid    { background: var(--gold); }
.fig__dot--transit { background: var(--gold-ink); }
.fig__dot--due     { background: var(--neg); }
.fig__key b { font-weight: 600; font-variant-numeric: tabular-nums; }
.fig__key i {
  grid-column: 2 / -1;
  font-style: normal;
  font-size: 0.8125rem;
  color: var(--ink-faint);
}
.band--dark .fig__key i { color: var(--on-dark-faint); }

/* ---- the expiry timeline ---- */
.tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.tl__i {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 12px;
  align-items: center;
}
.tl__q {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0;
  min-width: 6.5ch;
}
.tl__track { display: block; height: 8px; background: var(--rule); }
.band--dark .tl__track { background: var(--rule-dark); }
.tl__bar { display: block; height: 100%; width: var(--w); background: var(--gold); }
.tl__n, .tl__sf, .tl__amt {
  grid-row: 2;
  font-size: 0.8125rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.tl__n { grid-column: 1 / 2; }
.tl__sf { grid-column: 2 / 3; }
.tl__amt { grid-column: 2 / 3; justify-self: end; font-weight: 600; color: var(--ink); }
.band--dark .tl__amt { color: var(--on-dark); }
.band--dark .tl__n, .band--dark .tl__sf { color: var(--on-dark-muted); }

.fig__note {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ink-faint);
  max-width: var(--prose);
}
.band--dark .fig__note { color: var(--on-dark-faint); }

/* --------------------------------------------------------------------------
   15d. Notes - compact supporting cards

   Where a section used to run two long paragraphs under a heading, it now
   runs two short ones in boxes. Same claim, a third of the words, and a
   different shape from the band above it - which was the whole complaint.
   -------------------------------------------------------------------------- */

.notes {
  display: grid;
  gap: clamp(20px, 2.5vw, 32px);
  margin-top: var(--space-support);
}
@media (min-width: 760px) {
  .notes { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}
.note {
  border-top: 2px solid var(--gold);
  padding-top: var(--space-tight);
  max-width: var(--prose);
}
.note__h {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  font-size: 1.0625rem;
  line-height: 1.3;
  margin: 0 0 8px;
}
.note__p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-muted);
}
.band--dark .note__p { color: var(--on-dark-muted); }

/* --------------------------------------------------------------------------
   15e. Facets - a claim, with the argument behind it

   Native <details>. It opens by click, tap, Enter and Space without a line
   of script, it is already in the accessibility tree, and it cannot get out
   of step with an aria-expanded attribute somebody forgot to update.

   The only motion is the chevron. Opening does not animate a height: that
   kind of transition has to measure the panel, it janks on a long paragraph,
   and it gives a screen reader a moving target.
   -------------------------------------------------------------------------- */

.facets {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.band--dark .facets { border-top-color: var(--rule-dark); }

.facet { border-bottom: 1px solid var(--rule); }
.band--dark .facet { border-bottom-color: var(--rule-dark); }

.facet__h {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: var(--space-tight);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.28;
  transition: color 0.2s var(--ease);
}
/* Safari still draws its own triangle without this. */
.facet__h::-webkit-details-marker { display: none; }
.facet__h::marker { content: ""; }
.facet__h:hover { color: var(--gold-ink); }
.band--dark .facet__h:hover { color: var(--gold); }
.facet__h:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: -2px;
}
.band--dark .facet__h:focus-visible { outline-color: var(--gold); }
.facet__h .ico {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--ink-faint);
  transition: transform 0.24s var(--ease);
}
.band--dark .facet__h .ico { color: var(--on-dark-faint); }
.facet[open] .facet__h .ico { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .facet__h .ico { transition: none; }
}

.facet__p {
  margin: 0;
  padding-bottom: var(--space-tight);
  max-width: var(--prose);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-muted);
}
.band--dark .facet__p { color: var(--on-dark-muted); }

/* --------------------------------------------------------------------------
   15f. The branding demonstration

   A radio group and :has(). No script: a radio group already moves on arrow
   keys, already works by tap, already announces its state, and cannot drift
   out of step with an aria-checked attribute somebody forgot to set.

   The first brand is shown by default rather than hidden, so a browser with
   no :has() support shows a working portal with one brand on it instead of
   an empty box. The three rules below only ever move it off the first one.

   Note what does NOT change between brands: the button, the link, the type,
   the rules, the footer. A landlord sets a logo and a name. The chrome is
   the product, and showing it recolouring would be showing something that
   does not happen.
   -------------------------------------------------------------------------- */

.bp {
  display: grid;
  gap: clamp(24px, 3.5vw, 48px);
  align-items: start;
}
@media (min-width: 880px) {
  .bp { grid-template-columns: minmax(230px, 0.72fr) minmax(0, 1fr); }
}

/* ---- the control ---- */
.bp__pick { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.bp__legend {
  padding: 0;
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.bp__opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--rule);
  background: var(--paper);
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: var(--track-tight);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.bp__opt:hover { border-color: var(--gold-mid); }
.bp__radio:checked + .bp__opt {
  border-color: var(--charcoal);
  background: var(--wash);
}
/* The input is visually hidden, so the focus ring has to be drawn on the
   label it controls or keyboard users get no ring at all. */
.bp__radio:focus-visible + .bp__opt {
  outline: 2px solid var(--gold-ink);
  outline-offset: 2px;
}
.bp__chip, .bp__mark {
  display: grid;
  place-items: center;
  flex: none;
  color: var(--ink, #262624);
  background: var(--bg, #eee);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0;
}
.bp__chip { width: 26px; height: 26px; font-size: 0.6875rem; }
.bp__mark { width: 38px; height: 38px; font-size: 0.9375rem; }

/* ---- the portal ---- */
.bp__screen {
  border: 1px solid var(--rule);
  background: var(--paper);
  display: grid;
  overflow: hidden;
}
.bp__body { padding: clamp(20px, 3vw, 34px); display: grid; gap: 20px; }

.bp__brand { display: none; align-items: center; gap: 13px; margin: 0; }
.bp__brand--meridian { display: flex; }
.bp:has(#bp-ashgrove:checked) .bp__brand--meridian,
.bp:has(#bp-calloway:checked) .bp__brand--meridian { display: none; }
.bp:has(#bp-ashgrove:checked) .bp__brand--ashgrove { display: flex; }
.bp:has(#bp-calloway:checked) .bp__brand--calloway { display: flex; }

.bp__name {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  font-size: 1.0625rem;
  line-height: 1.2;
}
.bp__portal {
  margin-left: auto;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.bp__who {
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 3px;
}
.bp__who b { font-family: var(--font-display); font-weight: 600; font-size: 1rem; }
.bp__who i { font-style: normal; font-size: 0.8125rem; color: var(--ink-muted); }

.bp__due { margin: 0; display: grid; gap: 4px; }
.bp__due .k { font-size: 0.8125rem; color: var(--ink-muted); }
.bp__due .v {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.bp__due .s { font-size: 0.8125rem; color: var(--ink-faint); }

.bp__act { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.bp__btn {
  display: inline-block;
  padding: 10px 18px;
  background: var(--gold);
  border: 1px solid var(--gold-mid);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--charcoal);
}
.bp__lnk { font-size: 0.9375rem; color: var(--ink-muted); text-decoration: underline; text-underline-offset: 3px; }

.bp__foot {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-size: 0.75rem;
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   15g. Explanation and preview, paired

   A short claim beside the screen that proves it. The sides alternate down
   the band so four pairs do not read as four identical rows.

   The alternation is done with grid order, not by reversing the source. The
   claim comes first in the markup every time, so a screen reader and a
   keyboard meet them in the order they are written regardless of which side
   the picture happens to sit on. Below the breakpoint the flip is dropped
   entirely and everything stacks claim-then-screen.
   -------------------------------------------------------------------------- */

.pairs { display: grid; gap: var(--space-major); }

.pair {
  display: grid;
  gap: var(--space-support) clamp(32px, 4.5vw, 72px);
  align-items: center;
}
@media (min-width: 960px) {
  .pair { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .pair--flip .pair__say { order: 2; }
  .pair--flip .pair__see { order: 1; }
}

.pair__say { max-width: 46ch; }
.pair__h {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  line-height: 1.16;
  margin: 0 0 var(--space-tight);
  padding-top: var(--space-tight);
  border-top: 2px solid var(--gold);
}
.pair__p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-muted);
}
.band--dark .pair__p { color: var(--on-dark-muted); }
.pair__act { margin: var(--space-tight) 0 0; }

/* The preview is the point of the pair, so it is never allowed to shrink
   into an unreadable thumbnail. Below the breakpoint it takes the full
   column and the tables inside it scroll in their own right, which is what
   they already do everywhere else on the site. */
.pair__see { min-width: 0; }
.pair__see .ui { width: 100%; }

/* A facet that points somewhere. */
.facet__act { margin: 0; padding-bottom: var(--space-tight); }

/* --------------------------------------------------------------------------
   16. Pricing
   -------------------------------------------------------------------------- */

.price {
  display: grid;
  gap: var(--space-support) clamp(36px, 5vw, 72px);
  align-items: start;
}
@media (min-width: 900px) {
  .price { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .price__fig { grid-column: 1 / -1; }
}
.price__fig {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.042em;
  font-size: clamp(2.8rem, 7vw, 5.75rem);
  line-height: 0.92;
  margin-bottom: var(--space-tight);
}
/* "$12 per lease" holds together and "per month" takes the next line. Two
   spans rather than a <br>, so the break is a styling decision that can be
   released at the widths where it stops fitting. */
.price__fig span { display: block; }
@media (min-width: 420px) {
  .price__fig span { white-space: nowrap; }
}
/* Five terms used to carry six hairlines between them. The ticks already
   mark where one term ends and the next begins; the rules were doing the same
   job a second time and turning a short list into a ledger. */
.price__list { list-style: none; display: grid; gap: 14px; }
.price__list li {
  font-size: 1.0625rem;
  line-height: 1.45;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.price__list .ico { color: var(--gold); margin-top: 4px; flex: none; }

/* --------------------------------------------------------------------------
   17. Closing call to action
   -------------------------------------------------------------------------- */

.cta__grid {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: end;
}
@media (min-width: 880px) {
  .cta__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */

.foot {
  background: var(--charcoal);
  color: var(--on-dark);
  padding-block: clamp(56px, 6vw, 88px) 30px;
}
.foot__top {
  display: grid;
  gap: 44px 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--rule-dark);
}
@media (min-width: 820px) {
  .foot__top { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }
}
.foot .wordmark__svg { height: 26px; }
.foot .wordmark { color: var(--cream); }
.foot__blurb {
  margin-top: 20px;
  color: var(--on-dark-muted);
  font-size: 0.9375rem;
  max-width: 34ch;
}
.foot__h {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--on-dark-faint);
  margin-bottom: 16px;
  font-family: var(--font-body);
}
.foot ul { list-style: none; }
.foot li { margin-bottom: 11px; }
.foot a {
  position: relative;
  text-decoration: none;
  color: var(--on-dark-muted);
  font-size: 0.9375rem;
  transition: color 0.18s var(--ease);
}
.foot a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.24s var(--ease);
}
.foot a:hover { color: var(--cream); }
.foot a:hover::after, .foot a:focus-visible::after { transform: scaleX(1); }
.foot address {
  font-style: normal;
  color: var(--on-dark-muted);
  font-size: 0.9375rem;
}
.foot address a { display: block; margin-top: 11px; }

.foot__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: center;
  padding-top: 26px;
  font-size: 0.8125rem;
  color: var(--on-dark-faint);
}
.foot__legal { display: flex; flex-wrap: wrap; gap: 20px; margin-left: auto; }
.foot__legal a { font-size: 0.8125rem; }

/* --------------------------------------------------------------------------
   19. Sub-page hero
   -------------------------------------------------------------------------- */

.page-head { padding-block: clamp(56px, 7vw, 104px) clamp(44px, 5vw, 76px); }
.page-head .lead { margin-top: 26px; }

/* architectural artwork slot */
.figure { margin-top: clamp(40px, 5vw, 64px); }
.figure img {
  width: 100%;
  border: 1px solid var(--rule);
}
.band--dark .figure img { border-color: var(--rule-dark); }
.figure figcaption {
  margin-top: 12px;
  font-size: 0.8125rem;
  color: var(--ink-faint);
}
.band--dark .figure figcaption { color: var(--on-dark-faint); }

/* --------------------------------------------------------------------------
   19c. The payment demonstration
   The pay screen is the one mockup a visitor should be able to operate. It
   runs a scripted sequence — no payment is taken, no card or bank field exists
   anywhere in this markup, and every figure is the sample portfolio's.
   Under prefers-reduced-motion the whole sequence resolves at once.
   -------------------------------------------------------------------------- */

.pay-opts .pay-opt {
  appearance: none;
  width: calc(100% + 20px);
  background: none;
  border-top: 0; border-right: 0;
  font: inherit;
  text-align: left;
  color: inherit;
  min-height: 46px;
}
.pay-opts .pay-opt:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.pay-opts .pay-opt[aria-checked="true"] { border-left-color: var(--gold); }
.pay-opts .pay-opt > span:last-child { display: grid; }

button.ui__btn {
  appearance: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  min-height: 42px;
}
button.ui__btn:hover { background: var(--gold-mid); border-color: #DCC25A; }
button.ui__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
button.ui__btn[disabled] { opacity: 0.45; cursor: default; }

.pay-steps { list-style: none; display: grid; gap: 0; }
.pay-steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
  opacity: 0.32;
  transition: opacity 0.3s var(--ease);
}
.pay-steps li:last-child { border-bottom: 0; }
.pay-steps li[data-on] { opacity: 1; }
.pay-steps .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--rule); align-self: center;
  transition: background-color 0.3s var(--ease);
}
.pay-steps li[data-on] .dot { background: var(--gold); }
.pay-steps li[data-done] .dot { background: var(--pos); }
.pay-steps .lab { font-weight: 600; font-size: 0.8125rem; }
.pay-steps .sub { color: var(--ink-muted); font-size: 0.75rem; display: block; font-weight: 400; }
.pay-steps .when {
  font-size: 0.6875rem; color: var(--ink-faint);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.pay-done { display: grid; gap: 14px; }
.pay-flag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--pos);
}
.pay-flag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* the demo's result table is narrow — a right-aligned amount needs a gutter
   before the status beside it, which the global .num rule zeroes out */
.pay-done .ui__table { min-width: 0; }
.pay-done .ui__table .num,
.pay-done .ui__table th.num { padding-right: 16px; }
.pay-done .ui__table td:last-child,
.pay-done .ui__table th:last-child { padding-right: 0; text-align: right; }
.pay-done .ui__btn--quiet { border-color: var(--ink-faint); }

.pay-demo-note {
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-top: 1px solid var(--rule);
  padding-top: 11px;
  margin: 0;
}

/* the pricing slider needs a real thumb target on a phone */
.calc__range { padding-block: 14px; }

/* --------------------------------------------------------------------------
   19d. The statement example
   A real Vestibule statement, rebuilt in HTML so it restyles with the site and
   the figures stay editable text. Same six charges as the tenant portal's
   statement mockup, same $35,911.17 total, same lease clauses.

   The bank block shows the SHAPE of the payment instructions and none of the
   digits. A routing and account number on a public marketing page is a gift to
   anyone running invoice fraud, and this page has no business carrying them.
   -------------------------------------------------------------------------- */

.stmt-dialog {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(860px, 94vw);
  width: 100%;
  max-height: 92vh;
}
.stmt-dialog::backdrop { background: rgba(24, 24, 22, 0.62); }
.stmt-shell {
  background: var(--paper);
  border: 1px solid var(--rule);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}
.stmt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
  flex: none;
}
.stmt-head p {
  margin: 0;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-faint);
}
.stmt-close {
  appearance: none;
  border: 1px solid var(--rule);
  background: none;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--charcoal);
  padding: 8px 14px;
  min-height: 38px;
  cursor: pointer;
  transition: background-color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.stmt-close:hover { background: var(--gold); border-color: var(--gold-mid); }
.stmt-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.stmt-scroll { overflow: auto; -webkit-overflow-scrolling: touch; }

.stmt {
  background: var(--paper);
  padding: clamp(26px, 4.5vw, 52px);
  font-size: 0.8125rem;
  line-height: 1.5;
}
.stmt__top {
  display: grid;
  gap: 14px 30px;
  align-items: start;
  padding-bottom: 16px;
}
@media (min-width: 620px) { .stmt__top { grid-template-columns: 1fr auto; } }
.stmt__h {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  font-size: clamp(1.9rem, 4.4vw, 2.5rem);
  line-height: 1;
  margin: 0;
}
.stmt__org { text-align: left; margin: 0; }
@media (min-width: 620px) { .stmt__org { text-align: right; } }
.stmt__org b {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.stmt__org span { color: var(--ink-muted); font-size: 0.75rem; }

.stmt__dates {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-muted);
}
.stmt__pair {
  display: grid;
  gap: 18px 30px;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 620px) { .stmt__pair { grid-template-columns: 1fr 1fr; } }
.stmt__pair > div:last-child { text-align: left; }
@media (min-width: 620px) { .stmt__pair > div:last-child { text-align: right; } }
.stmt__k {
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-faint);
  margin: 0 0 4px;
}
.stmt__v { font-size: 1rem; font-weight: 600; margin: 0; }
.stmt__v--big {
  font-family: var(--font-mono, ui-monospace), ui-monospace, Menlo, monospace;
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.stmt__scroll { overflow-x: auto; }
.stmt table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 0.8125rem; }
.stmt th {
  text-align: left;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-faint);
  padding: 20px 14px 10px 0;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.stmt td { padding: 13px 14px 13px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.stmt .num { text-align: right; padding-right: 0; padding-left: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stmt th.num { text-align: right; }
.stmt .basis { display: block; color: var(--ink-faint); font-size: 0.6875rem; }
.stmt__total {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 26px;
  padding: 20px 0 26px;
}
.stmt__total .k { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: var(--track-tight); }
.stmt__total .v {
  font-family: ui-monospace, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  font-weight: 600;
}

.stmt__pay { border: 1px solid var(--rule); padding: clamp(18px, 3vw, 26px); }
.stmt__pay h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  font-size: 0.9375rem;
  margin: 0 0 16px;
}
.stmt__grid { display: grid; gap: 14px 30px; }
@media (min-width: 560px) { .stmt__grid { grid-template-columns: 1fr 1fr; } }
.stmt__grid p { margin: 0; }
.stmt__mask {
  font-family: ui-monospace, Menlo, monospace;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  user-select: none;
}
.stmt__hidden {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: 0.75rem;
  color: var(--ink-muted);
}
.stmt__hidden b { color: var(--charcoal); }
.stmt__fine { font-size: 0.6875rem; color: var(--ink-faint); margin-top: 14px; }

.stmt__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 20px;
  padding-top: 34px;
  margin-top: 30px;
  border-top: 1px solid var(--rule);
}
.stmt__by { display: grid; gap: 7px; }
.stmt__by span { font-size: 0.6875rem; color: var(--ink-faint); }
.stmt__by svg { display: block; height: 19px; width: auto; aspect-ratio: 5.5 / 1; fill: var(--charcoal); }
.stmt__foot > p { margin: 0; font-size: 0.6875rem; color: var(--ink-faint); }

/* labels above values, not run together beside them */
.stmt__grid .stmt__k { display: block; }

/* a <button> wearing .link has to lose its chrome first */
button.link {
  appearance: none;
  background: none;
  border: 0;
  padding: 0 0 3px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  min-height: 34px;
}

.stmt__pay { break-inside: avoid; }

/* --------------------------------------------------------------------------
   20. Prose (About)
   -------------------------------------------------------------------------- */

.prose { max-width: var(--prose); }
.prose p + p { margin-top: 1.2em; }
.prose p {
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  line-height: 1.66;
}

.about-block {
  display: grid;
  gap: 18px 56px;
  padding-block: clamp(40px, 5vw, 68px);
  border-top: 1px solid var(--rule);
}
.band--dark .about-block { border-top-color: var(--rule-dark); }
@media (min-width: 940px) {
  .about-block { grid-template-columns: minmax(0, 5fr) minmax(0, 12fr); }
}

/* team grid — no photographs supplied; tiles are deliberately empty */
.team {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 28px;
  margin-top: 36px;
}

/* The five headshots arrived from five different photographers — a cafe, a flat
   blue studio, a black-and-white profile, a white wall, a dark grey seamless.
   Grayscale is what lets them read as one team instead of a collage. It is one
   line: delete the filter below and they go back to colour. */
.team__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 28%;
  border: 1px solid var(--rule);
  filter: grayscale(1) contrast(1.03);
  transition: filter 0.3s var(--ease);
  background: var(--wash);
}
.team figure:hover .team__img { filter: grayscale(0) contrast(1); }
@media (prefers-reduced-motion: reduce) { .team__img { transition: none; } }

.team__slot {
  border: 1px solid var(--rule);
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: flex-end;
  padding: 16px;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background:
    repeating-linear-gradient(
      -45deg,
      transparent 0 9px,
      rgba(38, 38, 36, 0.04) 9px 10px
    );
}
.band--dark .team__slot {
  border-color: var(--rule-dark);
  color: var(--on-dark-faint);
  background:
    repeating-linear-gradient(
      -45deg,
      transparent 0 9px,
      rgba(245, 243, 236, 0.05) 9px 10px
    );
}
.team__slot { transition: border-color 0.22s var(--ease), color 0.22s var(--ease); }
.team figure:hover .team__slot { border-color: var(--charcoal); color: var(--ink-muted); }
.band--dark .team figure:hover .team__slot { border-color: var(--cream); }

/* ---- bios -------------------------------------------------------------
   Every bio is in the page as plain text under its photograph. Script folds
   them away and turns the photograph into the way in; where that does not
   run, or is not supported, the bios simply stay where they are and read
   perfectly well. Nobody's career sits behind an interaction. */

.team__m { margin: 0; }
.team__hit { display: block; }
/* only once the script has made it one */
.team__hit[role="button"] { cursor: pointer; }
.team__hit[role="button"]:focus-visible {
  outline: 2px solid var(--charcoal); outline-offset: 3px;
}
.team__hit[role="button"]:hover .team__img,
.team__hit[role="button"]:focus-visible .team__img { border-color: var(--charcoal); }

.team__more {
  margin-top: 6px;
  font-size: 0.75rem; font-weight: 600;
  color: var(--ink-muted);
  display: inline-flex; align-items: center; gap: 5px;
}
.team__more::after {
  content: ""; width: 5px; height: 5px;
  border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.team__hit[role="button"]:hover .team__more { color: var(--charcoal); }
.band--dark .team__more { color: var(--on-dark-muted); }

.team__bio { margin: 10px 0 0; font-size: 0.875rem; color: var(--ink-muted); }
.band--dark .team__bio { color: var(--on-dark-muted); }

.team__h {
  margin: clamp(36px, 4vw, 52px) 0 0;
  padding-top: 20px; border-top: 1px solid var(--rule);
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-muted);
}
.team--board { margin-top: 24px; }
/* One person should not be stretched across the width the four occupy. */
.team--board { grid-template-columns: repeat(auto-fill, minmax(190px, 0.25fr)); }

/* ---- the bio dialog ---- */
.bio-dialog {
  border: 0; padding: 0; background: transparent;
  max-width: min(560px, 94vw); width: 100%;
}
.bio-dialog::backdrop { background: rgba(24, 24, 22, 0.62); }
.bio-shell {
  background: var(--paper); border: 1px solid var(--rule);
  max-height: 92vh; display: flex; flex-direction: column;
}
.bio-head {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-bottom: 1px solid var(--rule); flex: none;
}
.bio-img {
  width: 56px; height: 70px; flex: none;
  object-fit: cover; object-position: center 28%;
  border: 1px solid var(--rule);
  filter: grayscale(1) contrast(1.03);
}
.bio-h {
  margin: 0; font-family: var(--font-display); font-weight: 600;
  font-size: 1.0625rem; letter-spacing: var(--track-tight); line-height: 1.2;
}
.bio-role { margin: 3px 0 0; font-size: 0.8125rem; color: var(--ink-muted); }
.bio-x {
  margin-left: auto; flex: none;
  width: 32px; height: 32px; line-height: 1;
  font-size: 1.25rem; color: var(--ink-muted);
  border: 1px solid var(--rule); background: var(--cream);
}
.bio-x:hover { color: var(--charcoal); border-color: var(--charcoal); }
.bio-body { padding: 18px; overflow: auto; }
.bio-body p { margin: 0; font-size: 0.9375rem; line-height: 1.6; }

.team__name { margin-top: 12px; font-weight: 600; font-size: 0.9375rem; }
.team__role { color: var(--ink-muted); font-size: 0.875rem; }
.band--dark .team__role { color: var(--on-dark-muted); }

/* facts list */
.facts { list-style: none; margin-top: 8px; }
.facts li {
  display: grid;
  gap: 4px 32px;
  padding-block: 16px;
  border-top: 1px solid var(--rule);
  font-size: 1.0625rem;
  transition: border-color 0.24s var(--ease);
}
.band--dark .facts li { border-top-color: var(--rule-dark); }
.facts li:hover { border-top-color: var(--gold); }
@media (min-width: 620px) { .facts li { grid-template-columns: 170px minmax(0, 1fr); } }
.facts dt, .facts .k {
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-faint);
  padding-top: 4px;
}
.band--dark .facts .k { color: var(--on-dark-faint); }

/* --------------------------------------------------------------------------
   21. Use cases
   -------------------------------------------------------------------------- */

.case { border-top: 1px solid var(--rule); padding-top: clamp(36px, 4vw, 56px); }
.band--dark .case { border-top-color: var(--rule-dark); }
.case + .case { margin-top: clamp(56px, 7vw, 100px); }

.case__head {
  display: grid;
  gap: 16px 56px;
  align-items: baseline;
}
@media (min-width: 880px) {
  .case__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
}
.case__seg {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-ink);
}

.case__blocks {
  display: grid;
  gap: 0;
  margin-top: clamp(36px, 4vw, 56px);
}
.case__block {
  display: grid;
  gap: 12px 56px;
  padding-block: 30px;
  border-top: 1px solid var(--rule);
  transition: border-color 0.24s var(--ease);
}
.band--dark .case__block { border-top-color: var(--rule-dark); }
.case__block:hover { border-top-color: var(--gold); }
.case__block:last-child { border-bottom: 1px solid var(--rule); }
.band--dark .case__block:last-child { border-bottom-color: var(--rule-dark); }
@media (min-width: 900px) {
  .case__block { grid-template-columns: minmax(0, 6fr) minmax(0, 12fr); }
}
.case__bh {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  font-size: 1.125rem;
  display: flex;
  gap: 12px;
}
.case__bh span { color: var(--gold-ink); font-variant-numeric: tabular-nums; }

/* content awaiting supply — honest, not a fake skeleton */
.pending {
  color: var(--ink-faint);
  font-size: 0.9375rem;
  border-left: 1px solid var(--rule);
  padding-left: 18px;
}
.band--dark .pending { color: var(--on-dark-faint); border-left-color: var(--rule-dark); }

/* two quotes side by side — homepage customer proof */

/* --------------------------------------------------------------------------
   20c. Product explorer — four tabs over the same portfolio
   -------------------------------------------------------------------------- */

.tabs__head {
  display: grid;
  gap: 16px 40px;
  align-items: end;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.band--dark .tabs__head { border-bottom-color: var(--rule-dark); }
@media (min-width: 880px) { .tabs__head { grid-template-columns: auto minmax(0, 1fr); } }

.tablist { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -15px;
  padding: 0 0 13px;
  font: inherit;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  font-size: 1.125rem;
  color: var(--ink-muted);
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.band--dark .tab { color: var(--on-dark-muted); }
.tab:hover { color: var(--charcoal); }
.band--dark .tab:hover { color: var(--on-dark); }
.tab[aria-selected="true"] { color: var(--charcoal); border-bottom-color: var(--gold); }
.band--dark .tab[aria-selected="true"] { color: var(--on-dark); }
.tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

.tabs__note {
  font-size: 0.9375rem;
  color: var(--ink-muted);
  margin: 0;
  justify-self: start;
}
.band--dark .tabs__note { color: var(--on-dark-muted); }
@media (min-width: 880px) { .tabs__note { justify-self: end; text-align: right; } }

.tabpanel { padding-top: clamp(32px, 4vw, 52px); }
.tabpanel[hidden] { display: none; }
.tabpanel__head {
  display: grid;
  gap: 12px 48px;
  align-items: start;
}
@media (min-width: 880px) { .tabpanel__head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.tabpanel .mock { margin-top: clamp(28px, 3.5vw, 44px); }

/* --------------------------------------------------------------------------
   20d. Pricing calculator — real arithmetic on the published price
   -------------------------------------------------------------------------- */

/* The calculator is given a surface of its own. It is the one thing in this
   band a visitor can operate, and as bare text on the band it read as a
   footnote beside the list of terms rather than the other half of the block. */
.calc {
  display: grid;
  gap: 14px;
  padding: var(--space-card);
  border: 1px solid var(--rule);
  background: var(--wash);
}
.band--dark .calc { border-color: var(--rule-dark); background: var(--wash-dark); }
.calc__h {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  font-size: 1.0625rem;
  margin: 0;
}
.calc__label {
  font-size: 0.9375rem;
  color: var(--on-dark-muted);
  margin: 0;
}
.calc__range {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
  margin: 4px 0 0;
  cursor: pointer;
}
.calc__range:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }
.calc__range::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(to right, var(--gold) var(--fill, 20%), var(--rule-dark) var(--fill, 20%));
}
.calc__range::-moz-range-track { height: 2px; background: var(--rule-dark); }
.calc__range::-moz-range-progress { height: 2px; background: var(--gold); }
.calc__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--gold);
  border: 0;
}
.calc__range::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--gold);
  border: 0;
}
.calc__out {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.calc__out span { font-weight: 400; font-size: 0.6em; letter-spacing: 0; color: var(--on-dark-muted); }
.calc__foot { display: grid; gap: 8px; margin: 0; }
.calc__foot p { font-size: 0.875rem; color: var(--on-dark-muted); margin: 0; }
.calc__foot .k {
  display: inline-block;
  min-width: 82px;
  color: var(--on-dark-faint);
}

/* --------------------------------------------------------------------------
   21. Quotes
   -------------------------------------------------------------------------- */

.quotes {
  display: grid;
  gap: clamp(36px, 4vw, 64px);
  margin-top: clamp(36px, 4vw, 56px);
}
.quotes > * { min-width: 0; }
@media (min-width: 880px) {
  .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quotes > * + * { padding-left: clamp(36px, 4vw, 64px); border-left: 1px solid var(--rule); }
  .band--dark .quotes > * + * { border-left-color: var(--rule-dark); }
}

/* customer proof — company, one hard fact, one quote. Nothing else. */
.proof__id {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 22px;
  margin-bottom: clamp(20px, 2.4vw, 28px);
  font-family: var(--font-body); letter-spacing: 0;
}
.proof__name {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.125rem; letter-spacing: var(--track-tight); margin: 0;
}
/* Customer marks. The row is a fixed box so the two align across the two
   columns even though one is square and one is wide; each mark scales to
   fit it. Height, not width, is what makes marks of different proportion
   look like they belong together. */
.proof__logo {
  display: flex; align-items: center;
  height: 48px; margin: 0 0 clamp(18px, 2vw, 24px);
}
.proof__logo img { max-height: 100%; width: auto; display: block; }
/* Matched by eye, not by number. Justin's mark is a framed monogram, so it
   needs the full box height before the letters inside it are legible; a
   wide, light mark set to that same height would tower over it. Republic's
   bird is capped so the two carry the same weight on the line. */
.proof__logo--wide img { max-height: 32px; }
.proof__fact { font-size: 0.9375rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; margin: 0; }
.band--dark .proof__fact { color: var(--on-dark-muted); }
.proof__slot {
  font-size: 0.8125rem; color: var(--ink-faint);
  border: 1px dashed var(--rule); padding: 6px 12px;
}
.band--dark .proof__slot { color: var(--on-dark-faint); border-color: var(--rule-dark); }
.proof__seg {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  letter-spacing: 0;
  color: var(--ink-muted);
  margin: 0;
}
.band--dark .proof__seg { color: var(--on-dark-muted); }

.proof__link { font-family: var(--font-body); font-size: 0.9375rem; letter-spacing: 0; margin-top: 16px; }

/* an unapproved quote must never be able to ship silently */
.draft {
  font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-faint); margin-top: 16px;
  display: flex; align-items: center; gap: 9px; letter-spacing: 0.08em;
}
.band--dark .draft { color: var(--on-dark-faint); }
.draft::before { content: ""; width: 6px; height: 6px; background: var(--gold); flex: none; }

/* --------------------------------------------------------------------------
   21b. Sibling navigation — the foot of every product page
   -------------------------------------------------------------------------- */

.siblings {
  display: grid;
  gap: 0;
  margin-top: 8px;
}
@media (min-width: 820px) {
  .siblings { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .siblings > * + * { border-left: 1px solid var(--rule); padding-left: 32px; }
  .band--dark .siblings > * + * { border-left-color: var(--rule-dark); }
}
.siblings a {
  display: block;
  padding: 26px 32px 26px 0;
  text-decoration: none;
  border-top: 1px solid var(--rule);
  transition: border-color 0.24s var(--ease);
}
.band--dark .siblings a { border-top-color: var(--rule-dark); }
.siblings a:hover { border-top-color: var(--gold); }
@media (min-width: 820px) {
  .siblings > * + * a { padding-left: 0; }
}
.siblings__k {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 12px;
}
.siblings__t {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.03em;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.1;
}
.siblings__d {
  display: block;
  margin-top: 8px;
  font-size: 0.9375rem;
  color: var(--ink-muted);
  max-width: 30ch;
}
.band--dark .siblings__d { color: var(--on-dark-muted); }

.quote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--track-tight);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.24;
}
.quote figcaption { font-family: var(--font-body); font-size: 0.9375rem; margin-top: 18px; color: var(--ink-muted); letter-spacing: 0; }
.band--dark .quote figcaption { color: var(--on-dark-muted); }

/* --------------------------------------------------------------------------
   22. Demo form
   -------------------------------------------------------------------------- */

.demo {
  display: grid;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
@media (min-width: 940px) {
  .demo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}

.form { margin-top: 8px; }
.field { padding-block: 20px; border-top: 1px solid var(--rule); }
.band--dark .field { border-top-color: var(--rule-dark); }
.field:last-of-type { border-bottom: 1px solid var(--rule); }
.band--dark .field:last-of-type { border-bottom-color: var(--rule-dark); }

.field label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-faint);
  margin-bottom: 10px;
}
.band--dark .field label { color: var(--on-dark-faint); }

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  line-height: 1.5;
}
.field textarea { resize: vertical; min-height: 4.5em; }
.field select { appearance: none; cursor: pointer; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.band--dark .field input::placeholder { color: var(--on-dark-faint); }
.field :focus-visible { outline-offset: 6px; }

.form__actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }

.checklist { list-style: none; }
.checklist li {
  display: flex;
  gap: 14px;
  padding-block: 15px;
  border-top: 1px solid var(--rule);
  font-size: 1rem;
  transition: border-color 0.24s var(--ease);
}
.band--dark .checklist li { border-top-color: var(--rule-dark); }
.checklist li:hover { border-top-color: var(--gold); }

.field { transition: border-color 0.24s var(--ease); }
.field:focus-within { border-top-color: var(--gold); }
.checklist .ico { color: var(--gold); flex: none; }

/* --------------------------------------------------------------------------
   22b. Owner dashboard — the product, drawn in the site's own hand
   --------------------------------------------------------------------------

   This is the real product's dashboard: same layout, same panels, same
   figures. What changes is the finish. The product is white with rounded
   cards and a stoplight palette; here it is cream and charcoal with hairline
   rules, because a screenshot pasted onto this page would look like a
   different company's software.

   The three status colours survive the translation, because they carry
   meaning rather than decoration: paid is --pos, past due is --neg, and
   money in transit takes the brand yellow, which is where the amber in the
   product was already pointing.
   -------------------------------------------------------------------------- */

.vd {
  width: 100%;              /* never shrink-wrap to its contents */
  border: 1px solid var(--rule);
  background: var(--paper);
  /* An application window is dark ink on paper wherever it is dropped. Without
     this it inherits the band's colour and a dark band turns the product's own
     headings and tags to cream on cream. */
  color: var(--charcoal);
  display: grid;
  grid-template-columns: 1fr;
  font-family: var(--font-body);
  letter-spacing: 0;
  container-type: inline-size;
}
@media (min-width: 1140px) {
  /* The rail is the product's, so it is the product's width: enough for the
     command bar to read without truncating. The main column can afford it now
     that a product screen is allowed to be wider than the prose. */
  .vd { grid-template-columns: 208px minmax(0, 1fr); }
}

/* ---- window chrome -----------------------------------------------------
   Forty pixels that do a lot of work: three traffic lights and the address
   the product lives at, and the screen below stops reading as part of the
   page and starts reading as software. Nothing in it is a control — the dots
   are the one place on this site where a real colour is used for its own
   sake, because a traffic light is only recognisable in its own colours. */

.win__bar {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 12px;
  margin: 0; padding: 0 14px; height: 38px;
  background: var(--cream);
  border-bottom: 1px solid var(--rule);
}
.win__dots { display: flex; gap: 8px; flex: none; }
.win__dots i {
  width: 11px; height: 11px; border-radius: 50%;
  background: #FF5F57;                      /* close */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.win__dots i:nth-child(2) { background: #FEBC2E; }   /* minimise */
.win__dots i:nth-child(3) { background: #28C840; }   /* zoom */
.win__addr {
  flex: 1; text-align: center;
  font-size: 0.75rem; color: var(--ink-faint);
  letter-spacing: 0;
  /* the dots sit left, so pull the address back to the true centre */
  margin-right: 57px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 599px) {
  .win__addr { margin-right: 0; text-align: left; }
}

/* ---- left rail. Decorative: it shows the shape of the product, so it is
   aria-hidden and carries nothing a reader would miss. --------------------- */
.vd__rail { display: none; }
@media (min-width: 1140px) {
  .vd__rail {
    display: flex; flex-direction: column;
    border-right: 1px solid var(--rule);
    padding: 20px 0 18px;
    background: var(--cream);
  }
}
.vd__brand { margin: 0 0 22px; padding: 0 20px; }
/* Smaller than the site's own masthead wordmark directly above it — the two
   are on screen together, and this one has to read as the app's chrome. */
.vd__brandsvg { display: block; height: 15px; width: 86px; color: var(--charcoal); }
/* The product's command bar. A picture of one: the rail is decoration and
   nothing in it takes focus. */
.vd__search {
  display: flex; align-items: center; gap: 8px;
  margin: 0 20px 18px; padding: 7px 9px;
  border: 1px solid var(--rule); background: var(--paper);
  font-size: 0.6875rem; color: var(--ink-faint);
  white-space: nowrap;
}
.vd__search > span { overflow: hidden; text-overflow: ellipsis; }
.vd__search kbd {
  margin-left: auto; font: inherit;
  border: 1px solid var(--rule); padding: 0 4px; color: var(--ink-faint);
}

.vd__navs { flex: 1; min-height: 0; }
.vd__nav { list-style: none; margin: 0; padding: 0; }
.vd__nav li {
  font-size: 0.8125rem; color: var(--ink-muted);
  padding: 8px 20px; border-left: 2px solid transparent;
}
.vd__nav li[aria-current] {
  color: var(--charcoal); font-weight: 600;
  border-left-color: var(--gold); background: var(--wash);
}
/* A section with its own sub-navigation says so, the way the product does. */
.vd__navh {
  margin: 20px 0 6px; padding: 0 20px;
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-faint);
}
.vd__nav--sub li { font-size: 0.75rem; }

.vd__user {
  display: flex; align-items: center; gap: 9px;
  margin: 16px 0 0; padding: 14px 20px 0;
  border-top: 1px solid var(--rule);
  font-size: 0.6875rem; color: var(--ink-faint);
}
.vd__user i { width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--gold); }
.vd__user span { display: block; min-width: 0; }
.vd__user b {
  display: block; font-size: 0.75rem; font-weight: 600; color: var(--charcoal);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- main column ------------------------------------------------------- */
.vd__main { padding: clamp(16px, 2.2vw, 24px); min-width: 0; }
.vd__head {
  display: flex; flex-wrap: wrap; gap: 14px 20px;
  align-items: flex-end; justify-content: space-between;
  padding-bottom: 18px; border-bottom: 1px solid var(--rule);
}
.vd__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
  letter-spacing: var(--track-tight); margin: 0;
}
.vd__sub { font-size: 0.8125rem; color: var(--ink-muted); margin: 3px 0 0; }

.vd__filter { display: flex; align-items: center; gap: 9px; margin: 0; }
.vd__filter label {
  font-size: 0.625rem; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--ink-faint);
}
.vd__filter select {
  font: inherit; font-size: 0.8125rem; color: var(--charcoal);
  background: var(--paper); border: 1px solid var(--rule);
  padding: 7px 30px 7px 11px; max-width: 220px;
  border-radius: 0; -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%),
                    linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  transition: border-color 0.14s var(--ease);
}
.vd__filter select:hover { border-color: var(--gold-mid); }
.vd__filter select:focus-visible { outline: 2px solid var(--charcoal); outline-offset: 1px; }

.vd__lab {
  font-size: 0.625rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.11em; color: var(--ink-faint);
  margin: clamp(18px, 2vw, 24px) 0 11px;
}
/* ---- needs attention ---------------------------------------------------
   The product puts this above the numbers, and it is right to: a dashboard
   that opens with a rent roll tells you how you are doing, one that opens
   with this tells you what to do. Two lines, each with its own figure
   right-aligned where the eye already goes for money. */

.vd-a {
  list-style: none; margin: 0 0 clamp(18px, 2.4vw, 26px); padding: 0;
  border: 1px solid var(--rule); background: var(--paper);
}
.vd-a li {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 15px;
  font-size: 0.8125rem;
}
.vd-a li + li { border-top: 1px solid var(--rule); }
.vd-a li > span { flex: 1; min-width: 0; }
.vd-a li i { font-style: normal; color: var(--ink-faint); }
.vd-a li b { font-weight: 600; white-space: nowrap; }
.vd-a .ico { width: 17px; height: 17px; flex: none; }
/* the delinquency line's icon carries the same red as its figure; the
   expiry line's carries the amber the site already uses for "soon" */
.vd-a li:first-child .ico { color: var(--neg); }
.vd-a li:nth-child(2) .ico { color: #8A6A16; }
.vd-a__go { color: var(--ink-muted); }

/* the head's right-hand cluster: the property filter, then the new button */
.vd__headr { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.vd__lab--row { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; justify-content: space-between; }
.vd__key { display: flex; gap: 14px; }
.vd__keyi { display: inline-flex; align-items: center; gap: 5px; }
.vd__keyi::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.vd__keyi--paid    { color: var(--pos); }
.vd__keyi--transit { color: var(--gold-ink); }
.vd__keyi--due     { color: var(--neg); }

/* ---- snapshot tiles ---------------------------------------------------- */
.vd__tiles {
  display: grid; gap: 1px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--rule);
  border: 1px solid var(--rule);
}
@container (min-width: 620px) { .vd__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vd-t { background: var(--paper); padding: 13px 15px; transition: background-color 0.14s var(--ease); }
.vd-t:hover { background: var(--cream); }
.vd-t__k {
  font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--ink-faint); margin: 0;
}
.vd-t__v {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.125rem, 2vw, 1.4375rem);
  letter-spacing: var(--track-tight); font-variant-numeric: tabular-nums;
  margin: 5px 0 0;
}

/* ---- the three months -------------------------------------------------- */
.vd__months { display: grid; gap: 12px; grid-template-columns: 1fr; }
@container (min-width: 620px) { .vd__months { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.vd-m {
  display: block; width: 100%; text-align: left;
  font: inherit; color: inherit; cursor: pointer;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 13px 15px 15px;
  transition: border-color 0.14s var(--ease), background-color 0.14s var(--ease);
}
.vd-m:hover { border-color: var(--gold-mid); background: var(--cream); }
.vd-m:focus-visible { outline: 2px solid var(--charcoal); outline-offset: 1px; }
/* The selected month is marked with the brand rule rather than a ring, which
   is how selection reads everywhere else on this site. */
.vd-m[aria-checked="true"] {
  border-color: var(--charcoal);
  box-shadow: inset 0 3px 0 0 var(--gold);
  background: var(--paper);
}
.vd-m__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vd-m__name {
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  letter-spacing: var(--track-tight);
}
.vd-m__state {
  font-size: 0.5625rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; padding: 3px 7px; border: 1px solid currentColor;
}
.vd-m__state--closed   { color: var(--ink-faint); }
.vd-m__state--current  { color: var(--gold-ink); }
.vd-m__state--upcoming { color: var(--ink-faint); }
.vd-m__lab {
  display: block; margin-top: 11px;
  font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--ink-faint);
}
.vd-m__total {
  display: block; margin-top: 3px;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.0625rem, 1.8vw, 1.3125rem);
  letter-spacing: var(--track-tight); font-variant-numeric: tabular-nums;
}
.vd-m__track {
  display: flex; height: 5px; margin-top: 10px;
  background: var(--rule); overflow: hidden;
}
.vd-m__fill { display: block; height: 100%; transition: width 0.3s var(--ease); }
.vd-m__fill--paid    { background: var(--pos); }
.vd-m__fill--transit { background: var(--gold); }
.vd-m__fill--due     { background: var(--neg); }
.vd-m__pct { display: block; margin-top: 7px; font-size: 0.6875rem; color: var(--ink-muted); }
.vd-m__figs {
  display: grid; gap: 7px 12px; margin-top: 12px;
  padding-top: 11px; border-top: 1px solid var(--rule);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vd-m__fig { display: block; min-width: 0; }
.vd-m__fig b {
  display: block; font-weight: 600; font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}
.vd-m__fig i {
  display: block; font-style: normal; font-size: 0.6875rem;
  color: var(--ink-faint); margin-top: 1px;
}
.vd-m__fig--pos b { color: var(--pos); }
.vd-m__fig--neg b { color: var(--neg); }

/* ---- work orders and expirations --------------------------------------- */
.vd__split { display: grid; gap: clamp(18px, 2.4vw, 30px); grid-template-columns: 1fr; }
@container (min-width: 720px) { .vd__split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.vd-w { list-style: none; margin: 0; padding: 0; border: 1px solid var(--rule); }
.vd-w li {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 15px;
}
.vd-w li + li { border-top: 1px solid var(--rule); }
.vd-w__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.vd-w__dot--neg { background: var(--neg); }
.vd-w__dot--mid { background: var(--gold); }
.vd-w__dot--pos { background: var(--pos); }
.vd-w li > span:nth-child(2) { flex: 1; min-width: 0; }
.vd-w b { display: block; font-size: 0.8125rem; font-weight: 600; }
.vd-w i {
  display: block; font-style: normal; font-size: 0.6875rem;
  color: var(--ink-faint); margin-top: 1px;
}
.vd-w__n {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.1875rem; font-variant-numeric: tabular-nums; flex: none;
}

/* The .sub / .strong pair is scoped to .ui elsewhere on the site, and the
   dashboard sits outside that wrapper — so it needs its own copy or a tenant
   name runs straight into its address. */
.vd .sub { display: block; color: var(--ink-muted); font-size: 0.75rem; line-height: 1.35; }
.vd .strong { font-weight: 600; }
.vd .strong:not(td) { display: block; }
.vd-p td .strong, .vd-l td .strong { text-wrap: balance; }

.vd-x { border: 1px solid var(--rule); }
.vd-x li { padding-inline: 15px; }
.vd-x__none { font-size: 0.8125rem; color: var(--ink-faint); padding: 14px 15px; }
.vd-x .when { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.vd-x__n { font-size: 0.6875rem; color: var(--ink-faint); }
.vd-x__d { font-size: 0.75rem; color: var(--gold-ink); font-weight: 600; white-space: nowrap; }
.vd-x__counts { display: grid; gap: 1px; grid-template-columns: repeat(2, 1fr); background: var(--rule); border: 1px solid var(--rule); border-top: 0; }
.vd-x__counts p { margin: 0; background: var(--paper); padding: 11px 15px; }
.vd-x__counts .k {
  display: block; font-size: 0.625rem; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--ink-faint);
}
.vd-x__counts .v {
  display: block; margin-top: 3px;
  font-family: var(--font-display); font-weight: 600; font-size: 1.1875rem;
  font-variant-numeric: tabular-nums;
}

/* ---- "show more" inside the dashboard ----------------------------------- */
/* The control the dashboard's focused first view opens from. It sits on the
   band, not inside the screen's chrome, so it reads as something the visitor
   does rather than a button the product is drawing. */
.vd__more-row {
  grid-column: 1 / -1;
  margin: var(--space-support) 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  border-top: 1px solid var(--rule);
  padding-top: var(--space-support);
}
.vd__more {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 9px 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.vd__more:hover { border-color: var(--gold-mid); background: var(--wash); }
.vd__more:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 2px; }
.vd__more .ico {
  width: 15px; height: 15px;
  transition: transform 0.24s var(--ease);
}
.vd__more[aria-expanded="true"] .ico { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .vd__more .ico { transition: none; }
}
[data-dash-more] { grid-column: 1 / -1; }
[data-dash-more][hidden] { display: none; }

/* ---- outstanding balances ---------------------------------------------- */
.vd-b { border: 1px solid var(--rule); }
.vd-b th, .vd-b td { padding-inline: 15px; }
.vd-b th.num, .vd-b td.num { padding-right: 15px; }
.vd__note {
  font-size: 0.8125rem; color: var(--ink-faint);
  margin: 11px 0 0; padding: 0;
}
.vd-b:has(tbody:empty) { display: none; }
/* Four columns squeezed onto a phone turns every tenant name into a three-line
   stack and clips the last heading. Below that width the table scrolls in its
   own right, which is what the rent roll already does. */
@container (max-width: 560px) {
  .vd-b { min-width: 470px; }
}

@media (prefers-reduced-motion: reduce) {
  .vd-m__fill { transition: none; }
}

/* --------------------------------------------------------------------------
   22c. The other three product screens — Payments, Properties, Leases
   --------------------------------------------------------------------------

   Same chrome as the dashboard above, same translation: the product's white
   cards and stoplight palette become cream, charcoal and hairline rules, with
   the status colours kept because they carry meaning.

   The controls are real. A filter here recomputes what is on screen rather
   than decorating it, which is the only way a static page can honestly show
   software that does the same.
   -------------------------------------------------------------------------- */

.vd__crumb {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin: 0 0 12px; font-size: 0.6875rem; color: var(--ink-faint);
}
.vd__crumb span + span::before { content: "\203A"; margin-right: 7px; }
.vd__crumb span:last-child { color: var(--ink-muted); }

.vd__head--screen { align-items: flex-start; }
.vd__title--lg {
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  line-height: 1.1;
}
.vd__act { margin: 0; flex: none; }

/* Buttons inside a product screen are pictures of buttons, not controls:
   they are spans, they take no focus and they do nothing. Anything a visitor
   can actually operate on this site is a real button or select. */
.vd__btn {
  display: inline-block;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0;
  padding: 8px 14px; border: 1px solid var(--rule);
  background: var(--paper); color: var(--ink-muted);
  white-space: nowrap;
}
.vd__btn--primary { background: var(--gold); border-color: var(--gold-mid); color: var(--charcoal); }
.vd__btn--sm { padding: 5px 11px; font-size: 0.6875rem; }

.vd__controls {
  display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center;
  margin: clamp(16px, 2vw, 22px) 0 14px;
}
.vd__controls--split { justify-content: space-between; }
.vd__static {
  display: inline-block; font-size: 0.8125rem; color: var(--ink-muted);
  border: 1px solid var(--rule); background: var(--paper); padding: 7px 11px;
}
.vd__empty {
  border: 1px solid var(--rule); background: var(--paper);
  padding: clamp(20px, 3vw, 32px); margin: 0;
  font-size: 0.875rem; color: var(--ink-muted); max-width: 52ch;
}
.vd__tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container (min-width: 720px) { .vd__tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- payments ledger --------------------------------------------------- */
.vd-p { border: 1px solid var(--rule); }
.vd-p th, .vd-p td { padding-inline: 14px; }
.vd-p th.num, .vd-p td.num { padding-right: 14px; }
.vd-p__date { color: var(--ink-muted); font-size: 0.8125rem; }
.vd-p__amt { font-weight: 600; }
.vd-p__when { display: block; font-size: 0.8125rem; color: var(--ink-muted); white-space: nowrap; }
.vd-p .tag { margin-bottom: 4px; }
.vd-p td .sub { white-space: nowrap; }
.vd-l__term .sub { white-space: nowrap; }
.vd-p__acct { color: var(--ink-faint); letter-spacing: 0.1em; }
@container (max-width: 760px) { .vd-p { min-width: 730px; } }

/* ---- property list ----------------------------------------------------- */
.vd-r { list-style: none; margin: 0; padding: 0; border: 1px solid var(--rule); }
.vd-r li {
  display: grid; gap: 10px 20px; padding: 15px;
  grid-template-columns: 1fr;
  transition: background-color 0.14s var(--ease);
}
.vd-r li:hover { background: var(--cream); }
.vd-r li + li { border-top: 1px solid var(--rule); }
@container (min-width: 720px) {
  .vd-r li { grid-template-columns: 112px minmax(140px, 1.3fr) repeat(4, minmax(0, 1fr)); align-items: center; }
}
/* An elevation drawing rather than a photograph, in the same hand as the rest
   of the site's artwork. It is a plain <img>, so a real photograph drops in
   without touching anything else. */
.vd-r__pic { display: block; border: 1px solid var(--rule); background: var(--cream); }
.vd-r__pic img { display: block; width: 100%; height: auto; }
@container (max-width: 719px) { .vd-r__pic { max-width: 140px; } }
.vd-r__id .strong { font-size: 0.9375rem; }
.vd-r__f { display: block; min-width: 0; }
.vd-r__f i {
  display: block; font-style: normal;
  font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--ink-faint); margin-bottom: 3px;
}
.vd-r__f b {
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  letter-spacing: var(--track-tight); font-variant-numeric: tabular-nums;
}
.vd-r__f--occ { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; }
.vd-r__f--occ i { flex-basis: 100%; margin-bottom: 0; }
.vd-r__bar { display: block; flex: 1; min-width: 56px; height: 5px; background: var(--rule); }
.vd-r__bar span { display: block; height: 100%; background: var(--pos); }

/* ---- lease pipeline ---------------------------------------------------- */
.vd-l__tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.vd-l__tab {
  font: inherit; font-size: 0.8125rem; color: var(--ink-muted); cursor: pointer;
  background: var(--paper); border: 1px solid var(--rule);
  padding: 7px 13px;
  transition: border-color 0.14s var(--ease), color 0.14s var(--ease);
}
.vd-l__tab span {
  display: inline-block; margin-left: 7px;
  font-variant-numeric: tabular-nums; color: var(--ink-faint);
}
.vd-l__tab:hover { border-color: var(--gold-mid); color: var(--charcoal); }
.vd-l__tab:focus-visible { outline: 2px solid var(--charcoal); outline-offset: 1px; }
.vd-l__tab[aria-selected="true"] {
  border-color: var(--charcoal); color: var(--charcoal); font-weight: 600;
  box-shadow: inset 0 2px 0 0 var(--gold);
}
.vd-l__tab[aria-selected="true"] span { color: var(--ink-muted); }

.vd-l { border: 1px solid var(--rule); }
.vd-l th, .vd-l td { padding-inline: 14px; }
.vd-l th.num, .vd-l td.num { padding-right: 14px; }
.vd-l__head th {
  background: var(--cream); color: var(--ink-muted);
  font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.1em;
  padding-block: 8px;
}
.vd-l__head th span {
  display: inline-block; margin-left: 8px;
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.vd-l tbody tr.vd-l__head:hover { background: var(--cream); }
@container (max-width: 800px) { .vd-l { min-width: 770px; } }

/* --------------------------------------------------------------------------
   22c2. A recorded screen
   --------------------------------------------------------------------------

   A video of the product, framed exactly like the drawn mockups around it so
   the page does not change key when it arrives. It autoplays muted and loops,
   which browsers allow and which reads as a screenshot that moves; the
   controls are there for anyone who wants to stop or scrub it.

   Anyone who has asked their system for less motion gets the poster frame and
   the controls instead — the recording is still there to play, it just does
   not start on its own.
   -------------------------------------------------------------------------- */

.mock--video { margin-left: 0; margin-right: 0; }
.vid {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--rule);
  background: var(--charcoal);
}
.band--dark .vid { border-color: var(--rule-dark); }
.mock--video .mock-cap { margin-top: 12px; }

@media (prefers-reduced-motion: reduce) {
  .vid { /* the markup still carries autoplay; this is the visual contract */ }
}

/* --------------------------------------------------------------------------
   22d. Legal documents
   --------------------------------------------------------------------------

   A contract is read differently from marketing copy: people scan for a
   section number, then read one clause closely. So the measure is narrower
   than the rest of the site, the section numbers hang in the margin where
   they can be found, and capitalised passages keep their capitals — in a
   contract that styling carries legal weight and must not be prettified away.
   -------------------------------------------------------------------------- */

.page-head--legal { padding-bottom: clamp(28px, 3vw, 40px); }

.lg__ver {
  font-family: var(--font-body); font-size: 0.8125rem; letter-spacing: 0;
  color: var(--ink-muted); margin: 14px 0 0;
  font-variant-numeric: tabular-nums;
}

/* the other three documents, always one click away */
.lg__switch {
  display: flex; flex-wrap: wrap; gap: 8px 10px;
  margin-top: clamp(20px, 2.4vw, 28px);
  font-family: var(--font-body); font-size: 0.8125rem; letter-spacing: 0;
}
.lg__switch a, .lg__switch span {
  display: inline-block; padding: 7px 13px;
  border: 1px solid var(--rule); background: var(--paper);
  color: var(--ink-muted); text-decoration: none;
  transition: border-color 0.14s var(--ease), color 0.14s var(--ease);
}
.lg__switch a:hover { border-color: var(--gold-mid); color: var(--charcoal); }
.lg__switch a:focus-visible { outline: 2px solid var(--charcoal); outline-offset: 1px; }
.lg__switch [aria-current] {
  border-color: var(--charcoal); color: var(--charcoal); font-weight: 600;
  box-shadow: inset 0 2px 0 0 var(--gold);
}

.lg {
  font-family: var(--font-body);
  letter-spacing: 0;
  max-width: 68ch;
  font-size: 0.9375rem;
  line-height: 1.65;
}
.lg p { margin: 0 0 1.1em; }
.lg a { color: inherit; }

.lg__h {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.0625rem; letter-spacing: var(--track-tight);
  line-height: 1.25;
  margin: clamp(30px, 3.4vw, 44px) 0 0.7em;
  padding-top: 18px; border-top: 1px solid var(--rule);
}
.lg > .lg__h:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.lg__h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.9375rem; letter-spacing: var(--track-tight);
  margin: 1.8em 0 0.6em;
}

.lg__ol, .lg__ul { margin: 0 0 1.1em; padding-left: 1.6em; }
.lg__ol > li, .lg__ul > li { margin-bottom: 0.5em; }
.lg__ol { list-style: decimal; }
.lg__ul { list-style: disc; }
.lg__ol ol { list-style: lower-alpha; margin: 0.5em 0 0; padding-left: 1.5em; }

/* Clause hierarchy.
   -------------------------------------------------------------------------
   A contract is written in levels — 4.2, then (a), then (i) — and a reader
   who cannot see those levels has to hold the structure in their head. The
   markers are already in the text as supplied; these rules only let them do
   their job. The marker stays inside the paragraph (it is part of the
   sentence, and copying the text has to copy it too), hanging in the margin
   so the prose beneath it lines up.

   Nothing here changes a word. Every one of these is a plain <p> whose text
   begins with the marker the document was written with. */

.lg__n {                          /* 4.2 — a numbered clause */
  padding-left: 3.1em;
  text-indent: -3.1em;
}
.lg__c1 {                         /* (a) — a lettered sub-clause */
  padding-left: 4.3em;
  text-indent: -1.9em;
  margin-bottom: 0.85em;
}
.lg__c2 {                         /* (i) — a roman sub-sub-clause */
  padding-left: 5.9em;
  text-indent: -2.2em;
  margin-bottom: 0.85em;
}
/* On a narrow screen the indent costs more than it explains: keep the step
   between levels, drop the rest of it. */
@media (max-width: 599px) {
  .lg__n  { padding-left: 2.6em; text-indent: -2.6em; }
  .lg__c1 { padding-left: 2.6em; text-indent: -1.6em; }
  .lg__c2 { padding-left: 3.6em; text-indent: -1.8em; }
}

/* Contents.
   -------------------------------------------------------------------------
   The longest of these documents runs to nine thousand words. People arrive
   at a contract looking for one section — indemnity, termination, what
   happens to their data — so the way in is a list of the sections, not the
   first paragraph. It is navigation rather than part of the agreement, which
   is why it sits in its own <nav> and is excluded from the text comparison
   that proves the rest matches the source. */

.lg__toc {
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: clamp(16px, 2.2vw, 22px) clamp(18px, 2.4vw, 26px);
  margin: 0 0 clamp(28px, 3.2vw, 40px);
}
.lg__toc-h {
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 0.75em;
}
.lg__toc ol {
  margin: 0; padding: 0; list-style: none;
  columns: 2; column-gap: 32px;
  font-size: 0.875rem; line-height: 1.5;
}
.lg__toc li { margin: 0 0 0.45em; break-inside: avoid; }
.lg__toc a {
  color: var(--ink-muted); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.14s var(--ease), border-color 0.14s var(--ease);
}
.lg__toc a:hover { color: var(--charcoal); border-bottom-color: var(--gold-mid); }
.lg__toc a:focus-visible { outline: 2px solid var(--charcoal); outline-offset: 2px; }
@media (max-width: 599px) { .lg__toc ol { columns: 1; } }

/* A heading reached from the contents must not land under the masthead. */
.lg__h[id] { scroll-margin-top: 90px; }

/* Capitals in a contract are doing work — a disclaimer or a limitation of
   liability is capitalised so it cannot be missed. Kept as written, with the
   tracking a long run of capitals needs to stay readable. */
.lg__caps {
  letter-spacing: 0.01em;
  background: var(--wash);
  border-left: 2px solid var(--gold);
  padding: 14px 16px;
  margin-bottom: 1.3em;
}

/* …and a capitalised passage that is also a sub-clause is both: it keeps the
   box, and the marker still hangs. The padding is the box's, plus the hang. */
.lg__caps.lg__n  { padding-left: calc(16px + 3.1em); text-indent: -3.1em; }
.lg__caps.lg__c1 { padding-left: calc(16px + 1.9em); text-indent: -1.9em; }
.lg__caps.lg__c2 { padding-left: calc(16px + 2.2em); text-indent: -2.2em; }
@media (max-width: 599px) {
  .lg__caps.lg__n  { padding-left: calc(16px + 2.6em); text-indent: -2.6em; }
  .lg__caps.lg__c1 { padding-left: calc(16px + 1.6em); text-indent: -1.6em; }
  .lg__caps.lg__c2 { padding-left: calc(16px + 1.8em); text-indent: -1.8em; }
}

.lg__def { margin-bottom: 0.8em; }
.lg__def b { font-weight: 600; }

.lg__contact {
  margin-top: clamp(36px, 4vw, 56px);
  padding-top: 22px; border-top: 1px solid var(--rule);
}
/* the contact block draws its own rule, so its heading must not draw a second */
.lg__contact .lg__h { margin-top: 0; padding-top: 0; border-top: 0; }
.lg__addr { font-style: normal; }
.lg__addr b, .lg__addr a { display: block; }
.lg__addr b { font-weight: 600; margin-bottom: 2px; }

/* The state a document is in before its text has been pasted in. Deliberately
   plain and factual: it points at the copy that actually governs rather than
   pretending this page does. */
.lg__await {
  border: 1px solid var(--rule); background: var(--paper);
  padding: clamp(16px, 2.2vw, 22px);
  margin: 0 0 1.1em;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   22e. Requests — the board, and the request you are reading
   --------------------------------------------------------------------------

   Rebuilt against the product. The lesson from seeing the real screen was
   subtraction: the card carries an id, a title, who and where, two tags and a
   date, and nothing else. The description came off — it is what turns a board
   you can scan into a wall of prose, and you read it the moment you open the
   request anyway.

   The columns have no boxes around them. Cards float on the page's own
   background with a single hairline each, which is what makes a board read as
   a board rather than a table with gaps.

   Colour carries one meaning: the card you are reading.
   -------------------------------------------------------------------------- */

.rq { container-type: inline-size; }
.rq__wrap { display: grid; }
@container (min-width: 900px) {
  .rq__wrap { grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; }
}
@container (max-width: 899px) {
  .rq__wrap { gap: 20px; }
}

/* ---- the board ---- */
.rq__board { display: grid; gap: 20px; align-items: start; }
@container (min-width: 680px) {
  .rq__board { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.rq__col { min-width: 0; }

.rq__colh {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 12px;
}
.rq__colh .n {
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.9375rem; letter-spacing: var(--track-tight);
  color: var(--charcoal);
}
/* the count sits at the far end of the column, as it does in the product */
.rq__colh .c {
  margin-left: auto;
  font-size: 0.6875rem; font-weight: 600;
  color: var(--ink-muted);
  background: var(--wash);
  padding: 2px 8px;
}

.rq__stack { display: grid; gap: 10px; }

/* ---- a card ---- */
.rq__card {
  display: block; width: 100%; text-align: left;
  font: inherit; color: inherit;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 13px 14px 12px;
  cursor: pointer;
  transition: border-color 0.14s var(--ease), background-color 0.14s var(--ease);
}
.rq__card:hover { border-color: var(--charcoal); }
.rq__card:focus-visible { outline: 2px solid var(--charcoal); outline-offset: 1px; }
.rq__card[aria-pressed="true"] {
  border-color: var(--gold-mid);
  background: rgba(247, 225, 139, 0.2);   /* --gold at a fifth */
  box-shadow: inset 3px 0 0 0 var(--gold-mid);
}

.rq__id {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.03em;
  color: var(--ink-faint);
}
.rq__id .ico { width: 13px; height: 13px; }
/* the drag handle: six dots, the product's own affordance for a card you can
   move between columns. Decoration here — nothing on this page drags. */
.rq__grip {
  width: 7px; height: 12px; flex: none;
  background-image: radial-gradient(currentColor 41%, transparent 43%);
  background-size: 3.5px 4px;
  opacity: 0.45;
}
.rq__t {
  display: block;
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.9375rem; letter-spacing: var(--track-tight); line-height: 1.3;
  color: var(--charcoal);
  margin-top: 7px;
}
.rq__who { display: block; margin-top: 7px; color: var(--ink-muted); font-size: 0.8125rem; }
.rq__at  { display: block; color: var(--ink-faint); font-size: 0.8125rem; }
.rq__foot {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin-top: 12px;
  font-size: 0.6875rem; color: var(--ink-faint);
}
.rq__foot .d {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap;
}
.rq__foot .ico { width: 13px; height: 13px; }
.rq__more { margin-top: 12px; color: var(--ink-faint); font-size: 0.8125rem; }

/* ---- the request you are reading ----
   In the product this is a drawer that slides over the board. On a page that
   has to hold still it sits beside it, with the same content in the same
   order. */
.rq__rail {
  border: 1px solid var(--rule);
  background: var(--paper);
  align-self: start;
}
.rq__rail > * { padding: 16px; }
.rq__rail > * + * { border-top: 1px solid var(--rule); }

.rq__head { display: flex; align-items: flex-start; gap: 12px; }
.rq__h {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1rem; letter-spacing: var(--track-tight); line-height: 1.25;
  color: var(--charcoal);
}
.rq__sub { margin-top: 3px; font-size: 0.75rem; color: var(--ink-faint); letter-spacing: 0.03em; }
.rq__x { margin-left: auto; flex: none; font-size: 1.125rem; color: var(--ink-faint); line-height: 1; }

/* the product's three selects, drawn rather than built: they report what the
   request is, and there is nothing here to operate */
.rq__sel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rq__sel > span { display: block; min-width: 0; }
.rq__sel i {
  display: block; font-style: normal;
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 5px;
}
.rq__sel b {
  display: block; font-weight: 400; font-size: 0.75rem;
  border: 1px solid var(--rule); background: var(--cream);
  padding: 6px 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rq__pri { display: flex; align-items: center; gap: 6px; }
.rq__pri::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none;
}
.rq__pri--neg  { color: var(--neg); }
.rq__pri--warn { color: #8A6A16; }
.rq__pri--idle { color: var(--ink-muted); }

.rq__fields {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 12px; margin: 18px 0 0;
}
.rq__fields dt {
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-faint);
}
.rq__fields dd { margin: 4px 0 0; font-size: 0.8125rem; color: var(--charcoal); }

.rq__k {
  margin-top: 18px;
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-faint);
}
.rq__desc { margin-top: 6px; font-size: 0.8125rem; }
.rq__note { margin-top: 8px; font-size: 0.8125rem; color: var(--ink-muted); }
.rq__none { margin-top: 8px; font-size: 0.8125rem; color: var(--ink-muted); }
.rq__poc { margin-top: 6px; font-size: 0.8125rem; }
.rq__poc i { display: block; font-style: normal; color: var(--ink-muted); }

/* Attachments. Drawn, not photographed: a tenant's photo of their own ceiling
   is their photo, and a stock one would be a lie about what this screen
   shows. This is what the product renders before an image loads. */
.rq__pics { display: flex; gap: 8px; margin-top: 8px; }
.rq__pic {
  flex: 1 1 0; min-width: 0;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--rule);
  background:
    repeating-linear-gradient(135deg,
      rgba(38, 38, 36, 0.045) 0 6px,
      transparent 6px 12px),
    var(--cream);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-faint);
}
.rq__pic .ico { width: 18px; height: 18px; }

/* ---- the conversation ---- */
.rq__thread { list-style: none; margin: 10px 0 0; padding: 0; }
.rq__msg + .rq__msg { margin-top: 12px; }
.rq__msg-h {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 0.6875rem;
}
.rq__msg-h .n { font-weight: 600; color: var(--charcoal); }
.rq__msg-h .w { margin-left: auto; color: var(--ink-faint); white-space: nowrap; }
.rq__bub {
  display: block;
  margin-top: 5px;
  padding: 9px 11px;
  font-size: 0.8125rem;
  background: var(--wash);
  border-left: 2px solid var(--rule);
}
.rq__msg--us .rq__bub { border-left-color: var(--gold); }

/* The reply box is a picture of a reply box. It takes no input and posts
   nowhere, so it is not built out of form controls that would invite
   someone to type into a mockup. */
.rq__reply { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.rq__reply .box {
  flex: 1 1 auto;
  border: 1px solid var(--rule); background: var(--cream);
  padding: 9px 11px; font-size: 0.8125rem;
  color: var(--ink-faint);
}
.rq__reply .go {
  flex: none; width: 34px; height: 34px;
  display: grid; place-items: center;
  background: var(--gold); border: 1px solid var(--gold-mid);
  color: var(--charcoal);
}
.rq__reply .go .ico { width: 15px; height: 15px; }

/* ---- where it turns into money ---- */
.rq__bill { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; }
.rq__bill .v {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.0625rem; letter-spacing: var(--track-tight);
  color: var(--charcoal);
}
.rq__bill .s { color: var(--ink-muted); font-size: 0.8125rem; }

/* --------------------------------------------------------------------------
   22f. Thank you — where the demo form lands
   --------------------------------------------------------------------------

   The page someone sees straight after giving you their details. It has one
   job before anything else: say plainly that it worked. Everything below the
   confirmation is there for the minute they might spend before closing the
   tab, not to sell to them again.
   -------------------------------------------------------------------------- */

.thanks__top { padding-block: clamp(56px, 7vw, 96px); }

.thanks__head { display: grid; gap: 20px; margin-top: clamp(20px, 2.4vw, 28px); }
@media (min-width: 760px) {
  .thanks__head { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 28px; }
}

/* The one piece of ornament on the site, and it earns its place: a person who
   has just filled in a form is looking for confirmation before they read a
   word. */
.thanks__tick {
  width: 56px; height: 56px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--gold-mid);
  background: rgba(247, 225, 139, 0.16);
  color: var(--gold);
  margin: 4px 0 0;
}
.thanks__tick .ico { width: 30px; height: 30px; stroke-width: 1.75; }

/* numbered steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.steps > li {
  border-top: 1px solid var(--rule);
  padding: 28px 32px 8px 0;
}
@media (min-width: 880px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps > li + li { padding-left: 32px; border-left: 1px solid var(--rule); }
}
.steps__n {
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.8125rem; letter-spacing: 0.08em;
  color: var(--gold-ink);
  margin: 0 0 14px;
}
.steps__h {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.0625rem; letter-spacing: var(--track-tight); line-height: 1.25;
  margin: 0;
}
.steps__p { margin: 8px 0 0; color: var(--ink-muted); }

.thanks__grid { display: grid; gap: clamp(28px, 3.4vw, 44px); }
@media (min-width: 880px) {
  .thanks__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
}

/* --------------------------------------------------------------------------
   22g. If the browser has no container queries
   --------------------------------------------------------------------------

   The product screens size themselves against their own width rather than the
   window's, which is right: the same block appears in a hero, in a tab panel
   and in a narrower column, and it should behave the same in all three. That
   needs container queries, which landed in Safari 16 and Chrome 106.

   An older browser ignores every @container rule, so those screens fall back
   to one column each — readable, but much taller than it should be, and it
   looks like something is broken rather than something is old. These rules
   put the columns back using the window width instead. They are only ever
   read by a browser that cannot do the better thing.
   -------------------------------------------------------------------------- */

@supports not (container-type: inline-size) {
  @media (min-width: 900px) {
    .vd__tiles     { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .vd__tiles--4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .vd__months    { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .vd__split     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rq__board     { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .vd-r li {
      grid-template-columns: 112px minmax(140px, 1.3fr) repeat(4, minmax(0, 1fr));
      align-items: center;
    }
  }
  @media (min-width: 1200px) {
    .rq__wrap { grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; }
  }
}

/* --------------------------------------------------------------------------
   23. 404
   -------------------------------------------------------------------------- */

.notfound {
  min-height: calc(100vh - 74px);
  display: flex;
  align-items: center;
  padding-block: clamp(72px, 12vh, 140px);
}
.notfound__code {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  font-size: clamp(4.5rem, 16vw, 11rem);
  line-height: 0.86;
  color: var(--gold);
}

/* --------------------------------------------------------------------------
   24. Utilities
   -------------------------------------------------------------------------- */

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.mt-0  { margin-top: 0; }
.mt-2  { margin-top: 18px; }
.mt-3  { margin-top: 28px; }
.mt-4  { margin-top: 40px; }
.mt-5  { margin-top: clamp(40px, 5vw, 64px); }

.nowrap { white-space: nowrap; }

@media print {
  .masthead, .nav-panel, .btn { display: none; }
  .band, body { background: #fff; color: #000; }
}

/* The demonstration's own caption, under the control rather than under the
   whole band — it belongs to the thing the visitor is operating, and it fills
   the column that would otherwise run out below three options. */
.bp__note {
  grid-column: 1;
  margin: 18px 0 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ink-faint);
  max-width: 44ch;
}

/* The demonstration's two controls are a real link and a real button now, so
   they need the resets a span did not. Same look as before — the difference
   is that they can be pressed, tabbed to and seen by a screen reader. */
a.bp__btn, button.bp__lnk {
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}
a.bp__btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
a.bp__btn:hover { background: var(--gold-mid); }
button.bp__lnk {
  background: none;
  border: 0;
  padding: 0;
  color: var(--ink-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s var(--ease);
}
button.bp__lnk:hover { color: var(--ink); }
a.bp__btn:focus-visible, button.bp__lnk:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 3px;
}

/* Customer names link to the customer's own site. The mark and the name are
   one target — a 34px logo on its own is a hard thing to hit on a phone. */
.proof-strip__a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  padding: 6px 8px;
  margin: -6px -8px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.proof-strip__a:hover { border-bottom-color: var(--gold-mid); }
.proof-strip__a:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 0;
  border-bottom-color: transparent;
}

/* --------------------------------------------------------------------------
   15h. The payment demonstration, as a before and an after

   Two columns that hold still: the route on the left, what happens to it on
   the right. The alignment is the argument — three different inputs, the same
   outcome — so the two halves start on the same line and the outcome column
   keeps its height rather than growing and shrinking as steps appear.
   -------------------------------------------------------------------------- */

.pay-split { display: grid; gap: clamp(20px, 2.6vw, 34px); align-items: start; }
@media (min-width: 720px) {
  .pay-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  /* A reserved height stops the card jumping as the journey fills in. Five is
     the longest route (the check), and the steps are a known size. */
  .pay-split__out { min-height: 19rem; }
}
.pay-split__in, .pay-split__out { min-width: 0; }

/* The divider reads as a relationship between the halves rather than a border
   around each. Vertical where they sit side by side, horizontal where they
   stack, and absent on the narrowest screens where it is just a line. */
@media (min-width: 720px) {
  .pay-split__out {
    border-left: 1px solid var(--rule);
    padding-left: clamp(20px, 2.6vw, 34px);
  }
}
@media (max-width: 719px) {
  .pay-split__out { border-top: 1px solid var(--rule); padding-top: 20px; }
}

.pay-idle__p {
  margin: 10px 0 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink-faint);
  max-width: 38ch;
}

/* A facet whose body is more than one paragraph — the access-roles one keeps
   its two rows of role chips under the text. */
.facet__body { padding-bottom: var(--space-tight); }
.facet__body > :last-child { margin-bottom: 0; }
.facet__body .facet__p { padding-bottom: 0; }