/* Tenant Guide — heraldry pass, 18 August 2026 (tg2 layer).
   Loads AFTER dukes.css; every rebuilt component uses tg2- class names so
   nothing here depends on (or fights) the dukes.css / dukes-claude.css
   pair. The page's existing palette is kept — paper grounds, slate and
   deep-ink bands, soft gold — and three NEW devices are introduced with
   discipline, drawn as inline SVG (no clip art, nothing sourced):
     1. the crown mark: ghost watermark on placeholder plates and chapter
        crests on the rail and sticky chapter heads;
     2. the seal family: the 1 May 2026 date seal, official-source badges
        on the GOV.UK ledger, and designed assurance chips;
     3. the step icon set: eight 24-grid stroke icons so the route scans
        without reading.
   Grounding follows the valuation lesson: hairline + tight shadow on
   plates, never wide soft halos. Text contrast is designed to measure
   >= 4.5:1 (bronze ink #75563a on light grounds; gold #d9b48b reserved
   for dark grounds; --tg-brass never carries small text on paper).
   All targets >= 48px; hover effects gated behind (hover:hover); motion
   respects prefers-reduced-motion. */

.page--tenant-guide {
  --tg2-bronze-ink: #75563a;   /* text-grade bronze on paper grounds  */
  --tg2-gold: #d9b48b;         /* metal on slate / dark grounds       */
  --tg2-gold-soft: rgba(217, 180, 139, 0.34);
  --tg2-plate-line: 1px solid rgba(24, 34, 30, 0.16);
  --tg2-plate-line-dark: 1px solid rgba(251, 248, 242, 0.2);
  --tg2-plate-shadow: 0 6px 16px -10px rgba(21, 40, 32, 0.3);
  --tg2-tint: #ece4d4;         /* placeholder plate tint on light     */
  --tg2-tint-dark: rgba(251, 248, 242, 0.08);
}

/* --------------------------------------------------------------------------
   Device primitives
   ----------------------------------------------------------------------- */

.page--tenant-guide .tg2-svg { display: none; }

/* Branded placeholder standard: tinted plate, ghost crown, chip, ratio. */
.page--tenant-guide .tg2-slot {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  border: var(--tg2-plate-line);
  border-radius: 9px;
  background:
    linear-gradient(160deg, rgba(154, 116, 76, 0.1), rgba(154, 116, 76, 0) 55%),
    var(--tg2-tint);
}

.page--tenant-guide .tg2-slot__crown {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 52%;
  height: auto;
  color: var(--tg-brass, #9a744c);
  opacity: 0.16;
  transform: translate(-50%, -50%);
}

.page--tenant-guide .tg2-slot__chip {
  position: absolute;
  left: 0.55rem;
  bottom: 0.55rem;
  max-width: calc(100% - 3.4rem);
  padding: 0.28rem 0.6rem;
  border: 1px solid rgba(24, 34, 30, 0.2);
  border-radius: 999px;
  background: rgba(251, 248, 242, 0.94);
  color: #3f4a45;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page--tenant-guide .tg2-slot__ratio {
  position: absolute;
  right: 0.55rem;
  bottom: 0.55rem;
  padding: 0.28rem 0.5rem;
  border-radius: 7px;
  background: rgba(24, 34, 30, 0.72);
  color: #fbf8f2;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  line-height: 1.2;
}

/* Crest: crown in a ring — chapter mark. */
.page--tenant-guide .tg2-crest {
  display: inline-flex;
  width: 2.9rem;
  height: 2.9rem;
  align-items: center;
  justify-content: center;
  flex: none;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.page--tenant-guide .tg2-crest svg {
  width: 55%;
  height: auto;
}

/* The seal stamp was removed on Aarav's instruction (round 3b): it repeated
   the date its own heading carries. The crown device continues as crests,
   badges, watermarks and placeholder plates. */

/* Assurance chip: designed footnote. */
.page--tenant-guide .tg2-assure {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.55rem 1rem;
  border: var(--tg2-plate-line);
  border-radius: 999px;
  background: var(--tg-paper-bright, #fbf8f2);
  color: #3f4a45;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.35;
}

.page--tenant-guide .tg2-assure svg { width: 1.05rem; flex: none; color: var(--tg2-bronze-ink); }

/* Step icon chip. */
.page--tenant-guide .tg2-icon {
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  flex: none;
  border: 1.5px solid var(--tg2-bronze-ink);
  border-radius: 12px;
  background: var(--tg-paper-bright, #fbf8f2);
  color: var(--tg2-bronze-ink);
}

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

/* --------------------------------------------------------------------------
   1. Hero collage repairs (lead frame + caption kept; slots branded)
   ----------------------------------------------------------------------- */

.page--tenant-guide .tgx-hero__frame .tg2-slot { height: 100%; }
.page--tenant-guide .tgx-hero__frame--keys .tg2-slot { aspect-ratio: 4 / 5; }
.page--tenant-guide .tgx-hero__frame--door .tg2-slot { aspect-ratio: 1 / 1; }

/* The caption was set at 0.68rem in the base layer — below the metadata
   floor. Same voice, readable size. */
.page--tenant-guide .tgx-hero__caption { font-size: 0.875rem; }

/* --------------------------------------------------------------------------
   2. Start where you are — chapter plates on the rail
   ----------------------------------------------------------------------- */

.page--tenant-guide .tgx-route { padding-bottom: 0; }

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

/* The rail line runs BEHIND the plates: sequence, not separation. */
.page--tenant-guide .tg2-rail::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 2%;
  right: 2%;
  border-top: 2px dotted rgba(117, 86, 58, 0.4);
}

.page--tenant-guide .tg2-rail__plate {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.85rem;
  row-gap: 0.2rem;
  align-items: center;
  min-height: 48px;
  padding: clamp(1rem, 1.8vw, 1.4rem);
  border: var(--tg2-plate-line);
  border-radius: 12px 12px 26px 12px;
  background: var(--tg-paper-bright, #fbf8f2);
  box-shadow: var(--tg2-plate-shadow);
  color: var(--tg-ink, #18221e);
  text-decoration: none;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.page--tenant-guide .tg2-rail__plate .tg2-crest {
  grid-row: 1 / span 2;
  color: var(--tg2-bronze-ink);
}

.page--tenant-guide .tg2-rail__phase {
  color: var(--tg2-bronze-ink);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.page--tenant-guide .tg2-rail__plate strong {
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  font-weight: 500;
  line-height: 1.15;
}

.page--tenant-guide .tg2-rail__steps {
  grid-column: 2;
  color: var(--tg-muted, #59615d);
  font-size: 0.875rem;
  font-weight: 700;
}

@media (hover: hover) {
  .page--tenant-guide .tg2-rail__plate:hover {
    transform: translateY(-3px);
    border-color: var(--tg2-bronze-ink);
    box-shadow: 0 10px 22px -12px rgba(21, 40, 32, 0.42);
  }
}

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

/* --------------------------------------------------------------------------
   3. Chapters — sticky crest head + step plates with icons
   ----------------------------------------------------------------------- */

.page--tenant-guide .tg2-chapter__grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(1.6rem, 3.5vw, 3.5rem);
  align-items: start;
}

.page--tenant-guide .tg2-chapter__head {
  position: sticky;
  top: calc(var(--head-h, 79px) + 1.25rem);
  display: grid;
  gap: 0.7rem;
}

.page--tenant-guide .tg2-chapter__head .tg2-crest { width: 3.2rem; height: 3.2rem; }

.page--tenant-guide .tg2-chapter__count {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

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

.page--tenant-guide .tg2-chapter__index a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.45rem 0.6rem;
  border-radius: 9px;
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  color: inherit;
}

.page--tenant-guide .tg2-chapter__index a span {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

@media (hover: hover) {
  .page--tenant-guide .tg2-chapter__index a:hover { background: rgba(24, 34, 30, 0.07); }
  .page--tenant-guide .tgx-chapter--slate .tg2-chapter__index a:hover { background: rgba(251, 248, 242, 0.1); }
}

.page--tenant-guide .tg2-chapter__index a:focus-visible {
  outline: 3px solid #4d9ea5;
  outline-offset: 2px;
}

/* Step plates. */
.page--tenant-guide .tg2-steps { display: grid; gap: clamp(1rem, 1.8vw, 1.5rem); }

.page--tenant-guide .tg2-step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
  padding: clamp(1.3rem, 2.2vw, 1.9rem);
  border: var(--tg2-plate-line);
  border-radius: 14px 14px 30px 14px;
  background: var(--tg-paper-bright, #fbf8f2);
  box-shadow: var(--tg2-plate-shadow);
}

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

.page--tenant-guide .tg2-step__numeral {
  margin: 0;
  color: var(--tg2-bronze-ink);
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(2.4rem, 3.6vw, 3.4rem);
  font-weight: 500;
  line-height: 0.9;
}

.page--tenant-guide .tg2-step h3 {
  margin: 0;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.3rem, 1.9vw, 1.7rem);
  font-weight: 500;
  line-height: 1.15;
}

.page--tenant-guide .tg2-step__answer {
  max-width: 62ch;
  margin: 0.6rem 0 0;
  font-size: 1rem;
  line-height: 1.62;
}

.page--tenant-guide .tg2-step__facts {
  display: grid;
  gap: 0.45rem;
  max-width: 62ch;
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
  line-height: 1.55;
}

.page--tenant-guide .tg2-step__facts li {
  position: relative;
  padding-left: 1.35rem;
}

/* Proper markers, not dashes: a bronze lozenge. */
.page--tenant-guide .tg2-step__facts li::before {
  content: "";
  position: absolute;
  top: 0.52em;
  left: 0.15rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 2px;
  background: var(--tg2-bronze-ink);
  transform: rotate(45deg);
}

.page--tenant-guide .tgx-chapter--slate .tg2-step {
  background: rgba(251, 248, 242, 0.06);
  border: var(--tg2-plate-line-dark);
  box-shadow: none;
}

.page--tenant-guide .tgx-chapter--slate .tg2-step__numeral { color: var(--tg2-gold); }
.page--tenant-guide .tgx-chapter--slate .tg2-icon {
  border-color: var(--tg2-gold);
  background: transparent;
  color: var(--tg2-gold);
}
.page--tenant-guide .tgx-chapter--slate .tg2-step__facts li::before { background: var(--tg2-gold); }

/* Disclosure: an obvious pressable chip. */
.page--tenant-guide .tg2-step details { margin-top: 1.1rem; }

.page--tenant-guide .tg2-step summary {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.55rem 1.1rem;
  border: 1.5px solid var(--tg2-bronze-ink);
  border-radius: 999px;
  color: inherit;
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 750;
  list-style: none;
  transition: background 160ms ease;
}

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

.page--tenant-guide .tg2-step summary::after {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 160ms ease;
}

.page--tenant-guide .tg2-step details[open] summary::after {
  transform: rotate(225deg) translateY(2px);
}

@media (prefers-reduced-motion: reduce) {
  .page--tenant-guide .tg2-step summary::after { transition: none; }
}

@media (hover: hover) {
  .page--tenant-guide .tg2-step summary:hover { background: rgba(117, 86, 58, 0.12); }
  .page--tenant-guide .tgx-chapter--slate .tg2-step summary:hover { background: rgba(217, 180, 139, 0.14); }
}

.page--tenant-guide .tg2-step summary:focus-visible {
  outline: 3px solid #4d9ea5;
  outline-offset: 3px;
}

.page--tenant-guide .tgx-chapter--slate .tg2-step summary { border-color: var(--tg2-gold); }

.page--tenant-guide .tg2-step details[open] .tg2-step__read,
.page--tenant-guide .tg2-step details:not([open]) .tg2-step__close { display: none; }

.page--tenant-guide .tg2-step__points {
  display: grid;
  gap: 0.9rem;
  max-width: 62ch;
  margin: 1.1rem 0 0;
}

.page--tenant-guide .tg2-step__points dt {
  font-weight: 800;
  font-size: 0.95rem;
}

.page--tenant-guide .tg2-step__points dd {
  margin: 0.2rem 0 0;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   4. The rules changed — seal + five chips
   ----------------------------------------------------------------------- */

.page--tenant-guide .tg2-change {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.6rem, 3.5vw, 3.2rem);
  align-items: start;
}

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

.page--tenant-guide .tg2-change__chips li {
  display: grid;
  gap: 0.4rem;
  align-content: start;
  padding: clamp(0.9rem, 1.6vw, 1.25rem);
  border: var(--tg2-plate-line);
  border-radius: 12px 12px 22px 12px;
  background: var(--tg-paper-bright, #fbf8f2);
  box-shadow: var(--tg2-plate-shadow);
}

.page--tenant-guide .tg2-change__chips span {
  color: var(--tg2-bronze-ink);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.page--tenant-guide .tg2-change__chips strong {
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.02rem, 1.3vw, 1.18rem);
  font-weight: 500;
  line-height: 1.2;
}

.page--tenant-guide .tg2-change__chips p {
  margin: 0;
  color: var(--tg-muted, #59615d);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   5. Answers — full-width rows
   ----------------------------------------------------------------------- */

.page--tenant-guide .tg2-answers {
  display: grid;
  gap: clamp(0.9rem, 1.6vw, 1.3rem);
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}

.page--tenant-guide .tg2-answer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1rem, 2.2vw, 1.8rem);
  padding: clamp(1.2rem, 2.2vw, 1.8rem);
  border: var(--tg2-plate-line);
  border-radius: 14px 14px 28px 14px;
  background: var(--tg-paper-bright, #fbf8f2);
  box-shadow: var(--tg2-plate-shadow);
}

.page--tenant-guide .tg2-answer__numeral {
  margin: 0;
  color: var(--tg2-bronze-ink);
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.9rem, 2.8vw, 2.6rem);
  font-weight: 500;
  line-height: 0.9;
}

.page--tenant-guide .tg2-answer h3 {
  margin: 0;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.2rem, 1.7vw, 1.5rem);
  font-weight: 500;
  line-height: 1.2;
}

.page--tenant-guide .tg2-answer > div > p {
  max-width: 68ch;
  margin: 0.55rem 0 0;
  font-size: 1rem;
  line-height: 1.6;
}

.page--tenant-guide .tg2-golink {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  margin-top: 0.8rem;
  padding: 0.5rem 1.05rem;
  border: 1.5px solid var(--tg-forest-soft, #27463a);
  border-radius: 999px;
  color: var(--tg-forest-soft, #27463a);
  font-size: 0.9rem;
  font-weight: 750;
  text-decoration: none;
  transition: background 160ms ease;
}

@media (hover: hover) {
  .page--tenant-guide .tg2-golink:hover { background: rgba(39, 70, 58, 0.1); }
}

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

/* --------------------------------------------------------------------------
   6. GOV.UK band — pressable ledger with badges
   ----------------------------------------------------------------------- */

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

/* The base .tgx-sources section is a 2-col grid; the old list class carried
   its column placement. The tg2 ledger takes the wide column explicitly. */
.page--tenant-guide .tgx-sources .tg2-sources,
.page--tenant-guide .tgx-sources .tg2-sources-foot {
  grid-column: 2;
}

.page--tenant-guide .tg2-source {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(0.9rem, 1.8vw, 1.5rem);
  align-items: center;
  min-height: 64px;
  padding: clamp(0.9rem, 1.6vw, 1.2rem);
  border: var(--tg2-plate-line-dark);
  border-radius: 12px 12px 24px 12px;
  background: rgba(251, 248, 242, 0.06);
  color: inherit;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease;
}

@media (hover: hover) {
  .page--tenant-guide .tg2-source:hover {
    background: rgba(251, 248, 242, 0.12);
    border-color: var(--tg2-gold);
  }
}

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

.page--tenant-guide .tg2-source .tg2-badge {
  display: inline-flex;
  width: 2.6rem;
  height: 2.6rem;
  align-items: center;
  justify-content: center;
  flex: none;
  border: 1.5px solid var(--tg2-gold);
  border-radius: 50%;
  color: var(--tg2-gold);
}

.page--tenant-guide .tg2-source .tg2-badge svg { width: 1.15rem; }

.page--tenant-guide .tg2-source strong {
  display: block;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight: 500;
  line-height: 1.2;
}

.page--tenant-guide .tg2-source .tg2-source__note {
  display: block;
  margin-top: 0.25rem;
  color: rgba(251, 248, 242, 0.76);
  font-size: 0.9rem;
  line-height: 1.45;
}

.page--tenant-guide .tg2-source .tg2-outchip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 48px;
  padding: 0.5rem 0.95rem;
  border: 1.5px solid var(--tg2-gold);
  border-radius: 999px;
  color: var(--tg2-gold);
  font-size: 0.85rem;
  font-weight: 750;
  white-space: nowrap;
}

.page--tenant-guide .tg2-sources-foot { margin: 1.4rem 0 0; }

.page--tenant-guide .tgx-sources .tg2-assure {
  border: var(--tg2-plate-line-dark);
  background: rgba(251, 248, 242, 0.08);
  color: rgba(251, 248, 242, 0.88);
}

.page--tenant-guide .tgx-sources .tg2-assure svg { color: var(--tg2-gold); }

/* --------------------------------------------------------------------------
   7. Contact — pressable ledger + follow line
   ----------------------------------------------------------------------- */

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

.page--tenant-guide .tg2-contact-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  min-height: 64px;
  padding: 0.8rem 1.1rem;
  border: var(--tg2-plate-line-dark);
  border-radius: 12px 12px 24px 12px;
  background: rgba(251, 248, 242, 0.07);
  color: inherit;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease;
}

@media (hover: hover) {
  .page--tenant-guide .tg2-contact-row:hover {
    background: rgba(251, 248, 242, 0.14);
    border-color: var(--tg2-gold);
  }
}

.page--tenant-guide .tg2-contact-row:focus-visible {
  outline: 3px solid #4d9ea5;
  outline-offset: 3px;
}

.page--tenant-guide .tg2-contact-row .tg2-icon {
  border-color: var(--tg2-gold);
  background: transparent;
  color: var(--tg2-gold);
}

.page--tenant-guide .tg2-contact-row span:not([class]) {
  font-size: 0.85rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(251, 248, 242, 0.72);
}

.page--tenant-guide .tg2-contact-row strong {
  justify-self: end;
  font-size: 0.98rem;
  font-weight: 750;
  text-align: right;
}

.page--tenant-guide .tg2-follow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  margin-top: 0.9rem;
  color: rgba(251, 248, 242, 0.82);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.24em;
}

/* Contact buttons to the pressable standard. */
.page--tenant-guide .tgx-contact .tgx-action,
.page--tenant-guide .tgx-contact .tgx-contact__phone {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
}

/* --------------------------------------------------------------------------
   8. Page-wide geometry
   ----------------------------------------------------------------------- */

/* Kill the void under the route section. */
.page--tenant-guide .tgx-route { margin-bottom: clamp(3rem, 5vw, 4.5rem); }

/* Ghost crown watermark seated in chapter bands (non-text, decorative). */
.page--tenant-guide .tg2-watermark {
  position: absolute;
  right: clamp(-2rem, -1vw, -0.5rem);
  bottom: -1.5rem;
  width: clamp(11rem, 16vw, 15rem);
  color: currentColor;
  opacity: 0.05;
  pointer-events: none;
}

.page--tenant-guide .tgx-chapter,
.page--tenant-guide .tgx-change { position: relative; overflow: clip; }

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

@media (max-width: 68em) {
  .page--tenant-guide .tg2-chapter__grid { grid-template-columns: 1fr; }
  .page--tenant-guide .tg2-chapter__head { position: static; }
  .page--tenant-guide .tg2-chapter__index { display: none; }
  .page--tenant-guide .tg2-change { grid-template-columns: 1fr; }
  .page--tenant-guide .tg2-change__chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page--tenant-guide .tg2-change__chips li:last-child { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   Left-anchored "On this page" pill (approved pattern): summary pill under
   the header seam, compact side panel, no flow height, never centred.
   ----------------------------------------------------------------------- */

.page--tenant-guide .tg2-pagenav {
  position: sticky;
  top: var(--head-h, 79px);
  z-index: 900;
  height: 0;
  width: max-content;
  max-width: calc(100vw - 2rem);
  margin: 0 0 0 clamp(1rem, 3vw, 2.5rem);
  overflow: visible;
}

.page--tenant-guide .tg2-pagenav > summary {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 48px;
  padding: 0.55rem 1rem;
  border: var(--tg2-plate-line);
  border-radius: 999px;
  background: rgba(251, 248, 242, 0.92);
  box-shadow: var(--tg2-plate-shadow);
  backdrop-filter: blur(12px);
  color: var(--tg-ink, #18221e);
  cursor: pointer;
  list-style: none;
}

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

.page--tenant-guide .tg2-pagenav > summary span {
  color: var(--tg2-bronze-ink);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.page--tenant-guide .tg2-pagenav > summary strong {
  font-size: 0.92rem;
  font-weight: 750;
}

.page--tenant-guide .tg2-pagenav > summary::after {
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  content: "";
  transform: rotate(45deg) translateY(-2px);
}

.page--tenant-guide .tg2-pagenav[open] > summary::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

.page--tenant-guide .tg2-pagenav > summary:focus-visible {
  outline: 3px solid #4d9ea5;
  outline-offset: 3px;
}

.page--tenant-guide .tg2-pagenav:not([open]) nav { display: none; }

.page--tenant-guide .tg2-pagenav[open] nav {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  display: grid;
  width: min(86vw, 21rem);
  gap: 0.1rem;
  padding: 0.6rem;
  border: var(--tg2-plate-line);
  border-radius: 14px;
  background: rgba(251, 248, 242, 0.97);
  box-shadow: 0 18px 40px -22px rgba(21, 40, 32, 0.5);
}

.page--tenant-guide .tg2-pagenav nav a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0.35rem 0.7rem;
  border-radius: 8px;
  color: var(--tg-ink, #18221e);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

@media (hover: hover) {
  .page--tenant-guide .tg2-pagenav nav a:hover { background: var(--tg2-tint); }
}

.page--tenant-guide .tg2-pagenav nav a:focus-visible {
  outline: 3px solid #4d9ea5;
  outline-offset: 2px;
}

/* Long-copy assurance chips keep readable geometry. */
.page--tenant-guide .tg2-assure--wide {
  border-radius: 14px;
  max-width: 76ch;
}

.page--tenant-guide .tg2-contact-intro {
  margin: 0 0 0.9rem;
  color: rgba(251, 248, 242, 0.82);
  font-size: 0.95rem;
  line-height: 1.5;
}

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

/* Anchored sections clear the sticky pill. */
.page--tenant-guide [id^="rent-phase-"],
.page--tenant-guide [id^="rent-0"],
.page--tenant-guide #tenant-route {
  scroll-margin-top: calc(var(--head-h, 79px) + 4rem);
}

/* Print: disclosures open, chrome hidden (the base layer no longer covers
   these class names). */
@media print {
  .page--tenant-guide .tg2-pagenav { display: none; }
  .page--tenant-guide .tg2-step details > summary { display: none; }
  .page--tenant-guide .tg2-step details > * { display: block; }
}

@media (max-width: 47.9em) {
  .page--tenant-guide .tg2-rail { grid-template-columns: 1fr; }
  .page--tenant-guide .tg2-rail::before { content: none; }
  .page--tenant-guide .tg2-step { grid-template-columns: 1fr; }
  .page--tenant-guide .tg2-step__spine {
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: center;
  }
  .page--tenant-guide .tg2-change__chips { grid-template-columns: 1fr; }
  .page--tenant-guide .tg2-answer { grid-template-columns: 1fr; }
  .page--tenant-guide .tgx-sources .tg2-sources,
  .page--tenant-guide .tgx-sources .tg2-sources-foot { grid-column: 1; }
  .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-contact-row { grid-template-columns: auto minmax(0, 1fr); }
  .page--tenant-guide .tg2-contact-row strong {
    grid-column: 2;
    justify-self: start;
    text-align: left;
  }
}

/* ==========================================================================
   ROUND 2 — 18 Aug 2026. Space, stickiness, scroll-spy, composition.
   - the shell widens from 85rem to the approved 102.5rem (1640px);
   - every tall left column travels (chapter heads already sticky in the
     base layer; the FAQ head and the GOV.UK side column join them);
   - the mini step indexes and the page pill highlight the reader's
     position (styles here, IntersectionObserver in the page module);
   - the hero collage becomes a deliberate grid: nothing overlaps the
     photograph's subject;
   - the rules band locks seal + heading + intro into one lede column
     with five equal plate rows beside it;
   - one premium white token across all light plates: --tg-paper-bright.
   ========================================================================== */

/* ---- 1. Use the space: the approved wide shell ---- */

.page--tenant-guide .tgx-hero,
.page--tenant-guide .tgx-route,
.page--tenant-guide .tgx-answers {
  width: min(94vw, 102.5rem);
}

.page--tenant-guide .tgx-chapter,
.page--tenant-guide .tgx-change,
.page--tenant-guide .tgx-sources,
.page--tenant-guide .tgx-contact {
  padding-inline: max(3vw, calc((100vw - 102.5rem) / 2));
}

/* ---- 2. Hero stat row: serif numerals, one aligned lockup row ---- */

.page--tenant-guide .tgx-hero__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.4vw, 2.6rem);
}

.page--tenant-guide .tgx-fact { max-width: 18ch; }

.page--tenant-guide .tgx-fact strong {
  font-size: clamp(2.3rem, 3.2vw, 3.1rem);
}

.page--tenant-guide .tgx-fact span {
  font-size: 0.875rem;
  line-height: 1.45;
}

/* ---- 3. Hero collage: composed grid, no overlap, aligned card column ---- */

@media (min-width: 981px) {
  .page--tenant-guide .tgx-hero__collage {
    display: grid;
    height: auto;
    grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
    gap: clamp(0.9rem, 1.2vw, 1.25rem);
    align-items: stretch;
  }

  .page--tenant-guide .tgx-hero__frame {
    position: static;
    width: auto;
  }

  .page--tenant-guide .tgx-hero__frame--lead {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: grid;
  }

  .page--tenant-guide .tgx-hero__frame--lead .tgx-hero__shot { height: 100%; }
  .page--tenant-guide .tgx-hero__frame--lead .tgx-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .page--tenant-guide .tgx-hero__frame--keys { grid-column: 2; grid-row: 1; }
  .page--tenant-guide .tgx-hero__frame--door { grid-column: 2; grid-row: 2; }
  .page--tenant-guide .tgx-hero__frame--keys .tg2-slot { aspect-ratio: 4 / 5; height: auto; }
  .page--tenant-guide .tgx-hero__frame--door .tg2-slot { aspect-ratio: 1 / 1; height: auto; }

  .page--tenant-guide .tgx-hero__caption {
    position: static;
    grid-column: 1 / -1;
    margin-top: 0.2rem;
  }
}

/* ---- 3b. One premium white: plates own --tg-paper-bright, so the paper
        chapter band steps back to the page paper ground (the base layer
        painted band and plates the same white — the banned combo). ---- */

.page--tenant-guide .tgx-chapter--paper { background: var(--tg-paper, #f3efe6); }

/* Base brass fails 4.5:1 on the light bands; counts use text-grade bronze
   there (slate keeps its gold). */
.page--tenant-guide .tgx-chapter--paper .tg2-chapter__count,
.page--tenant-guide .tgx-chapter--forest .tg2-chapter__count {
  color: var(--tg2-bronze-ink);
}

/* ---- 4. Sticky companion columns ---- */

.page--tenant-guide .tg2-sticky-head {
  position: sticky;
  top: calc(var(--head-h, 79px) + 1.5rem);
  align-self: start;
}

.page--tenant-guide .tg2-sources__side {
  position: sticky;
  top: calc(var(--head-h, 79px) + 1.5rem);
  align-self: start;
  display: grid;
  gap: 1rem;
}

.page--tenant-guide .tg2-sources__intro {
  max-width: 30ch;
  margin: 0;
  color: rgba(247, 244, 237, 0.78);
  font-size: 1rem;
  line-height: 1.6;
}

/* ---- 5. Scroll-spy states (classes flipped by the page module) ---- */

.page--tenant-guide .tg2-chapter__index a.is-here {
  background: rgba(24, 34, 30, 0.08);
  box-shadow: inset 3px 0 0 var(--tg2-bronze-ink);
}

.page--tenant-guide .tgx-chapter--slate .tg2-chapter__index a.is-here {
  background: rgba(251, 248, 242, 0.12);
  box-shadow: inset 3px 0 0 var(--tg2-gold);
}

.page--tenant-guide .tg2-pagenav nav a.is-here {
  background: var(--tg2-tint);
  box-shadow: inset 3px 0 0 var(--tg2-bronze-ink);
}

/* ---- 6. Rules band: one grid, lede lockup, five equal plate rows ---- */

.page--tenant-guide .tg2-change {
  display: grid;
  grid-template-columns: minmax(20rem, 0.55fr) minmax(0, 1.45fr);
  grid-template-areas:
    "lede chips"
    "boundary boundary";
  gap: clamp(1.6rem, 3vw, 3rem);
  align-items: start;
}

.page--tenant-guide .tg2-change__lede {
  grid-area: lede;
  position: sticky;
  top: calc(var(--head-h, 79px) + 1.5rem);
  display: grid;
  justify-items: start;
  gap: 1.2rem;
}

.page--tenant-guide .tg2-change__title {
  margin: 0;
  max-width: 20ch;
  color: var(--tg-ink, #18221e);
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(2.1rem, 3.1vw, 3.2rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.02;
  text-wrap: balance;
}

.page--tenant-guide .tg2-change__intro {
  max-width: 34ch;
  margin: 0;
  color: var(--tg-muted, #59615d);
  font-size: 1rem;
  line-height: 1.6;
}

.page--tenant-guide .tg2-change__chips {
  grid-area: chips;
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: clamp(0.6rem, 1vw, 0.85rem);
}

.page--tenant-guide .tg2-change__chips li {
  display: grid;
  grid-template-columns: 2.4rem minmax(11rem, 0.42fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(0.8rem, 1.6vw, 1.4rem);
  min-height: 72px;
  padding: clamp(0.9rem, 1.5vw, 1.15rem) clamp(1rem, 1.8vw, 1.4rem);
}

.page--tenant-guide .tg2-change__chips p { font-size: 0.95rem; }

.page--tenant-guide .tg2-change__boundary {
  grid-area: boundary;
  margin: 0.4rem 0 0;
}

/* ---- 7. GOV.UK ledger footer row ---- */

.page--tenant-guide .tg2-sources__footrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 56px;
  padding: 0.8rem clamp(0.9rem, 1.6vw, 1.2rem);
  border: var(--tg2-plate-line-dark);
  border-radius: 12px 12px 24px 12px;
  background: rgba(251, 248, 242, 0.1);
  color: rgba(251, 248, 242, 0.88);
  font-size: 0.875rem;
  font-weight: 700;
}

.page--tenant-guide .tg2-sources__footrow svg {
  width: 1.05rem;
  flex: none;
  color: var(--tg2-gold);
}

/* ---- 8. Pressable polish: lift on every plate, arrow cues ---- */

.page--tenant-guide .tg2-step,
.page--tenant-guide .tg2-change__chips li,
.page--tenant-guide .tg2-answer {
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 180ms ease;
}

@media (hover: hover) {
  .page--tenant-guide .tg2-step:hover,
  .page--tenant-guide .tg2-change__chips li:hover,
  .page--tenant-guide .tg2-answer:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -12px rgba(21, 40, 32, 0.4);
  }

  .page--tenant-guide .tgx-chapter--slate .tg2-step:hover {
    box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.55);
  }

  .page--tenant-guide .tg2-source:hover,
  .page--tenant-guide .tg2-contact-row:hover { transform: translateY(-2px); }

  .page--tenant-guide .tg2-rail__plate:hover .tg2-rail__cue span { transform: translateX(4px); }
}

.page--tenant-guide .tg2-source,
.page--tenant-guide .tg2-contact-row {
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), background 160ms ease, border-color 160ms ease;
}

.page--tenant-guide .tg2-rail__cue {
  grid-column: 2;
  color: var(--tg2-bronze-ink);
  font-size: 0.85rem;
  font-style: normal;
  font-weight: 800;
}

.page--tenant-guide .tg2-rail__cue span {
  display: inline-block;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Disclosure content enters softly. */
.page--tenant-guide .tg2-step details[open] .tg2-step__points {
  animation: tg2-reveal 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes tg2-reveal {
  from { opacity: 0; transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .page--tenant-guide .tg2-step,
  .page--tenant-guide .tg2-change__chips li,
  .page--tenant-guide .tg2-answer,
  .page--tenant-guide .tg2-source,
  .page--tenant-guide .tg2-contact-row,
  .page--tenant-guide .tg2-step:hover,
  .page--tenant-guide .tg2-change__chips li:hover,
  .page--tenant-guide .tg2-answer:hover,
  .page--tenant-guide .tg2-source:hover,
  .page--tenant-guide .tg2-contact-row:hover {
    transform: none;
    transition: none;
  }

  .page--tenant-guide .tg2-rail__cue span,
  .page--tenant-guide .tg2-rail__plate:hover .tg2-rail__cue span {
    transform: none;
    transition: none;
  }

  .page--tenant-guide .tg2-step details[open] .tg2-step__points { animation: none; }
}

/* ---- Round-2 responsive ---- */

@media (max-width: 68em) {
  .page--tenant-guide .tg2-change {
    grid-template-columns: 1fr;
    grid-template-areas: "lede" "chips" "boundary";
  }
  .page--tenant-guide .tg2-change__lede { position: static; }
  .page--tenant-guide .tg2-sources__side { position: static; }
  .page--tenant-guide .tg2-sticky-head { position: static; }
}

@media (max-width: 47.9em) {
  .page--tenant-guide .tg2-change__chips li {
    grid-template-columns: 2.2rem minmax(0, 1fr);
  }
  .page--tenant-guide .tg2-change__chips p { grid-column: 2; }
  .page--tenant-guide .tgx-hero__facts { grid-template-columns: 1fr; gap: 1rem; }
}

/* ==========================================================================
   ROUND 3 — 18 Aug 2026. No AI photography, composed marks, FAQ parity,
   merged step lockup, whitespace audit.
   ========================================================================== */

/* ---- 1. Crown plates only: the hero lead tile fills its two-row cell ---- */

.page--tenant-guide .tg2-slot--fill {
  height: 100%;
  aspect-ratio: auto;
}

.page--tenant-guide .tgx-hero__frame--lead .tg2-slot { height: 100%; }
.page--tenant-guide .tgx-hero__frame--lead .tg2-slot__crown { width: 34%; }

/* ---- 2. Decorative-mark rule: watermarks sit INSIDE their band, anchored
        to the clear zone under the sticky column, one opacity, never cut
        by a seam, never under text. Hidden when the band goes single
        column (the clear zone disappears). ---- */

.page--tenant-guide .tg2-watermark {
  left: max(3vw, calc((100vw - 102.5rem) / 2));
  right: auto;
  bottom: 2rem;
  width: clamp(7rem, 9vw, 9.5rem);
  opacity: 0.06;
}

/* In-flow variant: sits at the foot of a sticky lede instead of being
   anchored to the band. Cannot overlap text at any band height. */
.page--tenant-guide .tg2-watermark--flow {
  position: static;
  width: clamp(6.5rem, 8vw, 8.5rem);
  margin-top: 0.6rem;
}

@media (max-width: 68em) {
  .page--tenant-guide .tg2-watermark { display: none; }
}

/* ---- 3. FAQ parity: the head already travels; the plates now compose
        across their width — numeral | question+answer | go-chip. ---- */

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

.page--tenant-guide .tg2-answer__body { display: grid; gap: 0.55rem; }
.page--tenant-guide .tg2-answer__body h3 { max-width: none; }
.page--tenant-guide .tg2-answer__body p { max-width: 72ch; margin: 0; }
.page--tenant-guide .tg2-answer .tg2-golink { margin: 0; justify-self: end; }

/* ---- 4. One mark: numeral and icon merge into a single bordered lockup
        in the step gutter — nothing floats loose. ---- */

.page--tenant-guide .tg2-step__spine {
  gap: 0.2rem;
  justify-items: center;
  align-content: start;
  height: fit-content;
  padding: 0.5rem 0.7rem 0.6rem;
  border: 1.5px solid var(--tg2-bronze-ink);
  border-radius: 12px 12px 22px 12px;
}

.page--tenant-guide .tg2-step__numeral { font-size: clamp(1.9rem, 2.6vw, 2.4rem); }

.page--tenant-guide .tg2-step__spine .tg2-icon {
  width: auto;
  height: auto;
  border: 0;
  background: transparent;
}

.page--tenant-guide .tgx-chapter--slate .tg2-step__spine { border-color: var(--tg2-gold); }

/* ---- 5. Whitespace audit: tighter vertical rhythm, bigger stat lockup,
        no sliver before the footer. ---- */

.page--tenant-guide .tgx-hero { margin-bottom: clamp(2.2rem, 3.5vw, 3.2rem); }

.page--tenant-guide .tgx-hero__facts {
  margin-top: clamp(1.2rem, 2vw, 1.8rem);
  padding-top: clamp(1.1rem, 1.8vw, 1.5rem);
}

.page--tenant-guide .tgx-fact strong { font-size: clamp(3rem, 4.4vw, 4.4rem); }
.page--tenant-guide .tgx-fact { max-width: 20ch; }

.page--tenant-guide .tgx-route { margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }

.page--tenant-guide .tgx-chapter { padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.page--tenant-guide .tgx-change { padding-block: clamp(3.5rem, 6.5vw, 5.5rem); }
.page--tenant-guide .tgx-answers { padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.page--tenant-guide .tgx-sources { padding-block: clamp(3.5rem, 6.5vw, 5.5rem); }
.page--tenant-guide .tgx-contact { padding-block: clamp(3.5rem, 6vw, 5.5rem); }

.page--tenant-guide .tgx-contact { margin-bottom: 0; }
.page--tenant-guide .main { padding-bottom: 0; }

/* The shared footer's default 64px top margin painted a beige sliver
   between the forest close and the footer on this page. Page-scoped
   spacing only — the footer component itself is untouched. */
.page--tenant-guide .site-foot { margin-top: 0; }

/* The pill floats top-left; the breadcrumb drops below its lane so the
   two never collide at page top. */
.page--tenant-guide .crumbs { margin-top: 3.4rem; }

@media (max-width: 47.9em) {
  .page--tenant-guide .tg2-answer { grid-template-columns: 1fr; align-items: start; }
  .page--tenant-guide .tg2-answer .tg2-golink { justify-self: start; }
}

/* ==========================================================================
   ROUND 4 — 18 Aug 2026. The finishing pass.

   PALETTE — "petrol and amber". Same Dukes world, a pairing no other page
   owns (guide: navy/oxblood on cream+pale blue · sales: navy/bottle green
   with blush · valuation: green/brown with clay · homepage: deep green and
   gold). This page takes a COOL petrol-ink anchor against a warm amber
   accent, which none of them pair. Every colour has one job:
     anchor / anchor-deep  decisive bands only (chapter 02, GOV.UK, contact)
     accent / accent-lift  ACTIONS AND KICKERS ONLY (never a field, never body)
     field 1 / 2 / 3       section grounds, alternating deliberately
     white                 the single plate token, every plate on every band
     ink / muted / on-dark reading colours
   Crown discipline: exactly two roles — the ghost watermark inside image
   placeholders, and the single seal device in the rules band. Every crest,
   badge and band watermark is gone. Icons survive only where the glyph
   literally names its step, one stroke weight, no rings.
   ========================================================================== */

.page--tenant-guide {
  --tg4-anchor: #0d2b31;
  --tg4-anchor-deep: #09232a;
  --tg4-anchor-soft: #153b43;
  --tg4-accent: #8a5514;        /* text-grade accent on light grounds */
  --tg4-accent-lift: #e3a755;   /* accent on the anchor grounds */
  --tg4-field-1: #eef2f2;
  --tg4-field-2: #e0e9e9;
  --tg4-field-3: #d9e4e3;
  --tg4-white: #fbfdfd;         /* the one plate token */
  --tg4-ink: #12262b;
  --tg4-muted: #4a5c61;
  --tg4-on-dark: #eaf2f2;
  --tg4-on-dark-soft: #b9cdd0;

  /* Base page tokens re-pointed so the inherited components recolour too. */
  --tg-paper: var(--tg4-field-1);
  --tg-paper-bright: var(--tg4-white);
  --tg-paper-deep: var(--tg4-field-3);
  --tg-ink: var(--tg4-ink);
  --tg-muted: var(--tg4-muted);
  --tg-forest: var(--tg4-anchor);
  --tg-forest-soft: var(--tg4-anchor-soft);
  --tg-slate: var(--tg4-anchor);
  --tg-slate-soft: var(--tg4-on-dark-soft);
  --tg-clay: var(--tg4-accent);
  --tg-brass: var(--tg4-accent);
  --tg-rule: rgba(18, 38, 43, 0.18);
  --tg-rule-light: rgba(251, 253, 253, 0.22);

  /* tg2 device tokens re-pointed. */
  --tg2-bronze-ink: var(--tg4-accent);
  --tg2-gold: var(--tg4-accent-lift);
  --tg2-tint: var(--tg4-field-2);
  --tg2-tint-dark: rgba(251, 253, 253, 0.08);
  --tg2-plate-line: 1px solid rgba(18, 38, 43, 0.16);
  --tg2-plate-line-dark: 1px solid rgba(234, 242, 242, 0.2);
  --tg2-plate-shadow: 0 6px 16px -10px rgba(9, 35, 42, 0.34);

  background: var(--tg4-field-1);
  color: var(--tg4-ink);
  scrollbar-color: var(--tg4-anchor-soft) var(--tg4-field-2);
}

.page--tenant-guide ::selection { background: #cfe0e2; color: var(--tg4-ink); }
.page--tenant-guide .main { background: var(--tg4-field-1); }

/* ---- Fields: every band on its own ground, alternating deliberately ---- */

.page--tenant-guide .tgx-chapter--paper { background: var(--tg4-field-2); }
.page--tenant-guide .tgx-chapter--slate { background: var(--tg4-anchor); color: var(--tg4-on-dark); }
.page--tenant-guide .tgx-chapter--forest { background: var(--tg4-field-3); color: var(--tg4-ink); }
.page--tenant-guide .tgx-change { background: var(--tg4-field-1); color: var(--tg4-ink); }
.page--tenant-guide .tgx-answers { background: var(--tg4-field-2); }
.page--tenant-guide .tgx-sources { background: var(--tg4-anchor); color: var(--tg4-on-dark); }
.page--tenant-guide .tgx-contact { background: var(--tg4-anchor-deep); color: var(--tg4-on-dark); }

/* The FAQ band is a full-bleed field, so its shell keeps the page width. */
.page--tenant-guide .tgx-answers {
  width: auto;
  padding-inline: max(3vw, calc((100vw - 102.5rem) / 2));
}

.page--tenant-guide .tgx-chapter--slate .tgx-chapter__summary,
.page--tenant-guide .tgx-chapter--slate .tg2-step__answer,
.page--tenant-guide .tgx-chapter--slate .tg2-step__facts,
.page--tenant-guide .tgx-chapter--slate .tg2-step__points dd { color: var(--tg4-on-dark-soft); }

.page--tenant-guide .tgx-chapter--slate .tg2-step__points dt,
.page--tenant-guide .tgx-chapter--slate .tg2-step h3,
.page--tenant-guide .tgx-chapter--slate .tgx-chapter__title,
.page--tenant-guide .tgx-chapter--slate .tg2-chapter__index a { color: var(--tg4-on-dark); }

.page--tenant-guide .tgx-chapter--slate .tg2-step__numeral,
.page--tenant-guide .tgx-chapter--slate .tg2-chapter__count { color: var(--tg4-accent-lift); }

/* ---- Plates: one white token, always a hairline, never shadow alone ---- */

.page--tenant-guide .tg2-rail__plate,
.page--tenant-guide .tg2-step,
.page--tenant-guide .tg2-change__chips li,
.page--tenant-guide .tg2-answer,
.page--tenant-guide .tg2-assure,
.page--tenant-guide .tg2-figure {
  background: var(--tg4-white);
  border: var(--tg2-plate-line);
}

.page--tenant-guide .tgx-chapter--slate .tg2-step {
  background: var(--tg4-anchor-soft);
  border: var(--tg2-plate-line-dark);
}

.page--tenant-guide .tg2-source,
.page--tenant-guide .tg2-contact-row,
.page--tenant-guide .tg2-sources__footrow {
  background: rgba(234, 242, 242, 0.07);
  border: var(--tg2-plate-line-dark);
}

.page--tenant-guide .tgx-sources .tg2-assure {
  background: rgba(234, 242, 242, 0.09);
  border: var(--tg2-plate-line-dark);
  color: var(--tg4-on-dark);
}

/* ---- 2. Crown discipline + icon audit ---- */

/* Crests and band watermarks are removed from the markup; these guards keep
   them gone if any partial re-introduces one. */
.page--tenant-guide .tg2-crest,
.page--tenant-guide .tg2-badge { display: none; }

/* Step glyphs: no ring, no plate, one stroke weight, sized for scanning. */
.page--tenant-guide .tg2-step__spine {
  gap: 0.35rem;
  padding: 0;
  border: 0;
  color: var(--tg4-accent);
}

.page--tenant-guide .tgx-chapter--slate .tg2-step__spine { color: var(--tg4-accent-lift); }

.page--tenant-guide .tg2-step__spine .tg2-icon {
  width: auto;
  height: auto;
  border: 0;
  background: transparent;
  color: inherit;
}

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

.page--tenant-guide .tg2-step__numeral {
  color: var(--tg4-anchor);
  font-size: clamp(1.8rem, 2.4vw, 2.2rem);
}

.page--tenant-guide .tgx-chapter--slate .tg2-step__numeral { color: var(--tg4-accent-lift); }

/* GOV.UK ledger: the crown badge becomes the source numeral. */
.page--tenant-guide .tg2-source__n {
  display: inline-flex;
  min-width: 2.4rem;
  justify-content: center;
  color: var(--tg4-accent-lift);
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.3rem;
  line-height: 1;
}

/* ---- Seal: the single crown moment, re-cut for petrol and amber ---- */

.page--tenant-guide .tg2-seal {
  position: relative;
  display: grid;
  width: clamp(8.5rem, 10vw, 10rem);
  aspect-ratio: 1;
  place-content: center;
  gap: 0.25rem;
  border: 2px solid var(--tg4-accent);
  border-radius: 50%;
  background: var(--tg4-white);
  color: var(--tg4-accent);
  text-align: center;
}

.page--tenant-guide .tg2-seal::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0.5;
}

.page--tenant-guide .tg2-seal svg { width: 1.5rem; margin: 0 auto; }

.page--tenant-guide .tg2-seal strong {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 1.1;
  text-transform: uppercase;
}

.page--tenant-guide .tg2-seal span {
  color: var(--tg4-muted);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* ---- 9. New device: the statutory cap figure on the money steps ---- */

.page--tenant-guide .tg2-figure {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
  width: fit-content;
  margin: 1rem 0 0;
  padding: 0.7rem 1.1rem 0.7rem 0.85rem;
  border-radius: 12px 12px 22px 12px;
  border-left: 3px solid var(--tg4-accent);
}

.page--tenant-guide .tg2-figure strong {
  color: var(--tg4-anchor);
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.5rem, 2vw, 1.9rem);
  font-weight: 500;
  line-height: 1;
}

.page--tenant-guide .tg2-figure span {
  color: var(--tg4-muted);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
}

.page--tenant-guide .tgx-chapter--slate .tg2-figure {
  background: rgba(234, 242, 242, 0.09);
  border: var(--tg2-plate-line-dark);
  border-left: 3px solid var(--tg4-accent-lift);
}

.page--tenant-guide .tgx-chapter--slate .tg2-figure strong { color: var(--tg4-on-dark); }
.page--tenant-guide .tgx-chapter--slate .tg2-figure span { color: var(--tg4-on-dark-soft); }

/* ---- Accent: actions and kickers only ---- */

.page--tenant-guide .tg2-kicker,
.page--tenant-guide .tg2-rail__phase,
.page--tenant-guide .tg2-chapter__count,
.page--tenant-guide .tg2-change__chips span,
.page--tenant-guide .tg2-pagenav > summary span { color: var(--tg4-accent); }

.page--tenant-guide .tg2-answer__numeral,
.page--tenant-guide .tg2-rail__cue { color: var(--tg4-anchor); }

.page--tenant-guide .tgx-action--primary {
  background: var(--tg4-anchor);
  border-color: var(--tg4-anchor);
  color: var(--tg4-on-dark);
}

.page--tenant-guide .tgx-action--quiet {
  border-color: rgba(18, 38, 43, 0.34);
  color: var(--tg4-ink);
}

.page--tenant-guide .tg2-golink,
.page--tenant-guide .tg2-step summary {
  border-color: var(--tg4-accent);
  color: var(--tg4-accent);
}

.page--tenant-guide .tgx-chapter--slate .tg2-step summary,
.page--tenant-guide .tgx-chapter--slate .tg2-golink {
  border-color: var(--tg4-accent-lift);
  color: var(--tg4-accent-lift);
}

.page--tenant-guide .tg2-source .tg2-outchip {
  border-color: var(--tg4-accent-lift);
  color: var(--tg4-accent-lift);
}

/* ---- 7. Every link a chip: the follow link and the office line ---- */

.page--tenant-guide .tg2-follow,
.page--tenant-guide .tgx-contact__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.5rem 1.05rem;
  border: 1.5px solid rgba(234, 242, 242, 0.34);
  border-radius: 999px;
  color: var(--tg4-on-dark);
  font-size: 0.9rem;
  font-weight: 750;
  text-decoration: none;
}

@media (hover: hover) {
  .page--tenant-guide .tg2-follow:hover,
  .page--tenant-guide .tgx-contact__phone:hover { background: rgba(234, 242, 242, 0.12); }
}

.page--tenant-guide .tgx-action--light {
  background: var(--tg4-white);
  color: var(--tg4-anchor);
}

/* ---- 4. Type one step down, capped measures, hero under half the fold ---- */

.page--tenant-guide .tgx-hero__title {
  max-width: 15ch;
  font-size: clamp(2.4rem, 4.1vw, 3.7rem);
}

.page--tenant-guide .tgx-chapter__title { font-size: clamp(1.9rem, 2.9vw, 2.9rem); max-width: 13ch; }
.page--tenant-guide .tgx-answers__title { font-size: clamp(1.9rem, 2.9vw, 2.9rem); max-width: 15ch; }
.page--tenant-guide .tgx-sources__title { font-size: clamp(1.9rem, 2.9vw, 2.9rem); max-width: 15ch; }
.page--tenant-guide .tgx-contact__title { font-size: clamp(2rem, 3.2vw, 3.1rem); max-width: 13ch; }
.page--tenant-guide .tgx-route__title { font-size: clamp(1.9rem, 2.9vw, 2.9rem); max-width: 14ch; }
.page--tenant-guide .tg2-change__title { font-size: clamp(1.9rem, 2.9vw, 2.9rem); }
.page--tenant-guide .tg2-step h3 { font-size: clamp(1.2rem, 1.7vw, 1.5rem); }
.page--tenant-guide .tg2-answer h3 { font-size: clamp(1.15rem, 1.55vw, 1.38rem); }

.page--tenant-guide .tgx-hero__collage {
  height: clamp(19rem, 42vh, 26rem);
  grid-template-rows: 1fr 1fr;
}

.page--tenant-guide .tgx-hero__frame--lead .tg2-slot,
.page--tenant-guide .tgx-hero__frame--keys .tg2-slot,
.page--tenant-guide .tgx-hero__frame--door .tg2-slot {
  height: 100%;
  aspect-ratio: auto;
}

/* ---- Placeholder plates in the new palette ---- */

.page--tenant-guide .tg2-slot {
  border: var(--tg2-plate-line);
  background:
    linear-gradient(160deg, rgba(13, 43, 49, 0.07), rgba(13, 43, 49, 0) 55%),
    var(--tg4-field-3);
}

.page--tenant-guide .tg2-slot__crown { color: var(--tg4-anchor); opacity: 0.14; }

.page--tenant-guide .tg2-slot__chip {
  border: 1px solid rgba(18, 38, 43, 0.2);
  background: var(--tg4-white);
  color: var(--tg4-ink);
}

.page--tenant-guide .tg2-slot__ratio {
  background: var(--tg4-anchor);
  color: var(--tg4-on-dark);
}

/* ---- Chrome in the new palette ---- */

.page--tenant-guide .tg2-pagenav > summary {
  background: rgba(251, 253, 253, 0.94);
  border: var(--tg2-plate-line);
  color: var(--tg4-ink);
}

.page--tenant-guide .tg2-pagenav[open] nav {
  background: var(--tg4-white);
  border: var(--tg2-plate-line);
}

.page--tenant-guide .tg2-pagenav nav a { color: var(--tg4-ink); }

.page--tenant-guide .tg2-chapter__index a.is-here {
  background: rgba(13, 43, 49, 0.08);
  box-shadow: inset 3px 0 0 var(--tg4-accent);
}

.page--tenant-guide .tgx-chapter--slate .tg2-chapter__index a.is-here {
  background: rgba(234, 242, 242, 0.12);
  box-shadow: inset 3px 0 0 var(--tg4-accent-lift);
}

.page--tenant-guide .tg2-pagenav nav a.is-here {
  background: var(--tg4-field-2);
  box-shadow: inset 3px 0 0 var(--tg4-accent);
}

.page--tenant-guide .tg2-assure { color: var(--tg4-ink); }
.page--tenant-guide .tg2-assure svg { color: var(--tg4-accent); }
.page--tenant-guide .tgx-sources .tg2-assure svg,
.page--tenant-guide .tg2-sources__footrow svg { color: var(--tg4-accent-lift); }
.page--tenant-guide .tg2-sources__footrow { color: var(--tg4-on-dark); }
.page--tenant-guide .tg2-source .tg2-source__note { color: var(--tg4-on-dark-soft); }
.page--tenant-guide .tg2-sources__intro { color: var(--tg4-on-dark-soft); }
.page--tenant-guide .tg2-contact-intro,
.page--tenant-guide .tg2-contact-row span:not([class]) { color: var(--tg4-on-dark-soft); }
.page--tenant-guide .tg2-contact-row strong,
.page--tenant-guide .tg2-contact-row .tg2-icon { color: var(--tg4-on-dark); }
/* No rings anywhere: the contact glyphs sit bare like the step glyphs. */
.page--tenant-guide .tg2-contact-row .tg2-icon {
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--tg4-accent-lift);
}

.page--tenant-guide .tg2-contact-row .tg2-icon svg { width: 1.5rem; height: 1.5rem; }
.page--tenant-guide .tgx-contact__copy p,
.page--tenant-guide .tgx-contact p { color: var(--tg4-on-dark-soft); }
.page--tenant-guide .tgx-sources__gov { color: var(--tg4-on-dark); }
.page--tenant-guide .tgx-sources__seal { color: var(--tg4-accent-lift); }
.page--tenant-guide .tg2-change__intro,
.page--tenant-guide .tgx-route__copy,
.page--tenant-guide .tgx-answers__head p,
.page--tenant-guide .tgx-hero__copy { color: var(--tg4-muted); }
.page--tenant-guide .tgx-hero__scope { color: var(--tg4-muted); }
.page--tenant-guide .tgx-fact strong { color: var(--tg4-anchor); }
.page--tenant-guide .tgx-fact span { color: var(--tg4-muted); }

/* Chapter cards lead with their numeral now the crests are gone. */
.page--tenant-guide .tg2-rail__numeral {
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--tg4-anchor);
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(2rem, 2.8vw, 2.6rem);
  font-weight: 500;
  line-height: 1;
}

/* ---- Focus rings re-pointed to the new palette (source order wins) ---- */

.page--tenant-guide :is(a, summary):focus-visible,
.page--tenant-guide .tg2-rail__plate:focus-visible,
.page--tenant-guide .tg2-chapter__index a:focus-visible,
.page--tenant-guide .tg2-step summary:focus-visible,
.page--tenant-guide .tg2-golink:focus-visible,
.page--tenant-guide .tg2-source:focus-visible,
.page--tenant-guide .tg2-contact-row:focus-visible,
.page--tenant-guide .tg2-pagenav > summary:focus-visible,
.page--tenant-guide .tg2-pagenav nav a:focus-visible {
  outline: 3px solid var(--tg4-anchor);
  outline-offset: 3px;
}

.page--tenant-guide :is(.tgx-chapter--slate, .tgx-sources, .tgx-contact) :is(a, summary):focus-visible,
.page--tenant-guide .tgx-chapter--slate .tg2-step summary:focus-visible,
.page--tenant-guide .tgx-chapter--slate .tg2-chapter__index a:focus-visible,
.page--tenant-guide .tg2-source:focus-visible,
.page--tenant-guide .tg2-contact-row:focus-visible {
  outline-color: var(--tg4-accent-lift);
}

/* ---- Footer keeps the shared shell; only the seam is page-scoped ---- */
.page--tenant-guide .site-foot { margin-top: 0; }