/* marketing-shared.css
 * Shared styling for the "Meet Tom" bio (_about_tom.html) and the site
 * footer (_site_footer.html) partials. Linked from general.html (homepage),
 * landing.html (/sell), and buy_page.html so these components can only be
 * styled in ONE place — they previously drifted per page (the bio photo
 * size and the footer padding diverged). Canonical source: the homepage.
 * Relies on the CSS custom properties (--ink, --stone, --accent, --warm-gray,
 * --ff-display, --sign-gold) defined in each page's :root.
 */

/* ===== Meet Tom bio ===== */
.about-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 2.5rem;
  align-items: center;
  margin-top: 2rem;
}
.about-photo {
  aspect-ratio: 3/4;
  background: var(--stone);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
  color: var(--warm-gray);
  font-style: italic;
  position: relative;
  overflow: hidden;
}
.about-photo::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(to top, rgba(26,26,26,0.2), transparent);
}
.about-text h3 {
  font-family: var(--ff-display);
  font-size: 1.8rem;
  margin-bottom: 0.35rem;
}
.about-text p {
  color: var(--warm-gray);
  margin-bottom: 0.6rem;
  line-height: 1.55;
  font-weight: 300;
}
@media (max-width: 1024px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-photo { max-width: 200px; margin: 0 auto; }
}

/* ===== Site footer ===== */
footer {
  background: var(--ink);
  color: rgba(255,255,255,0.4);
  padding: 1.75rem 2rem;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.5;
}
footer p { margin: 0.25rem 0; }
footer a { color: rgba(255,255,255,0.6); text-decoration: none; }
footer a:hover { color: white; }
.footer-brand {
  font-family: var(--ff-display);
  font-size: 1.15rem;
  color: white;
  margin-bottom: 0.3rem;
}
.footer-brand em {
  font-style: italic;
  font-weight: 400;
  color: var(--sign-gold);
}
.footer-tagline {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  margin-bottom: 0.6rem;
}
.footer-tagline em {
  font-style: italic;
  font-weight: 400;
  color: var(--sign-gold);
}

/* ==========================================================================
   FlatKey marketing readability + sizing (2026-07-21) — shared across
   home (/), /sell (landing.html) and /buy (buy_page.html).
   --warm-gray was #9a9590 (fails WCAG contrast on the cream background) and
   drove washed-out body text everywhere. Darken it for LIGHT sections and
   RE-LIGHTEN it on the known DARK sections (.intelligence, .rebate-section,
   the CTA privacy line) so their text stays readable. Plus the bio + market
   card sizing bumps and the CTA compaction we did on the homepage.
   (The hero photo panorama is home-only — it lives in general.html, not here.)
   ========================================================================== */
:root{--warm-gray:#5b625c}
.intelligence,.rebate-section,.wa-cta-privacy{--warm-gray:#c9c4bb}

.section-sub{color:#545c56 !important;text-wrap:balance;max-width:none !important}
.intelligence .section-sub,.rebate-section .section-sub{color:rgba(255,255,255,.9) !important}

/* Bio / about */
section.about{padding-top:3.4rem !important;padding-bottom:3.4rem !important}
section.about .about-grid{grid-template-columns:360px 1fr !important;gap:2.8rem !important;align-items:stretch !important;max-width:1040px;margin-left:auto;margin-right:auto}
section.about .about-photo{width:100% !important;max-width:360px;aspect-ratio:auto !important}
section.about .about-text h3{font-size:2.15rem !important}
section.about .about-text > p:nth-of-type(1){opacity:1 !important;color:#6b736d !important}
section.about .about-text > p:nth-of-type(2){opacity:1 !important;color:#1e6e52 !important;font-size:1.05rem !important;font-weight:600 !important;letter-spacing:.3px}
section.about .about-text > p:nth-of-type(3){opacity:1 !important;color:#6b736d !important;font-size:0.8rem !important;font-weight:500 !important}
section.about .about-text > p:nth-of-type(n+4){font-size:1.06rem !important;line-height:1.62 !important;color:#3c433e !important}
@media(max-width:760px){section.about .about-grid{grid-template-columns:1fr !important}section.about .about-photo{aspect-ratio:3/4 !important}}

/* Section rhythm + market cards */
section.why-flatkey{padding-top:3.6rem !important;padding-bottom:3.6rem !important}
section:has(.markets-grid){padding-top:3.6rem !important;padding-bottom:3.6rem !important}
.markets-grid{max-width:960px !important;gap:1.5rem !important}
.market-card{padding:2rem 1.6rem !important}
.market-name{font-size:1.24rem !important}
.market-type{font-size:0.86rem !important}
.market-note{font-size:0.79rem !important}

/* CTA compaction */
section.cta-section{padding:2.9rem 1.5rem !important}
section.cta-section h2{margin-bottom:.7rem !important}
section.cta-section > p:nth-of-type(1){margin-bottom:1.4rem !important}
section.cta-section .wa-cta-privacy{margin-top:1.1rem !important}
section.cta-section [style*="padding:2rem 1.5rem"]{padding:1.3rem 1.5rem !important}
section.cta-section [style*="padding:2rem 1.5rem"] p{margin-bottom:0.85rem !important;line-height:1.42 !important}
section.cta-section .wa-cta-secondary{margin-top:0.7rem !important;gap:0.3rem 2rem !important}
section.cta-section .wa-cta-btn,section.cta-section .btn-primary{padding-top:0.72rem !important;padding-bottom:0.72rem !important}
section.cta-section .wa-cta-btn{margin-top:.15rem !important}
/* contact methods moved OUT of the box into a strip directly under the two CTA boxes (green bg) */
section.cta-section > .wa-cta-secondary{margin-top:1.9rem !important;gap:0.4rem 2.25rem !important}
section.cta-section > .wa-cta-secondary a{color:rgba(255,255,255,0.95) !important}
section.cta-section > .wa-cta-secondary a:hover{color:#fff !important}
/* wide screens: enlarge the strip so the line spans ~the width of the boxes above (mobile keeps base size to avoid overflow when stacked) */
@media(min-width:700px){
  section.cta-section > .wa-cta-secondary{font-size:1.2rem !important;gap:0.5rem 2.5rem !important}
  section.cta-section > .wa-cta-secondary svg{width:17px !important;height:17px !important}
}