/* ============================================================================
   DUKES - LANDLORD GUIDE - llg4 "The Letting Ledger", 20 August 2026
   ----------------------------------------------------------------------------
   Full redesign. Replaces the llg3 island layer (teal anchor / warm bone
   ground / boxed chapter frames). Loads AFTER dukes.css and AFTER
   landlord-guide-2026.css, and is written to a NEW filename because the page
   HTML has a second live writer (Authority 6.3 - move page work to a
   single-writer lane).

   WHAT IS NEW HERE (the novelty mandate):
     1. THE DECISION RAIL - a sticky 01..10 index running beside the whole
        ten-decision section with a live brass marker. No other Dukes page has
        a persistent in-section stage rail; the side panel elsewhere is a
        drawer, this is always-on wayfinding tied to reading position.
     2. ACTOR CHIPS - every stage names who acts ("You act" / "Dukes acts" /
        "Stays your duty"). 4.8 describes them; no page had built them.
     3. THE CONFIRM-IN-WRITING SPECIMEN - this page's signature line raised
        from a paragraph into a ruled artefact: brass rule, small-caps label
        and a signature underscore. It reads as a line ON a document.
     4. RETIRED 20 Aug - the hero's instruction specimen was replaced by a
        photograph position on Aarav's instruction ("too much text").

   COLOUR HAS JOBS. Palette drawn from the pages Aarav named as good
   (/sales/, the Sellers Guide family), re-paired so this page owns its own:
     night   #0d1d31  ANCHOR   hero, the ledger band, the file band
     forest  #17483c  ONE band only - the service routes
     oxblood #7b2430  ACTIONS AND KICKERS ONLY. Nothing else.
     brass   #c5a66a  metal on dark  -  #7a6030 text-grade on light
     cream   #fbf8f2  THE one premium white - plates only
     oat / mist / rose - the three reading fields, never two in a row
   TYPE: Gloock + Manrope kept (brand, self-hosted, the only two faces on the
   box) but the SYSTEM is new - display one step down per his "too big"
   verdict, tighter tracking, tabular lining numerals on every figure, and a
   46ch measure cap.

   JS CONTRACT - unchanged names, so /assets/js/landlord-guide.mjs still runs:
   details.llgx-stage, [data-llgx-stages], [data-llgx-cabinet],
   [data-llgx-drawer], [data-llgx-panel], .is-active, .is-enhanced.
   ========================================================================== */

.page--landlord-guide {
  /* ---- ink ---- */
  --llg4-ink: #17181c;
  --llg4-ink-soft: #4f555b;
  --llg4-ink-faint: #6a6f75;

  /* ---- the anchor: guide night. Ties the guide to its parent /landlords/ ---- */
  --llg4-night: #0d1d31;
  --llg4-night-soft: #182d45;
  --llg4-night-lift: #22405e;

  /* ---- the single green: selling-process forest, ONE band ---- */
  --llg4-forest: #17483c;
  --llg4-forest-soft: #1e5c4c;

  /* ---- actions and kickers ONLY ---- */
  --llg4-oxblood: #7b2430;
  --llg4-oxblood-dark: #5e1924;

  /* ---- metal ---- */
  --llg4-brass: #c5a66a;          /* on dark surfaces only */
  /* brass proper measures 4.4-4.5 on the forest/green surfaces - right on
     the floor. This lighter metal clears it everywhere green is the ground. */
  --llg4-metal-light: #e8c98d;
  /* text-grade brass. Deepened from #7a6030 (4.36:1 on the confirm
     specimen, under the floor) to 5.9:1. */
  --llg4-brass-ink: #6d5529;      /* text-grade on light surfaces */
  --llg4-champagne: #f3e7cf;      /* display ink on dark - never white */

  /* ---- THE one premium white ----
     Aarav, 20 Aug: "there is too much white". Cream is still the only white
     token, but it now has a NARROW JOB: it marks the thing you are reading.
     The open stage plate, the hero specimen and the slot chips. Everything
     that used to default to cream (closed stage plates, route cards, service
     cards, download rows, cabinet cards, the start island) now carries a
     tint. Cream went from ~20 surfaces to 3 roles. */
  --llg4-cream: #fbf8f2;

  /* ---- the working plate tints: one per chapter, a step DOWN from that
     chapter's field so a closed plate reads as closed and the open one
     (cream) lifts out of the stack ---- */
  --llg4-plate-a: #e8dcc2;
  --llg4-plate-b: #d5e3d8;
  --llg4-plate-c: #e4cec4;
  --llg4-parchment: #f3ead8;   /* the cabinet desk + download rows */

  /* ---- the three reading fields ----
     Separated by HUE, not by lightness: on a single ground all three sit
     within 0.06 of each other in luminance but read as warm / green / pink,
     which is how /sales/ gets its rhythm. Lightness does the work between
     island and ground; hue does the work between neighbouring islands. */
  --llg4-oat: #f2ebdd;
  --llg4-mist: #e2eee6;
  --llg4-rose: #f0dfd8;
  --llg4-slot: #e3d9c4;           /* awaiting-art plates - never cream */

  /* ---- rules ---- */
  --llg4-rule: rgb(23 24 28 / 15%);
  --llg4-rule-strong: rgb(23 24 28 / 26%);
  --llg4-rule-dark: rgb(251 248 242 / 20%);

  /* ---- type system ---- */
  --llg4-display: Gloock, Georgia, "Times New Roman", serif;
  --llg4-sans: Manrope, system-ui, -apple-system, sans-serif;
  --llg4-measure: 46ch;

  /* ---- geometry: the site's two radius regimes ---- */
  --llg4-shell: min(94vw, 1560px);
  --llg4-shell-wide: min(96vw, 1720px);
  --llg4-shell-tight: min(92vw, 1180px);
  --llg4-r-island: 30px;
  --llg4-r-plate: 22px;
  --llg4-r-small: 14px;
  --llg4-tap: 48px;
  --llg4-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* clip the X axis ONLY. `overflow: clip` propagates to the viewport and
     kills page scrolling outright (found live, 20 Aug - llg3 trap 0). */
  overflow-x: clip;

  /* A FLAT ground, deliberately. The first cut used a warm gradient sweeping
     #f4efe4 -> #e5dbc5, which crosses the islands' own tonal range: chapter 1
     measured only 0.024 lightness step against the mid ground (invisible) and
     the step INVERTED between the top and bottom of the page. A single tone
     keeps every island lifting by the same measured amount wherever it sits.
     Measured steps against this ground: oat +0.15, mist +0.17, rose +0.11,
     cream plates +0.28. */
  background: #d9d3c3;
  color: var(--llg4-ink);
  font-family: var(--llg4-sans);
  scrollbar-color: var(--llg4-night) #d9d3c3;
  scrollbar-width: thin;
}

/* dukes.css paints .main cream, which would hide the ground entirely.
   overflow must stay visible or the sticky decision rail cannot stick. */
.page--landlord-guide .main {
  background: transparent;
  overflow: visible;
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.page--landlord-guide ::selection { background: var(--llg4-brass); color: var(--llg4-night); }
.page--landlord-guide :where(a, summary, button):focus-visible {
  outline: 3px solid #e0b978;
  outline-offset: 3px;
  border-radius: 6px;
}
.page--landlord-guide .main :where(h1, h2, h3) { text-wrap: balance; }

/* ---------------------------------------------------------------- type ---- */
.page--landlord-guide .llg4 :where(h1, h2, h3, h4),
.page--landlord-guide .llg4-hero :where(h1, h2, h3) {
  font-family: var(--llg4-display);
  font-weight: 400;
  letter-spacing: -0.018em;
  line-height: 1.05;
  margin: 0;
}
.page--landlord-guide .llg4 p { margin: 0; }

/* the eyebrow: small-caps sans, tabular figures, oxblood on light */
.page--landlord-guide .llg4-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.85rem;
  font-family: var(--llg4-sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--llg4-oxblood);
}
.page--landlord-guide .llg4-kicker::before {
  content: "";
  width: 26px;
  height: 2px;
  background: currentColor;
  opacity: 0.8;
}
.page--landlord-guide .llg4-kicker--brass { color: var(--llg4-brass); }

/* every figure on the page is tabular and lining */
.page--landlord-guide .llg4-num,
.page--landlord-guide .llgx-stage__number,
.page--landlord-guide .llg4-rail__num,
.page--landlord-guide .llg4-open__range,
.page--landlord-guide .llgx-cabinet__index,
.page--landlord-guide .llg4-series__links span {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ------------------------------------------------------------- actions ---- */
.page--landlord-guide .llg4-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: var(--llg4-tap);
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  background: var(--llg4-oxblood);
  color: var(--llg4-cream);
  font-weight: 700;
  font-size: 0.94rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.32s var(--llg4-ease), transform 0.32s var(--llg4-ease);
}
.page--landlord-guide .llg4-button--ghost {
  background: transparent;
  color: var(--llg4-champagne);
  border-color: rgb(251 248 242 / 42%);
}
@media (hover: hover) {
  .page--landlord-guide .llg4-button:hover { background: var(--llg4-oxblood-dark); transform: translateY(-2px); }
  .page--landlord-guide .llg4-button--ghost:hover { background: rgb(251 248 242 / 12%); border-color: var(--llg4-brass); }
}

.page--landlord-guide .llg4-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--llg4-tap);
  padding: 0.5rem 0.15rem;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--llg4-oxblood);
  text-decoration: none;
  box-shadow: inset 0 -2px 0 0 currentColor;
}
.page--landlord-guide .llg4-link--on-dark { color: var(--llg4-brass); }
.page--landlord-guide .llg4-link::after { content: "\2192"; transition: transform 0.3s var(--llg4-ease); }
@media (hover: hover) { .page--landlord-guide .llg4-link:hover::after { transform: translateX(4px); } }

/* ================================================================ HERO ==== */
/* A night island carrying the title on the left and a working document on
   the right. No photograph: the second column is the instruction specimen. */
.page--landlord-guide .llg4-hero {
  width: var(--llg4-shell-wide);
  margin: clamp(0.9rem, 2vw, 1.6rem) auto 0;
  padding: clamp(2.2rem, 4.4vw, 4rem) clamp(1.4rem, 3.4vw, 3.5rem);
  border-radius: var(--llg4-r-island);
  background:
    radial-gradient(120% 140% at 86% 0%, var(--llg4-night-lift) 0%, transparent 56%),
    linear-gradient(158deg, var(--llg4-night-soft) 0%, var(--llg4-night) 62%);
  color: var(--llg4-cream);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.page--landlord-guide .llg4-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: clamp(1.8rem, 4vw, 3.8rem);
  align-items: center;
}
.page--landlord-guide .llg4-hero h1 {
  font-size: clamp(2.4rem, 4.4vw, 3.9rem);
  line-height: 1.01;
  letter-spacing: -0.025em;
  color: var(--llg4-cream);
}
.page--landlord-guide .llg4-hero__statement {
  margin-top: 0.9rem;
  font-family: var(--llg4-display);
  font-size: clamp(1.14rem, 1.7vw, 1.48rem);
  line-height: 1.25;
  color: var(--llg4-champagne);
}
.page--landlord-guide .llg4-hero__lead {
  margin-top: 1rem;
  max-width: var(--llg4-measure);
  font-size: clamp(0.97rem, 1.05vw, 1.05rem);
  line-height: 1.62;
  color: rgb(251 248 242 / 84%);
}
.page--landlord-guide .llg4-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.4rem;
  margin-top: 1.7rem;
}


@media (max-width: 61.99em) {
  .page--landlord-guide .llg4-hero__inner { grid-template-columns: 1fr; gap: 2rem; }
}

/* ============================================ THE SHELL AND THE OPENER ==== */
.page--landlord-guide .llg4 {
  width: var(--llg4-shell);
  margin-inline: auto;
  display: grid;
  gap: clamp(1.5rem, 3.2vw, 2.8rem);
  padding-block: clamp(1.5rem, 3.2vw, 2.8rem);
}

/* "Start where you are" - three chapter cards, each on a different field,
   each carrying its stage range as a brass dial. Borrowed from the tenant
   guide opener he rated, twisted: the range is the hero of the card. */
.page--landlord-guide .llg4-open {
  border-radius: var(--llg4-r-island);
  background: var(--llg4-oat);
  border: 1px solid var(--llg4-rule);
  padding: clamp(1.5rem, 3vw, 2.7rem);
  box-shadow: 0 30px 70px -56px rgb(13 29 49 / 55%);
}
.page--landlord-guide .llg4-open__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: 1rem clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  padding-bottom: clamp(1.2rem, 2.2vw, 1.9rem);
  margin-bottom: clamp(1.2rem, 2.2vw, 1.9rem);
  border-bottom: 1px solid var(--llg4-rule);
}
.page--landlord-guide .llg4-open__head h2 {
  font-size: clamp(1.85rem, 2.9vw, 2.75rem);
}
.page--landlord-guide .llg4-open__head p {
  font-size: 0.96rem;
  line-height: 1.6;
  max-width: var(--llg4-measure);
  color: var(--llg4-ink-soft);
}
.page--landlord-guide .llg4-open__scope {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--llg4-ink-faint);
  margin-top: 0.7rem;
}
.page--landlord-guide .llg4-open__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.8rem, 1.4vw, 1.2rem);
}
.page--landlord-guide .llg4-open__card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 0.55rem;
  padding: clamp(1.15rem, 1.9vw, 1.6rem);
  border-radius: var(--llg4-r-plate);
  text-decoration: none;
  color: var(--llg4-ink);
  border: 1px solid var(--llg4-rule);
  transition: transform 0.34s var(--llg4-ease), box-shadow 0.34s var(--llg4-ease);
}
/* The three chapter cards are DARK, on the light oat island - the homepage
   route-card pattern (green / wine / navy) rather than three more cream
   boxes. Every dark surface owns its own text colour (trap 6.6). */
.page--landlord-guide .llg4-open__card--a { background: var(--llg4-night); color: var(--llg4-cream); }
.page--landlord-guide .llg4-open__card--b { background: var(--llg4-forest); color: var(--llg4-cream); }
.page--landlord-guide .llg4-open__card--c { background: #5e2a34; color: var(--llg4-cream); }
.page--landlord-guide .llg4-open__card { border-color: transparent; }
.page--landlord-guide .llg4-open__range {
  font-family: var(--llg4-display);
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--llg4-brass);
}
.page--landlord-guide .llg4-open__card strong {
  font-family: var(--llg4-display);
  font-weight: 400;
  font-size: clamp(1.16rem, 1.6vw, 1.4rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--llg4-champagne);
}
.page--landlord-guide .llg4-open__card small {
  font-size: 0.86rem;
  line-height: 1.55;
  color: rgb(251 248 242 / 82%);
}
.page--landlord-guide .llg4-open__card em {
  font-style: normal;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 30px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--llg4-metal-light);
}
.page--landlord-guide .llg4-open__card em::after { content: "\2192"; transition: transform 0.3s var(--llg4-ease); }
@media (hover: hover) {
  .page--landlord-guide .llg4-open__card:hover { transform: translateY(-3px); box-shadow: 0 26px 46px -34px rgb(13 29 49 / 52%); }
  .page--landlord-guide .llg4-open__card:hover em::after { transform: translateX(4px); }
}

@media (max-width: 61.99em) {
  .page--landlord-guide .llg4-open__head { grid-template-columns: 1fr; align-items: start; }
  .page--landlord-guide .llg4-open__cards { grid-template-columns: 1fr; }
}

/* ==================================== DEVICE 1: THE DECISION LEDGER ======= */
/* The whole ten-decision section is ONE band, not three boxed islands. A
   sticky rail on the left holds the 01..10 index and marks reading position;
   the right column runs the chapters and their stages as a continuous ledger.
   This replaces the llg3 "three chapter frames" layout entirely. */
.page--landlord-guide .llg4-ledger {
  display: grid;
  grid-template-columns: 16.5rem minmax(0, 1fr);
  gap: clamp(1.4rem, 2.8vw, 3rem);
  align-items: start;
}

.page--landlord-guide .llg4-rail {
  position: sticky;
  top: calc(var(--head-h, 84px) + 1.1rem);
  align-self: start;
  padding: clamp(1.1rem, 1.7vw, 1.5rem);
  border-radius: var(--llg4-r-plate);
  background: var(--llg4-night);
  color: var(--llg4-cream);
  border: 1px solid rgb(251 248 242 / 12%);
  box-shadow: 0 30px 64px -50px rgb(4 12 22 / 85%);
  /* no backdrop-filter: it traps fixed/sticky descendants (page-nav trap) */
  /* a sticky element taller than the viewport stops sticking, so cap it and
     let the index scroll inside itself on short screens */
  max-height: calc(100vh - var(--head-h, 84px) - 2.2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.page--landlord-guide .llg4-rail__title {
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--llg4-brass);
  margin: 0 0 0.9rem;
}
.page--landlord-guide .llg4-rail__group {
  margin: 0 0 1rem;
  padding: 0 0 0.9rem;
  border-bottom: 1px solid var(--llg4-rule-dark);
}
.page--landlord-guide .llg4-rail__group:last-of-type { border-bottom: 0; margin-bottom: 0.4rem; padding-bottom: 0; }
.page--landlord-guide .llg4-rail__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--llg4-champagne);
  margin: 0 0 0.5rem;
}
.page--landlord-guide .llg4-rail__list { list-style: none; margin: 0; padding: 0; display: grid; }
.page--landlord-guide .llg4-rail__list a {
  display: grid;
  grid-template-columns: 2rem 1fr;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--llg4-tap);
  padding: 0.4rem 0.5rem 0.4rem 0.35rem;
  border-radius: 9px;
  text-decoration: none;
  color: rgb(251 248 242 / 74%);
  font-size: 0.82rem;
  line-height: 1.3;
  position: relative;
  transition: background 0.28s var(--llg4-ease), color 0.28s var(--llg4-ease);
}
.page--landlord-guide .llg4-rail__num {
  font-family: var(--llg4-display);
  font-size: 0.92rem;
  color: var(--llg4-brass);
  opacity: 0.85;
}
/* the live marker */
.page--landlord-guide .llg4-rail__list a::before {
  content: "";
  position: absolute;
  left: -1.1rem;
  top: 50%;
  width: 3px;
  height: 0;
  border-radius: 2px;
  background: var(--llg4-brass);
  transform: translateY(-50%);
  transition: height 0.34s var(--llg4-ease);
}
.page--landlord-guide .llg4-rail__list a.is-current {
  background: rgb(251 248 242 / 10%);
  color: var(--llg4-cream);
  font-weight: 700;
}
.page--landlord-guide .llg4-rail__list a.is-current::before { height: 24px; }
.page--landlord-guide .llg4-rail__list a.is-current .llg4-rail__num { opacity: 1; }
@media (hover: hover) {
  .page--landlord-guide .llg4-rail__list a:hover { background: rgb(251 248 242 / 8%); color: var(--llg4-cream); }
}
.page--landlord-guide .llg4-rail__foot {
  margin-top: 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--llg4-rule-dark);
  font-size: 0.72rem;
  line-height: 1.5;
  color: rgb(251 248 242 / 66%);
}
@media (prefers-reduced-motion: reduce) {
  .page--landlord-guide .llg4-rail__list a,
  .page--landlord-guide .llg4-rail__list a::before { transition: none; }
}

/* under 62em the rail is redundant - the floating hxnav pill covers
   wayfinding, and a sticky column would eat the reading width. */
@media (max-width: 61.99em) {
  .page--landlord-guide .llg4-ledger { grid-template-columns: 1fr; }
  .page--landlord-guide .llg4-rail { display: none; }
}

/* ------------------------------------------------------- ledger chapters -- */
.page--landlord-guide .llg4-ledger__body { display: grid; gap: clamp(1.4rem, 2.6vw, 2.4rem); }

.page--landlord-guide .llg4-chapter {
  border-radius: var(--llg4-r-island);
  border: 1px solid var(--llg4-rule);
  overflow: hidden;
}
.page--landlord-guide .llg4-chapter--a { background: var(--llg4-oat); }
.page--landlord-guide .llg4-chapter--b { background: var(--llg4-mist); }
.page--landlord-guide .llg4-chapter--c { background: var(--llg4-rose); }

.page--landlord-guide .llg4-chapter__head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(1.2rem, 2.4vw, 2.4rem);
  align-items: center;
  padding: clamp(1.3rem, 2.4vw, 2.1rem);
}
.page--landlord-guide .llg4-chapter--b .llg4-chapter__head > .llg4-slot { order: -1; }
.page--landlord-guide .llg4-chapter__count {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin: 0 0 0.6rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--llg4-oxblood);
}
.page--landlord-guide .llg4-chapter__head h2 {
  font-size: clamp(1.75rem, 2.7vw, 2.5rem);
}
.page--landlord-guide .llg4-chapter__head > div > p {
  margin-top: 0.7rem;
  font-size: 0.96rem;
  line-height: 1.6;
  max-width: var(--llg4-measure);
  color: var(--llg4-ink-soft);
}
/* the outcome chip closes the copy column so it never ends on a bare line */
.page--landlord-guide .llg4-chapter__outcome {
  display: grid;
  gap: 0.2rem;
  margin-top: 1.1rem;
  padding: 0.85rem 1rem 0.85rem 1.1rem;
  border-radius: var(--llg4-r-small);
  background: var(--llg4-night);
  border-left: 3px solid var(--llg4-brass);
  max-width: var(--llg4-measure);
}
.page--landlord-guide .llg4-chapter__outcome strong {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--llg4-brass);
}
.page--landlord-guide .llg4-chapter__outcome span {
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgb(251 248 242 / 90%);
}

@media (max-width: 61.99em) {
  .page--landlord-guide .llg4-chapter__head { grid-template-columns: 1fr; }
  .page--landlord-guide .llg4-chapter--b .llg4-chapter__head > .llg4-slot { order: 0; }
}

/* ------------------------------------------------ the crown placeholder --- */
/* Aarav supplies all photography. Every empty position is a tinted plate with
   the real crown asset as a ghost watermark, the shot description as a label
   chip and the ratio tagged. Never a dashed box, never the word "placeholder". */
.page--landlord-guide .llg4-slot {
  position: relative;
  margin: 0;
  aspect-ratio: var(--slot-ar, 3 / 2);
  border-radius: var(--llg4-r-plate);
  background: var(--llg4-slot);
  border: 1px solid var(--llg4-rule-strong);
  overflow: hidden;
  display: grid;
  align-content: end;
  gap: 0.5rem;
  padding: clamp(0.9rem, 1.5vw, 1.2rem);
  isolation: isolate;
}
.page--landlord-guide .llg4-slot__crown {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: clamp(72px, 22%, 128px);
  height: auto;
  aspect-ratio: 252 / 182;
  transform: translate(-50%, -62%);
  opacity: 0.17;
  pointer-events: none;
}
.page--landlord-guide .llg4-slot__chip,
.page--landlord-guide .llg4-slot__ratio {
  position: relative;
  z-index: 1;
  justify-self: start;
  border-radius: 999px;
  font-weight: 700;
}
.page--landlord-guide .llg4-slot__chip {
  padding: 0.42rem 0.85rem;
  background: var(--llg4-cream);
  border: 1px solid var(--llg4-rule);
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--llg4-ink);
  max-width: 100%;
}
.page--landlord-guide .llg4-slot__ratio {
  padding: 0.24rem 0.62rem;
  background: var(--llg4-night);
  color: var(--llg4-champagne);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums lining-nums;
}
/* The wide banner variant: a full-width panorama STRIP.
   TRAP: `max-height` combined with `aspect-ratio` caps the WIDTH too. At
   3:1 with max-height 300px the figure resolved to 900px inside a 1352px
   island and left a 450px void beside it - Aarav caught it. There is no
   height cap here at all: the ratio alone (5:1) keeps the strip short, and
   the strip is free to fill its lane. Only a floor for narrow viewports,
   where 5:1 would collapse to a sliver. */
.page--landlord-guide .llg4-slot--wide {
  /* Both sides. It shipped with a top margin only, so the strip sat flush on
     the card row beneath it and the two read as one welded block. */
  margin: clamp(1.2rem, 2.2vw, 1.9rem) 0 clamp(1.5rem, 2.8vw, 2.4rem);
  width: 100%;
  align-content: end;
}
/* Narrow viewports get a SHORTER RATIO, never a min-height. Any height
   constraint next to `aspect-ratio` drives the width too: min-height 170px
   at 5:1 resolved to an 850px-wide figure inside a 310px column and blew
   the page out to 911px of horizontal scroll. Change the ratio, not the
   height - that is the only safe lever on an aspect-ratio box. */
@media (max-width: 61.99em) {
  .page--landlord-guide .llg4-slot--wide { --slot-ar: 2 / 1; }
}
.page--landlord-guide .llg4-slot--wide .llg4-slot__crown { width: clamp(84px, 12%, 132px); }

/* the dark-band variant */
.page--landlord-guide .llg4-slot--dark {
  background: rgb(251 248 242 / 8%);
  border-color: rgb(251 248 242 / 22%);
}
.page--landlord-guide .llg4-slot--dark .llg4-slot__crown { opacity: 0.3; }
.page--landlord-guide .llg4-slot--dark .llg4-slot__chip {
  background: rgb(251 248 242 / 92%);
  border-color: transparent;
}
.page--landlord-guide .llg4-slot--dark .llg4-slot__ratio {
  background: var(--llg4-brass);
  color: var(--llg4-night);
}

/* ------------------------------------------------------- the stage rows --- */
.page--landlord-guide .llgx-stages {
  display: grid;
  gap: 0.6rem;
  padding: 0 clamp(1.3rem, 2.4vw, 2.1rem) clamp(1.3rem, 2.4vw, 2.1rem);
}
/* CLOSED plates carry the chapter's own tint; the OPEN one goes cream. That
   is what cream is FOR on this page now - it marks the decision you are
   reading, so ten identical white boxes became one white box and nine
   tinted ones. */
.page--landlord-guide .llgx-stage {
  border-radius: var(--llg4-r-plate);
  background: var(--llg4-plate-a);
  border: 1px solid var(--llg4-rule);
  overflow: hidden;
  scroll-margin-top: calc(var(--head-h, 84px) + 1.5rem);
  transition: background 0.3s var(--llg4-ease);
}
.page--landlord-guide .llg4-chapter--a .llgx-stage { background: var(--llg4-plate-a); }
.page--landlord-guide .llg4-chapter--b .llgx-stage { background: var(--llg4-plate-b); }
.page--landlord-guide .llg4-chapter--c .llgx-stage { background: var(--llg4-plate-c); }
.page--landlord-guide .llgx-stage[open] { background: var(--llg4-cream); }
@media (prefers-reduced-motion: reduce) {
  .page--landlord-guide .llgx-stage { transition: none; }
}
.page--landlord-guide .llgx-stage > summary {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) 1.6rem;
  align-items: center;
  gap: 0.8rem 1rem;
  min-height: 64px;
  padding: 0.95rem clamp(0.9rem, 1.5vw, 1.3rem);
  cursor: pointer;
  list-style: none;
}
.page--landlord-guide .llgx-stage > summary::-webkit-details-marker { display: none; }
.page--landlord-guide .llgx-stage__number {
  font-family: var(--llg4-display);
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--llg4-brass-ink);
  text-align: center;
}
.page--landlord-guide .llgx-stage__title {
  display: grid;
  gap: 0.22rem;
  font-family: var(--llg4-display);
  font-weight: 400;
  font-size: clamp(1.02rem, 1.25vw, 1.16rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--llg4-ink);
}
.page--landlord-guide .llgx-stage__hint {
  font-family: var(--llg4-sans);
  font-size: 0.84rem;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--llg4-ink-soft);
}
/* the +/- mark, the house standard for a disclosure */
.page--landlord-guide .llgx-stage__caret {
  position: relative;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 1px solid var(--llg4-rule-strong);
  justify-self: end;
}
.page--landlord-guide .llgx-stage__caret::before,
.page--landlord-guide .llgx-stage__caret::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.7rem;
  height: 2px;
  background: var(--llg4-oxblood);
  transform: translate(-50%, -50%);
  transition: transform 0.3s var(--llg4-ease), opacity 0.3s var(--llg4-ease);
}
.page--landlord-guide .llgx-stage__caret::after { transform: translate(-50%, -50%) rotate(90deg); }
.page--landlord-guide .llgx-stage[open] .llgx-stage__caret::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
.page--landlord-guide .llgx-stage[open] { border-color: var(--llg4-rule-strong); }
@media (hover: hover) {
  .page--landlord-guide .llgx-stage > summary:hover { background: rgb(23 24 28 / 3%); }
}
@media (prefers-reduced-motion: reduce) {
  .page--landlord-guide .llgx-stage__caret::before,
  .page--landlord-guide .llgx-stage__caret::after { transition: none; }
}

.page--landlord-guide .llgx-stage__body {
  display: grid;
  gap: 0.9rem;
  padding: 0 clamp(0.9rem, 1.5vw, 1.3rem) clamp(1rem, 1.5vw, 1.3rem) calc(3rem + 1.8rem);
}
.page--landlord-guide .llgx-stage__body > p {
  font-size: 0.94rem;
  line-height: 1.62;
  max-width: var(--llg4-measure);
  color: var(--llg4-ink-soft);
}

/* ---- DEVICE 2: the actor chips ------------------------------------------ */
/* Every decision names who acts. Three states only, so the row scans. */
.page--landlord-guide .llg4-actors {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page--landlord-guide .llg4-actor {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.34rem 0.7rem 0.34rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.page--landlord-guide .llg4-actor::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.page--landlord-guide .llg4-actor--you {
  background: #e6ded0;
  color: #5c4a2a;
  border-color: rgb(92 74 42 / 26%);
}
.page--landlord-guide .llg4-actor--dukes {
  background: #dde7e1;
  color: #1c4a3e;
  border-color: rgb(28 74 62 / 26%);
}
.page--landlord-guide .llg4-actor--duty {
  background: #eddcd9;
  color: #6d2029;
  border-color: rgb(109 32 41 / 28%);
}

/* ---- DEVICE 3: the confirm-in-writing specimen --------------------------- */
/* The page's signature line, raised from a paragraph into an artefact: a
   ruled strip that reads like a line ON a signed document. */
.page--landlord-guide .llgx-stage__confirm {
  position: relative;
  display: grid;
  gap: 0.42rem;
  margin: 0.2rem 0 0;
  padding: 0.95rem 1.1rem 1.05rem;
  border-radius: var(--llg4-r-small);
  background: linear-gradient(180deg, #f6f1e5 0%, #f2ebdb 100%);
  border: 1px solid rgb(122 96 48 / 26%);
  max-width: calc(var(--llg4-measure) + 6ch);
}
.page--landlord-guide .llgx-stage__confirm::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(180deg, var(--llg4-brass) 0%, var(--llg4-brass-ink) 100%);
}
.page--landlord-guide .llgx-stage__confirm strong {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--llg4-brass-ink);
}
.page--landlord-guide .llgx-stage__confirm strong::after {
  content: "";
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgb(122 96 48 / 45%) 0 5px, transparent 5px 9px);
}
.page--landlord-guide .llgx-stage__confirm span {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--llg4-ink);
}

@media (max-width: 47.99em) {
  .page--landlord-guide .llgx-stage > summary { grid-template-columns: 2.4rem minmax(0, 1fr) 1.6rem; gap: 0.6rem; }
  .page--landlord-guide .llgx-stage__body { padding-left: clamp(0.9rem, 1.5vw, 1.3rem); }
}

/* ------------------------------------------------------------ the finish -- */
.page--landlord-guide .llg4-finish {
  display: grid;
  gap: 0.7rem;
  margin: 0 clamp(1.3rem, 2.4vw, 2.1rem) clamp(1.3rem, 2.4vw, 2.1rem);
  padding: clamp(1.3rem, 2.2vw, 1.9rem);
  border-radius: var(--llg4-r-plate);
  background: var(--llg4-night);
  color: var(--llg4-cream);
}
.page--landlord-guide .llg4-finish h3 {
  font-size: clamp(1.3rem, 1.9vw, 1.7rem);
  color: var(--llg4-champagne);
}
.page--landlord-guide .llg4-finish p {
  font-size: 0.94rem;
  line-height: 1.6;
  max-width: var(--llg4-measure);
  color: rgb(251 248 242 / 82%);
}
.page--landlord-guide .llg4-finish__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.3rem;
  margin-top: 0.5rem;
}

/* ================================================= THE LANDLORD FILE ====== */
/* The page's full-bleed dark band - the ladder rule says at least one band
   per page breaks the shell width. Holds the record cabinet. */
.page--landlord-guide .llg4-file {
  position: relative;
  margin-block: clamp(1.5rem, 3.2vw, 2.8rem);
  padding-block: clamp(2.4rem, 4.6vw, 4.2rem);
  background:
    radial-gradient(110% 130% at 12% 0%, var(--llg4-night-lift) 0%, transparent 58%),
    linear-gradient(160deg, var(--llg4-night-soft) 0%, var(--llg4-night) 60%);
  color: var(--llg4-cream);
  overflow: hidden;
  isolation: isolate;
}
.page--landlord-guide .llg4-file__lions {
  position: absolute;
  right: -3%;
  bottom: -8%;
  width: min(30%, 340px);
  height: auto;
  opacity: 0.07;
  z-index: 0;
  pointer-events: none;
}
.page--landlord-guide .llg4-file__inner {
  position: relative;
  z-index: 1;
  width: var(--llg4-shell);
  margin-inline: auto;
  display: grid;
  gap: clamp(1.5rem, 2.8vw, 2.4rem);
}
.page--landlord-guide .llg4-file__top {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(1.3rem, 3vw, 3rem);
  align-items: center;
}
.page--landlord-guide .llg4-file__head h2 {
  font-size: clamp(1.8rem, 2.9vw, 2.7rem);
  color: var(--llg4-champagne);
}
.page--landlord-guide .llg4-file__head > p {
  margin-top: 0.9rem;
  font-size: 0.98rem;
  line-height: 1.62;
  max-width: var(--llg4-measure);
  color: rgb(251 248 242 / 82%);
}

/* ---- the record cabinet (JS hooks unchanged) ---------------------------- */
.page--landlord-guide .llgx-cabinet {
  display: grid;
  grid-template-columns: 17.5rem minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.8rem);
  align-items: start;
}
.page--landlord-guide .llgx-cabinet__rail { display: grid; gap: 0.5rem; align-content: center; }
.page--landlord-guide .llgx-cabinet__drawer {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  grid-template-areas: "index phase" "index count";
  align-items: center;
  gap: 0 0.75rem;
  min-height: var(--llg4-tap);
  padding: 0.7rem 0.9rem;
  border-radius: var(--llg4-r-small);
  background: rgb(251 248 242 / 7%);
  border: 1px solid rgb(251 248 242 / 16%);
  color: var(--llg4-cream);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.3s var(--llg4-ease), border-color 0.3s var(--llg4-ease);
}
.page--landlord-guide .llgx-cabinet__index {
  grid-area: index;
  font-family: var(--llg4-display);
  font-size: 1.15rem;
  color: var(--llg4-brass);
}
.page--landlord-guide .llgx-cabinet__phase { grid-area: phase; font-size: 0.9rem; font-weight: 700; }
.page--landlord-guide .llgx-cabinet__count {
  grid-area: count;
  font-size: 0.74rem;
  color: rgb(251 248 242 / 66%);
  font-variant-numeric: tabular-nums lining-nums;
}
.page--landlord-guide .llgx-cabinet__drawer.is-active {
  background: var(--llg4-parchment);
  border-color: var(--llg4-parchment);
  color: var(--llg4-ink);
}
.page--landlord-guide .llgx-cabinet__drawer.is-active .llgx-cabinet__index { color: var(--llg4-brass-ink); }
.page--landlord-guide .llgx-cabinet__drawer.is-active .llgx-cabinet__count { color: var(--llg4-ink-soft); }
@media (hover: hover) {
  .page--landlord-guide .llgx-cabinet__drawer:not(.is-active):hover {
    background: rgb(251 248 242 / 13%);
    border-color: var(--llg4-brass);
  }
}

.page--landlord-guide .llgx-cabinet__stage { display: grid; gap: 0.8rem; }
.page--landlord-guide .llgx-cabinet__card {
  position: relative;
  padding: clamp(1.2rem, 2vw, 1.8rem);
  border-radius: var(--llg4-r-plate);
  background: var(--llg4-parchment);
  color: var(--llg4-ink);
  overflow: hidden;
}
.page--landlord-guide .llgx-cabinet__ghost {
  position: absolute;
  top: -0.6rem;
  right: 0.8rem;
  font-family: var(--llg4-display);
  font-size: clamp(4rem, 8vw, 7rem);
  line-height: 1;
  color: rgb(122 96 48 / 12%);
  pointer-events: none;
  font-variant-numeric: tabular-nums lining-nums;
}
.page--landlord-guide .llgx-cabinet__card > header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.9rem;
  padding-bottom: 0.8rem;
  margin-bottom: 0.9rem;
  border-bottom: 2px solid var(--llg4-night);
}
.page--landlord-guide .llgx-cabinet__card > header > span:first-child {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--llg4-oxblood);
  font-variant-numeric: tabular-nums lining-nums;
}
.page--landlord-guide .llgx-cabinet__card > header h3 {
  font-family: var(--llg4-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  letter-spacing: -0.015em;
  margin: 0;
  flex: 1 1 auto;
}
.page--landlord-guide .llgx-cabinet__card > header > span:last-child {
  font-size: 0.76rem;
  color: var(--llg4-ink-soft);
  font-variant-numeric: tabular-nums lining-nums;
}
.page--landlord-guide .llgx-cabinet__card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.page--landlord-guide .llgx-cabinet__card li {
  display: grid;
  gap: 0.18rem;
  padding: 0.8rem 0.95rem;
  border-radius: var(--llg4-r-small);
  background: #e8dcc2;
}
.page--landlord-guide .llgx-cabinet__card li strong { font-size: 0.9rem; font-weight: 800; }
.page--landlord-guide .llgx-cabinet__card li small { font-size: 0.84rem; line-height: 1.5; color: var(--llg4-ink-soft); }

/* un-enhanced: rail hidden, all four cards visible. The gate is is-enhanced,
   so a JS failure can never hide a record from the reader. */
.page--landlord-guide .llgx-cabinet:not(.is-enhanced) .llgx-cabinet__rail { display: none; }
.page--landlord-guide .llgx-cabinet:not(.is-enhanced) { grid-template-columns: 1fr; }

@media (max-width: 61.99em) {
  .page--landlord-guide .llg4-file__top { grid-template-columns: 1fr; }
  .page--landlord-guide .llgx-cabinet { grid-template-columns: 1fr; }
  .page--landlord-guide .llgx-cabinet__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); display: grid; }
}
@media (max-width: 32em) {
  .page--landlord-guide .llgx-cabinet__rail { grid-template-columns: 1fr; }
}

/* ==================================================== THE PDF SERIES ====== */
.page--landlord-guide .llg4-series {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(1.4rem, 3vw, 3rem);
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.7rem);
  border-radius: var(--llg4-r-island);
  background: var(--llg4-rose);
  border: 1px solid var(--llg4-rule);
}
.page--landlord-guide .llg4-series__cover {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.7rem;
  aspect-ratio: 3 / 4;
  padding: clamp(1.2rem, 2.2vw, 2rem);
  border-radius: var(--llg4-r-plate);
  background: linear-gradient(165deg, var(--llg4-night-soft) 0%, var(--llg4-night) 68%);
  color: var(--llg4-champagne);
  text-align: center;
  box-shadow: 0 34px 60px -40px rgb(13 29 49 / 72%);
}
.page--landlord-guide .llg4-series__seal { width: clamp(46px, 20%, 68px); height: auto; }
.page--landlord-guide .llg4-series__cover small {
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--llg4-brass);
}
.page--landlord-guide .llg4-series__cover strong {
  font-family: var(--llg4-display);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  line-height: 1.22;
  letter-spacing: -0.015em;
}
.page--landlord-guide .llg4-series__copy h2 { font-size: clamp(1.8rem, 2.8vw, 2.6rem); }
.page--landlord-guide .llg4-series__copy > p {
  margin-top: 0.8rem;
  font-size: 0.96rem;
  line-height: 1.6;
  max-width: var(--llg4-measure);
  color: var(--llg4-ink-soft);
}
.page--landlord-guide .llg4-series__meta {
  margin-top: 0.7rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--llg4-brass-ink);
  font-variant-numeric: tabular-nums lining-nums;
}
.page--landlord-guide .llg4-series__links {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}
.page--landlord-guide .llg4-series__links a {
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr);
  grid-template-areas: "num title" "num meta";
  align-items: center;
  gap: 0 0.7rem;
  min-height: var(--llg4-tap);
  padding: 0.8rem 0.95rem;
  border-radius: var(--llg4-r-small);
  background: var(--llg4-parchment);
  border: 1px solid var(--llg4-rule);
  text-decoration: none;
  color: var(--llg4-ink);
  transition: transform 0.3s var(--llg4-ease), border-color 0.3s var(--llg4-ease);
}
.page--landlord-guide .llg4-series__links span {
  grid-area: num;
  font-family: var(--llg4-display);
  font-size: 1.2rem;
  color: var(--llg4-brass-ink);
}
.page--landlord-guide .llg4-series__links strong { grid-area: title; font-size: 0.88rem; font-weight: 800; line-height: 1.3; }
.page--landlord-guide .llg4-series__links small {
  grid-area: meta;
  font-size: 0.74rem;
  color: var(--llg4-ink-soft);
  font-variant-numeric: tabular-nums lining-nums;
}
@media (hover: hover) {
  .page--landlord-guide .llg4-series__links a:hover { transform: translateY(-2px); border-color: var(--llg4-brass-ink); }
}
.page--landlord-guide .llg4-series__note {
  margin-top: 0.9rem;
  font-size: 0.8rem;
  color: var(--llg4-ink-faint);
}
@media (max-width: 61.99em) {
  .page--landlord-guide .llg4-series { grid-template-columns: 1fr; }
  .page--landlord-guide .llg4-series__cover { aspect-ratio: 16 / 9; }
  .page--landlord-guide .llg4-series__links { grid-template-columns: 1fr; }
}

/* ============================================== THE SERVICE ROUTES ======== */
/* The page's one forest band - the single green, per the colour jobs. */
/* Flipped 20 Aug on Aarav's "too much white": this was a forest band carrying
   three cream cards. It is now a light oat island carrying three DARK cards
   (forest / wine / night) - the homepage route-card pattern. Three big cream
   blocks removed and three colours added in the same move. */
.page--landlord-guide .llg4-service {
  padding: clamp(1.6rem, 3.2vw, 2.9rem);
  border-radius: var(--llg4-r-island);
  background: var(--llg4-oat);
  border: 1px solid var(--llg4-rule);
  color: var(--llg4-ink);
}
.page--landlord-guide .llg4-service__head { text-align: center; margin-bottom: clamp(1.3rem, 2.4vw, 2rem); }
.page--landlord-guide .llg4-service__head h2 {
  font-size: clamp(1.8rem, 2.8vw, 2.6rem);
  color: var(--llg4-ink);
}
.page--landlord-guide .llg4-service__head p {
  margin: 0.8rem auto 0;
  max-width: 54ch;
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--llg4-ink-soft);
}
.page--landlord-guide .llg4-service__routes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.8rem, 1.4vw, 1.2rem);
}
.page--landlord-guide .llg4-service__routes a {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 0.55rem;
  padding: clamp(0.7rem, 1.1vw, 0.9rem);
  border-radius: var(--llg4-r-plate);
  color: var(--llg4-cream);
  text-decoration: none;
  border: 1px solid transparent;
  overflow: hidden;
  transition: transform 0.34s var(--llg4-ease), box-shadow 0.34s var(--llg4-ease);
}
/* each card owns its own ink - a dark surface that inherits the band's ink
   ships invisible text (trap 6.6) */
.page--landlord-guide .llg4-service__routes a:nth-child(1) { background: var(--llg4-forest); }
.page--landlord-guide .llg4-service__routes a:nth-child(2) { background: #5e2a34; }
.page--landlord-guide .llg4-service__routes a:nth-child(3) { background: var(--llg4-night); }
/* the media top sits flush inside the card's padding */
.page--landlord-guide .llg4-service__routes .llg4-slot {
  border-radius: var(--llg4-r-small);
  margin-bottom: 0.35rem;
}
.page--landlord-guide .llg4-service__routes > a > :not(.llg4-slot) { margin-inline: clamp(0.45rem, 0.8vw, 0.7rem); }
.page--landlord-guide .llg4-service__routes > a > em { margin-bottom: 0.45rem; }
.page--landlord-guide .llg4-service__tag {
  justify-self: start;
  padding: 0.3rem 0.68rem;
  border-radius: 999px;
  background: rgb(251 248 242 / 14%);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--llg4-metal-light);
}
.page--landlord-guide .llg4-service__routes strong {
  font-family: var(--llg4-display);
  font-weight: 400;
  font-size: clamp(1.14rem, 1.6vw, 1.36rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--llg4-champagne);
}
/* Only the unclassed description span. A bare `span` here also matched the
   slot's caption and ratio chips, painting cream text on the cream chip -
   1:1, invisible - because (0,2,1) beats the chip's own (0,2,0) rule. */
.page--landlord-guide .llg4-service__routes > a > span:not([class]) {
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgb(251 248 242 / 82%);
}
.page--landlord-guide .llg4-service__routes em {
  font-style: normal;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 30px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--llg4-metal-light);
}
@media (hover: hover) {
  .page--landlord-guide .llg4-service__routes a:hover { transform: translateY(-3px); box-shadow: 0 28px 48px -32px rgb(4 20 16 / 78%); }
}
@media (max-width: 61.99em) {
  .page--landlord-guide .llg4-service__routes { grid-template-columns: 1fr; }
}

/* ================================================== USEFUL TO KNOW ======== */
.page--landlord-guide .llg4-notes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.2rem, 2.6vw, 2.4rem);
  align-items: start;
  padding: clamp(1.4rem, 2.8vw, 2.3rem);
  border-radius: var(--llg4-r-island);
  background: var(--llg4-mist);
  border: 1px solid var(--llg4-rule);
}
.page--landlord-guide .llg4-notes h2 { font-size: clamp(1.5rem, 2.3vw, 2.1rem); }
.page--landlord-guide .llg4-notes > div > p {
  margin-top: 0.8rem;
  font-size: 0.94rem;
  line-height: 1.6;
  max-width: var(--llg4-measure);
  color: var(--llg4-ink-soft);
}
.page--landlord-guide .llg4-notes details {
  border-radius: var(--llg4-r-plate);
  background: var(--llg4-parchment);
  border: 1px solid var(--llg4-rule);
  overflow: hidden;
}
.page--landlord-guide .llg4-notes summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--llg4-tap);
  padding: 0.9rem 1.1rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--llg4-ink);
}
.page--landlord-guide .llg4-notes summary::-webkit-details-marker { display: none; }
.page--landlord-guide .llg4-notes summary::after {
  content: "+";
  font-family: var(--llg4-display);
  font-size: 1.3rem;
  line-height: 1;
  color: var(--llg4-oxblood);
}
.page--landlord-guide .llg4-notes details[open] summary::after { content: "\2212"; }
/* Two-up, so the evidence fills the band instead of leaving a bare row.
   The sources are shown, not hidden behind a closed disclosure. */
.page--landlord-guide .llg4-notes ul {
  list-style: none;
  margin: 0;
  padding: 0 1.1rem 1.1rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}
@media (max-width: 47.99em) {
  .page--landlord-guide .llg4-notes ul { grid-template-columns: 1fr; }
}
.page--landlord-guide .llg4-notes ul a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--llg4-tap);
  padding: 0.7rem 0.9rem;
  border-radius: var(--llg4-r-small);
  background: var(--llg4-oat);
  color: var(--llg4-ink);
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 700;
}
.page--landlord-guide .llg4-notes ul a::after { content: "\2197"; color: var(--llg4-oxblood); margin-left: auto; }
@media (hover: hover) {
  .page--landlord-guide .llg4-notes ul a:hover { background: #e7dcc7; }
}
@media (max-width: 61.99em) {
  .page--landlord-guide .llg4-notes { grid-template-columns: 1fr; }
}

/* ============================================ PAGE-SCOPED SHELL TWEAKS ==== */

/* ---- THE FLOATING SECTION PILL (hxnav) ----------------------------------
   These are the BASE styles, not just a recolour. The pill is not styled by
   dukes.css: the homepage gets it from home-2026.css, and this page had a
   copy inside landlord-guide-2026.css. When that sheet was dropped the pill
   fell back to an unstyled full-width list of underlined links. Ported here
   in full so llg4 stands alone.
   The active-link hook is `.is-on` (set by home-section-nav.mjs) - NOT
   aria-current and not .is-current. Styling the wrong hook silently does
   nothing, which is exactly how this shipped broken. */
.page--landlord-guide .hxnav {
  position: fixed;
  top: calc(var(--hxnav-seam, 65px) + 10px);
  left: 50%;
  z-index: 900;
  transform: translate(-50%, -14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease, transform 320ms var(--llg4-ease), top 240ms ease;
}
.page--landlord-guide .hxnav.is-in { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.page--landlord-guide .hxnav.is-docked { top: 10px; }

.page--landlord-guide .hxnav__list {
  position: relative;
  display: flex;
  margin: 0;
  padding: 4px;
  list-style: none;
  border-radius: 999px;
  background: rgb(13 29 49 / 72%);
  border: 1px solid rgb(251 248 242 / 16%);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: 0 18px 44px -20px rgb(4 12 22 / 72%);
}
.page--landlord-guide .hxnav [data-hxnav-link] {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 40px;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  color: rgb(251 248 242 / 88%);
  font-size: 0.875rem;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
  transition: color 200ms ease;
}
.page--landlord-guide .hxnav [data-hxnav-link] i {
  font-style: normal;
  font-size: 0.875rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums lining-nums;
  color: rgb(197 166 106 / 88%);
  transition: color 200ms ease;
}
.page--landlord-guide .hxnav [data-hxnav-link].is-on { color: var(--llg4-ink); }
.page--landlord-guide .hxnav [data-hxnav-link].is-on i { color: var(--llg4-oxblood); }
.page--landlord-guide .hxnav [data-hxnav-link]:focus-visible { outline: 3px solid #e0b978; outline-offset: 2px; }

.page--landlord-guide .hxnav__cursor {
  position: absolute;
  z-index: 0;
  top: 4px;
  left: 0;
  height: calc(100% - 8px);
  width: 0;
  border-radius: 999px;
  background: var(--llg4-cream);
  opacity: 0;
  transition: transform 420ms var(--llg4-ease), width 420ms var(--llg4-ease), opacity 200ms ease;
  pointer-events: none;
}
.page--landlord-guide .hxnav__curli { display: contents; }

/* phones: numerals only, so the pill stays genuinely small */
@media (max-width: 47.99em) {
  .page--landlord-guide .hxnav [data-hxnav-link] { padding: 0.5rem 0.7rem; }
  .page--landlord-guide .hxnav [data-hxnav-link] span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .page--landlord-guide .hxnav,
  .page--landlord-guide .hxnav__cursor { transition: none; }
}

/* ---- THE ASSISTANT BAND -------------------------------------------------
   Carried over from llg3 round 4 (compact band, routes as rounded cards)
   with this page's night anchor in place of the teal. Scoped to the
   .reception subtree ONLY: --bottle feeds buttons and nav sitewide, so
   setting it on the body would repaint the whole site (llg3 round 2 trap). */
.page--landlord-guide .reception { --bottle: var(--llg4-night); }
.page--landlord-guide .reception__inner { padding-block: clamp(2.25rem, 4.5vw, 4rem); }
.page--landlord-guide .reception .h-section { font-size: clamp(1.7rem, 2.6vw, 2.6rem); }
.page--landlord-guide .reception__notice { font-size: 0.92rem; }
.page--landlord-guide .reception__routes {
  border-top: 0;
  display: grid;
  gap: 0.6rem;
}
.page--landlord-guide .reception__route {
  border-bottom: 0;
  border-radius: var(--llg4-r-small);
  border: 1px solid rgb(251 248 242 / 16%);
  background: rgb(251 248 242 / 6%);
}
.page--landlord-guide .reception__summary { padding-inline: 1rem; }
.page--landlord-guide .reception__body { padding-inline: 1rem; }

/* THE DEAD COLUMN (Authority 4.12). The band is a two-column grid: intro
   left, the five journey disclosures right, and the contact rail spanning
   both columns on a second row. The intro is 219px against a 368px row, so
   the left column sat 149px empty. The rail moves INTO that column under
   the intro, and the journey routes span both rows. Nothing in the shared
   markup changes - this is placement only, page-scoped. */
.page--landlord-guide .reception__inner {
  align-items: start;
  /* the shared band sets a single 64px gap; that is right BETWEEN the
     columns and far too much between the intro and the rail beneath it */
  row-gap: clamp(1.1rem, 1.8vw, 1.6rem);
  /* a little more width in the left lane so the Instagram handle fits on
     one line in the 2-up rail */
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}
.page--landlord-guide .reception__routes:not(.reception__routes--safe) {
  grid-column: 2;
  grid-row: 1 / span 2;
}
.page--landlord-guide .reception__routes--safe {
  grid-column: 1;
  grid-row: 2;
  margin-top: clamp(1rem, 2vw, 1.6rem);
}
/* four routes across a 485px lane would be 120px each, so the rail goes 2-up */
.page--landlord-guide .reception__routes--safe .crail__list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  display: grid;
  gap: 0.6rem;
}
/* grid children default to min-width:auto, so a long value (the Instagram
   handle) pushed its card wider than the track instead of wrapping */
.page--landlord-guide .reception__routes--safe :where(.crail__item, .crail__link, .crail__link > *) {
  min-width: 0;
}
@media (max-width: 61.99em) {
  .page--landlord-guide .reception__routes:not(.reception__routes--safe),
  .page--landlord-guide .reception__routes--safe { grid-column: auto; grid-row: auto; }
  .page--landlord-guide .reception__routes--safe .crail__list { grid-template-columns: 1fr; }
}

/* ---- THE CONTACT RAIL — new colour, new motion --------------------------
   Aarav, 20 Aug: "get rid of the green animation, use a different one and a
   different colour too".

   WAS: `.crail__fill` is a plate inside a 48px circle whose HEIGHT animates
   0 -> 100%, so the colour floods up from the bottom edge. Its default is
   --contact-forest, and the llg3 round-2 per-route set re-introduced green
   again on WhatsApp (#25d366). Both are gone.

   NOW: one BRASS fill for every route (the page's metal, and the only
   accent that is not already carrying a job here), opening as an IRIS from
   the centre via clip-path rather than rising from the bottom. clip-path
   composites, needs no height animation, and keeps a true circle at every
   frame - which is exactly why the base sheet had to animate height instead
   of scaleY. The glyph flips to night so it stays legible on the metal. */
.page--landlord-guide .crail__fill {
  height: 100%;
  background: linear-gradient(150deg, #dcbb7d 0%, var(--llg4-brass) 45%, #a8843f 100%);
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 420ms var(--llg4-ease);
}
@media (hover: hover) and (pointer: fine) {
  .page--landlord-guide .crail__link:hover .crail__fill { clip-path: circle(75% at 50% 50%); }
  .page--landlord-guide .crail__link:hover {
    border-color: var(--llg4-brass);
    color: var(--llg4-night);
  }
}
.page--landlord-guide .crail__link:focus-visible .crail__fill { clip-path: circle(75% at 50% 50%); }
.page--landlord-guide .crail__link:focus-visible {
  outline-color: var(--llg4-brass);
  border-color: var(--llg4-brass);
  color: var(--llg4-night);
}
@media (prefers-reduced-motion: reduce) {
  .page--landlord-guide .crail__fill { transition: none; }
}


/* ==========================================================================
   llg4-11 — "get rid of these generic big white boxes, we don't need them
   here, it reduces the professionalism" (Aarav, 20 Aug)
   ========================================================================== */

/* THE HERO SPECIMEN IS GONE ENTIRELY (Aarav, 20 Aug): first the box came
   off, then the text itself - "too much text, swap it for an image holder".
   The hero's second column is now a crown placeholder. All .llg4-spec rules
   were removed with it rather than left as dead CSS. */
/* oxblood is unreadable on the night ground; the emphasis takes the metal */

/* THE OPEN STAGE PLATE COMES OFF PURE WHITE.
   Three 980x309 cream plates were the largest light surfaces on the page.
   Cream keeps its job - it still marks the decision you are reading - but it
   does it in warm parchment now, so nothing on this page is a big white box.
   The closed plates keep their chapter tint, so the open/closed signal is
   unchanged. */
.page--landlord-guide .llgx-stage[open] { background: var(--llg4-parchment); }

/* The hero's photograph position. Capped so an awaiting-art plate never makes
   the hero taller than the copy beside it. */
.page--landlord-guide .llg4-slot--hero {
  width: 100%;
  max-width: 100%;
}
@media (max-width: 61.99em) {
  .page--landlord-guide .llg4-slot--hero { --slot-ar: 16 / 10; }
}

/* DIAGONAL TEXTURE REMOVED (Aarav, 20 Aug: "i don't like the lines that come
   diagonally, get rid of that everywhere on the page"). Three -45deg
   repeating-linear-gradient layers were carrying it: the hero band and both
   crown-placeholder variants. They are deleted, not overridden, so nothing
   re-inherits them. The only repeating gradient left on the page is the
   HORIZONTAL dashed rule on the "Confirm in writing" labels, which is a
   different device and was not part of the note. */

/* ==========================================================================
   llg4-14 — hero re-composed (Aarav, 20 Aug): "put the image on the left and
   the text on the right, make the text heading middle, make sure everything
   is aligned properly, and make the image take the whole box."
   ========================================================================== */

/* Media left, copy right. Done with `order`, not by moving the markup, so the
   <h1> stays first in the document for screen readers and search. */
.page--landlord-guide .llg4-hero__inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}
.page--landlord-guide .llg4-hero__copy { order: 2; }
.page--landlord-guide .llg4-slot--hero { order: 1; }

/* The copy is ONE centred lockup: kicker, title, statement, lead and both
   actions share a centre line, and the block centres vertically against the
   media beside it. Centring only the heading and leaving the rest ranged left
   is what would read as misaligned. */
.page--landlord-guide .llg4-hero__copy {
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
}
.page--landlord-guide .llg4-hero__lead { margin-inline: auto; }
.page--landlord-guide .llg4-hero__actions { justify-content: center; }
.page--landlord-guide .llg4-hero .llg4-kicker { justify-content: center; }

/* The image fills its box. The aspect-ratio is dropped so the plate takes the
   full height of the hero row rather than sitting as a short card with dead
   space above and below it; the min-height keeps it a hero on narrow screens
   where the copy alone would collapse it. The caption chip and ratio tag stay
   pinned to the bottom-left of the filled plate. */
.page--landlord-guide .llg4-slot--hero {
  aspect-ratio: auto;
  height: 100%;
  min-height: clamp(19rem, 30vw, 27rem);
}

@media (max-width: 61.99em) {
  .page--landlord-guide .llg4-hero__copy { order: 1; }
  .page--landlord-guide .llg4-slot--hero { order: 2; min-height: clamp(13rem, 46vw, 19rem); }
}

/* ==========================================================================
   HERO SLOT — placeholder chrome restored while it waits for art.

   A separate process re-injects `<style id="campaign-image-fill">` into this
   page (last seen 15:26) fitting generated .webp art to every named slot. It
   ends with a catch-all:
       [data-image-slot^="LANDLORD-GUIDE-"] > * { display: none !important }
   which hides the crown, caption chip and ratio tag on EVERY slot with that
   prefix - including ones it has no image for. LANDLORD-GUIDE-HERO is new,
   has no art yet, and was therefore rendering as a blank box.

   This override is deliberately narrow (the one slot) and deliberately
   temporary. WHEN `landlord-guide-hero-*.webp` exists and the fill block
   names LANDLORD-GUIDE-HERO, DELETE this rule - otherwise the chip will sit
   on top of the photograph.
   ========================================================================== */
.page--landlord-guide [data-image-slot="LANDLORD-GUIDE-HERO"] > * {
  display: revert !important;
}
.page--landlord-guide [data-image-slot="LANDLORD-GUIDE-HERO"] > .llg4-slot__crown {
  display: block !important;
}