/* ============================================================================
   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: #ffffff;
  padding: 64px 0;
}

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

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

body.homepage-black-white.hp-brand .ab-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 .ab-item p {
  margin: 0;
  font-size: .87rem;
  line-height: 1.6;
  color: var(--hb-g-500);
}

body.homepage-black-white.hp-brand .ab-what-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 .ab-what-foot a {
  color: var(--hb-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   WHY IT EXISTS — black band, matching .hp-who.

   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: var(--hb-ink);
  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 rgba(255, 255, 255, .14);
  padding: 16px 0 4px;
  transition: border-color .2s ease;
}

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

body.homepage-black-white.hp-brand .ab-why-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-why-item h3 {
  color: #ffffff;
  font-size: .98rem;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0 0 6px;
}

body.homepage-black-white.hp-brand .ab-why-item p {
  color: rgba(255, 255, 255, .52);
  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 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 .ab-why-foot strong {
  color: #ffffff;
  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: #ffffff;
  padding: 64px 0;
  border-top: 1px solid var(--hb-g-200);
}

body.homepage-black-white.hp-brand .ab-author-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 0 24px;
  align-items: start;
  max-width: 860px;
  margin: 0 auto;
  padding: 28px;
  background: #ffffff;
  border: 1px solid var(--hb-g-200);
  border-radius: var(--hb-r-lg);
  box-shadow: 0 2px 16px rgba(0, 0, 0, .04);
}

body.homepage-black-white.hp-brand .ab-mono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: var(--hb-r-lg);
  background: var(--hb-ink);
  color: #ffffff;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
}

body.homepage-black-white.hp-brand .ab-author-name {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--hb-ink);
}

body.homepage-black-white.hp-brand .ab-author-role {
  display: block;
  margin: 4px 0 14px;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--hb-g-400);
}

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

body.homepage-black-white.hp-brand .ab-author-card a {
  color: var(--hb-ink);
  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;
}

body.homepage-black-white.hp-brand .ab-method-item {
  border-top: 1px solid var(--hb-g-300);
  padding-top: 14px;
}

body.homepage-black-white.hp-brand .ab-method-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-method-item p {
  margin: 0;
  font-size: .85rem;
  line-height: 1.6;
  color: var(--hb-g-500);
}

/* ---------------------------------------------------------------------------
   NOT LEGAL ADVICE

   The one disclaimer on the page, so it gets the page's only grey ground and
   a left rule rather than being another quiet paragraph.
   ------------------------------------------------------------------------ */

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

body.homepage-black-white.hp-brand .ab-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 .ab-note-ico {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--hb-ink);
}

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

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

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

/* ---------------------------------------------------------------------------
   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 .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-grid,
  body.homepage-black-white.hp-brand .ab-why-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  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 .ab-title {
    font-size: 1.55rem;
  }

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

  /* The monogram would push the prose into a ~150px column at this width, so
     it goes above the byline instead of beside it. */
  body.homepage-black-white.hp-brand .ab-author-card {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 22px;
  }

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