/* Dukes Tenant Guide — tg9 damson island pass, 20 August 2026.
   Page-scoped by body class; the shared shell and every other route are untouched.
   Palette family: DUKES_DESIGN_AUTHORITY §3 — this page owns the damson pairing:
   deep damson anchor, heather/oat/sage supporting fields, cream plates, on the
   site island ground.
   Colour jobs: damson = decisive bands (hero, GOV.UK sources, contact);
   oxblood = actions and kickers only; brass/gold = identity accent on dark
   surfaces and the statutory cap stamps; heather/oat/sage = supporting fields.
   Devices this page owns: the statutory cap stamp on step plates, the
   alternating sticky chapter columns, and the 1 May seal lockup. */

.page--tenant-guide {
  /* ink */
  --tg9-ink: #221b20;
  --tg9-ink-soft: #55494f;
  /* damson — dark anchor: hero and contact */
  --tg9-damson: #3b2231;
  --tg9-damson-soft: #503043;
  /* the heather ladder — ONE family, stepped by depth (Aarav: never
     many colours at once) */
  --tg9-heather-deep: #dccfd9;
  /* premium white — plates only, one token site rule */
  --tg9-cream: #fbf8f2;
  /* warm paper — chapter 1 island */
  --tg9-paper: #f2ede4;
  /* supporting fields — damson-tinted heather + warm paper only */
  --tg9-heather: #e7dfe6;
  /* oxblood — actions and kickers. Nothing else. */
  --tg9-oxblood: #7b2430;
  --tg9-oxblood-dark: #5e1924;
  /* brass — identity accent on dark surfaces + cap stamps */
  --tg9-brass: #c5a66a;
  /* warm gold-cream — TEXT only on dark surfaces (row titles), never a
     plate background, so it doesn't break the one-white-token rule */
  --tg9-warm-gold: #f3e6d0;
  /* warm heather-pink — secondary TEXT on dark surfaces */
  --tg9-warm-heather: #e8d5df;
  /* placeholder plate tint — never white, so awaiting-art slots don't
     add to the cream count */
  --tg9-slot-tint: #e9dee6;
  /* rules */
  --tg9-rule: rgb(34 27 32 / 18%);
  --tg9-rule-dark: rgb(251 248 242 / 24%);
  /* geometry — the site radius regimes */
  --tg9-shell-hero: min(96vw, 1780px);
  --tg9-shell-wide: min(96vw, 1680px);
  --tg9-shell-mid: min(94vw, 1560px);
  --tg9-shell-tight: min(92vw, 1460px);
  --tg9-radius-island: 30px;
  --tg9-radius-plate: 22px;
  --tg9-radius-small: 14px;
  --tg9-tap: 48px;
  --tg9-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* the site island ground */
  background: linear-gradient(180deg, #dee9e7 0%, #d9e5e5 30%, #d9e5e5 100%);
  color: var(--tg9-ink);
}

.page--tenant-guide ::selection {
  background: var(--tg9-brass);
  color: var(--tg9-damson);
}

.page--tenant-guide :focus-visible {
  outline: 3px solid #f0bd77;
  outline-offset: 4px;
}

.page--tenant-guide .main {
  overflow: clip;
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  /* the dukes.css layer paints .main cream, which hides the island ground */
  background: transparent;
}

.page--tenant-guide .main h1,
.page--tenant-guide .main h2,
.page--tenant-guide .main h3 {
  text-wrap: balance;
}

/* The symbol sheet renders nothing itself. */
.page--tenant-guide .tg2-svg {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* Shared devices: kicker, actions, go-links, icons, islands           */
/* ------------------------------------------------------------------ */

.page--tenant-guide .tg9-kicker {
  margin: 0 0 0.7rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--tg9-oxblood);
}

.page--tenant-guide .tg9-kicker--dark { color: var(--tg9-brass); }

.page--tenant-guide .tg9-action {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: var(--tg9-tap);
  padding: 0.7rem 1.45rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 200ms var(--tg9-ease), color 200ms var(--tg9-ease), border-color 200ms var(--tg9-ease), transform 200ms var(--tg9-ease);
}

/* Primary on light ground: oxblood, the action colour. */
.page--tenant-guide .tg9-action--primary {
  background: var(--tg9-oxblood);
  color: var(--tg9-cream);
}

/* Primary on the dark islands: a cream plate button. */
.page--tenant-guide .tg9-action--light {
  background: var(--tg9-cream);
  color: var(--tg9-damson);
}

/* Quiet on the dark islands: outline only. */
.page--tenant-guide .tg9-action--quiet {
  background: transparent;
  color: var(--tg9-cream);
  border-color: var(--tg9-rule-dark);
}

@media (hover: hover) {
  .page--tenant-guide .tg9-action--primary:hover { background: var(--tg9-oxblood-dark); transform: translateY(-1px); }
  .page--tenant-guide .tg9-action--light:hover { background: #fff; transform: translateY(-1px); }
  .page--tenant-guide .tg9-action--quiet:hover { border-color: var(--tg9-cream); transform: translateY(-1px); }
}

.page--tenant-guide .tg2-golink {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: var(--tg9-tap);
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  border: 1.5px solid rgb(123 36 48 / 35%);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--tg9-oxblood);
  text-decoration: none;
  transition: border-color 200ms var(--tg9-ease), background-color 200ms var(--tg9-ease);
}

@media (hover: hover) {
  .page--tenant-guide .tg2-golink:hover {
    border-color: var(--tg9-oxblood);
    background: rgb(123 36 48 / 7%);
  }
}

.page--tenant-guide .tg2-icon {
  display: inline-grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  color: currentColor;
}

.page--tenant-guide .tg2-icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

/* Islands: the page is a column of rounded islands on the shared ground. */
.page--tenant-guide .tg9-island {
  margin: clamp(2.4rem, 4vw, 4.2rem) auto 0;
  border-radius: var(--tg9-radius-island);
  box-shadow: 0 34px 74px -52px rgb(34 27 32 / 45%);
}

/* ------------------------------------------------------------------ */
/* The floating section pill — the homepage hxnav, copied verbatim     */
/* (home-hero-2026.css rev 10.5 + rev 34), scoped to this page.        */
/* Dark glass; exists only below the hero; the cursor glides to the    */
/* live section, follows the pointer on hover, returns on leave.       */
/* ------------------------------------------------------------------ */

.page--tenant-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 cubic-bezier(0.22, 1, 0.36, 1), top 240ms ease;
}
.page--tenant-guide .hxnav.is-in { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.page--tenant-guide .hxnav.is-docked { top: 10px; }

.page--tenant-guide .hxnav__list {
  position: relative;
  display: flex;
  margin: 0;
  padding: 4px;
  list-style: none;
  border-radius: 999px;
  background: rgba(14, 26, 21, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: 0 18px 44px -20px rgba(8, 16, 12, 0.7);
}
.page--tenant-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: rgba(244, 238, 227, 0.88);
  font-size: 0.875rem;
  font-weight: 750;
  text-decoration: none;
  transition: color 200ms ease;
}
.page--tenant-guide .hxnav [data-hxnav-link] i {
  font-style: normal;
  font-size: 0.875rem;
  font-weight: 800;
  color: rgba(227, 201, 143, 0.85);
  transition: color 200ms ease;
}
.page--tenant-guide .hxnav [data-hxnav-link].is-on { color: #171a20; }
.page--tenant-guide .hxnav [data-hxnav-link].is-on i { color: #7b2430; }
.page--tenant-guide .hxnav [data-hxnav-link]:focus-visible { outline: 3px solid #f0bd77; outline-offset: 2px; }

.page--tenant-guide .hxnav__cursor {
  position: absolute;
  z-index: 0;
  top: 4px;
  left: 0;
  height: calc(100% - 8px);
  width: 0;
  border-radius: 999px;
  background: #fbf8f2;
  opacity: 0;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), width 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
  pointer-events: none;
}

/* rev 34: the cursor lives inside the list under the links' z-index. */
.page--tenant-guide .hxnav__curli { display: contents; }

/* the pill's anchor targets land clear of header + pill */
.page--tenant-guide #tenant-route,
.page--tenant-guide #rent-phase-1,
.page--tenant-guide #rules,
.page--tenant-guide #answers,
.page--tenant-guide #sources,
.page--tenant-guide #rent-contact {
  scroll-margin-top: calc(var(--head-h, 65px) + 74px);
}

/* phones: numbers only, so the pill stays genuinely small */
@media (max-width: 47.99em) {
  .page--tenant-guide .hxnav [data-hxnav-link] { padding: 0.5rem 0.7rem; min-height: 40px; }
  .page--tenant-guide .hxnav [data-hxnav-link] span { display: none; }
}

/* rev 34: short landscape phones keep the reading line clear */
@media (max-height: 480px) {
  .page--tenant-guide .hxnav { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .page--tenant-guide .hxnav,
  .page--tenant-guide .hxnav__cursor,
  .page--tenant-guide .hxnav [data-hxnav-link] { transition: none !important; }
}

/* ------------------------------------------------------------------ */
/* 1. Hero — the damson island                                         */
/* ------------------------------------------------------------------ */

/* Round 4: the photograph (film-to-be) covers the WHOLE rounded box;
   the copy sits centred on top under a damson veil. */
.page--tenant-guide .tg9-hero {
  position: relative;
  overflow: hidden;
  inline-size: var(--tg9-shell-hero);
  margin-top: 1.1rem;
  /* the signature asymmetric corner, this page's one identity cut */
  border-radius: 30px 30px 84px 30px;
  background: var(--tg9-damson);
  color: var(--tg9-cream);
  min-height: clamp(28rem, 64vh, 42rem);
  display: grid;
  place-items: center;
  padding: clamp(2.2rem, 4.5vw, 4.5rem) clamp(1.4rem, 3vw, 3rem);
}

.page--tenant-guide .tg9-hero__canvas {
  position: absolute;
  inset: 0;
  margin: 0;
}

.page--tenant-guide .tg9-hero__canvas img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The veil earns the centred cream copy its contrast. Round 6 (Aarav):
   heavier — the white-walled room was washing the whole box pale, so the
   damson now clearly owns the surface and the film reads through it. */
.page--tenant-guide .tg9-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(46 26 38 / 93%) 0%, rgb(46 26 38 / 84%) 45%, rgb(59 34 49 / 93%) 100%);
}

.page--tenant-guide .tg9-hero__lead {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 62ch;
}

.page--tenant-guide .tg9-hero__title {
  margin: 0 auto 1rem;
  font-family: Gloock, Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.15rem, 4.4vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  max-width: 18ch;
}

.page--tenant-guide .tg9-hero__copy {
  margin: 0 auto 1.6rem;
  font-size: clamp(1rem, 1.25vw, 1.13rem);
  line-height: 1.6;
  color: rgb(251 248 242 / 92%);
  max-width: 46ch;
}

.page--tenant-guide .tg9-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin: 0;
}

.page--tenant-guide .tg9-hero__scope {
  margin: 1.2rem 0 0;
  font-size: 0.875rem;
  color: rgb(251 248 242 / 78%);
}

/* ------------------------------------------------------------------ */
/* 2. Start where you are — the route island                           */
/* ------------------------------------------------------------------ */

.page--tenant-guide .tg9-route {
  inline-size: var(--tg9-shell-mid);
  background: var(--tg9-cream);
  padding: clamp(1.8rem, 3.2vw, 3rem) clamp(1.2rem, 2.6vw, 2.6rem) clamp(1.6rem, 2.8vw, 2.6rem);
  scroll-margin-top: calc(var(--head-h, 79px) + 1.5rem);
}

.page--tenant-guide .tg9-route__head {
  text-align: center;
  margin: 0 auto clamp(1.4rem, 2.4vw, 2.2rem);
  max-width: 60ch;
}

.page--tenant-guide .tg9-route__title {
  margin: 0 0 0.7rem;
  font-family: Gloock, Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
}

.page--tenant-guide .tg9-route__copy {
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tg9-ink-soft);
  max-width: 46ch;
}

.page--tenant-guide .tg2-rail {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.8rem, 1.4vw, 1.2rem);
}

.page--tenant-guide .tg2-rail__plate {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 0.3rem;
  min-height: 100%;
  padding: 1.3rem 1.4rem 1.2rem;
  border-radius: var(--tg9-radius-plate);
  border: 1px solid var(--tg9-rule);
  text-decoration: none;
  color: var(--tg9-ink);
  transition: transform 220ms var(--tg9-ease), box-shadow 220ms var(--tg9-ease);
}

/* The three chapter fields cycle warm: paper, oat, sage. */
.page--tenant-guide .tg2-rail li:nth-child(1) .tg2-rail__plate { background: var(--tg9-heather); }
.page--tenant-guide .tg2-rail li:nth-child(2) .tg2-rail__plate { background: var(--tg9-paper); }
.page--tenant-guide .tg2-rail li:nth-child(3) .tg2-rail__plate { background: var(--tg9-heather-deep); }

@media (hover: hover) {
  .page--tenant-guide .tg2-rail__plate:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 44px -30px rgb(34 27 32 / 45%);
  }
}

.page--tenant-guide .tg2-rail__numeral {
  font-family: Gloock, Georgia, serif;
  font-size: clamp(2.1rem, 3vw, 2.7rem);
  line-height: 1;
  color: var(--tg9-oxblood);
}

.page--tenant-guide .tg2-rail__phase {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tg9-ink-soft);
}

.page--tenant-guide .tg2-rail__plate strong {
  font-family: Gloock, Georgia, serif;
  font-weight: 400;
  font-size: 1.35rem;
}

.page--tenant-guide .tg2-rail__steps {
  font-size: 0.9rem;
  color: var(--tg9-ink-soft);
}

.page--tenant-guide .tg2-rail__cue {
  align-self: end;
  justify-self: end;
  font-style: normal;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--tg9-oxblood);
}

/* ------------------------------------------------------------------ */
/* 3. The journey — three chapter islands, alternating columns         */
/* ------------------------------------------------------------------ */

/* Round 5 (Aarav, the sellers-guide grammar): the side column is retired.
   The chapter head sits centred ABOVE the steps and stays where it is;
   the step plates run full width below it. */
.page--tenant-guide .tg9-chapter {
  inline-size: var(--tg9-shell-wide);
  padding: clamp(1.8rem, 3.2vw, 3.2rem) clamp(1.2rem, 2.6vw, 2.8rem);
  scroll-margin-top: calc(var(--head-h, 79px) + 1.5rem);
}

.page--tenant-guide .tg9-chapter--heather { background: var(--tg9-heather); }
.page--tenant-guide .tg9-chapter--paper { background: var(--tg9-paper); }
.page--tenant-guide .tg9-chapter--plum { background: var(--tg9-heather-deep); }

.page--tenant-guide .tg9-chapter__head {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  text-align: center;
  max-width: 72ch;
  margin: 0 auto clamp(1.6rem, 2.6vw, 2.6rem);
}

.page--tenant-guide .tg9-chapter__count {
  margin: 0;
  font-family: Gloock, Georgia, serif;
  font-size: clamp(2.4rem, 3.6vw, 3.4rem);
  line-height: 1;
  color: var(--tg9-oxblood);
}

.page--tenant-guide .tg9-chapter__title {
  margin: 0;
  font-family: Gloock, Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
}

.page--tenant-guide .tg9-chapter__summary {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--tg9-ink-soft);
  max-width: 52ch;
}

.page--tenant-guide .tg2-chapter__index {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
}

.page--tenant-guide .tg2-chapter__index a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.6rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--tg9-radius-small);
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--tg9-ink);
  text-decoration: none;
  border: 1px solid transparent;
}

.page--tenant-guide .tg2-chapter__index a span {
  font-family: Gloock, Georgia, serif;
  font-size: 0.9rem;
  color: var(--tg9-oxblood);
}

.page--tenant-guide .tg2-chapter__index a.is-here {
  background: var(--tg9-cream);
  border-color: var(--tg9-rule);
}

@media (hover: hover) {
  .page--tenant-guide .tg2-chapter__index a:hover { background: var(--tg9-cream); }
}

/* Steps: cream plates on the chapter field. Every step carries its OWN
   image column (Aarav, 20 Aug: each text gets its own image, with a wide
   gap between them), alternating sides down the chapter. */
.page--tenant-guide .tg2-steps {
  display: grid;
  gap: clamp(0.9rem, 1.6vw, 1.3rem);
  min-width: 0;
}

/* Round 10: the buyers-guide deck grammar. One cream deck per chapter:
   a single tall chapter photograph beside a stack of compact step boxes,
   each step its OWN box, clearly separated. Details collapse behind
   "Show what to do". */
.page--tenant-guide .tg9-chapter__deck {
  display: grid;
  grid-template-columns: clamp(18rem, 24vw, 25rem) minmax(0, 1fr);
  gap: clamp(1.2rem, 2.2vw, 2rem);
  align-items: stretch;
  padding: clamp(1.2rem, 2.2vw, 2rem);
  border-radius: var(--tg9-radius-plate);
  border: 1px solid var(--tg9-rule);
  background: var(--tg9-cream);
}

/* Chapter 02 flips: the photograph crosses to the right. */
.page--tenant-guide .tg9-chapter--flip .tg9-chapter__deck {
  grid-template-columns: minmax(0, 1fr) clamp(18rem, 24vw, 25rem);
}

.page--tenant-guide .tg9-chapter--flip .tg9-chapter__deck .tg2-slot--chapter { order: 2; }

.page--tenant-guide .tg2-slot--chapter {
  height: 100%;
  min-height: 26rem;
}

.page--tenant-guide .tg2-steps {
  display: grid;
  gap: clamp(0.9rem, 1.5vw, 1.2rem);
  /* Centred, not top-pinned: when a chapter has fewer steps than the
     image column is tall (chapter 3's two boxes beside the 4:5 photo),
     the boxes sit toward the middle of the image instead of leaving the
     whole gap stranded underneath. */
  align-content: center;
  min-width: 0;
}

/* Each step is its own box, tinted with its chapter's field so it reads
   apart from the cream deck. */
.page--tenant-guide .tg2-step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(1rem, 1.8vw, 1.5rem);
  align-items: start;
  padding: clamp(1.1rem, 1.8vw, 1.5rem) clamp(1.1rem, 2vw, 1.7rem);
  border-radius: var(--tg9-radius-small);
  border: 1px solid var(--tg9-rule);
  background: var(--tg9-paper);
  scroll-margin-top: calc(var(--head-h, 79px) + 5.5rem);
}

.page--tenant-guide .tg9-chapter--heather .tg2-step { background: var(--tg9-heather); }
.page--tenant-guide .tg9-chapter--plum .tg2-step { background: var(--tg9-heather-deep); }

.page--tenant-guide .tg2-step__spine {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.4rem;
}

.page--tenant-guide .tg2-step__numeral {
  margin: 0;
  font-family: Gloock, Georgia, serif;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--tg9-oxblood);
}

.page--tenant-guide .tg2-step__spine .tg2-icon {
  color: var(--tg9-ink-soft);
}

.page--tenant-guide .tg2-step__body { min-width: 0; }

.page--tenant-guide .tg2-step__body h3 {
  margin: 0.1rem 0 0.5rem;
  font-family: Gloock, Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
}

.page--tenant-guide .tg2-step__answer {
  margin: 0 0 0.8rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tg9-ink);
  max-width: none;
}

.page--tenant-guide .tg2-step__facts {
  margin: 0 0 0.9rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
}

.page--tenant-guide .tg2-step__facts li {
  position: relative;
  padding-left: 1.15rem;
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--tg9-ink-soft);
  max-width: none;
}

.page--tenant-guide .tg2-step__facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 2px;
  background: var(--tg9-brass);
}

/* THE PAGE'S OWN DEVICE: the statutory cap stamp. A brass-ruled tab
   carrying the legal figure the step turns on. */
.page--tenant-guide .tg2-figure {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 0.9rem;
  padding: 0.5rem 0.95rem;
  border: 1.5px solid var(--tg9-brass);
  border-radius: var(--tg9-radius-small);
  background: rgb(197 166 106 / 10%);
}

.page--tenant-guide .tg2-figure strong {
  font-family: Gloock, Georgia, serif;
  font-weight: 400;
  font-size: 1.35rem;
  color: var(--tg9-damson);
}

.page--tenant-guide .tg2-figure span {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tg9-ink-soft);
}

/* The practical-detail disclosure. */
.page--tenant-guide .tg2-step details { margin-top: 0.2rem; }

/* Inside the disclosure, the facts open the detail block. */
.page--tenant-guide .tg2-step details .tg2-step__facts { margin: 1.1rem 0 0.9rem; }
.page--tenant-guide .tg2-step details .tg2-figure { margin: 0 0 0.4rem; }

.page--tenant-guide .tg2-step summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--tg9-tap);
  padding: 0.4rem 1.05rem;
  border-radius: 999px;
  border: 1.5px solid rgb(123 36 48 / 35%);
  cursor: pointer;
  list-style: none;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--tg9-oxblood);
  transition: border-color 200ms var(--tg9-ease), background-color 200ms var(--tg9-ease);
}

.page--tenant-guide .tg2-step summary::-webkit-details-marker { display: none; }

.page--tenant-guide .tg2-step summary::after {
  content: "+";
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
}

.page--tenant-guide .tg2-step details[open] summary::after { content: "\2212"; }

@media (hover: hover) {
  .page--tenant-guide .tg2-step summary:hover {
    border-color: var(--tg9-oxblood);
    background: rgb(123 36 48 / 7%);
  }
}

.page--tenant-guide .tg2-step__close { display: none; }
.page--tenant-guide .tg2-step details[open] .tg2-step__read { display: none; }
.page--tenant-guide .tg2-step details[open] .tg2-step__close { display: inline; }

.page--tenant-guide .tg2-step__points {
  margin: 1rem 0 0;
  display: grid;
  gap: 0;
  animation: tg9-open 240ms var(--tg9-ease);
}

@keyframes tg9-open {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.page--tenant-guide .tg2-step__points > div {
  display: grid;
  grid-template-columns: minmax(8rem, 0.34fr) minmax(0, 1fr);
  gap: 0.35rem 1.2rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--tg9-rule);
}

.page--tenant-guide .tg2-step__points dt {
  font-family: Gloock, Georgia, serif;
  font-size: 1.02rem;
  color: var(--tg9-ink);
}

.page--tenant-guide .tg2-step__points dd {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--tg9-ink-soft);
  max-width: none;
}

.page--tenant-guide .tg2-step__action { margin: 0.9rem 0 0; }

/* ------------------------------------------------------------------ */
/* 4. The 1 May 2026 changes — heather island, the single seal moment  */
/* ------------------------------------------------------------------ */

.page--tenant-guide .tg9-change {
  inline-size: var(--tg9-shell-tight);
  background: var(--tg9-paper);
  padding: clamp(1.8rem, 3.2vw, 3rem) clamp(1.2rem, 2.6vw, 2.6rem);
  scroll-margin-top: calc(var(--head-h, 79px) + 1.5rem);
}

/* Round 12/13: symmetric composition — centred head with the seal, then
   a 3x2 grid, every cell the SAME height (grid-auto-rows, not stretch-to-
   tallest-sibling, which is what inflated row 2 in round 12). */
.page--tenant-guide .tg9-change__head {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  text-align: center;
  max-width: 72ch;
  margin: 0 auto clamp(1.6rem, 2.6vw, 2.6rem);
}

/* The seal: this page's ONE crown moment outside the placeholders. */
.page--tenant-guide .tg2-seal {
  display: inline-grid;
  justify-items: center;
  gap: 0.15rem;
  margin-bottom: 0.5rem;
  padding: 1.05rem 1.3rem 0.95rem;
  border-radius: var(--tg9-radius-plate);
  border: 1.5px solid var(--tg9-brass);
  background: var(--tg9-cream);
}

.page--tenant-guide .tg2-seal__mark {
  width: 3.4rem;
  height: auto;
  margin-bottom: 0.35rem;
}

.page--tenant-guide .tg2-seal strong {
  font-family: Gloock, Georgia, serif;
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--tg9-damson);
}

.page--tenant-guide .tg2-seal span {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tg9-oxblood);
}

.page--tenant-guide .tg2-change__title {
  margin: 0;
  font-family: Gloock, Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
}

.page--tenant-guide .tg2-change__intro {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tg9-ink-soft);
  max-width: 52ch;
}

.page--tenant-guide .tg2-change__chips {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: clamp(0.8rem, 1.4vw, 1.1rem);
}

/* Tinted, never white — heather chips on the paper island. */
.page--tenant-guide .tg2-change__chips li {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 0.35rem;
  padding: 1.1rem 1.2rem;
  border-radius: var(--tg9-radius-plate);
  border: 1px solid var(--tg9-rule);
  background: var(--tg9-heather);
}

/* The sixth cell carries the awaited photograph, one step deeper. It
   fills its cell exactly — grid-auto-rows:1fr makes every row (and so
   every cell) the same height, so the image never forces the text chips
   to stretch into empty space. */
/* Higher specificity than ".tg2-change__chips li" (which sets
   display:grid for the text chips) so this actually overrides it. */
.page--tenant-guide .tg2-change__chips li.tg2-change__figli {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  min-height: 0;
}

.page--tenant-guide .tg2-slot--change {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  border-radius: var(--tg9-radius-plate);
  background: var(--tg9-heather-deep);
}

.page--tenant-guide .tg2-change__chips span {
  font-family: Gloock, Georgia, serif;
  font-size: 1rem;
  color: var(--tg9-oxblood);
}

.page--tenant-guide .tg2-change__chips strong {
  font-family: Gloock, Georgia, serif;
  font-weight: 400;
  font-size: 1.2rem;
}

.page--tenant-guide .tg2-change__chips p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--tg9-ink-soft);
  max-width: 52ch;
}

.page--tenant-guide .tg2-change__boundary { margin: clamp(1.2rem, 2vw, 1.8rem) 0 0; }

.page--tenant-guide .tg2-assure {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1.15rem;
  border-radius: var(--tg9-radius-small);
  border: 1px solid var(--tg9-rule);
  background: var(--tg9-heather);
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--tg9-ink-soft);
}

.page--tenant-guide .tg2-assure svg {
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
  color: var(--tg9-oxblood);
}

/* ------------------------------------------------------------------ */
/* 5. Quick answers — cream island, sticky head + ledger               */
/* ------------------------------------------------------------------ */

.page--tenant-guide .tg9-answers {
  inline-size: var(--tg9-shell-wide);
  background: var(--tg9-heather);
  padding: clamp(1.8rem, 3.2vw, 3rem) clamp(1.2rem, 2.6vw, 2.6rem);
  scroll-margin-top: calc(var(--head-h, 79px) + 1.5rem);
}

/* Head centred, matching the chapter grammar. */
.page--tenant-guide .tg9-answers__head {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  text-align: center;
  max-width: 72ch;
  margin: 0 auto clamp(1.6rem, 2.6vw, 2.6rem);
}

.page--tenant-guide .tg9-answers__title {
  margin: 0;
  font-family: Gloock, Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
}

.page--tenant-guide .tg9-answers__head > p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--tg9-ink-soft);
  max-width: 52ch;
}

/* One tall team plate beside the answers plate. */
.page--tenant-guide .tg9-answers__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.32fr) minmax(0, 0.68fr);
  gap: clamp(1.2rem, 2.4vw, 2.4rem);
  align-items: stretch;
}

/* Round 16: the left column is composed, not one empty stretched canvas —
   the placeholder keeps its own portrait size, and a real contact card
   fills the height below it. */
.page--tenant-guide .tg9-answers__side {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 1.8vw, 1.4rem);
}

.page--tenant-guide .tg2-slot--answers {
  width: 100%;
  border-radius: var(--tg9-radius-plate);
  background: var(--tg9-slot-tint);
}

.page--tenant-guide .tg9-answers__cta {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  flex: 1;
  min-height: 0;
  padding: clamp(1.1rem, 1.8vw, 1.5rem);
  border-radius: var(--tg9-radius-plate);
  border: 1px solid var(--tg9-rule);
  background: var(--tg9-cream);
}

.page--tenant-guide .tg9-answers__cta strong {
  font-family: Gloock, Georgia, serif;
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--tg9-ink);
}

.page--tenant-guide .tg9-answers__cta p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--tg9-ink-soft);
}

.page--tenant-guide .tg9-answers__cta .tg2-golink { justify-self: start; margin-top: 0.2rem; }

.page--tenant-guide .tg2-answers {
  margin: 0;
  /* Narrower than its grid track and pinned to the left edge, so it sits
     close to the image (the grid gap keeps the separation) instead of
     stretching into a wide white slab. */
  max-width: min(44rem, 100%);
  justify-self: start;
  padding: clamp(1rem, 1.8vw, 1.6rem) clamp(1.2rem, 2.2vw, 2.2rem);
  list-style: none;
  background: var(--tg9-cream);
  border: 1px solid var(--tg9-rule);
  border-radius: var(--tg9-radius-plate);
}

.page--tenant-guide .tg2-answer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "n body" "n link";
  gap: 0.4rem 1.2rem;
  padding: clamp(1.1rem, 1.8vw, 1.5rem) 0.4rem;
  border-top: 1px solid var(--tg9-rule);
  scroll-margin-top: calc(var(--head-h, 79px) + 5rem);
}

.page--tenant-guide .tg2-answer:first-child { border-top: 0; padding-top: 0.3rem; }

.page--tenant-guide .tg2-answer__numeral {
  grid-area: n;
  margin: 0;
  font-family: Gloock, Georgia, serif;
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--tg9-oxblood);
}

.page--tenant-guide .tg2-answer__body { grid-area: body; min-width: 0; }

.page--tenant-guide .tg2-answer__body h3 {
  margin: 0 0 0.4rem;
  font-family: Gloock, Georgia, serif;
  font-weight: 400;
  font-size: 1.25rem;
}

.page--tenant-guide .tg2-answer__body p {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--tg9-ink-soft);
  max-width: 56ch;
}

.page--tenant-guide .tg2-answer .tg2-golink {
  grid-area: link;
  justify-self: start;
}

/* ------------------------------------------------------------------ */
/* 6. GOV.UK sources — the second damson island                        */
/* ------------------------------------------------------------------ */

.page--tenant-guide .tg9-sources {
  inline-size: var(--tg9-shell-tight);
  background: var(--tg9-cream);
  color: var(--tg9-ink);
  padding: clamp(1.8rem, 3.2vw, 3rem) clamp(1.2rem, 2.6vw, 2.6rem);
  display: grid;
  grid-template-columns: minmax(0, 0.38fr) minmax(0, 0.62fr);
  gap: clamp(1.4rem, 2.6vw, 2.6rem);
  align-items: start;
  scroll-margin-top: calc(var(--head-h, 79px) + 1.5rem);
}

.page--tenant-guide .tg9-sources__side { position: static; }

.page--tenant-guide .tg9-sources__identity {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1rem;
}

.page--tenant-guide .tg9-sources__gov {
  padding: 0.45rem 0.8rem;
  border-radius: 8px;
  background: var(--tg9-damson);
  color: var(--tg9-cream);
  font-weight: 800;
  letter-spacing: 0.02em;
  font-size: 1.05rem;
}

.page--tenant-guide .tg9-sources__seal {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tg9-oxblood);
}

.page--tenant-guide .tg9-sources__title {
  margin: 0 0 0.7rem;
  font-family: Gloock, Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  max-width: 13ch;
}

.page--tenant-guide .tg9-sources__intro {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--tg9-ink-soft);
  max-width: 38ch;
}

/* Round 17: fills the foot of the side column with the page's own
   already-stated facts instead of leaving it empty. */
.page--tenant-guide .tg9-sources__stats {
  margin: 1.4rem 0 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--tg9-rule);
  list-style: none;
  display: grid;
  gap: 0.9rem;
}

.page--tenant-guide .tg9-sources__stats li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.page--tenant-guide .tg9-sources__stats strong {
  font-family: Gloock, Georgia, serif;
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--tg9-oxblood);
}

.page--tenant-guide .tg9-sources__stats span {
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--tg9-ink-soft);
  max-width: 20ch;
}

.page--tenant-guide .tg2-sources {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.7rem;
  min-width: 0;
}

.page--tenant-guide .tg2-source {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  min-height: var(--tg9-tap);
  padding: 1rem 1.2rem;
  border-radius: var(--tg9-radius-small);
  border: 0;
  background: linear-gradient(150deg, var(--tg9-damson-soft) 0%, var(--tg9-damson) 100%);
  color: var(--tg9-cream);
  text-decoration: none;
  transition: filter 200ms var(--tg9-ease);
}

@media (hover: hover) {
  .page--tenant-guide .tg2-source:hover { filter: brightness(1.12); }
}

.page--tenant-guide .tg2-source__n {
  font-family: Gloock, Georgia, serif;
  font-size: 1.15rem;
  color: var(--tg9-brass);
}

/* Round 17: no more flat white on the row — a warm gold title and a
   dusty-heather note, so the card reads composed rather than monotone. */
.page--tenant-guide .tg2-source strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--tg9-warm-gold);
}

.page--tenant-guide .tg2-source__note {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--tg9-warm-heather);
  max-width: 52ch;
}

.page--tenant-guide .tg2-outchip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1.5px solid rgb(197 166 106 / 55%);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--tg9-brass);
  white-space: nowrap;
}

.page--tenant-guide .tg2-sources__footrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.3rem 0;
  font-size: 0.875rem;
  color: var(--tg9-ink-soft);
}

.page--tenant-guide .tg2-sources__footrow svg {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--tg9-oxblood);
}

/* ------------------------------------------------------------------ */
/* 7. Contact — the closing damson island                              */
/* ------------------------------------------------------------------ */

.page--tenant-guide .tg9-contact {
  inline-size: var(--tg9-shell-wide);
  background: linear-gradient(150deg, var(--tg9-damson) 0%, #2e1a26 100%);
  color: var(--tg9-cream);
  padding: clamp(1.8rem, 3.2vw, 3.2rem) clamp(1.2rem, 2.6vw, 2.8rem);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.4rem, 2.8vw, 3rem);
  align-items: center;
  scroll-margin-top: calc(var(--head-h, 79px) + 1.5rem);
}

.page--tenant-guide .tg9-contact__title {
  margin: 0 0 0.8rem;
  font-family: Gloock, Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 3vw, 2.8rem);
}

.page--tenant-guide .tg9-contact__lead > p {
  margin: 0 0 1.2rem;
  font-size: 1rem;
  line-height: 1.6;
  color: rgb(251 248 242 / 84%);
  max-width: 46ch;
}

.page--tenant-guide .tg9-contact__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin: 0;
}

/* Round 17: the secondary action reads as its own colour, not the same
   white as the heading. */
.page--tenant-guide .tg9-contact__phone {
  display: inline-flex;
  align-items: center;
  min-height: var(--tg9-tap);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--tg9-brass);
  text-decoration: none;
  border-bottom: 1.5px solid rgb(197 166 106 / 45%);
}

@media (hover: hover) {
  .page--tenant-guide .tg9-contact__phone:hover { border-bottom-color: var(--tg9-brass); }
}

/* Round 17: fills the foot of the lead column with the real registered
   office instead of leaving it empty. */
.page--tenant-guide .tg9-contact__office {
  margin: 1.3rem 0 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--tg9-rule-dark);
  max-width: 32ch;
}

.page--tenant-guide .tg9-contact__office-label {
  margin: 0 0 0.25rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tg9-brass);
}

.page--tenant-guide .tg9-contact__office-addr {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgb(251 248 242 / 84%);
}

.page--tenant-guide .tg2-contact-block {
  padding: clamp(1.1rem, 1.8vw, 1.6rem);
  border-radius: var(--tg9-radius-plate);
  border: 1px solid var(--tg9-rule-dark);
  background: rgb(251 248 242 / 5%);
}

.page--tenant-guide .tg2-contact-intro {
  margin: 0 0 0.8rem;
  font-size: 0.9rem;
  color: rgb(251 248 242 / 74%);
}

.page--tenant-guide .tg2-contact-ledger {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.page--tenant-guide .tg2-contact-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  min-height: var(--tg9-tap);
  padding: 0.65rem 0.95rem;
  border-radius: var(--tg9-radius-small);
  border: 1px solid var(--tg9-rule-dark);
  background: rgb(251 248 242 / 6%);
  color: var(--tg9-cream);
  text-decoration: none;
  font-size: 0.94rem;
  transition: background-color 200ms var(--tg9-ease), border-color 200ms var(--tg9-ease);
}

@media (hover: hover) {
  .page--tenant-guide .tg2-contact-row:hover {
    background: rgb(251 248 242 / 12%);
    border-color: rgb(251 248 242 / 45%);
  }
}

.page--tenant-guide .tg2-contact-row .tg2-icon { color: var(--tg9-brass); }

/* Round 17: two-tone row — the label in brass, the actionable number/
   email kept cream for maximum legibility as the scannable value. */
.page--tenant-guide .tg2-contact-row__label { color: var(--tg9-brass); }

.page--tenant-guide .tg2-contact-row strong {
  font-weight: 700;
  white-space: nowrap;
  color: var(--tg9-cream);
}

.page--tenant-guide .tg2-follow {
  display: inline-flex;
  align-items: center;
  min-height: var(--tg9-tap);
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: rgb(251 248 242 / 74%);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

@media (hover: hover) {
  .page--tenant-guide .tg2-follow:hover { color: var(--tg9-cream); }
}

/* ------------------------------------------------------------------ */
/* Crown placeholders — label chip + ratio tag + brand crown watermark */
/* ------------------------------------------------------------------ */

.page--tenant-guide .tg2-slot {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--tg9-radius-small);
  border: 1px solid var(--tg9-rule);
  /* tinted, never white — the cream is reserved for the plates */
  background: var(--tg9-slot-tint);
  aspect-ratio: var(--tg9-slot-ratio, 4 / 3);
}

.page--tenant-guide .tg2-slot::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/brand/dukes-crown.png") center / 30% no-repeat;
  opacity: 0.14;
}

.page--tenant-guide .tg2-slot__chip {
  position: absolute;
  left: 0.7rem;
  bottom: 0.7rem;
  max-width: calc(100% - 1.4rem);
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--tg9-rule);
  background: rgb(251 248 242 / 92%);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--tg9-ink);
}

/* Chapter + change slots stretch to their columns; this re-assertion sits
   AFTER the base .tg2-slot rule so the ratio variable cannot re-inflate
   them (the round-6/round-12 blank-space bug — any new .tg2-slot variant
   MUST be added here, below the base rule). */
.page--tenant-guide .tg2-slot--chapter,
.page--tenant-guide .tg2-slot--change {
  aspect-ratio: auto;
}

/* Round 16: the team plate keeps a real portrait ratio instead of
   stretching to the tall answers list — also placed after the base rule
   so this explicit ratio isn't the one silently overridden. */
.page--tenant-guide .tg2-slot--answers {
  aspect-ratio: 4 / 5;
}

/* Deck slots carry the dark caption chip, like the buyers-guide. */
.page--tenant-guide .tg2-slot--chapter .tg2-slot__chip {
  background: var(--tg9-damson);
  border: 0;
  color: var(--tg9-cream);
}

.page--tenant-guide .tg2-slot__ratio {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: var(--tg9-damson);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--tg9-cream);
}

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 61.99em) {
  .page--tenant-guide .tg9-sources,
  .page--tenant-guide .tg9-contact {
    grid-template-columns: minmax(0, 1fr);
  }

  .page--tenant-guide .tg9-answers__grid { grid-template-columns: minmax(0, 1fr); }

  /* One column: the narrow left-pinned treatment was a two-column-only
     device. Full width once the image stacks above it. */
  .page--tenant-guide .tg2-answers { max-width: none; justify-self: stretch; }

  .page--tenant-guide .tg9-chapter__deck,
  .page--tenant-guide .tg9-chapter--flip .tg9-chapter__deck {
    grid-template-columns: minmax(0, 1fr);
  }

  .page--tenant-guide .tg9-chapter--flip .tg9-chapter__deck .tg2-slot--chapter { order: 0; }

  .page--tenant-guide .tg2-slot--chapter {
    height: auto;
    min-height: 0;
    aspect-ratio: 3 / 2;
  }

  .page--tenant-guide .tg2-slot--answers {
    height: auto;
    min-height: 0;
    aspect-ratio: 3 / 2;
  }

  .page--tenant-guide .tg9-hero { min-height: clamp(24rem, 70vh, 34rem); }

  .page--tenant-guide .tg2-rail { grid-template-columns: minmax(0, 1fr); }

  .page--tenant-guide .tg2-change__chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* The chapter photograph slot narrows on one-column layouts. */
  .page--tenant-guide .tg9-chapter__head .tg2-slot { max-width: 26rem; }
}

@media (max-width: 43.75em) {
  .page--tenant-guide .tg2-change__chips { grid-template-columns: minmax(0, 1fr); }

  .page--tenant-guide .tg2-slot--change { aspect-ratio: 3 / 2; height: auto; min-height: 0; }

  .page--tenant-guide .tg2-step {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
  }

  .page--tenant-guide .tg2-step__spine {
    grid-auto-flow: column;
    justify-content: start;
    align-items: center;
  }

  .page--tenant-guide .tg2-step__points > div { grid-template-columns: minmax(0, 1fr); }

  .page--tenant-guide .tg2-source {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .page--tenant-guide .tg2-source .tg2-outchip {
    grid-column: 2;
    justify-self: start;
  }

  .page--tenant-guide .tg2-answer {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "n" "body" "link";
    gap: 0.3rem;
  }

  .page--tenant-guide .tg2-contact-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .page--tenant-guide .tg2-contact-row strong {
    grid-column: 2;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page--tenant-guide .tg9-action,
  .page--tenant-guide .tg2-golink,
  .page--tenant-guide .tg2-rail__plate,
  .page--tenant-guide .tg2-source,
  .page--tenant-guide .tg2-contact-row,
  .page--tenant-guide .tg2-step summary {
    transition: none;
  }

  .page--tenant-guide .tg2-step__points { animation: none; }
}