/* =========================================================
   LEGAL — privacy-notice, terms-of-use, sitemap.
   See LEGAL-PAGES-PLAN.md §4.2. Added 2026-09-03.

   Loads after pages.css, scoped to `body.page--legal`, so
   nothing here reaches the other eight pages. Colours, fonts
   and rhythm are tokens only — no new palette, no new
   typeface, no new spacing scale. What IS local is a document
   type ramp: the shared --fs-h2 tops out at 2.9rem, which is
   right for a section head standing alone above a grid and
   far too loud twenty-one times down a contract.

   WHAT THESE PAGES ARE
   ~3,000 words of running legal text each, which nothing else
   on this site does. Every other page is bands of components;
   this is a document. Three consequences drive the whole file:

     1. MEASURE. Legal text at full container width is
        unreadable — the eye loses the line return. Capped at
        68ch (72ch on the sitemap, which is link lists rather
        than prose).
     2. LIGHT GROUND. The navy treatment is for selling. A
        document is read, at length, often on a phone, and
        often because something has gone wrong — dark type on
        paper, at body size, is the only honest choice.
     3. NO PHOTOGRAPHIC HERO. There is no honest photograph of
        a Privacy Notice and we are not inventing one. The
        hero is the shared text `.phero`, cut back to the page
        title and the date line the document itself carries.

   THE ONE ANCHOR THAT MUST NOT BREAK
   `#cookies` on the Privacy Notice is the live target of the
   Cookie Policy link in the footer of all ELEVEN pages. If it
   stops clearing the fixed nav, the site-wide footer breaks.
   It is guarded by _qc/anchors.js and belt-and-braced here —
   see "ANCHOR TARGETS" below.
   ========================================================= */

/* =========================================================
   0 · HERO — text only, deliberately quiet.

   `.phero` and `.phero__*` live in the shared pages.css and
   this file may not edit them; everything below overrides
   from the outside through `.lhero`, so the other pages keep
   the hero they have.

   The h1 keeps the molten it has everywhere else — this page
   is quieter than its siblings, not a different site. What is
   cut is the scale: --fs-h1 runs to 5.25rem, which on two
   words over a date line reads as a poster rather than a
   document. Half the eyebrow-to-content padding goes too.

   NO `.phero__lede`, NO `.phero__actions`, NO badges. A legal
   page has nothing to sell and nowhere to send you.
   ========================================================= */

.page--legal .lhero {
  padding-bottom: clamp(2.2rem, 5vh, 3.4rem);
}

/* Held under the shared 15ch cap so "Privacy Notice" and
   "Terms of Use" both set on one line at every width. */
.page--legal .lhero h1 {
  font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.6rem);
  max-width: 18ch;
}

/* The date line the document itself carries — "Last Updated"
   on the Notice, "Effective Date" on the Terms. Mono, because
   on this site mono is the register for a stamped fact, and
   the Terms refer to this line by name in clause 1. */
.page--legal .lhero__meta {
  margin: clamp(1rem, 2.4vh, 1.5rem) 0 0;
  font-family: var(--f-mono);
  font-size: var(--fs-small);
  letter-spacing: .04em;
  color: var(--steel);
}
.page--legal .lhero__meta time { color: var(--white); }

/* One line of orientation under the title on the two content
   pages: what this document is and who it is from. Not a
   `.phero__lede` — that class is animated by js/pages.js and
   is styled for a selling paragraph. */
.page--legal .lhero__note {
  max-width: 56ch;
  margin: 1.1rem 0 0;
  color: var(--steel);
  font-size: var(--fs-small);
}
/* base.css strips every link on the site down to `color: inherit;
   text-decoration: none`, which is right for nav and cards and wrong for
   a link buried in a sentence — it becomes invisible. Anything inline in
   running text gets an underline back, here and in the document body. */
.page--legal .lhero__note a {
  color: var(--ember);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule-d2);
  transition: text-decoration-color var(--d-xs) var(--e-quad);
}
.page--legal .lhero__note a:hover { text-decoration-color: var(--ember); }

/* =========================================================
   1 · THE DOCUMENT BAND

   Two columns above 1000px: a sticky contents rail and the
   document. Below that the rail collapses away entirely
   (LEGAL-PAGES-PLAN.md §4.2) — it is a convenience index, and
   every target in it is reachable by scrolling, so duplicating
   twenty-one links above the text on a phone costs a screen
   and a half and buys nothing.
   ========================================================= */

.page--legal .lgl { padding-top: clamp(2.6rem, 6vh, 4rem); }

.page--legal .lgl__grid { display: block; }

.page--legal .lgl__doc {
  /* THE MEASURE. Everything else in this file exists to serve
     this one declaration. */
  max-width: 68ch;
}

@media (min-width: 1000px) {
  .page--legal .lgl__grid {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }
}

/* ---------------------------------------------------------
   1.1 · Contents rail

   Sticky, so a reader four clauses deep can still see where
   they are and jump. `top` clears the fixed nav the same way
   html's scroll-padding-top does, and the max-height/overflow
   pair is what stops the Terms' twenty-one entries running
   past the bottom of a short viewport with no way to reach
   the last one.
   --------------------------------------------------------- */

.page--legal .lgl__toc { display: none; }

@media (min-width: 1000px) {
  .page--legal .lgl__toc {
    display: block;
    position: sticky;
    top: calc(var(--nav-h) + 1.2rem);
    max-height: calc(100vh - var(--nav-h) - 3rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: .6rem;
    border-left: 1px solid var(--rule-l);
  }
}

.page--legal .lgl__toch {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: 400;
  color: var(--molten-ink);
  padding-left: 1.1rem;
  margin-bottom: .9rem;
}

.page--legal .lgl__toc ol { list-style: none; }
.page--legal .lgl__toc li + li { margin-top: .1rem; }

.page--legal .lgl__toc a {
  display: block;
  padding: .32rem 0 .32rem 1.1rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--slate);
  transition: color var(--d-xs) var(--e-quad),
              border-color var(--d-xs) var(--e-quad);
}
.page--legal .lgl__toc a:hover,
.page--legal .lgl__toc a:focus-visible {
  color: var(--ink);
  border-left-color: var(--molten-ink);
}

/* =========================================================
   2 · DOCUMENT TYPE

   The ramp, and the reasoning for each step:

     h2  section head. Display face, because it is a heading,
         but nowhere near --fs-h2 — twenty-one of those down
         one page is a table of contents wearing a costume.
     h3  sub-head ("Essential Cookies", "Assignment"). Body
         face at --fs-h3 with a mono-ish label treatment would
         be a third voice; it stays in the display face one
         step down, which is the site's existing h3 register.
     p   --fs-body at the document line-height set below.

   Line-height is 1.72 rather than the body default 1.62. At
   68ch and three thousand words the extra tenth is the
   difference between reading and scanning.
   ========================================================= */

.page--legal .lgl__doc {
  color: var(--ink);
  line-height: 1.72;
}

.page--legal .lgl__doc > h2 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.32rem, 1.12rem + .75vw, 1.78rem);
  line-height: 1.2;
  letter-spacing: -.018em;
  color: var(--ink);
  margin-top: clamp(2.6rem, 6vh, 3.6rem);
  padding-top: clamp(1.4rem, 3vh, 2rem);
  border-top: 1px solid var(--rule-l);
}
/* No rule above the first heading — it would read as a second
   band edge one line under the seam. */
.page--legal .lgl__doc > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.page--legal .lgl__doc h3 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
  margin-top: clamp(1.6rem, 3.4vh, 2.2rem);
}

.page--legal .lgl__doc p { margin-top: 1rem; }
.page--legal .lgl__doc h2 + p,
.page--legal .lgl__doc h3 + p { margin-top: .8rem; }

/* The opening statement of each document, before the first
   numbered or named section. Slightly larger, so the reader
   can tell the preamble from clause 1. */
.page--legal .lgl__lede {
  font-size: clamp(1.04rem, .98rem + .3vw, 1.18rem);
  color: var(--ink);
}

/* ---------------------------------------------------------
   2.1 · Lists

   base.css strips list-style and padding from every ul and ol
   on the site, which is right for nav and card grids and
   wrong for a document — these are the client's own bulleted
   clauses and they have to read as a list. The marker is
   drawn rather than native so it can take the accent and sit
   on the first line's baseline at any type size.
   --------------------------------------------------------- */

.page--legal .lgl__doc ul {
  list-style: none;
  margin-top: 1rem;
  padding-left: 0;
}
.page--legal .lgl__doc ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-top: .55rem;
}
.page--legal .lgl__doc ul li::before {
  content: '';
  position: absolute;
  left: .18rem;
  top: calc(.86em - 2px);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--molten-ink);
}

/* =========================================================
   3 · THE ALL-CAPS BLOCKS — Terms §14 and §15.

   The client's lawyer set the warranty disclaimer and the
   liability limitation in capitals and they stay in capitals:
   that convention is doing legal work (conspicuousness), and
   we do not edit this text.

   What we CAN fix is the reason capitals are hated. Caps at
   small sizes with tight leading is where a legal page stops
   being readable — every word is the same rectangle, so there
   are no ascenders or descenders left to shape it. So: full
   body size, 1.9 line-height, a little positive tracking, and
   a paper-white panel with an accent edge that says "this is
   the important one" rather than "this is the small print".

   NOT `text-transform: uppercase`. The capitals are in the
   source text, as written, so they survive copy-paste, screen
   readers spelling out styled text, and anyone diffing this
   page against the client's PDF.
   ========================================================= */

.page--legal .lgl__caps {
  margin-top: 1.2rem;
  padding: clamp(1.1rem, 2.6vh, 1.6rem) clamp(1.1rem, 3vw, 1.7rem);
  background: var(--white);
  border: 1px solid var(--rule-l);
  border-left: 3px solid var(--molten-ink);
  border-radius: var(--rad);
}
.page--legal .lgl__caps p {
  margin-top: 0;
  font-size: var(--fs-body);
  line-height: 1.9;
  letter-spacing: .012em;
  color: var(--ink);
}
.page--legal .lgl__caps p + p { margin-top: 1.1rem; }
/* Clause 15's capital sentence ends in a colon and its seven items
   complete it, so the list lives INSIDE the panel. It is normal case in
   the source and keeps the document's leading — only the capitals need
   the 1.9. */
.page--legal .lgl__caps ul { margin-top: .9rem; }
.page--legal .lgl__caps li { line-height: 1.72; }

/* =========================================================
   4 · CONTACT BLOCK — the close of both documents.

   <address> carries a real UA italic, which would be the only
   italic on the site; it is reset here rather than fought
   with elsewhere.

   ⚠ THE TELEPHONE NUMBER IS A DELIBERATE DEVIATION from the
   client's PDFs. Both documents give +60 12-966 9570; the
   site gives +603 3101 3938 in fifteen places. The conflict
   is unresolved with the client and is recorded in the page
   sources and in LEGAL-PAGES-PLAN.md §2.
   ========================================================= */

.page--legal .lgl__contact {
  margin-top: 1.4rem;
  padding: clamp(1.2rem, 3vh, 1.8rem) clamp(1.2rem, 3vw, 1.8rem);
  background: var(--white);
  border: 1px solid var(--rule-l);
  border-radius: var(--rad);
  font-style: normal;
  line-height: 1.75;
}
.page--legal .lgl__contact b {
  font-family: var(--f-display);
  font-weight: 600;
}
.page--legal .lgl__contact a {
  color: var(--molten-ink);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule-l2);
  transition: text-decoration-color var(--d-xs) var(--e-quad);
}
.page--legal .lgl__contact a:hover { text-decoration-color: var(--molten-ink); }

/* Body links inside the RUNNING TEXT — the Terms point at the
   Privacy Notice four times, and the Notice points back.

   `:not(.lgl__doc--map)` is load-bearing, not tidiness. Without it
   `.lgl__doc li > a` (0,2,2) also matches every link in the sitemap's
   list, and it out-specifies `.smap__link` (0,2,0) — so the sitemap's
   entries silently rendered in --molten-ink with a prose underline
   instead of the --ink + drawn-arrow treatment they are written for,
   and .smap__link's own :hover colour change was a no-op. Measured
   2026-09-03: computed colour was rgb(194,65,12), not rgb(15,27,45).
   It still cleared AA at 4.74:1, which is exactly why nothing flagged
   it. The sitemap carries no running prose, so excluding it here is
   the honest scope rather than a specificity arms race. */
.page--legal .lgl__doc:not(.lgl__doc--map) p > a,
.page--legal .lgl__doc:not(.lgl__doc--map) li > a {
  color: var(--molten-ink);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule-l2);
  transition: text-decoration-color var(--d-xs) var(--e-quad);
}
.page--legal .lgl__doc:not(.lgl__doc--map) p > a:hover,
.page--legal .lgl__doc:not(.lgl__doc--map) li > a:hover { text-decoration-color: var(--molten-ink); }

/* =========================================================
   5 · ANCHOR TARGETS

   html already carries scroll-padding-top: calc(--nav-h +
   1.2rem) in tokens.css, which fixes every in-page anchor on
   the site at once. scroll-margin-top is set here as well, on
   the elements that are actually linked to, for two reasons:

     · scroll-padding-top is a property of the SCROLLING
       ELEMENT. If a future change ever moves this content
       into its own scroll container — a WordPress theme
       wrapper is the realistic one, and this site is built to
       be pasted into WordPress — the padding stops applying
       and every anchor lands under the nav. scroll-margin-top
       travels with the target and survives that.
     · #cookies is a live footer target on all eleven pages,
       so it is the one anchor on this site whose failure is
       not local to a page. It gets belt and braces.

   The :target rule is what makes arriving somewhere legible.
   A reader who clicks "Cookie Policy" in the footer lands
   mid-document with no idea which of twenty headings they
   were sent to; the accent bar answers that in one glance and
   then gets out of the way. It is an interaction state, not
   an entrance — nothing here animates on load.
   ========================================================= */

.page--legal .lgl__doc > h2,
.page--legal .lgl__doc h3[id] {
  scroll-margin-top: calc(var(--nav-h) + 1.2rem);
}

.page--legal .lgl__doc > h2:target,
.page--legal .lgl__doc h3[id]:target {
  position: relative;
  color: var(--molten-ink);
}
.page--legal .lgl__doc > h2:target::before,
.page--legal .lgl__doc h3[id]:target::before {
  content: '';
  position: absolute;
  left: -.9rem;
  top: calc(.62em);
  width: 3px;
  height: 1.1em;
  background: var(--molten-ink);
  border-radius: 2px;
}
@media (max-width: 640px) {
  .page--legal .lgl__doc > h2:target::before,
  .page--legal .lgl__doc h3[id]:target::before { left: -.55rem; }
}

/* =========================================================
   6 · SITEMAP

   Same document shell, different content: link lists rather
   than prose, so the measure opens up a little. The markup is
   GENERATED from the page registry in build/build.js — see
   the {{SITEMAP}} block there — so nothing in this section
   assumes a fixed number of entries or groups.
   ========================================================= */

.page--legal .lgl__doc--map { max-width: 72ch; }

/* The sitemap has no contents rail — it IS one. It still sits in column 2
   so its measure and left edge line up with the other two legal pages,
   which the visitor reaches from the same footer row and often one after
   the other. Below 1000px .lgl__grid is display:block and this is inert. */
@media (min-width: 1000px) {
  .page--legal .lgl__grid--map .lgl__doc { grid-column: 2; }
}

.page--legal .smap__group {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.32rem, 1.12rem + .75vw, 1.78rem);
  line-height: 1.2;
  letter-spacing: -.018em;
  color: var(--ink);
  margin-top: clamp(2.6rem, 6vh, 3.6rem);
  padding-top: clamp(1.4rem, 3vh, 2rem);
  border-top: 1px solid var(--rule-l);
  scroll-margin-top: calc(var(--nav-h) + 1.2rem);
}
.page--legal .smap__group:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.page--legal .smap { list-style: none; margin-top: .4rem; padding-left: 0; }

.page--legal .smap__item {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--rule-l);
}
.page--legal .smap__item:last-child { border-bottom: 0; }

.page--legal .smap__link {
  display: inline-flex;
  align-items: baseline;
  gap: .6rem;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  color: var(--ink);
  transition: color var(--d-xs) var(--e-quad);
}
/* The arrow is drawn, not a glyph: it has to be able to move
   on hover without the text moving with it. */
.page--legal .smap__link::after {
  content: '';
  width: .55em;
  height: .55em;
  border-top: 2px solid var(--molten-ink);
  border-right: 2px solid var(--molten-ink);
  transform: rotate(45deg) translate(0, 0);
  transition: transform var(--d-s) var(--e-out);
}
.page--legal .smap__link:hover,
.page--legal .smap__link:focus-visible { color: var(--molten-ink); }
.page--legal .smap__link:hover::after,
.page--legal .smap__link:focus-visible::after {
  transform: rotate(45deg) translate(3px, -3px);
}

.page--legal .smap__desc {
  margin-top: .35rem;
  max-width: 62ch;
  color: var(--slate);
  font-size: var(--fs-small);
}

/* =========================================================
   7 · REDUCED MOTION

   Last block in the last stylesheet these pages load, which
   is the only place it is guaranteed to win: media queries
   add no specificity, so an equal-specificity tie is decided
   by source order alone (PLAYBOOK — a reduce block in an
   early file silently loses to any later component rule).

   There is very little to turn off, which is the point. The
   only motion on these pages is the shared hero entrance in
   js/pages.js, which already has its own reduced-motion
   branch, the seam's background-position loop, and the
   hover/focus transitions below. Nothing is gated behind an
   animation: with JS dead, CSS off or motion reduced, the
   whole document is present and readable.
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .page--legal .lgl__toc a,
  .page--legal .lgl__contact a,
  .page--legal .lgl__doc:not(.lgl__doc--map) p > a,
  .page--legal .lgl__doc:not(.lgl__doc--map) li > a,
  .page--legal .smap__link,
  .page--legal .smap__link::after {
    transition: none;
  }
  .page--legal .smap__link:hover::after,
  .page--legal .smap__link:focus-visible::after {
    transform: rotate(45deg) translate(0, 0);
  }
  /* The seam's 14s background-position loop is decorative and
     perpetual — the one thing on this page that never stops. */
  .page--legal .seam { animation: none; }
}