/* ==========================================================================
   PAGES — shared styles for About, Terms, and Privacy (static content pages)
   ========================================================================== */

/* Title-only hero, same rules as articles.css/products.css's copy — kept
   here too rather than linking an unrelated stylesheet just for this one
   shared variant. Floor matches the same fix applied everywhere else: the
   header is a flush 76px bar on mobile, so the padding floor has to clear
   that or the heading sits underneath it. */
.orbit-hero--title-only{
  padding-block: clamp(6.5rem, 10vw, 7rem) clamp(5rem, 11vw, 8rem);
}
.orbit-hero--title-only .orbit-hero__inner{
  min-height: auto;
}
.orbit-hero--title-only .orbit-hero__heading h1{
  font-size: var(--step-4);
}
.about-hero-sub{
  max-width: 56ch;
  margin: 0.9rem auto 0;
  color: var(--ink-soft);
  font-size: var(--step-1);
  text-align: center;
}

/* ---- About page sections ------------------------------------------------ */
.page-section{
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}
.page-section + .page-section{
  border-top: 1px solid var(--hairline);
}

/* .about-section / .about-media / .about-copy / .follow-rail are defined in
   home.css (built for a homepage "about" teaser that was never wired up to
   any page) — reused here as-is for layout, with mobile rules added below
   since the original never had any: at narrow widths the 0.9fr/1.1fr grid
   and 6-up photo strip were untested and would crush a phone-width layout. */
@media (max-width: 860px){
  .about-section{
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .about-media{
    max-width: 420px;
    margin-inline: auto;
    width: 100%;
  }
}

/* "What we cover" values grid — no existing card pattern fit a plain
   text-only value card, so this is new, built from the same tokens the
   rest of the site's cards use (--radius-lg, --card-shadow, --bg-raised). */
.values-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 3vw, 1.75rem);
}
@media (max-width: 780px){
  .values-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
  .values-grid{ grid-template-columns: 1fr; }
}
/* Two-card variant (Articles/Products, Think better/Build better) — stays
   side-by-side a little longer than the 3-up grid since it only ever
   needs to fit two, then drops to one column on narrow phones. */
.values-grid--2up{
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 620px){
  .values-grid--2up{ grid-template-columns: 1fr; }
}
.value-card{
  background: var(--bg-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
}
.value-card__icon{
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent-ink);
  margin-bottom: 1.1rem;
}
.value-card__icon svg{ width: 20px; height: 20px; }
.value-card h3{
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.value-card p{
  color: var(--ink-soft);
  font-size: var(--step--1);
  line-height: 1.55;
}

/* Mission-statement quote inside .about-copy (Our mission / Systems over
   shortcuts) — reuses the same left-border treatment as article body
   blockquotes so pull-quotes read consistently across the site. */
.about-copy blockquote{
  border-left: 3px solid var(--accent);
  padding: 0.25rem 0 0.25rem 1.4rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 500;
  color: var(--ink-text);
  margin: 0;
}

/* Plain centered-column prose sections ("Why we exist", "Systems over
   shortcuts", "The goal") — narrower measure than .legal-content since
   these are short persuasive blocks, not long reference reading. */
.about-prose{
  max-width: 68ch;
  margin-inline: auto;
}
.about-prose h2{
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  margin-bottom: 1.1rem;
  max-width: 26ch;
}
.about-prose p{
  color: var(--ink-soft);
  margin-bottom: 1.1rem;
  line-height: 1.65;
}
.about-prose blockquote{
  border-left: 3px solid var(--accent);
  padding: 0.25rem 0 0.25rem 1.4rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 500;
  color: var(--ink-text);
  margin: 1.5rem 0;
}
.about-prose--center{
  text-align: center;
}
.about-prose--center h2{
  margin-inline: auto;
}
.about-prose--center blockquote{
  border-left: none;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 1.25rem 0;
  margin: 1.75rem 0;
}
.about-closing{
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--ink-text);
  margin-bottom: 1.75rem;
  line-height: 1.5;
}

/* ---- Legal pages (Terms / Privacy) --------------------------------------
   Reuses .article-content from article.css for prose typography — that
   file's other rules (.article-toc, .article-body-grid, etc.) simply won't
   match anything here since this page has none of that markup, so linking
   it is harmless. */
.legal-content{
  max-width: 720px;
  margin-inline: auto;
}
.legal-updated{
  color: var(--ink-mute);
  font-size: var(--step--1);
  margin-bottom: 2.5rem;
}
/* Inline links inside legal prose (Terms/Privacy → contact.html) — the
   global a{} reset strips all color/underline, so without this a link
   here would be invisible against the surrounding paragraph text. */
.legal-content a{
  color: var(--ink-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--hairline-strong);
  transition: text-decoration-color var(--dur) var(--ease);
}
.legal-content a:hover{ text-decoration-color: currentColor; }

/* ---- Contact page ---------------------------------------------------------
   Reuses .auth-field/.auth-form's input styling (auth.css) for a consistent
   look with login/signup — that file has no textarea rule, so one is added
   here, matching .auth-field input's own styling exactly. */
.contact-grid{
  display: grid;
  max-width: 640px;
  margin-inline: auto;
}
.contact-info{
  background: var(--bg-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
}
.contact-info h2{
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  margin-bottom: 0.75rem;
}
.contact-info p{
  color: var(--ink-soft);
  font-size: var(--step--1);
  line-height: 1.6;
}
.contact-info__list{
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.contact-info__item{
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}
.contact-info__item svg{
  width: 18px; height: 18px;
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--accent-ink);
}
.contact-info__item-title{
  font-weight: 600;
  color: var(--ink-text);
  font-size: var(--step--1);
  display: block;
}
.contact-info__item p{
  margin: 0;
  font-size: var(--step--2);
}
.contact-info__item p a{
  color: var(--ink-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--hairline-strong);
  transition: text-decoration-color var(--dur) var(--ease);
}
.contact-info__item p a:hover{ text-decoration-color: currentColor; }