/* FONT TOKENS CORRECTED 20 Aug 2026: this sheet asked for `--font-sans` and
   `--font-serif`, neither of which exists on this site. The real tokens are
   `--font-text` (Manrope) and `--font-display` (Gloock). `--font-serif` fell
   back to a literal "Gloock" so headings survived by luck, but `--font-sans`
   fell back to **Arial** and rendered ~163 elements of body copy in Arial.
   That is the "fonts are not clear enough" report. */
/* ======================================================================
   /landlords/ — deep pass, 18 August 2026.

   Route-scoped to `.page--landlords` and loaded only by that page, so the
   whole layer is invisible to every other Dukes surface. dukes.css is not
   touched: another session owns that file, the older `.ll9-*` rules in it
   simply no longer match this markup, and nothing here reaches outside
   `.page--landlords`.

   Contents
     0  tokens and shell
     1  rail
     2  primitives — plate, lockup, chip, ledger, slot, seal, meta
     3  bands 01-09
     4  the Dukes assistant band, this page
     5  responsive
     6  hover, focus, reduced motion, print
   ====================================================================== */

/* ------------------------------- 0 · tokens ---------------------------- */

.page--landlords {
  /* THE FONT TOKENS. `--font-display` is defined at :root as a PALATINO stack
     (dukes.css line ~2792); only two page-scoped blocks redefine it to Gloock.
     So `var(--font-display)` does NOT give you the brand serif unless the page
     asks for it - which is why the good pages all declare it themselves.
     Redefining here keeps every existing `var(--font-display, ...)` consumer
     wired and puts the brand faces back on this page. */
  --font-display: "Gloock", Georgia, "Times New Roman", serif;
  --font-text: "Manrope", ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* One shell width for the page, and one rail lane the shell never
     enters, so the fixed rail cannot overlap content at any scroll depth. */
  --llx-shell: 76rem;
  --llx-gut: clamp(1.15rem, 4vw, 3rem);
  --llx-rail-lane: 12.5rem;

  /* Fields. The four already on this page — paper, powder, sand, ink —
     plus forest, which is in the family's token set but had never been
     used here. Two pairings are new to the route: an ink field carrying
     ivory plates (Guaranteed Rent), and a sand field carrying a forest
     plate (Why Dukes). Neither repeats the field-plus-white formula. */
  --llx-ink: #0d1d31;    /* guide night · JOB: the decisive dark bands        */
  --llx-paper: #f2ede4;  /* guide paper · JOB: warm page fields               */
  --llx-powder: #dbe8ec; /* guide blue · JOB: the cool contrast fields        */
  --llx-sand: #eee3d4;   /* selling-process stone · JOB: the warm third field */
  --llx-forest: #17483c; /* selling-process forest · JOB: the one green plate */
  --llx-wine: #7b2430;   /* guide oxblood · JOB: actions and kickers ONLY     */

  /* THE white. One token, used for every light plate, every chip face and
     every piece of text that sits on a dark field. There is no second
     white anywhere in this sheet. */
  --llx-white: #fbf8f2;  /* guide cream · the site's ONE premium white */

  --llx-text: #171a20;      /* guide ink */
  --llx-text-soft: #4f555b; /* guide ink-soft */
  --llx-on-dark: var(--llx-white);
  --llx-on-dark-soft: rgba(251, 248, 242, 0.84); /* the cream, softened — never a second white */

  --llx-line: rgba(23, 26, 32, 0.14);
  --llx-line-strong: rgba(23, 26, 32, 0.26);
  --llx-line-on-dark: rgba(251, 248, 242, 0.2);

  --llx-radius: 14px;
  --llx-radius-sm: 10px;
  --llx-tap: 48px;

  /* The photography carries these bands, so it is given real height. Still
     capped, so a single image can never run the band on its own. */
  --llx-media-cap: 60vh;
}

.page--landlords .llx {
  position: relative;
  background: var(--llx-paper);
  color: var(--llx-text);
}

.page--landlords .llx *,
.page--landlords .llx *::before,
.page--landlords .llx *::after {
  box-sizing: border-box;
}

.page--landlords .llx-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.page--landlords .llx h1,
.page--landlords .llx h2,
.page--landlords .llx h3 {
  margin: 0;
  color: inherit;
  font-family: var(--font-display, "Gloock", Georgia, serif);
  font-weight: 400;
  letter-spacing: -0.028em;
}

.page--landlords .llx p,
.page--landlords .llx li,
.page--landlords .llx dt,
.page--landlords .llx dd,
.page--landlords .llx label,
.page--landlords .llx button,
.page--landlords .llx a,
.page--landlords .llx small,
.page--landlords .llx strong,
.page--landlords .llx b {
  font-family: var(--font-text, "Manrope", system-ui, sans-serif);
}

.page--landlords .llx p {
  margin: 0;
}

.page--landlords .llx img {
  display: block;
  max-width: 100%;
}

/* Display scale, one step down from the previous build. The old page ran a
   5.6rem ceiling at an 11ch measure, which is what pushed everything else
   around; 3.35rem at a 17ch measure reads denser and calmer at the same
   hierarchy. */
.page--landlords .llx-display {
  max-width: 17ch;
  font-size: clamp(2rem, 3.1vw, 3.35rem);
  line-height: 1.03;
}

.page--landlords .llx-hero .llx-display {
  max-width: 15ch;
  font-size: clamp(2.25rem, 3.6vw, 3.7rem);
}

.page--landlords .llx-lede {
  max-width: 52ch;
  color: var(--llx-text-soft);
  font-size: clamp(0.98rem, 1.05vw, 1.08rem);
  line-height: 1.6;
}

.page--landlords .llx-lede--tight {
  max-width: 46ch;
}

.page--landlords .llx-kicker {
  color: var(--llx-wine);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* The shell. Every band is a full-bleed field; the content inside every
   band is this one width, so no section is laid out to a different grid. */
.page--landlords .llx-shell {
  width: 100%;
  max-width: var(--llx-shell);
  margin-inline: auto;
}

.page--landlords .llx-band {
  padding-block: clamp(2.75rem, 5vw, 5rem);
  padding-inline: var(--llx-gut);
}

.page--landlords .llx-band--ink {
  background: var(--llx-ink);
  color: var(--llx-on-dark);
}
.page--landlords .llx-band--paper { background: var(--llx-paper); }
.page--landlords .llx-band--powder { background: var(--llx-powder); }
.page--landlords .llx-band--ivory { background: var(--llx-white); }
.page--landlords .llx-band--sand { background: var(--llx-sand); }

.page--landlords .llx-band--ink .llx-kicker {
  color: #e3c98f;
}

/* A light plate on a dark field resets the whole text scale back to the
   page's ink. Only the field is dark, not what sits on it. */
.page--landlords .llx-band--ink .llx-plate:not(.llx-plate--forest) {
  color: var(--llx-text);
}

.page--landlords .llx-band--ink .llx-plate:not(.llx-plate--forest) .llx-kicker {
  color: var(--llx-wine);
}

.page--landlords .llx-band--ink .llx-plate:not(.llx-plate--forest) .llx-lede,
.page--landlords .llx-band--ink .llx-plate:not(.llx-plate--forest) .llx-lockup__note {
  color: var(--llx-text-soft);
}

/* --------------------------------- 1 · rail ---------------------------- */

.page--landlords .llx-rail {
  display: none;
}

@media (min-width: 78em) {
  /* The rail owns its own lane. The page is inset by exactly that lane, so
     the fixed panel floats over paper, never over content, at any scroll
     depth and at any band height. */
  .page--landlords .llx-band,
  .page--landlords .reception {
    padding-left: calc(var(--llx-gut) + var(--llx-rail-lane));
  }

  .page--landlords .llx-rail {
    position: fixed;
    z-index: 30;
    top: 50%;
    left: 0.9rem;
    display: grid;
    width: 10.5rem;
    padding: 0.4rem;
    transform: translateY(-50%);
    border: 1px solid var(--llx-line);
    border-radius: var(--llx-radius);
    background: rgba(251, 248, 242, 0.95);
    box-shadow: 0 1rem 2.4rem rgba(23, 26, 32, 0.12);
    backdrop-filter: blur(12px);
  }
}

/* 48px hit area, 40px visible row. */
.page--landlords .llx-rail__link {
  display: flex;
  align-items: center;
  min-height: var(--llx-tap);
  padding-inline: 0.1rem;
  border-radius: var(--llx-radius-sm);
  text-decoration: none;
}

.page--landlords .llx-rail__row {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 0.35rem;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: 0 0.4rem;
  border-radius: 8px;
  color: var(--llx-text-soft);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.15;
}

.page--landlords .llx-rail__row b {
  color: var(--llx-wine);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.page--landlords .llx-rail__link[aria-current="true"] .llx-rail__row {
  background: var(--llx-powder);
  color: var(--llx-text);
}

/* ----------------------------- 2 · primitives -------------------------- */

/* Plate. One geometry, one measured separation from whatever field it is
   on: a border plus a shadow, never colour alone. */
.page--landlords .llx-plate {
  border: 1px solid var(--llx-line);
  border-radius: var(--llx-radius);
  background: var(--llx-white);
  box-shadow: 0 0.5rem 1.6rem rgba(23, 26, 32, 0.07);
}

.page--landlords .llx-band--ink .llx-plate {
  border-color: rgba(251, 248, 242, 0.16);
  box-shadow: 0 0.75rem 2rem rgba(4, 16, 24, 0.35);
}

.page--landlords .llx-plate--forest {
  background: var(--llx-forest);
  border-color: rgba(251, 248, 242, 0.18);
  color: var(--llx-on-dark);
}

.page--landlords .llx-plate--forest .llx-kicker {
  color: #e3c98f;
}

.page--landlords .llx-plate--forest .llx-lede {
  color: var(--llx-on-dark-soft);
}

/* Lockup. Kicker, heading and the intro note are ONE block: the note used
   to sit detached to the right of the heading on three bands. */
.page--landlords .llx-lockup {
  display: grid;
  gap: 0.7rem;
  max-width: 62ch;
  padding-top: 0.9rem;
  border-top: 2px solid var(--llx-wine);
}

.page--landlords .llx-lockup--wide {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-areas:
    "kicker note"
    "title  note";
  column-gap: clamp(1.5rem, 3vw, 3rem);
  row-gap: 0.55rem;
  align-items: start;
  max-width: none;
  margin-bottom: clamp(1.1rem, 2vw, 1.7rem);
}

.page--landlords .llx-lockup--wide .llx-kicker { grid-area: kicker; }
.page--landlords .llx-lockup--wide .llx-display { grid-area: title; max-width: 20ch; }
.page--landlords .llx-lockup--wide .llx-lockup__note { grid-area: note; max-width: 46ch; }

.page--landlords .llx-lockup__note {
  max-width: 58ch;
  color: var(--llx-text-soft);
  font-size: 0.93rem;
  line-height: 1.6;
}

.page--landlords .llx-band--ink > .llx-shell > .llx-lockup .llx-lockup__note,
.page--landlords .llx-plate--forest .llx-lockup__note {
  color: var(--llx-on-dark-soft);
}

/* Chip. Every control on this page is one of these: a pressable face with
   an arrow and a 48px minimum target. There are no bare underlines. */
.page--landlords .llx-chip {
  display: inline-flex;
  gap: 0.6rem;
  align-items: center;
  justify-content: center;
  min-height: var(--llx-tap);
  padding: 0.65rem 1.1rem;
  border: 1.5px solid var(--llx-line-strong);
  border-radius: 999px;
  background: var(--llx-white);
  color: var(--llx-text);
  font-family: var(--font-text, "Manrope", system-ui, sans-serif);
  font-size: 0.88rem;
  font-weight: 750;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}

.page--landlords .llx-chip__arrow {
  flex: 0 0 auto;
  font-size: 0.95em;
  line-height: 1;
  transition: transform 0.18s ease;
}

.page--landlords .llx-chip--wine {
  background: var(--llx-wine);
  border-color: var(--llx-wine);
  color: var(--llx-white);
  box-shadow: 0 10px 26px -14px rgba(13, 29, 49, 0.9);
}

.page--landlords .llx-chip--ink {
  background: var(--llx-ink);
  border-color: var(--llx-ink);
  color: var(--llx-white);
}

.page--landlords .llx-chip--outline {
  background: transparent;
  border-color: var(--llx-line-strong);
  color: var(--llx-text);
}

.page--landlords .llx-chip--wrap {
  justify-content: flex-start;
  text-align: left;
}

/* A chip that is a marker inside a larger link, not a control of its own.
   The plate around it is the target, and it is well over 48px. */
.page--landlords .llx-chip--static {
  pointer-events: none;
  cursor: inherit;
}

.page--landlords .llx-chip--submit:disabled {
  cursor: wait;
  opacity: 0.55;
}

/* Ledger. The two lists the brief named — the Guaranteed Rent questions and
   the Why Dukes facts — were text over thin rules. Both are now rows with a
   marker, real padding and a 48px minimum. */
.page--landlords .llx-ledger {
  display: grid;
  gap: 0.4rem;
  margin: 0;
}

.page--landlords .llx-ledger__row {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.15rem 0.75rem;
  align-content: center;
  min-height: var(--llx-tap);
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--llx-line);
  border-radius: var(--llx-radius-sm);
  background: var(--llx-powder);
}

.page--landlords .llx-ledger__mark {
  grid-row: 1 / 3;
  align-self: start;
  color: var(--llx-wine);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.6;
}

.page--landlords .llx-ledger__term {
  margin: 0;
  color: var(--llx-text);
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.35;
}

.page--landlords .llx-ledger__detail {
  margin: 0;
  color: var(--llx-text-soft);
  font-size: 0.84rem;
  line-height: 1.5;
}

.page--landlords .llx-ledger--on-dark .llx-ledger__row {
  border-color: rgba(251, 248, 242, 0.18);
  background: rgba(251, 248, 242, 0.08);
}

.page--landlords .llx-ledger--on-dark .llx-ledger__mark {
  color: #e3c98f;
}

.page--landlords .llx-ledger--on-dark .llx-ledger__term {
  color: var(--llx-on-dark);
}

.page--landlords .llx-ledger--on-dark .llx-ledger__detail {
  color: var(--llx-on-dark-soft);
}

/* Meta ledger strip — kept exactly as the certificates already had it. */
.page--landlords .llx-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  border: 1px solid var(--llx-line);
  background: var(--llx-line);
}

.page--landlords .llx-meta > div {
  padding: 0.7rem 0.8rem;
  background: var(--llx-powder);
}

.page--landlords .llx-meta dt {
  margin: 0 0 0.25rem;
  color: var(--llx-text-soft);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.page--landlords .llx-meta dd {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.35;
}

/* Media plate. Aarav's photography in the deep pass's plate geometry: one
   border, one radius, and a height capped below half the viewport so no
   photograph can push the rest of a band around (brief 1). The crown
   placeholders that briefly stood in for these on 18 August are gone; the
   photographs are the page's. */
.page--landlords .llx-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--llx-media-ratio, 3 / 2);
  max-height: var(--llx-media-cap);
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--llx-line-strong);
  border-radius: var(--llx-radius);
  background: var(--llx-sand);
}

.page--landlords .llx-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page--landlords .llx-band--ink .llx-media {
  border-color: rgba(251, 248, 242, 0.24);
}

/* The hero's changing gallery, restored. Three plates on one 21s timeline,
   each holding the frame for about six seconds before the next crossfades
   in over it. */
.page--landlords .llx-hero__media {
  height: 100%;
  min-height: 26rem;
  aspect-ratio: auto;
  max-height: none;
}

.page--landlords .llx-hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.025);
  animation: llx-gallery 21s infinite ease-in-out;
}

.page--landlords .llx-hero__slide--two { animation-delay: 7s; }
.page--landlords .llx-hero__slide--three { animation-delay: 14s; }

@keyframes llx-gallery {
  0% { opacity: 0; transform: scale(1.025); }
  4%, 30% { opacity: 1; }
  34%, 100% { opacity: 0; transform: scale(1.08); }
}

/* NEW DEVICE · the written-scope seal. A crown in a ring beside the one
   line this whole page turns on, sitting with the Guaranteed Rent
   decision it qualifies. */
.page--landlords .llx-seal {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0.9rem;
  align-items: center;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(251, 248, 242, 0.22);
  border-radius: var(--llx-radius);
  background: rgba(251, 248, 242, 0.07);
}

/* No ring: the real crown stands on its own (Aarav, 20 Aug). */
.page--landlords .llx-seal__ring {
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  place-items: center;
  color: #e3c98f;
}

.page--landlords .llx-seal__ring svg {
  width: 1.6rem;
  height: 1.6rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The seal carries the real Dukes crown, not a generic stroke glyph
   (Aarav, 20 Aug). No ring around it — the brand mark stands alone. */
.page--landlords .llx-seal__ring img {
  width: 2.4rem;
  height: auto;
}

.page--landlords .llx-seal__label {
  margin: 0 0 0.25rem;
  color: #e3c98f;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.page--landlords .llx-seal__text {
  color: var(--llx-on-dark-soft);
  font-size: 0.8rem;
  line-height: 1.5;
}

/* ------------------------------- 3 · bands ----------------------------- */

/* 01 · Overview */
.page--landlords .llx-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
  align-items: stretch;
}

.page--landlords .llx-hero__copy {
  display: grid;
  align-content: space-between;
  gap: 1rem;
  padding: clamp(1.5rem, 2.6vw, 2.4rem);
}

.page--landlords .llx-hero__media {
  display: grid;
  align-content: stretch;
}

.page--landlords .llx-hero__media .llx-media {
  height: 100%;
}

.page--landlords .llx-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.25rem;
}

/* The three facts were hairline-separated fragments in a 1px-gap grid.
   They are composed chips now. */
.page--landlords .llx-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.35rem 0 0;
  padding: 0;
  list-style: none;
}

.page--landlords .llx-fact {
  display: grid;
  gap: 0.1rem;
  min-height: 3rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--llx-line);
  border-radius: 999px;
  background: var(--llx-powder);
}

.page--landlords .llx-fact b {
  font-size: 0.85rem;
  font-weight: 800;
}

.page--landlords .llx-fact span {
  color: var(--llx-text-soft);
  font-size: 0.7rem;
  line-height: 1.3;
}

/* 02 · Rental outlook */
.page--landlords .llx-outlook__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  grid-template-areas:
    "lead  calc"
    "media media";
  gap: clamp(1.1rem, 2.2vw, 1.9rem) clamp(1.25rem, 2.6vw, 2.5rem);
  align-items: start;
}

.page--landlords .llx-outlook__lead { grid-area: lead; }
.page--landlords .llx-outlook__grid > .llx-calc { grid-area: calc; }
.page--landlords .llx-outlook__media { grid-area: media; }

.page--landlords .llx-outlook__lead {
  display: grid;
  gap: 1.25rem;
}

.page--landlords .llx-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page--landlords .llx-step {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  min-height: 2.6rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--llx-line);
  border-radius: 999px;
  background: var(--llx-white);
}

.page--landlords .llx-step b {
  color: var(--llx-wine);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.page--landlords .llx-step span {
  font-size: 0.78rem;
  font-weight: 750;
}

.page--landlords .llx-calc {
  display: grid;
  gap: 1rem;
  padding: clamp(1.25rem, 2.4vw, 2rem);
}

.page--landlords .llx-calc__head {
  display: grid;
  gap: 0.4rem;
}

.page--landlords .llx-calc__title {
  font-size: clamp(1.6rem, 2.3vw, 2.15rem);
  line-height: 1.05;
}

.page--landlords .llx-calc__fields {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 0.75rem;
}

.page--landlords .llx-field {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.page--landlords .llx-field > span {
  font-size: 0.74rem;
  font-weight: 800;
}

.page--landlords .llx-field input,
.page--landlords .llx-field select {
  width: 100%;
  min-height: var(--llx-tap);
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--llx-line-strong);
  border-radius: var(--llx-radius-sm);
  background: var(--llx-white);
  color: var(--llx-text);
  font: 650 0.95rem/1.2 var(--font-text, "Manrope", system-ui, sans-serif);
}

.page--landlords .llx-calc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

/* NEW DEVICE · the rental-range figure. Only becomes a plate once the
   controller has written a real range into it, so an empty or an error
   state never renders a display-sized void. */
.page--landlords .llx-calc__figure {
  margin: 0;
  color: var(--llx-text-soft);
  font-size: 0.8rem;
  line-height: 1.5;
}

.page--landlords .llx-calc__figure:empty {
  display: none;
}

.page--landlords .llx-calc__figure.is-error {
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(123, 36, 48, 0.4);
  border-left-width: 4px;
  border-radius: var(--llx-radius-sm);
  color: var(--llx-wine);
  font-weight: 700;
}

.page--landlords .llx-calc__figure:has(strong) {
  display: grid;
  gap: 0.45rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--llx-line-strong);
  border-radius: var(--llx-radius-sm);
  background: var(--llx-powder);
}

.page--landlords .llx-calc__figure strong {
  font-family: var(--font-display, "Gloock", Georgia, serif);
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--llx-text);
}

.page--landlords .llx-calc__figure span {
  padding-top: 0.45rem;
  border-top: 1px solid var(--llx-line-strong);
  color: var(--llx-text-soft);
  font-size: 0.78rem;
}

.page--landlords .llx-calc__note {
  color: var(--llx-text-soft);
  font-size: 0.72rem;
  line-height: 1.45;
}

/* 03 · Support routes */
.page--landlords .llx-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.page--landlords .llx-tab {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.15rem 0.6rem;
  align-content: center;
  min-height: 4.5rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--llx-line);
  border-radius: var(--llx-radius);
  background: var(--llx-white);
  color: var(--llx-text-soft);
  cursor: pointer;
  text-align: left;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.page--landlords .llx-tab b {
  grid-row: 1 / 3;
  align-self: start;
  color: var(--llx-wine);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.7;
}

.page--landlords .llx-tab small {
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.page--landlords .llx-tab strong {
  font-family: var(--font-display, "Gloock", Georgia, serif);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.page--landlords .llx-tab[aria-selected="true"] {
  background: var(--llx-ink);
  border-color: var(--llx-ink);
  color: var(--llx-white);
}

.page--landlords .llx-tab[aria-selected="true"] b {
  color: #e3c98f;
}

.page--landlords .llx-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.18fr);
  gap: clamp(1.1rem, 2.2vw, 2rem);
  align-items: center;
  padding: clamp(1.1rem, 2vw, 1.6rem);
}

.page--landlords .llx-panel[hidden] {
  display: none;
}

.page--landlords .llx-panel__copy {
  display: grid;
  gap: 0.75rem;
  align-content: start;
}

.page--landlords .llx-panel__title {
  font-size: clamp(1.9rem, 2.9vw, 2.6rem);
  line-height: 1.03;
}

.page--landlords .llx-panel__lead {
  max-width: 52ch;
  color: var(--llx-text-soft);
  font-size: 0.94rem;
  line-height: 1.6;
}

.page--landlords .llx-panel__note {
  color: var(--llx-text-soft);
  font-size: 0.72rem;
  line-height: 1.5;
}

.page--landlords .llx-panel__copy .llx-chip {
  justify-self: start;
}

/* 04 · Guaranteed Rent — ink field, ivory plate (new pairing) */
.page--landlords .llx-guaranteed__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
  align-items: stretch;
}

.page--landlords .llx-guaranteed__copy {
  display: grid;
  align-content: space-between;
  gap: 0.9rem;
  padding: clamp(1.4rem, 2.5vw, 2.25rem);
}

.page--landlords .llx-guaranteed__copy .llx-chip {
  justify-self: start;
  margin-top: 0.25rem;
}

.page--landlords .llx-guaranteed__side {
  display: grid;
  align-content: stretch;
  gap: 0.75rem;
  grid-template-rows: minmax(0, 1fr) auto;
}

.page--landlords .llx-guaranteed__side .llx-media {
  height: 100%;
}

/* 05 · Detail on demand — plate rows, numbered 01/02 in reading order */
.page--landlords .llx-deep {
  padding-block: clamp(2.25rem, 3.6vw, 3.4rem);
}

.page--landlords .llx-deep__rows {
  display: grid;
  gap: 0.6rem;
}

.page--landlords .llx-row {
  overflow: hidden;
  border: 1px solid var(--llx-line);
  border-radius: var(--llx-radius);
  background: var(--llx-paper);
}

.page--landlords .llx-row[open] {
  background: var(--llx-paper);
  border-color: var(--llx-line-strong);
}

.page--landlords .llx-row__summary {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  gap: 0.9rem;
  align-items: center;
  min-height: 4.5rem;
  padding: 0.85rem 1rem;
  cursor: pointer;
  list-style: none;
}

.page--landlords .llx-row__summary::-webkit-details-marker {
  display: none;
}

.page--landlords .llx-row__number {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border-radius: 50%;
  background: var(--llx-powder);
  color: var(--llx-wine);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.page--landlords .llx-row__copy {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.page--landlords .llx-row__copy strong {
  font-family: var(--font-display, "Gloock", Georgia, serif);
  font-size: clamp(1.1rem, 1.7vw, 1.5rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.page--landlords .llx-row__copy small {
  color: var(--llx-text-soft);
  font-size: 0.8rem;
  line-height: 1.45;
}

/* The Open control is a chip on the row and carries the row's 48px target. */
.page--landlords .llx-row__chip {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  min-height: var(--llx-tap);
  padding: 0.6rem 0.95rem;
  border: 1.5px solid var(--llx-line-strong);
  border-radius: 999px;
  background: var(--llx-white);
  color: var(--llx-text);
  font-size: 0.82rem;
  font-weight: 750;
  white-space: nowrap;
}

.page--landlords .llx-row__chip-close,
.page--landlords .llx-row[open] .llx-row__chip-open {
  display: none;
}

.page--landlords .llx-row[open] .llx-row__chip-close {
  display: inline;
}

.page--landlords .llx-row__caret {
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 0.18s ease;
}

.page--landlords .llx-row[open] .llx-row__caret {
  transform: rotate(-135deg) translate(-1px, -1px);
}

.page--landlords .llx-row__body {
  padding: 0 1rem 1rem;
}

.page--landlords .llx-grid-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page--landlords .llx-grid-list__item {
  display: grid;
  gap: 0.3rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--llx-line);
  border-radius: var(--llx-radius-sm);
  background: var(--llx-white);
}

.page--landlords .llx-grid-list--ordered .llx-grid-list__item {
  grid-template-columns: 1.7rem minmax(0, 1fr);
  gap: 0.3rem 0.6rem;
}

.page--landlords .llx-grid-list__item > b {
  color: var(--llx-wine);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.7;
}

.page--landlords .llx-grid-list__item dt,
.page--landlords .llx-grid-list__item h3 {
  margin: 0;
  font-family: var(--font-text, "Manrope", system-ui, sans-serif);
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.35;
}

.page--landlords .llx-grid-list__item dd,
.page--landlords .llx-grid-list__item p {
  margin: 0.25rem 0 0;
  color: var(--llx-text-soft);
  font-size: 0.82rem;
  line-height: 1.5;
}

.page--landlords .llx-grid-list__item small {
  display: block;
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--llx-line);
  color: var(--llx-text-soft);
  font-size: 0.74rem;
  line-height: 1.45;
}

/* 06 · Why Dukes — sand field, forest plate (new pairing) */
.page--landlords .llx-local__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
  align-items: stretch;
}

.page--landlords .llx-local__grid > .llx-media {
  height: 100%;
}

.page--landlords .llx-local__copy {
  display: grid;
  align-content: space-between;
  gap: 0.9rem;
  padding: clamp(1.4rem, 2.5vw, 2.25rem);
}

/* 07 · Protection — both plates on one geometry */
.page--landlords .llx-trust__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  align-items: stretch;
}

.page--landlords .llx-cert {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 1rem;
  padding: clamp(1rem, 1.8vw, 1.35rem);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.page--landlords .llx-cert__preview {
  display: block;
  overflow: hidden;
  border: 1px solid var(--llx-line);
  border-radius: var(--llx-radius-sm);
  background: var(--llx-white);
}

.page--landlords .llx-cert__preview img {
  width: 100%;
  aspect-ratio: 1.38;
  max-height: var(--llx-media-cap);
  object-fit: contain;
}

.page--landlords .llx-cert__facts {
  display: grid;
  align-content: start;
  gap: 0.7rem;
}

.page--landlords .llx-cert__name {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.05;
}

.page--landlords .llx-cert__facts .llx-chip {
  justify-self: start;
  margin-top: 0.1rem;
}

/* 08 · Next step */
.page--landlords .llx-next__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "lead  media"
    "one   two";
  gap: 0.9rem clamp(1.25rem, 2.4vw, 2.25rem);
  align-items: stretch;
}

.page--landlords .llx-next__lead { grid-area: lead; align-self: start; }
.page--landlords .llx-next__media { grid-area: media; }
.page--landlords .llx-next__media .llx-media { max-height: min(var(--llx-media-cap), 24rem); }
.page--landlords .llx-route--one { grid-area: one; }
.page--landlords .llx-route--two { grid-area: two; }

/* The route plate is a row, not a card: number, copy and chip across the
   plate's width. Stacked, its two short lines left the right two thirds of
   the plate dead — which is the void the brief named. */
.page--landlords .llx-route {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  grid-template-areas:
    "num title chip"
    "num note  chip";
  gap: 0.25rem 0.9rem;
  align-content: center;
  align-items: center;
  padding: clamp(1rem, 1.7vw, 1.35rem);
  color: var(--llx-text);
  text-decoration: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.page--landlords .llx-route__number { grid-area: num; align-self: center; }
.page--landlords .llx-route__title { grid-area: title; align-self: end; }
.page--landlords .llx-route__note { grid-area: note; align-self: start; }
.page--landlords .llx-route .llx-chip { grid-area: chip; }

.page--landlords .llx-route__number {
  color: var(--llx-wine);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.page--landlords .llx-route__title {
  font-family: var(--font-display, "Gloock", Georgia, serif);
  font-size: clamp(1.2rem, 1.9vw, 1.6rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.page--landlords .llx-route__note {
  color: var(--llx-text-soft);
  font-size: 0.82rem;
  line-height: 1.5;
}

.page--landlords .llx-route .llx-chip {
  justify-self: end;
  margin-top: 0;
}

/* 09 · Guidance */
.page--landlords .llx-guidance {
  padding-block: clamp(1.9rem, 3vw, 2.75rem);
}

.page--landlords .llx-guidance__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.52fr) minmax(0, 1.48fr);
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
  align-items: start;
}

.page--landlords .llx-guidance__lead {
  display: grid;
  gap: 0.5rem;
  align-content: start;
}

.page--landlords .llx-guidance__title {
  margin: 0;
  font-family: var(--font-text, "Manrope", system-ui, sans-serif);
}

.page--landlords .llx-guidance__reviewed {
  color: var(--llx-text-soft);
  font-size: 0.76rem;
  line-height: 1.5;
}

.page--landlords .llx-guidance__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page--landlords .llx-guidance__list .llx-chip {
  width: 100%;
  justify-content: space-between;
}

.page--landlords .llx-guidance__list .llx-chip {
  font-size: 0.82rem;
}

/* ------------------- 4 · the Dukes assistant, this page ----------------- */
/* Scoped recomposition of the shared section, following the /epc/,
   managed-portfolio and guaranteed-rent standard passes. The shared markup
   is untouched apart from the flag-gated additions shell.mjs already
   renders for those routes and now renders for this one: landlord journey
   first, per-journey actions, assurance chip, Instagram as a follow line.
   Direct contact moves under the intro so the left column stops dying, and
   every journey is one plate geometry open and closed. */

.page--landlords .reception {
  padding-block: clamp(2.75rem, 5vw, 5rem);
  background: var(--llx-ink);
  color: var(--llx-on-dark);
  --on-deep: #fbf8f2;
  --on-deep-soft: rgba(251, 248, 242, 0.84);
  --rule-on-deep: rgba(251, 248, 242, 0.22);
}

/* dukes.css still carries a whole retired `ly-` block scoped to
   `.page--landlords .reception` (lines 1878-1899 there): it repainted this
   route's shared band warm paper, hid the eyebrow, and ran the heading at a
   4.8rem ceiling. Each of those is answered here at equal specificity rather
   than by editing a file another session owns. */
.page--landlords .reception .h-section,
.page--landlords .reception__questions,
.page--landlords .reception__summary,
.page--landlords .reception__label {
  color: var(--llx-on-dark);
}

.page--landlords .reception__eyebrow {
  display: block;
  color: #e3c98f;
}

/* Brief 1 · the assistant heading comes down with the rest of the page. */
.page--landlords .reception .h-section {
  max-width: 17ch;
  font-size: clamp(2rem, 3.1vw, 3.35rem);
  line-height: 1.03;
}

.page--landlords .reception__routes--safe {
  margin-top: 0;
  padding: 0;
  border-top: 0;
  background: transparent;
  color: var(--llx-on-dark);
}

.page--landlords .reception__index {
  color: #e3c98f;
}

.page--landlords .reception__notice,
.page--landlords .reception__outcome,
.page--landlords .reception__asks {
  color: var(--llx-on-dark-soft);
}

.page--landlords .reception__inner {
  display: grid;
  max-width: var(--llx-shell, 76rem);
  grid-template-columns: minmax(20rem, 0.74fr) minmax(0, 1.26fr);
  grid-template-areas:
    "intro routes"
    "contact routes";
  column-gap: clamp(1.5rem, 3vw, 2.75rem);
  row-gap: 1.35rem;
  align-items: start;
}

.page--landlords .reception__intro {
  grid-area: intro;
  max-width: none;
}

.page--landlords .reception__inner > .reception__routes:not(.reception__routes--safe) {
  grid-area: routes;
  margin: 0;
}

.page--landlords .reception__inner > .reception__routes--safe {
  grid-area: contact;
  max-width: none;
  margin: 0;
}

/* The works-without-JavaScript line becomes an assurance chip. */
.page--landlords .reception__assure {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  width: fit-content;
  min-height: 2.5rem;
  margin: 1rem 0 0;
  padding: 0.5rem 0.85rem;
  border: 1px solid rgba(251, 248, 242, 0.32);
  border-radius: 999px;
  color: #fbf8f2;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.page--landlords .reception__route {
  border: 0;
}

.page--landlords .reception__route + .reception__route {
  margin-top: 0.6rem;
  border-top: 0;
}

.page--landlords .reception__disclosure {
  overflow: hidden;
  border: 1px solid rgba(251, 248, 242, 0.16);
  border-radius: 14px;
  background: rgba(251, 248, 242, 0.07);
}

.page--landlords .reception__disclosure[open] {
  border-color: rgba(251, 248, 242, 0.3);
  background: rgba(251, 248, 242, 0.1);
}

.page--landlords .reception__summary {
  min-height: 48px;
  padding: 0.85rem 1.1rem;
  align-items: center;
}

.page--landlords .reception__body {
  padding: 0 1.1rem 1.1rem;
}

/* Every open journey ends in a primary action plus a call and a WhatsApp
   route, so no route opens onto a list of questions and stops. */
.page--landlords .reception__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1rem;
}

.page--landlords .reception__act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.7rem 1.1rem;
  border: 1.5px solid rgba(251, 248, 242, 0.42);
  border-radius: 999px;
  color: #fbf8f2;
  font-size: 0.9rem;
  font-weight: 750;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}

.page--landlords .reception__act--primary {
  background: #7b2430;
  border-color: #7b2430;
  box-shadow: 0 10px 26px -14px rgba(4, 10, 18, 0.9);
}

/* Direct routes become labelled rows under the intro; the tooltip text is
   promoted to a permanent visible label, and Instagram leaves the grid for
   the follow line. */
.page--landlords .reception .crail__intro {
  display: none;
}

.page--landlords .reception .crail__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.45rem;
}

.page--landlords .reception .crail__item {
  position: relative;
  display: block;
}

.page--landlords .reception .crail__item:has(.crail__link--instagram) {
  display: none;
}

.page--landlords .reception .crail__link {
  display: grid;
  grid-template-columns: auto;
  justify-items: start;
  align-items: center;
  width: 100%;
  min-height: 64px;
  padding: 0.55rem 0.8rem;
  border: 1px solid rgba(251, 248, 242, 0.16);
  border-radius: 12px;
  background: rgba(251, 248, 242, 0.07);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.page--landlords .reception .crail__fill {
  display: none;
}

.page--landlords .reception .crail__glyph {
  width: 2.6rem;
  height: 2.6rem;
}

/* dukes.css nudges the first and last tip in the rail (`:first-child` /
   `:last-child`, lines 13777-13778 there) because in its own design the tip
   is a hover tooltip that must not fall off the ends of a horizontal row.
   Here it is a permanent label in a stacked list, so every row is pinned the
   same way and none of them can run back under its own glyph. */
.page--landlords .reception .crail__tip,
.page--landlords .reception .crail__item:first-child .crail__tip,
.page--landlords .reception .crail__item:last-child .crail__tip {
  position: absolute;
  top: 50%;
  right: 0.9rem;
  bottom: auto;
  left: 4.6rem;
  display: grid;
  gap: 0.1rem;
  opacity: 1;
  pointer-events: none;
  text-align: right;
  transform: translateY(-50%);
  visibility: visible;
}

.page--landlords .reception .crail__tip-label {
  color: rgba(251, 248, 242, 0.66);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.page--landlords .reception .crail__tip-value {
  color: #fbf8f2;
  font-size: 0.85rem;
  font-weight: 700;
}

.page--landlords .reception__follow {
  margin: 0.8rem 0 0;
}

/* Brief 11 asks for a small follow link rather than a fourth contact tile,
   and brief 7 allows no bare underline on this page. So it stays a link,
   smaller than every chip, but it carries an arrow instead of a rule and
   only underlines on hover. */
.page--landlords .reception__follow a {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  min-height: 48px;
  color: rgba(251, 248, 242, 0.74);
  font-size: 0.83rem;
  font-weight: 700;
  text-decoration: none;
  text-underline-offset: 0.25em;
}

.page--landlords .reception__follow a::after {
  content: "\2197";
  font-size: 0.95em;
  line-height: 1;
}

/* ----------------------------- 5 · responsive -------------------------- */

@media (max-width: 78em) {
  .page--landlords .llx-hero__grid,
  .page--landlords .llx-guaranteed__grid,
  .page--landlords .llx-local__grid,
  .page--landlords .llx-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .page--landlords .llx-next__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "lead  lead"
      "media media"
      "one   two";
  }

  .page--landlords .llx-outlook__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "lead"
      "calc"
      "media";
  }

  .page--landlords .llx-guaranteed__side {
    grid-template-rows: auto auto;
  }

  .page--landlords .llx-hero__media .llx-media,
  .page--landlords .llx-guaranteed__side .llx-media,
  .page--landlords .llx-local__grid > .llx-media {
    height: auto;
  }

  .page--landlords .llx-guidance__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .page--landlords .llx-lockup--wide {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "kicker"
      "title"
      "note";
    max-width: 62ch;
  }
}

@media (max-width: 62em) {
  .page--landlords .llx-trust__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .page--landlords .reception__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "intro"
      "contact"
      "routes";
    column-gap: 0;
  }
}

@media (max-width: 48em) {
  .page--landlords .llx-tabs,
  .page--landlords .llx-calc__fields,
  .page--landlords .llx-grid-list,
  .page--landlords .llx-meta {
    grid-template-columns: minmax(0, 1fr);
  }

  .page--landlords .llx-grid-list--ordered .llx-grid-list__item {
    grid-template-columns: 1.7rem minmax(0, 1fr);
  }

  .page--landlords .llx-display {
    max-width: none;
  }

  .page--landlords .llx-row__summary {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 0.7rem;
  }

  .page--landlords .llx-row__chip {
    grid-column: 2;
    justify-self: start;
  }

  .page--landlords .llx-next__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "lead"
      "media"
      "one"
      "two";
  }

  .page--landlords .llx-guidance__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .page--landlords .llx-route {
    grid-template-columns: 2.25rem minmax(0, 1fr);
    grid-template-areas:
      "num title"
      "num note"
      "chip chip";
    gap: 0.3rem 0.9rem;
  }

  .page--landlords .llx-route .llx-chip {
    justify-self: stretch;
    margin-top: 0.65rem;
  }

  .page--landlords .llx-facts,
  .page--landlords .llx-steps {
    flex-direction: column;
    align-items: stretch;
  }

  .page--landlords .llx-fact,
  .page--landlords .llx-step {
    border-radius: var(--llx-radius-sm);
  }

  .page--landlords .llx-chip {
    width: 100%;
    justify-content: space-between;
  }

  .page--landlords .llx-guidance__list .llx-chip,
  .page--landlords .llx-chip--static {
    width: 100%;
  }
}

/* ------------- 6 · hover, focus, reduced motion, print ------------------ */

@media (hover: hover) {
  /* Chips move like the homepage's: a 2px lift, the arrow slides 3px, and
     the pressed state settles them back down. Colour alone was the old
     hover, and it read as flat next to the rest of the site. */
  .page--landlords .llx-chip:hover {
    border-color: var(--llx-wine);
    background: rgba(123, 36, 48, 0.08);
    transform: translateY(-2px);
  }

  .page--landlords .llx-chip:hover .llx-chip__arrow {
    transform: translateX(3px);
  }

  .page--landlords .llx-chip--wine:hover {
    background: #5e1924;
    border-color: #5e1924;
    box-shadow: 0 14px 30px -14px rgba(13, 29, 49, 0.9);
  }

  .page--landlords .llx-chip--ink:hover {
    background: #081524;
    border-color: #081524;
  }

  .page--landlords .llx-chip--static:hover {
    border-color: var(--llx-line-strong);
    background: transparent;
    transform: none;
  }

  .page--landlords .llx-tab:hover:not([aria-selected="true"]) {
    border-color: var(--llx-line-strong);
    background: var(--llx-white);
    color: var(--llx-text);
  }

  .page--landlords .llx-rail__link:hover .llx-rail__row {
    background: var(--llx-powder);
    color: var(--llx-text);
  }

  /* The route plate is the control; its static chip answers the hover the
     way the homepage's entry cue does — filling oxblood, arrow sliding. */
  .page--landlords .llx-route:hover {
    border-color: var(--llx-wine);
    box-shadow: 0 1.25rem 2.5rem -1rem rgba(13, 29, 49, 0.35);
    transform: translateY(-2px);
  }

  .page--landlords .llx-route:hover .llx-chip--static {
    background: var(--llx-wine);
    border-color: var(--llx-wine);
    color: var(--llx-white);
  }

  .page--landlords .llx-route:hover .llx-chip__arrow {
    transform: translateX(3px);
  }

  /* Certificate plates lift like the homepage's. */
  .page--landlords .llx-cert:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px -28px rgba(13, 29, 49, 0.45);
  }

  .page--landlords .llx-row__summary:hover .llx-row__chip {
    border-color: var(--llx-wine);
  }

  .page--landlords .reception__act:hover {
    background: rgba(251, 248, 242, 0.12);
    transform: translateY(-2px);
  }

  .page--landlords .reception__act--primary:hover {
    background: #93303f;
    border-color: #93303f;
  }

  .page--landlords .reception .crail__link:hover {
    border-color: rgba(251, 248, 242, 0.35);
    background: rgba(251, 248, 242, 0.12);
    transform: translateY(-2px);
  }

  .page--landlords .reception__follow a:hover {
    color: #fbf8f2;
    text-decoration: underline;
  }
}

/* Pressed. Matches the homepage: the lift comes back down under the finger. */
.page--landlords .llx-chip:active,
.page--landlords .reception__act:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px -8px rgba(13, 29, 49, 0.9);
}

.page--landlords .llx a:focus-visible,
.page--landlords .llx button:focus-visible,
.page--landlords .llx summary:focus-visible,
.page--landlords .llx input:focus-visible,
.page--landlords .llx select:focus-visible,
.page--landlords .llx [tabindex]:focus-visible {
  outline: 3px solid var(--llx-wine);
  outline-offset: 2px;
  border-radius: var(--llx-radius-sm);
}

.page--landlords .llx-band--ink a:focus-visible,
.page--landlords .llx-band--ink button:focus-visible,
.page--landlords .llx-plate--forest a:focus-visible,
.page--landlords .reception__summary:focus-visible,
.page--landlords .reception__act:focus-visible,
.page--landlords .reception .crail__link:focus-visible,
.page--landlords .reception__follow a:focus-visible {
  outline: 3px solid #fbf8f2;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .page--landlords .llx *,
  .page--landlords .reception * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* The hover lifts stay still too — zeroed durations alone would leave an
     instant jump, which is the thing this query exists to remove. */
  .page--landlords .llx-chip:hover,
  .page--landlords .llx-route:hover,
  .page--landlords .llx-cert:hover,
  .page--landlords .reception__act:hover,
  .page--landlords .reception .crail__link:hover,
  .page--landlords .llx-chip:hover .llx-chip__arrow,
  .page--landlords .llx-route:hover .llx-chip__arrow {
    transform: none !important;
  }
}

@media print {
  .page--landlords .llx-rail {
    display: none;
  }

  .page--landlords .llx-band,
  .page--landlords .reception {
    padding-left: 0;
  }

  .page--landlords .llx-band {
    background: #fff;
    color: #000;
  }
}

/* ==========================================================================
   llx2 — ALIGNMENT, COLOUR AND MOTION PASS, 20 August 2026
   Aarav: "things are misaligned, the fonts are not clear enough, the
   animations are not done properly, the colours need another look, no
   repeated colours, too much white text."
   Appended so the sheet above stays intact and this pass is reviewable
   as one block.
   ========================================================================== */

/* --- 1 · ALIGNMENT ------------------------------------------------------ */

/* HERO WIDTH - deliberately NOT changed. The hero runs 1344px (min(94vw,
   100rem)) against every other band's 1216px shell, set by
   landlords-secnav-2026.css, which loads after this sheet and uses a
   `body.page--landlords` selector so it outranks anything here. That is the
   "one joined island, homepage grammar" decision from the secnav pass, not a
   mistake - so it stays. Noted here because it reads as a misalignment and
   the next person will otherwise try to "fix" it. If it should match the
   shell, change it in landlords-secnav-2026.css line 31, not here. */

/* The next-step lead was `align-self: start` against a 384px media column,
   so a 192px lockup left 192px of dead column under it - the void in the
   screenshot. Centred against the media, and the media capped a step lower. */
.page--landlords .llx-next__lead { align-self: center; }
.page--landlords .llx-next__media .llx-media { max-height: min(var(--llx-media-cap), 22rem); }

/* The two route plates centred their own content, so a title that wrapped to
   two lines pushed its title UP relative to the one-line title beside it
   (measured 5827 vs 5842) and their notes drifted apart too. Content now
   starts at the top of both plates, and the title reserves two lines so the
   notes below it stay on a shared baseline whatever the title length. */
.page--landlords .llx-route { align-content: start; }
.page--landlords .llx-route__title {
  align-self: start;
  min-height: calc(1.15em * 2);
}
.page--landlords .llx-route__note { align-self: start; }
.page--landlords .llx-route__number { align-self: start; padding-top: 0.15em; }

/* --- 2 · THE LOCAL BAND'S RAGGED EDGE ----------------------------------- */
/* The photograph was capped at --llx-media-cap (60vh = 540px) while the
   forest panel beside it ran to 606px, so the pair finished 66px out of
   line. The panel's display type was also the largest on the page. The
   type comes down one step and the photograph is released from the cap so
   the two columns finish flush. */
.page--landlords .llx-local__grid > .llx-media {
  max-height: none;
  height: 100%;
}
.page--landlords .llx-local__copy .llx-display {
  font-size: clamp(1.6rem, 2.5vw, 2.35rem);
  line-height: 1.08;
}

/* --- 3 · COLOUR: TEXT ON DARK SURFACES ---------------------------------- */
/* "Too much white text." Every dark surface on this page painted its
   headings in the one premium white, so the ink band and the forest panel
   read as slabs of white type. Display type on dark now takes champagne,
   body copy a softened cream, and the small numerals brass. The white token
   is unchanged and still does its job on light plates - it just stops being
   the default for everything that sits on a dark ground. */
.page--landlords {
  --llx-champagne: #f3e7cf;
  --llx-brass: #d9b884;
}
.page--landlords .llx-band--ink .llx-display,
.page--landlords .llx-plate--forest .llx-display,
.page--landlords .llx-hero__copy .llx-display {
  color: var(--llx-champagne);
}
.page--landlords .llx-band--ink .llx-lede,
.page--landlords .llx-plate--forest .llx-lede,
.page--landlords .llx-hero__copy .llx-lede,
.page--landlords .llx-band--ink .llx-lockup__note,
.page--landlords .llx-plate--forest .llx-lockup__note {
  color: rgb(251 248 242 / 82%);
}
.page--landlords .llx-band--ink .llx-route__number,
.page--landlords .llx-plate--forest .llx-route__number,
.page--landlords .llx-plate--forest .llx-step__number {
  color: var(--llx-brass);
}

/* --- 4 · MOTION --------------------------------------------------------- */
/* The page carried NO reveal hooks at all: enhance.mjs -> reveal.mjs was
   loaded and running, and had nothing to observe, so every plate simply
   appeared. The plates now carry data-reveal="card" (added in the markup)
   and pick up the site's shared entrance. The hero's own 21s gallery
   animation is deliberately untouched. */
@media (prefers-reduced-motion: reduce) {
  .page--landlords .llx-hero__slide { animation: none; opacity: 1; transform: none; }
  .page--landlords .llx-hero__slide--two,
  .page--landlords .llx-hero__slide--three { opacity: 0; }
}

/* CORRECTION to the rule above. Scoping the champagne to `.llx-band--ink`
   was too broad: that band also carries LIGHT plates (the Guaranteed Rent
   copy plate is ivory), and the rule painted a 44px heading champagne on
   ivory - 1.16:1, effectively invisible. A band's colour says nothing about
   the colour of a plate sitting on it. Light plates take the page ink back,
   whatever band they happen to be standing on. */
.page--landlords .llx-band--ink .llx-plate:not(.llx-plate--forest):not(.llx-plate--ink) .llx-display {
  color: var(--llx-text);
}
.page--landlords .llx-band--ink .llx-plate:not(.llx-plate--forest):not(.llx-plate--ink) :where(.llx-lede, .llx-lockup__note) {
  color: var(--llx-text-soft);
}

/* --- 5 · THE ROUTE TITLES NEVER GOT THE DISPLAY FACE -------------------- */
/* `.page--landlords .llx-route__title` asks for the display serif, but the
   sheet also carries a blanket typographic reset:
     .page--landlords .llx p, .llx li, .llx dt, .llx dd, .llx label,
     .llx button, .llx a, .llx small, .llx strong, .llx b { --font-text }
   `.llx strong` is (0,2,1) and `.llx-route__title` is (0,2,0), so the reset
   won and both route titles rendered Manrope 400 at 25.6px - a big sans at
   book weight where a display serif belongs. That is the "fonts are not
   clear enough" report, and it predates this pass. Restored at (0,3,0),
   with the weight the serif actually wants.
   NOTE for the next person: any `.llx-*__title` on a <strong>, <a>, <small>
   or <li> loses to that reset. Check the computed family, not the rule. */
.page--landlords .llx .llx-route__title {
  font-family: var(--font-display, "Gloock", Georgia, serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
}