/*
  Global stylesheet — The Silver Pond (PlentyMoreFish)
  Single source of truth for the brand's canvas-studio pages.

  Structure:
    1) Reset and base
    2) Design tokens (:root) — palette and typography
    3) Layout primitives (container, section, grid)
    4) Components (header, buttons, hero banner, trust strip, cards, quote cards, CTA band, footer)
    5) Page hero (used by the features page and similar info pages)
    6) Article pages (article hero, article body)
    7) Pricing cards
    8) FAQ
    9) Responsive breakpoints
*/

/* 1) Reset and base ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Georgia, serif;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* 2) Design tokens ---------------------------------------------------- */
:root {
  --bg: #fdf6ee;
  --bg-alt: #f7e9d8;
  --card: #ffffff;
  --text: #3a2a1e;
  --muted: #8a7360;
  --accent: #d97a4d;
  --accent-2: #e8a35c;
  --radius: 14px;
  --maxw: 1120px;
}

/* 3) Layout primitives -------------------------------------------------- */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.section { padding: 64px 0; }
.section--tight-top { padding-top: 0; }
.section-head { max-width: 680px; margin: 0 auto 36px; text-align: center; }
.section-head h2 { font-size: 1.9rem; margin: 6px 0 10px; }
.section-head p { color: var(--muted); margin: 0; }
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.text-center { text-align: center; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 28px; }
.muted { color: var(--muted); }
.desktop-only { display: flex; }

/* 4) Components ----------------------------------------------------------- */

/* Header */
.site-header { position: relative; z-index: 10; padding: 18px 0; background: var(--bg); }
.site-header-row { display: flex; align-items: center; justify-content: flex-start; gap: 16px; flex-wrap: wrap; }
.site-logo { display: inline-flex; align-items: center; background: var(--bg); padding: 10px 18px; border-radius: 8px; order: 1; }
.site-logo img { max-height: 34px; width: auto; }
.site-cta { display: flex; gap: 10px; align-items: center; order: 3; }

/* Keep the platform's nav menu (Home/Features) inline with the logo and CTA
   buttons instead of wrapping to its own row. The platform injects its own
   <style> tag setting .hs-canvas-nav to width:100%, which forces a wrap in
   our flex header row; this rule has higher specificity and overrides it.
   margin-left:auto pushes the nav (and the CTA buttons after it) to the
   right, so the header reads: logo -- (space) -- Home/Features -- Login/Join. */
.site-header-row nav.hs-canvas-nav { width: auto; flex: 0 1 auto; order: 2; margin-left: auto; }

/* Buttons */
.btn {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-ghost { background: transparent; color: var(--text); border-color: rgba(44,38,32,0.25); }
.btn-sm { padding: 8px 16px; font-size: 0.85rem; }
.btn-lg { padding: 14px 28px; font-size: 1.05rem; }

/* Hero banner (homepage) */
.hero-banner { position: relative; min-height: 520px; display: flex; align-items: center; overflow: hidden; }
.hero-banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-banner-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(44,38,32,0.90) 32%, rgba(44,38,32,0.45) 78%);
}
.hero-banner-inner { position: relative; z-index: 2; width: 100%; padding: 64px 0; }
.hero-banner-content { max-width: 600px; }
.eyebrow {
  display: inline-block; color: var(--accent); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; font-size: 0.8rem; margin-bottom: 12px;
}
.hero-title { font-size: 2.5rem; line-height: 1.2; margin: 0 0 18px; color: #fff; }
.hero-sub { color: #e7e1d6; font-size: 1.05rem; margin: 0 0 14px; max-width: 540px; }
.hero-cta { display: flex; gap: 14px; margin-top: 24px; flex-wrap: wrap; }

/* Trust strip */
.trust-strip { display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: center; padding: 22px 20px; background: var(--bg-alt); }
.trust-item { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 0.92rem; font-weight: 600; }

/* Cards */
.card { background: var(--card); border-radius: var(--radius); padding: 24px; border: 1px solid rgba(44,38,32,0.08); box-shadow: 0 1px 2px rgba(44,38,32,0.04); }
.card-title { font-weight: 700; margin: 0 0 8px; font-size: 1.02rem; }
.card-text { color: var(--muted); margin: 0; font-size: 0.92rem; }

/* Quote / testimonial cards (homepage) */
.quote-card { background: var(--card); border-radius: var(--radius); padding: 26px; border: 1px solid rgba(44,38,32,0.08); }
.quote-text { font-size: 1rem; margin: 0 0 16px; font-style: italic; color: var(--text); }
.quote-attr { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--muted); }
.quote-stars { color: #c99a2e; letter-spacing: 1px; }

/* CTA band */
.cta-band { background: linear-gradient(135deg, var(--accent), #a8532e); border-radius: 20px; padding: 48px; text-align: center; color: #fff; }
.cta-band h2 { margin: 0 0 10px; font-size: 1.8rem; }
.cta-band p { margin: 0 0 6px; opacity: 0.92; }
.cta-band .btn-primary { background: #fff; color: var(--accent); }

/* Footer */
.site-footer { padding: 40px 0; background: var(--bg-alt); color: var(--muted); font-size: 0.88rem; }
.footer-legal { display: flex; gap: 18px; flex-wrap: wrap; margin: 14px 0; }

/* 5) Page hero (features and other info pages) ---------------------------- */
.page-hero { padding: 56px 0 40px; background: var(--bg-alt); }
.page-hero .back-link { display: inline-block; margin-bottom: 18px; color: var(--muted); font-size: 0.9rem; }
.page-hero .back-link:hover { color: var(--accent); }
.page-hero h1 { font-size: 2.3rem; margin: 8px 0 14px; max-width: 720px; }
.page-dek { color: var(--muted); font-size: 1.05rem; max-width: 640px; margin: 0; }

/* 6) Article pages ---------------------------------------------------------- */
.article-hero { padding: 56px 0 40px; background: var(--bg-alt); }
.article-hero .back-link { display: inline-block; margin-bottom: 18px; color: var(--muted); font-size: 0.9rem; }
.article-hero .back-link:hover { color: var(--accent); }
.article-hero h1 { font-size: 2.2rem; margin: 8px 0 14px; max-width: 720px; }
.article-dek { color: var(--muted); font-size: 1.05rem; max-width: 640px; margin: 0; }
.article-body { max-width: 720px; margin: 0 auto; }
.article-body h2 { font-size: 1.4rem; margin: 36px 0 12px; }
.article-body p { color: var(--text); margin: 0 0 16px; }
.article-body ul { color: var(--text); margin: 0 0 16px; padding-left: 20px; }
.article-body li { margin-bottom: 8px; }

/* 7) Pricing cards ---------------------------------------------------------- */
.pricing-grid { display: grid; gap: 20px; grid-template-columns: repeat(5, 1fr); }
.pricing-card { background: var(--card); border-radius: var(--radius); padding: 26px 20px; border: 1px solid rgba(44,38,32,0.08); display: flex; flex-direction: column; text-align: center; }
.pricing-card--highlight { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.plan-badge { align-self: center; background: var(--accent); color: #fff; font-size: 0.68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; margin-bottom: 12px; }
.plan-name { font-size: 0.95rem; font-weight: 700; margin: 0 0 6px; color: var(--muted); }
.price-tag { font-size: 1.6rem; font-weight: 700; margin: 4px 0 2px; }
.price-tag span { font-size: 0.85rem; font-weight: 500; color: var(--muted); }
.price-note { color: var(--muted); font-size: 0.8rem; margin: 0; }

/* 8) FAQ ---------------------------------------------------------------------- */
.faq-item { background: var(--card); border-radius: var(--radius); padding: 22px 26px; border: 1px solid rgba(44,38,32,0.08); }
.faq-item h3 { margin: 0 0 8px; font-size: 1.02rem; }
.faq-item p { margin: 0; color: var(--muted); font-size: 0.92rem; }

/* 9) Responsive ------------------------------------------------------------- */
@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .grid-4 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .hero-title { font-size: 2rem; }
  .page-hero h1 { font-size: 1.8rem; }
  .desktop-only { display: none; }
}