/* =============================================================================
   LEGAL DOCUMENTS

   A quieter layout for contractual pages. It shares the site's shell, type
   scale, palette and furniture, and drops everything that competes with
   reading: no hero photography, no components, no motion. A masthead, a
   contents rail and a measured column.
   ============================================================================= */

.ld { padding: clamp(2.5rem, 5vw, 4.5rem) 0 var(--section); background: var(--warm); }
/* A contractual page is reading content, not chrome. It keeps the site's
   capped, centred shell: a contents rail beside a measured column, held to
   a comfortable width rather than stretched across a wide monitor. The
   fluid page gutter belongs to the header, the heroes and the footer. */
.ld__shell { max-width: var(--shell); }

/* ── Masthead ───────────────────────────────────────────────────────────── */

.ld__head {
  padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--warm-line);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.ld__head .crumbs { margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.ld__head h1 {
  margin: .35rem 0 0;
  font-size: clamp(1.9rem, 1.4rem + 1.7vw, 2.75rem);
  line-height: 1.1; letter-spacing: -.02em; max-width: 22ch; text-wrap: balance;
}
.ld__blurb { margin: 1rem 0 0; font-size: var(--t-lead); line-height: 1.6; color: var(--on-warm-2); max-width: 62ch; }

/* Version, dates and scope as a labelled set rather than a run of sentences. */
.ld__meta { display: flex; flex-wrap: wrap; gap: .75rem 2.5rem; margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0; }
.ld__meta > div { min-width: 0; }
.ld__meta dt { margin: 0 0 .15rem; font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--on-warm-3, var(--on-warm-2)); }
.ld__meta dd { margin: 0; font-size: var(--t-small); font-weight: 600; max-width: 52ch; }

.ld__amend {
  margin: 1.25rem 0 0; padding: .85rem 1.1rem;
  border-left: 3px solid var(--purple); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: color-mix(in srgb, var(--purple) 8%, transparent);
  font-size: var(--t-small); line-height: 1.6; color: var(--on-warm-2); max-width: 74ch;
}
.ld__amend strong { color: var(--on-warm); }

/* ── Contents rail beside the document ──────────────────────────────────── */

.ld__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 1000px) {
  .ld__grid { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); }
  .ld__toc { position: sticky; top: calc(var(--head-h, 86px) + 1.5rem); max-height: calc(100vh - var(--head-h, 86px) - 3rem); overflow-y: auto; }
}
.ld__toc h2 { margin: 0 0 .75rem; font-size: var(--t-micro); letter-spacing: .09em; text-transform: uppercase; color: var(--on-warm-3, var(--on-warm-2)); }
.ld__toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.ld__toc a {
  display: block; padding: .4rem .6rem; border-radius: var(--r-sm);
  font-size: var(--t-small); line-height: 1.4; color: var(--on-warm-2); text-decoration: none;
}
.ld__toc a span { color: var(--on-warm-3, var(--on-warm-2)); font-variant-numeric: tabular-nums; }
.ld__toc a:hover { background: var(--warm-lift); color: var(--on-warm); }
.ld__toc a:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* ── The document ───────────────────────────────────────────────────────── */

/* Contract wording carries bare URLs, which do not wrap on their own and
   pushed the page sideways on a phone. Long words break rather than scroll. */
.ld__body { min-width: 0; max-width: 76ch; overflow-wrap: break-word; }
.ld__body p, .ld__list dd, .ld__list dt, .ld__body li { overflow-wrap: break-word; word-break: normal; }
.ld__body h2 {
  margin: clamp(2.25rem, 4vw, 3rem) 0 .9rem;
  font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); line-height: 1.25;
  scroll-margin-top: calc(var(--head-h, 86px) + 1.5rem);
}
.ld__body h2:first-child { margin-top: 0; }
.ld__num { color: var(--purple); font-variant-numeric: tabular-nums; }
.ld__body h3 {
  margin: 1.75rem 0 .6rem; font-size: 1.0625rem; line-height: 1.35;
  scroll-margin-top: calc(var(--head-h, 86px) + 1.5rem);
}
.ld__body p { margin: 0 0 1rem; font-size: var(--t-small); line-height: 1.7; color: var(--on-warm-2); }

/* Clause number as the term, wording as the detail: the numbering stays a
   label rather than becoming decoration, and a clause can be linked to. */
.ld__list { display: grid; grid-template-columns: 3.75rem minmax(0, 1fr); gap: .1rem 0; margin: 0 0 1.25rem; min-width: 0; }
.ld__list dt {
  font-size: var(--t-small); line-height: 1.7; color: var(--on-warm-3, var(--on-warm-2));
  font-variant-numeric: tabular-nums; padding-bottom: .55rem;
  scroll-margin-top: calc(var(--head-h, 86px) + 1.5rem);
}
.ld__list dd { margin: 0 0 .55rem; font-size: var(--t-small); line-height: 1.7; color: var(--on-warm-2); }
.ld__list--sub { grid-template-columns: 2.5rem minmax(0, 1fr); margin-left: 3.75rem; min-width: 0; }

.ld__tablewrap { overflow-x: auto; margin: 0 0 1.5rem; }
.ld__table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.ld__table th, .ld__table td {
  text-align: left; vertical-align: top; padding: .7rem .9rem .7rem 0;
  border-bottom: 1px solid var(--warm-line); line-height: 1.55;
}
.ld__table th { color: var(--on-warm); font-weight: 600; }
.ld__table td { color: var(--on-warm-2); }

.ld__foot {
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--warm-line);
}
.ld__foot h2 { margin: 0 0 .7rem; font-size: 1.0625rem; }
.ld__foot p { margin: 0 0 .75rem; }
.ld__back { margin-top: 1.25rem; }

/* ── Legal Centre index ─────────────────────────────────────────────────── */

.lc__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--warm-line); }
.lc__item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 2.5rem;
  align-items: start; padding: clamp(1.1rem, 2vw, 1.5rem) 0;
  border-bottom: 1px solid var(--warm-line);
}
.lc__body h4 { margin: 0 0 .3rem; font-size: 1.1875rem; line-height: 1.3; }
.lc__body h4 a { color: inherit; text-decoration: none; }
.lc__body h4 a:hover { color: var(--purple); text-decoration: underline; text-underline-offset: 3px; }
.lc__body h4 a:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 3px; }
.lc__body p { margin: 0; font-size: var(--t-small); line-height: 1.6; color: var(--on-warm-2); max-width: 64ch; }
.lc__meta { display: flex; gap: 1.75rem; margin: 0; }
.lc__meta dt { margin: 0 0 .1rem; font-size: var(--t-micro); letter-spacing: .07em; text-transform: uppercase; color: var(--on-warm-3, var(--on-warm-2)); }
.lc__meta dd { margin: 0; font-size: var(--t-small); font-weight: 600; white-space: nowrap; }

.lc__notes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.lc__notes h2 { margin: 0 0 .5rem; font-size: 1.0625rem; }
.lc__notes p { margin: 0 0 .75rem; font-size: var(--t-small); line-height: 1.65; color: var(--on-warm-2); }

@media (max-width: 720px) {
  .lc__item { grid-template-columns: minmax(0, 1fr); }
  .ld__list { grid-template-columns: 2.75rem minmax(0, 1fr); }
  .ld__list--sub { grid-template-columns: 2.25rem minmax(0, 1fr); margin-left: .75rem; }
}

/* ── Print ──────────────────────────────────────────────────────────────
   A legal page is a document people file, forward and take to an adviser,
   so it has to print as one. */
@media print {
  header.top, .foot, .ld__toc, .ld__back, .skip, .cookie, .ld__foot { display: none !important; }
  .ld { padding: 0; background: #fff; }
  .ld__grid { display: block; }
  .ld__body { max-width: none; }
  .ld, .ld * { color: #000 !important; background: transparent !important; }
  .ld__head { border-bottom: 1pt solid #000; }
  .ld__body h2, .ld__body h3 { break-after: avoid; page-break-after: avoid; }
  .ld__list dt, .ld__list dd { break-inside: avoid; page-break-inside: avoid; }
  .ld__table { border: 1pt solid #000; }
  .ld__table th, .ld__table td { border: 1pt solid #000; padding: 4pt; }
  .ld__body a::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  .ld__amend { border-left: 2pt solid #000; }
  @page { margin: 18mm; }
}

/* ── Model cancellation form ───────────────────────────────────────────── */
.cxf { margin: 1.5rem 0 0; max-width: 46rem; }
.cxf .field { margin-bottom: 1.1rem; }
.cxf__sig { margin: 1.25rem 0; font-size: var(--t-small); color: var(--on-warm-2); }
.cxf__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0; }
.cxf__honest {
  margin: 0 0 1.5rem; padding: .9rem 1.1rem;
  border-left: 3px solid var(--purple); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: color-mix(in srgb, var(--purple) 8%, transparent);
  font-size: var(--t-small); line-height: 1.6; color: var(--on-warm-2);
}
.cxf__honest strong { color: var(--on-warm); }
.cxf__out { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--warm-line); }
.cxf__out h2 { margin: 0 0 .5rem; font-size: 1.0625rem; }
.cxf__text {
  margin: 1rem 0; padding: 1rem 1.15rem; border: 1px solid var(--warm-line);
  border-radius: var(--r-md); background: var(--warm-lift);
  font-size: var(--t-small); line-height: 1.6; white-space: pre-wrap; overflow-x: auto;
}
.cxf__buttons { display: flex; flex-wrap: wrap; gap: .75rem; }
@media print {
  .cxf__actions, .cxf__honest, .cxf__out { display: none !important; }
  .cxf input, .cxf textarea { border: 0; border-bottom: 1pt solid #000; }
}


/* ── Legal Centre: grouped index ─────────────────────────────────────────
   The documents are grouped the way a customer looks for them rather than by
   number, so each group carries its own heading and its own list. */

.lc__group + .lc__group { margin-top: clamp(2.25rem, 4vw, 3.25rem); }
.lc__grouptitle {
  margin: 0 0 .85rem;
  font-family: var(--sans); font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--purple);
}
.lc__list { counter-reset: none; }

/* ── Contents: a rail on a desktop, a disclosure on a phone ──────────────
   One list, presented twice. A sticky rail beside the document is useful on
   a wide screen and pushes the contract off a phone, so on narrow screens
   the same list collapses into a <details> the reader opens. */

.ld__tocwrap > summary {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .7rem .9rem; cursor: pointer;
  border: 1px solid var(--warm-line); border-radius: var(--r-sm);
  background: var(--warm-lift);
  font-family: var(--sans); font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--on-warm-2);
}
.ld__tocwrap > summary::after {
  content: ""; flex: none; width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--fast) var(--ease);
}
.ld__tocwrap[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.ld__tocwrap > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ld__tocwrap > ol { margin-top: .6rem; }

@media (min-width: 1000px) {
  /* On a desktop the rail is always open and the summary is redundant. */
  .ld__tocwrap > summary { display: none; }
  .ld__tocwrap > ol { margin-top: 0; }
}
@media (max-width: 999px) {
  .ld__toc { margin-bottom: clamp(1.5rem, 3vw, 2rem); }
}

/* ── Bulleted sub-items ──────────────────────────────────────────────────
   Some documents carry a third outline level, which is a bulleted list
   under a clause rather than a numbered sub-clause. */
.ld__bullets {
  margin: 0 0 1.25rem 3.75rem; padding: 0 0 0 1.1rem;
  display: grid; gap: .4rem;
}
.ld__bullets li { font-size: var(--t-small); line-height: 1.7; color: var(--on-warm-2); }
@media (max-width: 720px) { .ld__bullets { margin-left: 1rem; } }

/* ── Previous / Legal Centre / next ──────────────────────────────────── */

.ld__seq {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem; align-items: stretch;
  margin-top: clamp(2rem, 4vw, 3rem); padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--warm-line);
}
.ld__seqlink {
  display: flex; flex-direction: column; gap: .2rem; min-width: 0;
  padding: .85rem 1rem;
  border: 1px solid var(--warm-line); border-radius: var(--r-sm);
  text-decoration: none; color: var(--on-warm);
  transition: border-color var(--base) var(--ease), background-color var(--base) var(--ease);
}
.ld__seqlink:hover { border-color: var(--purple); background: var(--warm-lift); }
.ld__seqlink:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ld__seqlink span {
  font-family: var(--sans); font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--on-warm-3, var(--on-warm-2));
}
.ld__seqlink strong { font-size: var(--t-small); font-weight: 600; line-height: 1.35; }
.ld__seqlink--next { text-align: right; }
.ld__seqlink--up   { text-align: center; }

@media (max-width: 720px) {
  .ld__seq { grid-template-columns: minmax(0, 1fr); }
  .ld__seqlink--next, .ld__seqlink--up { text-align: left; }
}

@media print {
  .ld__seq, .ld__tocwrap { display: none !important; }
}