/* pharm-pages.css — About & Contact page styles
   Builds on the design tokens from styles.css. */

/* ─────────── shared page chrome ─────────── */
.pf-page { background: var(--pf-bg); color: var(--pf-text); min-height: 100vh; }
.pf-page__hero { min-height: 760px; }
.pf-page__hero--short { min-height: 600px; }
.pf-page__hero .pf-hero__inner { grid-template-columns: 1fr; max-width: 1200px; }
.pf-page__hero .pf-hero__inner > div { max-width: 1200px; }

.pf-page__hero-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  filter: grayscale(20%) contrast(1.05) brightness(0.85);
  z-index: 0;
}
.pf-page__hero-photo::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(212, 212, 212,0) 0%, rgba(212, 212, 212,0) 30%, rgba(212, 212, 212,0.55) 60%, rgba(212, 212, 212,1) 100%),
    linear-gradient(180deg, rgba(212, 212, 212,0.45) 0%, rgba(212, 212, 212,0) 25%),
    linear-gradient(90deg, rgba(212, 212, 212,0.55) 0%, rgba(212, 212, 212,0) 60%);
}
.pf-page__hero-photo--about {
  background-image: url("img/about-hero-pullup.jpeg");
  /* Anchor the bottom of the photo to the bottom of the hero so as
     much of the lower portion as possible stays visible. */
  background-position: center bottom;
}
.pf-page__hero-photo--contact {
  background-image: url("img/testimonials-hero-benchlight.jpg");
  /* Zoomed in 92% from cover (image height = 192% of hero, 20%
     less than the previous 240%). Anchored vertically at centre
     so the middle of the photo sits in the visible window. */
  background-size: auto 192%;
  background-position: center 50%;
  background-repeat: no-repeat;
}
.pf-page__hero-photo--testimonials {
  background-image: url("img/testimonials-hero-angryrope-noearbuds.png");
  background-position: center 30%;
}
/* Legal pages don't carry a photo — keep the dark hero treatment
   but show a solid black panel so the white nav + h1 read clearly. */
.pf-page__hero-photo--legal {
  background: #0b0b0c;
}
.pf-page__hero--photo .pf-hero__inner,
.pf-page__hero--photo .pf-page-nav { position: relative; z-index: 1; }
.pf-hero__eyebrow {
  font-family: "Bebas Neue", sans-serif;
  font-size: 13px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--pf-text-3);
  margin-bottom: 28px;
}
.pf-root .pf-page__hero-sub {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(20px, 1.6vw, 26px);
  letter-spacing: 0.04em;
  line-height: 1.45;
  color: rgba(11, 11, 12, 0.78);
  max-width: 760px;
  margin-top: 36px;
}

/* ─────────── About: intro grid (copy + portrait) ─────────── */
.pf-page__intro { padding-top: 0; }
.pf-intro__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 80px;
  align-items: stretch;
}
.pf-intro__copy h2 {
  font-size: clamp(36px, 4vw, 60px);
  line-height: 0.95;
  margin: 0 0 32px;
}
.pf-intro__copy p {
  font-family: "Bebas Neue", sans-serif;
  font-size: 23px;
  letter-spacing: 0.03em;
  line-height: 1.55;
  color: rgba(11, 11, 12,0.84);
  margin: 0 0 22px;
  max-width: 56ch;
}
/* full-bleed photo intro variant */
.pf-page__intro--photo {
  position: relative;
  overflow: hidden;
  min-height: 800px;
  display: flex;
  align-items: center;
  padding-bottom: 70px;
}
.pf-intro__bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: url("img/about-intro-seated.png");
  background-size: cover;
  background-position: center;
}
.pf-intro__bg::after {
  content: "";
  position: absolute; inset: 0;
  /* Light-grey overlay so dark body copy reads cleanly over the
     dark photo, with a bottom fade into the page bg. */
  background:
    linear-gradient(90deg, var(--pf-bg) 0%, rgba(212, 212, 212, 0.92) 22%, rgba(212, 212, 212, 0.6) 42%, rgba(212, 212, 212, 0.15) 70%, rgba(212, 212, 212, 0) 100%),
    linear-gradient(180deg, rgba(212, 212, 212, 0) 0%, rgba(212, 212, 212, 0) 60%, rgba(212, 212, 212, 0.55) 80%, var(--pf-bg) 100%);
}
.pf-intro__copy--solo {
  position: relative; z-index: 1;
  max-width: 620px;
  margin-top: 140px;
}
.pf-intro__copy--solo p {
  color: rgba(11, 11, 12,0.94);
}

/* (.pf-intro__portrait is unused — the About page uses
   .pf-intro__bg as its full-bleed photo.) */

/* ─────────── About: long-form story chapters ─────────── */
.pf-page__story { padding-top: 0; }
.pf-story {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 56px 80px;
  max-width: 1200px;
  margin: 0 auto;
}
.pf-story__chapter {
  border-top: 1px solid var(--pf-line);
  padding-top: 28px;
}
.pf-story__num {
  font-family: "Bebas Neue", sans-serif;
  font-size: 12px;
  letter-spacing: 0.32em;
  color: var(--pf-text-3);
  margin-bottom: 18px;
  text-transform: uppercase;
}
.pf-story__chapter h3 {
  font-size: 30px;
  line-height: 1;
  margin: 0 0 18px;
  max-width: 18ch;
}
.pf-story__chapter p {
  font-family: "Bebas Neue", sans-serif;
  font-size: 18px;
  letter-spacing: 0.03em;
  line-height: 1.55;
  color: rgba(11, 11, 12,0.82);
  margin: 0;
  max-width: 56ch;
}

/* ─────────── About: stats strip variant ─────────── */
.pf-page__stats { padding-top: 0; padding-bottom: 0; }
.pf-stats--page {
  margin: 0 auto;
  max-width: 1200px;
  border-top: 1px solid var(--pf-line);
  border-bottom: 1px solid var(--pf-line);
  padding: 48px 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
/* Symmetric inner padding so the vertical dividers sit visually
   equidistant between adjacent text blocks (was 0 left / 24 right
   on the base rule, which left dividers butted up against the text
   in the next cell). */
.pf-stats--page .pf-stats__item { padding: 28px 32px; }
.pf-stats--page .pf-stats__item:first-child { padding-left: 0; }
.pf-stats--page .pf-stats__item:last-child { padding-right: 0; border-right: 0; }

/* ─────────── About: philosophy pillars ─────────── */
.pf-page__philosophy { padding-top: 140px; }
.pf-pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 56px 80px;
  max-width: 1200px;
  margin: 0 auto;
}
.pf-pillar {
  border-top: 1px solid var(--pf-line);
  padding-top: 28px;
}
.pf-pillar__num {
  font-family: "Anton", sans-serif;
  font-size: 38px;
  line-height: 1;
  color: var(--pf-text-3);
  margin-bottom: 14px;
}
.pf-pillar h3 {
  font-size: 26px;
  line-height: 1.05;
  margin: 0 0 16px;
  max-width: 22ch;
}
.pf-pillar p {
  font-family: "Bebas Neue", sans-serif;
  font-size: 17px;
  letter-spacing: 0.03em;
  line-height: 1.55;
  color: rgba(11, 11, 12,0.78);
  margin: 0;
  max-width: 52ch;
}

/* ─────────── About: credentials ─────────── */
.pf-page__creds { padding-top: 60px; }
.pf-creds {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1200px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
.pf-creds li {
  border-top: 1px solid var(--pf-line);
  padding: 24px 32px 24px 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 32px;
}
.pf-creds li:nth-child(odd) { border-right: 1px solid var(--pf-line); padding-right: 56px; }
.pf-creds li:nth-child(even) { padding-left: 56px; }
.pf-creds strong {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.pf-creds span {
  font-family: "Bebas Neue", sans-serif;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--pf-text-3);
  text-transform: uppercase;
  text-align: right;
}

/* ─────────── Contact page ─────────── */
.pf-page__contact { padding-top: 80px; }
.pf-contact {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  max-width: 1280px;
  margin: 0 auto;
  align-items: start;
}
.pf-contact__meta {
  border-top: 1px solid var(--pf-line);
  padding-top: 32px;
  position: sticky;
  top: 32px;
}
.pf-contact__meta-title {
  font-size: 28px;
  line-height: 1;
  margin: 0 0 28px;
}
.pf-contact__meta ul {
  list-style: none; padding: 0; margin: 0 0 36px;
}
.pf-contact__meta li {
  padding: 18px 0;
  border-bottom: 1px solid var(--pf-line);
  display: flex; flex-direction: column; gap: 4px;
}
.pf-contact__k {
  font-family: "Bebas Neue", sans-serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--pf-text-3);
}
.pf-contact__v {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.02em;
  color: var(--pf-text);
  text-decoration: none;
}
a.pf-contact__v:hover { color: #0b0b0c; text-decoration: underline; text-underline-offset: 4px; }
.pf-contact__note {
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
/* The Instagram pill below the Open calendar pill on the contact
   page sits inside .pf-contact__note. The flex column above
   stacks the two pills vertically with a consistent gap. */
.pf-contact__note .pf-about__social { margin-top: 0; }
.pf-contact__note p {
  font-family: "Bebas Neue", sans-serif;
  font-size: 14px;
  letter-spacing: 0.05em;
  line-height: 1.5;
  color: var(--pf-text-2);
  margin: 0 0 18px;
}
.pf-contact__cal {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "Anton", sans-serif;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pf-text);
  text-decoration: none;
  border: 1px solid var(--pf-text);
  padding: 12px 22px;
  border-radius: 999px;
  transition: background 160ms ease, color 160ms ease;
}
.pf-contact__cal:hover { background: rgba(11, 11, 12,0.06); }
.pf-contact__cal .arr { font-family: "Bebas Neue", sans-serif; }

/* ─────────── Contact: form ─────────── */
.pf-contact__form {
  border-top: 1px solid var(--pf-line);
  padding-top: 32px;
}
.pf-contact__form-title {
  font-size: 28px;
  line-height: 1;
  margin: 0 0 46px;
}
.pf-field {
  display: block;
  margin-bottom: 22px;
}
.pf-field > span {
  display: block;
  font-family: "Bebas Neue", sans-serif;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--pf-text-3);
  margin-bottom: 10px;
}
.pf-field > span em {
  font-style: italic;
  letter-spacing: 0.16em;
  color: var(--pf-text-3);
  opacity: 0.7;
}
.pf-field input,
.pf-field select,
.pf-field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--pf-line);
  padding: 14px 2px;
  font-family: "Bebas Neue", sans-serif;
  font-size: 18px;
  letter-spacing: 0.03em;
  color: var(--pf-text);
  outline: none;
  transition: border-color 160ms ease;
  box-sizing: border-box;
  border-radius: 0;
}
.pf-field input::placeholder,
.pf-field textarea::placeholder { color: var(--pf-text-3); opacity: 0.6; }
.pf-field input:focus,
.pf-field select:focus,
.pf-field textarea:focus {
  border-bottom-color: var(--pf-text);
}
.pf-field select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23ededee' stroke-width='1.5' d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 24px;
  cursor: pointer;
}
.pf-field select option {
  background: #d4d4d4;
  color: var(--pf-text);
}
.pf-field textarea {
  resize: vertical;
  min-height: 120px;
}
.pf-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.pf-contact__submit-row {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.pf-contact__submit {
  font-family: "Anton", sans-serif;
  font-size: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #d4d4d4;
  border: 1px solid var(--pf-text);
  background: var(--pf-text);
  padding: 16px 28px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform 160ms ease, opacity 160ms ease;
}
.pf-contact__submit:hover { transform: translateY(-1px); }
.pf-contact__submit:active { transform: translateY(0); opacity: 0.9; }
.pf-contact__submit .arr { font-family: "Bebas Neue", sans-serif; }
.pf-contact__legal {
  font-family: "Bebas Neue", sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pf-text-3);
  max-width: 320px;
  line-height: 1.5;
}

/* Success state */
.pf-contact__success {
  border-top: 0;
  padding: 60px 0;
  text-align: left;
}
.pf-contact__success-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--pf-text);
  color: #d4d4d4;
  font-size: 32px;
  font-family: "Anton", sans-serif;
  margin-bottom: 32px;
}
.pf-contact__success h2 {
  font-size: clamp(34px, 4vw, 56px);
  line-height: 0.95;
  margin: 0 0 18px;
}
.pf-contact__success p {
  font-family: "Bebas Neue", sans-serif;
  font-size: 18px;
  letter-spacing: 0.03em;
  line-height: 1.55;
  color: rgba(11, 11, 12,0.82);
  margin: 0 0 14px;
  max-width: 56ch;
}
.pf-contact__success-meta {
  font-family: "Anton", sans-serif !important;
  font-size: 18px !important;
  letter-spacing: 0.06em !important;
  color: var(--pf-text-3) !important;
  margin-top: 24px !important;
}

/* ─────────── Active nav state for inter-page nav ─────────── */
.pf-nav__menu a.is-active::after {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  background: currentColor;
  margin-top: 6px;
}

/* ─────────── responsive trim — pages stay usable when artboard scaled smaller ─────────── */
@media (max-width: 1100px) {
  .pf-intro__grid,
  .pf-contact { grid-template-columns: 1fr; }
  .pf-story,
  .pf-pillars,
  .pf-creds { grid-template-columns: 1fr; }
  .pf-creds li:nth-child(odd) { border-right: 0; padding-right: 0; }
  .pf-creds li:nth-child(even) { padding-left: 0; }
  .pf-stats--page { grid-template-columns: repeat(2, 1fr); }
  .pf-field-row { grid-template-columns: 1fr; }
}

/* ============================================================
   ─────────── MOBILE OPTIMIZATION (About + Contact) ───────────
   ============================================================ */

@media (max-width: 900px) {
/* About page hero — drop min-height, adjust headline & padding */
  .pf-page__hero { min-height: 0; }
  .pf-page__hero--short { min-height: 0; }
  .pf-page__hero .pf-hero__inner { padding: 0 24px 56px; }
  /* Mobile uses the sled-pull fade hero (desktop uses the pull-up
     portrait). Horizontal anchor shifted 20% right of centre so
     more of the left side of the image is visible at narrow widths. */
  .pf-page__hero-photo--about {
    background-image: url("img/about-hero-sledpull-fade.png");
    background-position: 70% 30%;
  }
  /* Higher specificity (.pf-root .pf-page__hero-sub) so we beat
     the global .pf-root p { margin: 0 } reset. */
  .pf-root .pf-page__hero-sub { font-size: 17px; max-width: none; margin-top: 56px; }

  /* About: stats strip — full stack */
  .pf-stats--page {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .pf-stats--page .pf-stats__item { padding: 18px 12px; }

  /* About: full-bleed photo intro */
  .pf-page__intro--photo { min-height: 0; padding: 64px 24px; }
  .pf-intro__copy--solo { max-width: 100%; }
  .pf-intro__copy p { font-size: 18px; line-height: 1.5; }

  /* About: credentials list */
  .pf-creds { gap: 0; }
  .pf-creds li { padding: 16px 0; }
  .pf-creds li strong { font-size: 22px; }
  .pf-creds li span { font-size: 14px; }

  /* Contact page — single column */
  .pf-contact {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 0 24px;
  }
  .pf-contact__meta {
    position: static;
    border-top: 0;
    padding-top: 0;
  }
  .pf-contact__form { padding: 0; }
  .pf-field-row { grid-template-columns: 1fr; gap: 16px; }
  .pf-field input, .pf-field select, .pf-field textarea { font-size: 16px; }

/* Contact page — remove the grey dividing lines above the
     "Direct" and "Application" headings. The line above "Direct"
     also comes from the section's own border-top (the base
     .pf-section border applies on the contact body section too)
     so kill that as well. */
  .pf-page__contact { border-top: 0; }
  .pf-contact__meta { border-top: 0; padding-top: 0; }
  .pf-contact__form { border-top: 0; padding-top: 0; }
  /* Drop the hairline above "Prefer to talk first?" */
  .pf-contact__note { border-top: 0; padding-top: 0; }
  /* Drop the underline on the final field (the message textarea) so
     there isn't a line sitting right above the submit button. */
  .pf-contact__form .pf-field:last-of-type input,
  .pf-contact__form .pf-field:last-of-type select,
  .pf-contact__form .pf-field:last-of-type textarea {
    border-bottom: 0;
  }

  /* About page intro — drop the body copy down to start halfway
     down the photo, fade the photo to black at its bottom, and
     give the second paragraph some breathing room in the black
     area below the photo. */
  .pf-page__intro--photo {
    min-height: 0;
    padding: 0 24px 56px;
    display: block;
    position: relative;
  }
  /* Tighten the top of the credentials section too — together with
     the smaller intro padding-bottom, the buffer between them is
     roughly halved. */
  .pf-page__creds { padding-top: 16px; }
  .pf-intro__bg {
    /* Photo only fills the top portion of the section now. Pushed
       to the right so only the right side of the wide image (with
       Shyam in frame) is visible at narrow widths. */
    height: 60vh;
    bottom: auto;
    background-position: right 25%;
  }
  .pf-intro__bg::after {
    /* Vertical fade-to-page-bg at the bottom of the photo (mobile) —
       blends into the light grey section bg below. */
    background: linear-gradient(
      180deg,
      rgba(212, 212, 212, 0) 0%,
      rgba(212, 212, 212, 0) 45%,
      rgba(212, 212, 212, 0.55) 72%,
      rgba(212, 212, 212, 0.95) 92%,
      var(--pf-bg) 100%
    );
  }
  .pf-intro__copy--solo {
    padding-top: calc(32vh + 140px);
    max-width: 100%;
    margin-top: 0;
  }
  .pf-intro__copy--solo p {
    font-size: 18px;
    line-height: 1.55;
    margin: 0 0 24px;
  }
  /* Push the second paragraph down so it sits in the black area
     below the photo. */
  .pf-intro__copy--solo p + p {
    margin-top: 56px;
  }

/* Push the contact hero photo left on mobile so more of the
     right side of the image is visible. */
  /* On mobile, anchor the contact hero photo to its bottom edge
     so as much of the bottom of the image as possible stays
     visible. Drop the desktop 192% zoom back to cover so we're
     showing the full bottom band, not a zoomed slice of it.
     X anchor nudged 25px left of centre so the image shifts 25px
     to the right in the viewport. */
  .pf-page__hero-photo--contact {
    background-size: cover;
    background-position: calc(50% - 25px) bottom;
  }

  /* On mobile, anchor the testimonials hero's right edge flush with
     the right edge of the screen so the maximum amount of the
     right side of the image is visible (no dark band on the
     right). The image is zoomed out (auto 54% of hero height); the
     remaining empty space sits on the left and is filled with the
     dark hero colour. */
  .pf-page__hero-photo--testimonials {
    background-position: right 30%;
    background-size: auto 54%;
    background-repeat: no-repeat;
    background-color: #0b0b0c;
  }
  /* Softer black fade on the testimonials hero specifically — each
     gradient is dialled down so more of the photo shows through
     without losing the white-text legibility from the dark theme. */
  .pf-page__hero-photo--testimonials::after {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.16) 60%, rgba(0, 0, 0, 0.30) 100%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0) 25%),
      linear-gradient(90deg, rgba(0, 0, 0, 0.14) 0%, rgba(0, 0, 0, 0) 60%);
  }
}

@media (max-width: 480px) {
  .pf-page__hero .pf-hero__inner { padding: 0 18px 48px; }
  .pf-page__intro--photo { padding: 56px 18px; }
  .pf-stats--page { grid-template-columns: 1fr; }
  .pf-contact { padding: 0 18px; }
}

/* ───────── More mobile-only fixes ───────── */


/* ============================================================
   ─────────── DARK HERO OVERRIDES (about + contact) ───────────
   Match the home hero treatment — black photo fade, white text.
   ============================================================ */
.pf-page__hero-photo::after {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.55) 60%, rgba(0, 0, 0, 1) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 25%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 60%);
}
/* Lighter fade on the contact (Apply for coaching) hero — every
   gradient opacity halved so more of the photo shows through. */
.pf-page__hero-photo--contact::after {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.28) 60%, rgba(0, 0, 0, 0.50) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.23) 0%, rgba(0, 0, 0, 0) 25%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0) 60%);
}
.pf-page__hero h1 { color: #fff; }
.pf-page__hero h1 em { color: rgba(255, 255, 255, 0.62); }
.pf-page__hero .pf-hero__eyebrow { color: rgba(255, 255, 255, 0.42); }
.pf-root .pf-page__hero .pf-page__hero-sub { color: rgba(255, 255, 255, 0.78); }


/* ============================================================
   ─────────── Legal pages (Privacy Policy etc.) ───────────
   Uses the existing page hero + section base, with a few
   extras for numbered sections, intro callout, pills, chips,
   and contact cards. Lays out in a single readable column,
   capped at 880px so long paragraphs stay easy to scan.
   ============================================================ */
.pf-page__legal { padding-top: 64px; padding-bottom: 96px; }
.pf-legal {
  max-width: 880px;
  margin: 0 auto;
}
.pf-legal__effective {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}
.pf-legal__pill {
  display: inline-flex;
  align-items: center;
  font-family: "Bebas Neue", sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 6px 14px;
  border: 1px solid var(--pf-text);
  color: var(--pf-text);
}
.pf-legal__pill--filled {
  background: var(--pf-text);
  color: var(--pf-bg);
}
.pf-legal__intro {
  border: 1px solid var(--pf-text);
  padding: 22px 24px;
  margin-bottom: 56px;
  font-family: "Bebas Neue", sans-serif;
  font-size: 17px;
  letter-spacing: 0.03em;
  line-height: 1.6;
  color: rgba(11, 11, 12, 0.82);
}
.pf-legal__intro strong { color: var(--pf-text); }
.pf-legal__section {
  border-top: 1px solid var(--pf-line);
  padding-top: 36px;
  margin-bottom: 48px;
}
.pf-legal__section:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.pf-legal__num {
  font-family: "Bebas Neue", sans-serif;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--pf-text-3);
  margin-bottom: 14px;
}
.pf-legal__section h2 {
  font-family: "Anton", sans-serif;
  font-size: 34px;
  line-height: 1.05;
  margin: 0 0 18px;
  letter-spacing: -0.01em;
}
.pf-legal__section p {
  font-family: "Bebas Neue", sans-serif;
  font-size: 17px;
  letter-spacing: 0.03em;
  line-height: 1.6;
  color: rgba(11, 11, 12, 0.82);
  margin: 0 0 16px;
}
.pf-legal__section p:last-child { margin-bottom: 0; }
.pf-legal__section a {
  color: var(--pf-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pf-legal__section a:hover { opacity: 0.7; }
.pf-legal__section strong { color: var(--pf-text); font-weight: 700; }
.pf-legal__sub {
  font-family: "Bebas Neue", sans-serif;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--pf-text-3);
  margin: 22px 0 12px;
}
.pf-legal__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.pf-legal__chip {
  display: inline-flex;
  align-items: center;
  font-family: "Bebas Neue", sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--pf-line);
  color: var(--pf-text-2);
}
.pf-legal__list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}
.pf-legal__list li {
  position: relative;
  padding-left: 24px;
  font-family: "Bebas Neue", sans-serif;
  font-size: 17px;
  letter-spacing: 0.03em;
  line-height: 1.55;
  color: rgba(11, 11, 12, 0.82);
  margin-bottom: 8px;
}
.pf-legal__list li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--pf-text-3);
}
.pf-legal__list--two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 24px;
}
.pf-legal__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 18px 0 24px;
}
.pf-legal__card {
  border: 1px solid var(--pf-line);
  padding: 18px 20px;
  font-family: "Bebas Neue", sans-serif;
  font-size: 15px;
  letter-spacing: 0.03em;
  line-height: 1.5;
  color: rgba(11, 11, 12, 0.82);
}
.pf-legal__card strong { color: var(--pf-text); }

@media (max-width: 900px) {
  .pf-page__legal { padding-top: 40px; padding-bottom: 56px; }
  .pf-legal__section h2 { font-size: 28px; }
  .pf-legal__list--two-col { grid-template-columns: 1fr; }
  .pf-legal__grid { grid-template-columns: 1fr; }
  .pf-legal__intro { padding: 18px 18px; margin-bottom: 36px; }
  .pf-legal__section { padding-top: 28px; margin-bottom: 36px; }
}