/* ============================================================================
   Legal & standards pages — Privacy and Editorial Standards.

   Both run the homepage's stack (marketing.css + homepage-brand.css) rather
   than site.css, the same move about-page.css makes, so the hero, the button
   recipes and the closing CTA slab are literally the homepage's components and
   the pages read as a continuation of it.

   One stylesheet for the two pages rather than one each, because they are the
   same kind of page — a short standing document, no form, no product pitch —
   and they were sharing four blocks verbatim: the cut-down hero, the section
   head, the note card and the CTA email line. Those live here once under an
   `lg-` prefix; what only one page needs is prefixed `pp-` (privacy) or `ed-`
   (editorial) and kept in its own block below.

   Every rule is scoped to body.homepage-black-white.hp-brand, both for the
   --hb-* tokens and so none of it can reach the pages still on site.css.

   Section rhythm follows the homepage's ladder, as About does: white 64px,
   black band 64px, white 64px, grey note, CTA slab.
============================================================================ */

/* ---------------------------------------------------------------------------
   HERO — the homepage hero cut down, the same way .ab-hero cuts it. That one
   is a full-height statement; these sit above three or four more sections and
   only need room to breathe.
   ------------------------------------------------------------------------ */

body.homepage-black-white.hp-brand .lg-hero {
  min-height: 0;
  padding: clamp(112px, 12vw, 148px) 24px clamp(52px, 6vw, 76px);
}

body.homepage-black-white.hp-brand .lg-hero .hero-main-headline {
  margin-bottom: 1.1rem;
}

body.homepage-black-white.hp-brand .lg-hero .hero-subheadline {
  max-width: 660px;
  margin-bottom: 1.8rem;
}

body.homepage-black-white.hp-brand .lg-hero .hero-subheadline a {
  color: var(--hb-ink);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* Standing documents live or die on how current they look, so the review date
   goes in the hero as a fact rather than in italics at the top of the prose,
   where the old pages had it. Small caps mono, matching .ab-why-label. */

body.homepage-black-white.hp-brand .lg-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.homepage-black-white.hp-brand .lg-meta li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--hb-g-200);
  border-radius: var(--hb-r-pill);
  background: #ffffff;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--hb-g-500);
}

body.homepage-black-white.hp-brand .lg-meta strong {
  color: var(--hb-ink);
  font-weight: 700;
}

body.homepage-black-white.hp-brand .lg-meta svg {
  width: 13px;
  height: 13px;
  color: var(--hb-ink);
}

/* ---------------------------------------------------------------------------
   SHARED SECTION HEAD — the recipe the homepage repeats across .hp-facts,
   .hp-faq and .hp-who, and About repeats as .ab-head: centred, ~660px,
   2rem/800 title over a grey sub, with a --dark variant that flips two
   colours for the black band.
   ------------------------------------------------------------------------ */

body.homepage-black-white.hp-brand .lg-head {
  text-align: center;
  max-width: 660px;
  margin: 0 auto 40px;
}

body.homepage-black-white.hp-brand .lg-title {
  color: var(--hb-ink);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.25;
  margin: 0 0 14px;
  text-wrap: balance;
}

body.homepage-black-white.hp-brand .lg-sub {
  color: var(--hb-g-500);
  font-size: .95rem;
  line-height: 1.7;
  margin: 0;
  text-wrap: balance;
}

body.homepage-black-white.hp-brand .lg-sub strong {
  color: var(--hb-ink);
  font-weight: 600;
}

body.homepage-black-white.hp-brand .lg-head--dark .lg-title {
  color: #ffffff;
}

body.homepage-black-white.hp-brand .lg-head--dark .lg-sub {
  color: rgba(255, 255, 255, .58);
}

body.homepage-black-white.hp-brand .lg-head--dark .lg-sub strong {
  color: #ffffff;
}

/* ---------------------------------------------------------------------------
   SECTION GROUNDS — the three the ladder alternates between.
   ------------------------------------------------------------------------ */

body.homepage-black-white.hp-brand .lg-white {
  background: #ffffff;
  padding: 64px 0;
}

body.homepage-black-white.hp-brand .lg-white + .lg-white {
  border-top: 1px solid var(--hb-g-200);
}

body.homepage-black-white.hp-brand .lg-dark {
  background: var(--hb-ink);
  padding: 64px 0;
}

/* ---------------------------------------------------------------------------
   HAIRLINE INDEX — the homepage's index grid, used on both pages for the
   "short version" of the document. Not cards: a black band sits directly
   below on both pages, and two card grids back to back read as one
   undifferentiated block.
   ------------------------------------------------------------------------ */

body.homepage-black-white.hp-brand .lg-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.2rem 2.4rem;
}

body.homepage-black-white.hp-brand .lg-item {
  border-top: 2px solid var(--hb-ink);
  padding-top: 1rem;
}

body.homepage-black-white.hp-brand .lg-item h3 {
  margin: 0 0 .5rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--hb-ink);
}

body.homepage-black-white.hp-brand .lg-item p {
  margin: 0;
  font-size: .87rem;
  line-height: 1.6;
  color: var(--hb-g-500);
}

body.homepage-black-white.hp-brand .lg-item a {
  color: var(--hb-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.homepage-black-white.hp-brand .lg-foot {
  margin: 2.8rem 0 0;
  text-align: center;
  font-size: .92rem;
  line-height: 1.7;
  color: var(--hb-g-500);
}

body.homepage-black-white.hp-brand .lg-foot a {
  color: var(--hb-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   THE DOCUMENT ITSELF — contents rail beside the prose.

   A policy is the one thing on this site people arrive at looking for a
   single clause, so the sections are numbered and the rail lists them. The
   rail is a real <nav> landmark rather than decoration — its links are
   focusable, so hiding it from assistive tech would leave keyboard users
   tabbing through stops nothing announces.
   ------------------------------------------------------------------------ */

body.homepage-black-white.hp-brand .lg-doc {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 0 56px;
  align-items: start;
  max-width: 980px;
  margin: 0 auto;
}

body.homepage-black-white.hp-brand .lg-toc {
  position: sticky;
  top: 112px;
  border-top: 2px solid var(--hb-ink);
  padding-top: 14px;
}

body.homepage-black-white.hp-brand .lg-toc-label {
  display: block;
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--hb-g-400);
  margin-bottom: 12px;
}

body.homepage-black-white.hp-brand .lg-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: lg-toc;
}

body.homepage-black-white.hp-brand .lg-toc li {
  counter-increment: lg-toc;
  margin-bottom: 9px;
}

body.homepage-black-white.hp-brand .lg-toc a {
  display: flex;
  gap: 9px;
  font-size: .84rem;
  line-height: 1.45;
  color: var(--hb-g-500);
  text-decoration: none;
  transition: color .2s ease;
}

body.homepage-black-white.hp-brand .lg-toc a::before {
  content: counter(lg-toc, decimal-leading-zero);
  flex: none;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--hb-g-400);
  padding-top: .12rem;
}

body.homepage-black-white.hp-brand .lg-toc a:hover {
  color: var(--hb-ink);
}

body.homepage-black-white.hp-brand .lg-toc a:hover::before {
  color: var(--hb-ink);
}

/* Sections carry their number in the same face as the rail, so a link landing
   mid-document lands somewhere that identifies itself. */

body.homepage-black-white.hp-brand .lg-sec {
  counter-increment: lg-sec;
  border-top: 1px solid var(--hb-g-200);
  padding: 26px 0 4px;
  scroll-margin-top: 112px;
}

body.homepage-black-white.hp-brand .lg-sec:first-child {
  border-top: 2px solid var(--hb-ink);
  padding-top: 14px;
}

body.homepage-black-white.hp-brand .lg-body {
  counter-reset: lg-sec;
  border-bottom: 1px solid var(--hb-g-200);
  padding-bottom: 26px;
}

body.homepage-black-white.hp-brand .lg-sec h2 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 12px;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--hb-ink);
}

body.homepage-black-white.hp-brand .lg-sec h2::before {
  content: counter(lg-sec, decimal-leading-zero);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--hb-g-400);
}

body.homepage-black-white.hp-brand .lg-sec p {
  margin: 0 0 .9rem;
  font-size: .93rem;
  line-height: 1.75;
  color: var(--hb-g-600);
}

body.homepage-black-white.hp-brand .lg-sec p:last-child {
  margin-bottom: 0;
}

body.homepage-black-white.hp-brand .lg-sec strong {
  color: var(--hb-ink);
  font-weight: 600;
}

body.homepage-black-white.hp-brand .lg-sec a {
  color: var(--hb-ink);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* List items are the clauses people quote back at you, so they get the
   hairline treatment rather than bullets. */

body.homepage-black-white.hp-brand .lg-sec ul {
  margin: 0 0 .9rem;
  padding: 0;
  list-style: none;
}

body.homepage-black-white.hp-brand .lg-sec ul li {
  border-left: 2px solid var(--hb-g-200);
  padding: 2px 0 2px 16px;
  margin-bottom: 14px;
  font-size: .93rem;
  line-height: 1.75;
  color: var(--hb-g-600);
}

body.homepage-black-white.hp-brand .lg-sec ul li:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   NOTE CARD — one disclaimer per page, so it gets the page's only grey ground
   and a left rule rather than being another quiet paragraph. Same recipe as
   .ab-note-card, which carries the identical sentence on About.
   ------------------------------------------------------------------------ */

body.homepage-black-white.hp-brand .lg-note {
  background: var(--hb-g-50);
  padding: 56px 0;
  border-top: 1px solid var(--hb-g-200);
}

body.homepage-black-white.hp-brand .lg-note-card {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  max-width: 780px;
  margin: 0 auto;
  padding: 24px 28px;
  background: #ffffff;
  border: 1px solid var(--hb-g-200);
  border-left: 3px solid var(--hb-ink);
  border-radius: var(--hb-r-md);
}

body.homepage-black-white.hp-brand .lg-note-ico {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--hb-ink);
}

body.homepage-black-white.hp-brand .lg-note-ico svg {
  width: 100%;
  height: 100%;
  display: block;
}

body.homepage-black-white.hp-brand .lg-note-card h2 {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--hb-ink);
}

body.homepage-black-white.hp-brand .lg-note-card p {
  margin: 0 0 .7rem;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--hb-g-500);
}

body.homepage-black-white.hp-brand .lg-note-card p:last-child {
  margin-bottom: 0;
}

body.homepage-black-white.hp-brand .lg-note-card strong {
  color: var(--hb-ink);
  font-weight: 600;
}

body.homepage-black-white.hp-brand .lg-note-card a {
  color: var(--hb-ink);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   CLOSING CTA — the homepage's slab. Only the email line under the buttons is
   new; everything else is .cta-section-bw as-is.
   ------------------------------------------------------------------------ */

body.homepage-black-white.hp-brand .lg-cta-email {
  margin: 24px 0 0;
  font-size: .88rem;
  color: rgba(255, 255, 255, .6);
}

body.homepage-black-white.hp-brand .lg-cta-email a {
  color: #ffffff;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================================
   PRIVACY ONLY
============================================================================ */

/* What is actually set in the browser, and when. The old page said this in
   three paragraphs; as rows it answers the only question people open a cookie
   policy to ask. Every row states a fact the prose below still states.

   A grid rather than a <table> because the rows are three independent facts,
   not data to compare down a column — and at 560px a real table cannot fold. */

body.homepage-black-white.hp-brand .pp-rows {
  max-width: 860px;
  margin: 0 auto;
}

body.homepage-black-white.hp-brand .pp-row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 132px;
  gap: 0 24px;
  align-items: baseline;
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding: 18px 0;
  transition: border-color .2s ease;
}

body.homepage-black-white.hp-brand .pp-row:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

body.homepage-black-white.hp-brand .pp-row:hover {
  border-color: rgba(255, 255, 255, .45);
}

body.homepage-black-white.hp-brand .pp-row-name {
  margin: 0;
  color: #ffffff;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

body.homepage-black-white.hp-brand .pp-row-desc {
  margin: 0;
  color: rgba(255, 255, 255, .52);
  font-size: .85rem;
  line-height: 1.6;
}

/* The state pill. Two readings only — set on consent, or never set — so it is
   an outline for the first and a filled white chip for the second, the second
   being the reassuring one. */

body.homepage-black-white.hp-brand .pp-row-state {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--hb-r-pill);
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  white-space: nowrap;
  color: rgba(255, 255, 255, .72);
}

body.homepage-black-white.hp-brand .pp-row-state--never {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--hb-ink);
}

body.homepage-black-white.hp-brand .pp-rows-foot {
  max-width: 860px;
  margin: 2rem auto 0;
  text-align: center;
  font-size: .88rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .62);
}

body.homepage-black-white.hp-brand .pp-rows-foot strong {
  color: #ffffff;
  font-weight: 600;
}

/* ============================================================================
   EDITORIAL ONLY
============================================================================ */

/* How a guide gets made, as four steps on the black band. Same drawing as the
   homepage's .hp-hiw steps — a big ghosted numeral over a white title and grey
   body — because it is the same kind of content: an ordered process. */

body.homepage-black-white.hp-brand .ed-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 2.4rem;
}

body.homepage-black-white.hp-brand .ed-step {
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding: 18px 0 4px;
  transition: border-color .2s ease;
}

body.homepage-black-white.hp-brand .ed-step:hover {
  border-color: rgba(255, 255, 255, .45);
}

body.homepage-black-white.hp-brand .ed-step-num {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  color: rgba(255, 255, 255, .22);
  margin-bottom: 12px;
}

body.homepage-black-white.hp-brand .ed-step h3 {
  color: #ffffff;
  font-size: .98rem;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0 0 6px;
}

body.homepage-black-white.hp-brand .ed-step p {
  color: rgba(255, 255, 255, .52);
  font-size: .8rem;
  line-height: 1.55;
  margin: 0;
}

body.homepage-black-white.hp-brand .ed-steps-foot {
  max-width: 720px;
  margin: 2.8rem auto 0;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  text-align: center;
  font-size: .95rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, .62);
}

body.homepage-black-white.hp-brand .ed-steps-foot strong {
  color: #ffffff;
  font-weight: 600;
}

/* The two primary sources, given as cards rather than links in a sentence —
   they are the whole basis of the page's claim to accuracy, so they are worth
   the space. Homepage card recipe: 1px border, 14px radius, flat at rest. */

body.homepage-black-white.hp-brand .ed-sources {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 860px;
  margin: 0 auto;
}

body.homepage-black-white.hp-brand .ed-source {
  display: block;
  padding: 24px 26px;
  background: #ffffff;
  border: 1px solid var(--hb-g-200);
  border-radius: var(--hb-r-lg);
  text-decoration: none;
  transition: var(--hb-ease);
}

body.homepage-black-white.hp-brand .ed-source:hover {
  border-color: var(--hb-g-300);
  box-shadow: var(--hb-sh-card-hover);
  transform: translateY(-2px);
}

body.homepage-black-white.hp-brand .ed-source-label {
  display: block;
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--hb-g-400);
  margin-bottom: 10px;
}

body.homepage-black-white.hp-brand .ed-source-name {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--hb-ink);
}

body.homepage-black-white.hp-brand .ed-source-name svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--hb-g-400);
  transition: color .2s ease;
}

body.homepage-black-white.hp-brand .ed-source:hover .ed-source-name svg {
  color: var(--hb-ink);
}

body.homepage-black-white.hp-brand .ed-source p {
  margin: 0;
  font-size: .87rem;
  line-height: 1.65;
  color: var(--hb-g-500);
}

/* The correction promise. A single claim, so it gets a card of its own with
   the section's only black fill on the icon tile. */

body.homepage-black-white.hp-brand .ed-fix {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 0 22px;
  align-items: start;
  max-width: 860px;
  margin: 2.4rem auto 0;
  padding: 26px 28px;
  scroll-margin-top: 112px;
  background: var(--hb-g-50);
  border: 1px solid var(--hb-g-200);
  border-radius: var(--hb-r-lg);
}

body.homepage-black-white.hp-brand .ed-fix-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--hb-r-md);
  background: var(--hb-ink);
  color: #ffffff;
}

body.homepage-black-white.hp-brand .ed-fix-ico svg {
  width: 24px;
  height: 24px;
  display: block;
}

body.homepage-black-white.hp-brand .ed-fix h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--hb-ink);
}

body.homepage-black-white.hp-brand .ed-fix p {
  margin: 0;
  font-size: .93rem;
  line-height: 1.75;
  color: var(--hb-g-600);
}

body.homepage-black-white.hp-brand .ed-fix a {
  color: var(--hb-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================================
   RESPONSIVE — the homepage's two steps: four across to two at 900px, then to
   one at 560px, with the section padding dropping to 48px with it.
============================================================================ */

@media (max-width: 1000px) {

  /* The rail cannot be sticky beside prose it no longer sits beside, so it
     becomes a plain contents block above the document. */
  body.homepage-black-white.hp-brand .lg-doc {
    grid-template-columns: 1fr;
    gap: 32px 0;
  }

  body.homepage-black-white.hp-brand .lg-toc {
    position: static;
    top: auto;
  }

  body.homepage-black-white.hp-brand .lg-toc ol {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 24px;
  }

  /* The rail is the only real navigation control on these pages, and on touch
     it was unhittable. Measured at 360px: each link box was 328 x 19.5px — one
     line of .84rem text with no vertical padding — separated by the 9px li
     margin, a 28.5px pitch, so a fingertip covered two stops at once. That is
     under the 44px target and under WCAG 2.5.8's reduced 24px minimum.
     The 9px sat OUTSIDE the anchor, so it was dead area buying no target; move
     it inside as padding and the whole row becomes tappable — 19.5 + 26 =
     45.5px, rows contiguous with no dead gap. The row gap above is already 0,
     so the two-column layout at this width stays flush. */
  body.homepage-black-white.hp-brand .lg-toc li {
    margin-bottom: 0;
  }

  body.homepage-black-white.hp-brand .lg-toc a {
    padding: 13px 0;
  }
}

@media (max-width: 900px) {

  body.homepage-black-white.hp-brand .lg-grid,
  body.homepage-black-white.hp-brand .ed-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  body.homepage-black-white.hp-brand .ed-sources {
    grid-template-columns: 1fr;
  }

  /* The state pill drops under the description rather than squeezing the
     middle column to nothing. */
  body.homepage-black-white.hp-brand .pp-row {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 8px 20px;
  }

  body.homepage-black-white.hp-brand .pp-row-state {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 560px) {

  body.homepage-black-white.hp-brand .lg-white,
  body.homepage-black-white.hp-brand .lg-dark {
    padding: 48px 0;
  }

  body.homepage-black-white.hp-brand .lg-title {
    font-size: 1.55rem;
  }

  body.homepage-black-white.hp-brand .lg-grid,
  body.homepage-black-white.hp-brand .ed-steps {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }

  body.homepage-black-white.hp-brand .lg-toc ol {
    grid-template-columns: 1fr;
  }

  /* Name over description over pill — a 180px label column leaves the
     description about twenty characters at this width. */
  body.homepage-black-white.hp-brand .pp-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  body.homepage-black-white.hp-brand .pp-row-state {
    grid-column: 1;
    margin-top: 4px;
  }

  body.homepage-black-white.hp-brand .lg-note-card {
    padding: 20px;
    gap: 14px;
  }

  /* The icon tile would push the prose into a ~150px column, so it goes above
     the heading instead of beside it — the same fold .ab-author-card makes. */
  body.homepage-black-white.hp-brand .ed-fix {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 22px;
  }
}