/* ============================================================================
   About page.

   Runs the homepage's stack (marketing.css + homepage-brand.css) rather than
   site.css, the same way waitlist-page.css does, so the hero, the closing CTA
   slab and the button recipes are literally the homepage's components and the
   page reads as a continuation of it.

   What it adds is only the section furniture the About copy needs: a shared
   section head, two hairline index grids (one on white, one on the black
   band), the author card and the legal-advice note. Every rule is scoped to
   body.homepage-black-white.hp-brand for the --hb-* tokens and so it cannot
   reach the pages still on site.css.

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

/* ---------------------------------------------------------------------------
   HERO - the homepage hero, cut down. That one is a full-height statement;
   this sits above four more sections and only needs room to breathe.
   ------------------------------------------------------------------------ */

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

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

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

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

/* ---------------------------------------------------------------------------
   SHARED SECTION HEAD

   The homepage repeats one head recipe across .hp-facts, .hp-faq and .hp-who:
   centred, ~660px, 2rem/800 title over a grey sub. Written once here because
   three of this page's four sections use it, and the .ab-head--dark variant
   only has to flip two colours.
   ------------------------------------------------------------------------ */

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

body.homepage-black-white.hp-brand .ab-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 .ab-sub {
  color: var(--hb-g-500);
  font-size: .95rem;
  line-height: 1.7;
  margin: 0;
  text-wrap: balance;
}

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

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

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

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

/* ---------------------------------------------------------------------------
   WHAT IT IS - the platform, as an index rather than a sentence.

   The old page ran the whole product through one comma-spliced paragraph.
   Same eight things, same claims, set as the homepage's hairline index so it
   scans. Not cards: the black band directly below is already an index, and
   two card grids back to back read as one undifferentiated block.
   ------------------------------------------------------------------------ */

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

/* The homepage's white-section list, .hp-demo-point (homepage-brand.css:483):
   700 title over grey body, 1px --hb-g-200 hairline between rows. Two columns
   of four so eight rows do not run to a page. The 2px black rules this
   replaces were the heaviest mark on the page and exist nowhere on the
   homepage, whose only rule on white is a 1px hairline. */
body.homepage-black-white.hp-brand .ab-lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 4rem;
  max-width: 980px;
  margin: 0 auto;
}

body.homepage-black-white.hp-brand .ab-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.homepage-black-white.hp-brand .ab-row {
  padding: 14px 0;
}

body.homepage-black-white.hp-brand .ab-row + .ab-row {
  border-top: 1px solid rgba(255, 255, 255, .14);
}

body.homepage-black-white.hp-brand .ab-row-title {
  display: block;
  color: #ffffff;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: 3px;
}

body.homepage-black-white.hp-brand .ab-row-desc {
  display: block;
  color: rgba(255, 255, 255, .58);
  font-size: .84rem;
  line-height: 1.6;
}

body.homepage-black-white.hp-brand .ab-what-foot {
  margin: 2.2rem 0 0;
  text-align: center;
  font-size: .9rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .58);
}

body.homepage-black-white.hp-brand .ab-what-foot a {
  color: #ffffff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   WHY IT EXISTS - white band, .hp-who's columns on white.

   The four things the Renters' Rights Act 2025 changed, one per column, drawn
   the way the homepage draws its audience index: a hairline over a small caps
   label, a white title and grey body. No claim here is new - it is the old
   page's "Why it exists" paragraph split into the four changes it lists.
   ------------------------------------------------------------------------ */

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

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

body.homepage-black-white.hp-brand .ab-why-item {
  border-top: 1px solid var(--hb-g-200);
  padding: 16px 0 4px;
  transition: border-color .2s ease;
}

body.homepage-black-white.hp-brand .ab-why-item:hover {
  border-color: var(--hb-ink);
}

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

body.homepage-black-white.hp-brand .ab-why-item h3 {
  color: var(--hb-ink);
  font-size: .98rem;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0 0 6px;
}

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

/* The paragraph the four columns above were split out of, kept whole as the
   band's closing line so the argument still reads as prose somewhere. */
body.homepage-black-white.hp-brand .ab-why-foot {
  max-width: 720px;
  margin: 2.8rem auto 0;
  padding-top: 1.6rem;
  border-top: 1px solid var(--hb-g-200);
  text-align: center;
  font-size: .95rem;
  line-height: 1.75;
  color: var(--hb-g-500);
}

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

/* ---------------------------------------------------------------------------
   WHO WRITES THE GUIDES - author card over three method points.

   The card is the homepage's one card recipe (1px border, 14px radius, flat at
   rest) with the monogram tile carrying the only black fill in the section, so
   the eye lands on the byline before the prose.
   ------------------------------------------------------------------------ */

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

/* One centred lead paragraph carries the byline's substance. The bordered card
   and black "TP" monogram it replaces read as a stand-in avatar, and stacked a
   second device on top of the method columns below. */
body.homepage-black-white.hp-brand .ab-lead {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  font-size: .98rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, .7);
}

body.homepage-black-white.hp-brand .ab-lead a {
  color: #ffffff;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

body.homepage-black-white.hp-brand .ab-method {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 860px;
  margin: 2.4rem auto 0;
}

/* .hp-who's columns on white: hairline, small caps label, body - centred. */
body.homepage-black-white.hp-brand .ab-method-item {
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-top: 14px;
  text-align: center;
}

body.homepage-black-white.hp-brand .ab-method-label {
  display: block;
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .42);
  margin-bottom: 7px;
}

body.homepage-black-white.hp-brand .ab-method-item p {
  margin: 0;
  font-size: .85rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .58);
}

/* ---------------------------------------------------------------------------
   NOT LEGAL ADVICE - the homepage's .hp-facts-badge, which carries this exact
   message under the RRA table there. Replaces a grey band with a left-rule
   callout and an icon, none of which the homepage uses.
   ------------------------------------------------------------------------ */

/* .hp-facts-badge is a white box; on this black band it takes the CTA
   slab's treatment instead - transparent, hairline in rgba white. */
body.homepage-black-white.hp-brand .ab-badge {
  max-width: 640px;
  margin: 2.6rem auto 0;
  text-align: center;
  justify-content: center;
  background: transparent;
  border-color: rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .62);
}

body.homepage-black-white.hp-brand .ab-badge strong {
  color: #ffffff;
}

body.homepage-black-white.hp-brand .ab-badge p {
  margin: 0;
}

/* ---------------------------------------------------------------------------
   CLOSING CTA - the homepage's slab, plus the email line under the buttons.
   ------------------------------------------------------------------------ */

/* homepage-brand.css gives .cta-section-bw 0 top padding because on the
   homepage the white FAQ above it already contributes 64px of white ground.
   Here the band above is the black .ab-author, so the slab was landing flush
   against it. 64px matches the page's own band rhythm (.ab-what/.ab-why/
   .ab-author all pad 64px). */
body.homepage-black-white.hp-brand.about-page .cta-section-bw {
  padding-top: 64px;
}

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

body.homepage-black-white.hp-brand .ab-cta-email a {
  color: #ffffff;
  font-weight: 500;
  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: 900px) {

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

  body.homepage-black-white.hp-brand .ab-lists {
    gap: 0 2.5rem;
  }

  body.homepage-black-white.hp-brand .ab-method {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

@media (max-width: 560px) {

  body.homepage-black-white.hp-brand .ab-what,
  body.homepage-black-white.hp-brand .ab-why,
  body.homepage-black-white.hp-brand .ab-author {
    padding: 48px 0;
  }

  body.homepage-black-white.hp-brand.about-page .cta-section-bw {
    padding-top: 48px;
  }

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

  body.homepage-black-white.hp-brand .ab-why-grid {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }

  /* One column: the second list continues the first, so the seam between them
     needs the same hairline every other row has. */
  body.homepage-black-white.hp-brand .ab-lists {
    grid-template-columns: 1fr;
  }

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