/* Self-hosted Albert Sans, replacing the Google Fonts CDN request. One
   variable-font file covers the whole 100-900 weight axis, so every
   font-weight used across the site (400 default, 500, 600, 700, 800, 900)
   comes from this single file instead of Google's separate per-weight
   static files. font-display: swap keeps text visible in a fallback font
   immediately rather than staying invisible until the file arrives. */
@font-face {
  font-family: 'Albert Sans';
  src: url('/fonts/AlbertSans-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
    --bg: #F3EFE6;
    --ink: #1C1C1C;
    --ink-soft: #6B6B68;
    --card: #FFFFFF;
    --accent: #FF0055;
    /* Slightly darker than --accent: white text on the raw --accent pink
       fails WCAG AA contrast (3.9:1, needs 4.5:1) on .btn-primary. Same hue,
       darkened just enough (4.9:1) — used only where text sits on the fill,
       not for the --accent used as text-on-light-background elsewhere. */
    --accent-btn: #E0004B;
    --accent-soft: #FFE1EB;
    --gold: #E8A33D;
    --gold-soft: #FBE8C6;
    --indigo: #4B3F8A;
    --indigo-soft: #E5E1F4;
    --indigo-deep: #241D3D;
    --dark-card: #211E26;
    --line: rgba(28,28,28,0.10);
    --line-dark: rgba(255,255,255,0.12);
    --radius-lg: 40px;
    --radius-md: 24px;
    --font-display: 'Albert Sans', -apple-system, sans-serif;
    --font-body: 'Albert Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  img { max-width: 100%; display: block; }
  a { color: inherit; }
  section { position: relative; }
  .wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
  @media (min-width: 720px) { .wrap { padding: 0 48px; } }
  h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.035em; line-height: 0.96; }
  h1 { font-size: clamp(52px, 10.5vw, 108px); font-weight: 900; }
  h2 { font-size: clamp(42px, 8.5vw, 88px); font-weight: 800; }
  h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
  .accent-word { color: var(--accent); }
  p.lede { font-size: 19px; line-height: 1.6; color: var(--ink-soft); max-width: 46ch; margin-top: 20px; }

  .btn-primary {
    background: var(--accent-btn); color: #fff; border: none; border-radius: 999px;
    padding: 17px 30px; font-size: 15.5px; font-weight: 700; font-family: var(--font-body);
    cursor: pointer; box-shadow: 0 10px 26px rgba(255,0,85,0.28);
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    text-decoration: none;
    transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease;
  }
  .btn-primary:hover { transform: scale(1.045); box-shadow: 0 14px 32px rgba(255,0,85,0.34); }

  /* ---------- Floating nav (identical to homepage) ---------- */
  .nav-pill {
    position: fixed; top: 16px; left: 16px; right: 16px; z-index: 500;
    max-width: 1120px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    background: rgba(240,240,236,0.72);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid rgba(28,28,28,0.08);
    border-radius: 999px;
    padding: 10px 10px 10px 20px;
    box-shadow: 0 8px 30px rgba(28,28,28,0.06);
  }
  .nav-logo-link { display: block; flex-shrink: 0; line-height: 0; }
  .nav-logo { height: 20px; width: auto; display: block; }
  .nav-links { display: none; align-items: center; gap: 26px; margin: 0 20px; }
  @media (min-width: 760px) { .nav-links { display: flex; } }
  .nav-link { font-size: 14.5px; font-weight: 600; color: var(--ink); text-decoration: none; opacity: 0.72; transition: opacity 0.2s ease; }
  .nav-link:hover, .nav-link.active { opacity: 1; }
  .nav-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
  .nav-cta {
    background: var(--ink); color: #fff; border: none; border-radius: 999px;
    padding: 12px 20px; font-size: 14px; font-weight: 600; font-family: var(--font-body);
    cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center;
    transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
  }
  .nav-cta:hover { transform: scale(1.05); }
  @media (min-width: 640px) { .nav-cta { padding: 13px 24px; } }
  .nav-hamburger {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex-shrink: 0;
    border-radius: 50%; border: none; background: transparent; color: var(--ink);
    cursor: pointer;
  }
  @media (min-width: 760px) { .nav-hamburger { display: none; } }
  .nav-mobile-menu {
    position: fixed; top: 76px; left: 16px; right: 16px; z-index: 499;
    background: rgba(240,240,236,0.97);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid rgba(28,28,28,0.08);
    border-radius: 28px;
    padding: 10px;
    display: flex; flex-direction: column; gap: 2px;
    box-shadow: 0 16px 40px rgba(28,28,28,0.14);
    opacity: 0; transform: translateY(-10px) scale(0.98); pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.34,1.56,0.64,1), transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
  }
  .nav-mobile-menu.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
  .nav-mobile-menu a {
    padding: 14px 16px; border-radius: 16px; font-size: 16px; font-weight: 600;
    color: var(--ink); text-decoration: none; transition: background 0.15s ease;
  }
  .nav-mobile-menu a:hover, .nav-mobile-menu a:active { background: rgba(28,28,28,0.06); }
  @media (min-width: 760px) { .nav-mobile-menu { display: none; } }

  /* ---------- Page header (shared pattern for interior pages) ---------- */
  /* padding-top/bottom only (not the shorthand) — a shorthand here would
     overwrite .wrap's own left/right padding rather than add to it, since
     this class sits on the same element as .wrap, which is what was
     silently zeroing out the side gutters on every interior page header. */
  .page-header { padding-top: 168px; padding-bottom: 24px; text-align: center; min-height: 46vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .page-header h1 { font-size: clamp(40px, 7vw, 72px); max-width: 20ch; margin: 0 auto; }
  .page-header p.lede { margin: 20px auto 0; text-align: center; }
  /* On mobile, match the homepage hero's top clearance (92px) instead of
     this section's own more generous desktop spacing (168px) — the two
     read as inconsistent stacked back to back at phone width.
     min-height: 0 matters just as much as the padding value here — with
     the 46vh floor still in place, justify-content: center was splitting
     whatever leftover space that floor created between the top and bottom
     of the (variable-height) h1+lede content. Short content (Blog's "Ideas
     on tap.") left a lot of leftover space and got pushed well below the
     92px padding; long content (Pricing's two-line h1) left none and sat
     exactly at 92px. That's why the same padding-top value was still
     rendering at different heights per page. Dropping the floor makes the
     box exactly as tall as padding + content, so the h1 always starts
     right at padding-top regardless of how much text a given page has. */
  @media (max-width: 759px) { .page-header { padding-top: 142px; min-height: 0; } }

  /* ---------- FAQ accordion ---------- */
  .section-pad { padding: 60px 0 140px; }
  .faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
  .faq-item {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md);
    overflow: hidden; transition: border-color 0.2s ease;
  }
  .faq-item[open] { border-color: rgba(28,28,28,0.2); }
  .faq-item summary {
    list-style: none; cursor: pointer; padding: 22px 26px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.01em;
    transition: background 0.15s ease;
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary:hover { background: rgba(28,28,28,0.025); }
  .faq-chevron { flex-shrink: 0; color: var(--ink-soft); transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1); }
  .faq-item[open] .faq-chevron { transform: rotate(180deg); }
  .faq-answer { padding: 0 26px 24px; }
  .faq-answer p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.65; max-width: 62ch; }
  .faq-answer a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
  .faq-cta { text-align: center; margin-top: 56px; }
  .faq-cta p.lede { margin: 14px auto 0; text-align: center; }

  /* Cascading reveal delays, same pattern as the homepage's grids. */
  .faq-item:nth-child(1) { transition-delay: 0s, 0s; }
  .faq-item:nth-child(2) { transition-delay: 0.05s, 0.05s; }
  .faq-item:nth-child(3) { transition-delay: 0.1s, 0.1s; }
  .faq-item:nth-child(4) { transition-delay: 0.15s, 0.15s; }
  .faq-item:nth-child(5) { transition-delay: 0.2s, 0.2s; }
  .faq-item:nth-child(6) { transition-delay: 0.25s, 0.25s; }
  .faq-item:nth-child(7) { transition-delay: 0.3s, 0.3s; }
  .faq-item:nth-child(8) { transition-delay: 0.35s, 0.35s; }
  .faq-item:nth-child(9) { transition-delay: 0.4s, 0.4s; }

  /* ---------- Scroll reveal (identical to homepage) ---------- */
  .reveal { opacity: 0; transform: translateY(36px) scale(0.92); transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.34,1.56,0.64,1); }
  .reveal.in { opacity: 1; transform: translateY(0) scale(1); }
  @media (prefers-reduced-motion: reduce) { .reveal { transition: opacity 0.4s ease; transform: none !important; } }

  /* ---------- Footer (identical to homepage) ---------- */
  footer { padding: 24px 0 24px; border-top: 1px solid var(--line); margin-top: 8px; }
  .footer-row { display: flex; flex-direction: column; gap: 20px; align-items: center; text-align: center; }
  @media (min-width: 640px) { .footer-row { flex-direction: row; justify-content: space-between; text-align: left; } }
  .footer-logo { height: 16px; width: auto; opacity: 0.85; }
  footer p { font-size: 12.5px; color: var(--ink-soft); }
  footer p a { color: inherit; text-decoration: none; }
  footer p a:hover { text-decoration: underline; text-underline-offset: 2px; }

  /* Every footer's markup points at /logo.png (the dark wordmark) by
     default, since every footer sits on the plain light page background
     except one: index.html's footer lives inside .dark-band, the single
     dark section that merges the final CTA with the footer. This rule is
     the ONE place that swaps the asset for that case — don't fix a
     low-contrast footer logo by editing a page's <img src>, fix it here.
     (A CSS filter can't do this instead: the wordmark is two-tone, dark
     grey + brand pink, and inverting it shifts the pink to cyan.) */
  .dark-band .footer-logo { content: url('/logo-footer.png'); opacity: 1; }

  /* ---------- Back to top (identical to homepage) ---------- */
  .to-top {
    position: fixed; bottom: 20px; right: 20px; z-index: 400;
    width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: #fff;
    display: flex; align-items: center; justify-content: center; border: none; cursor: pointer;
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
    box-shadow: 0 8px 20px rgba(0,0,0,0.18);
  }
  .to-top.show { opacity: 1; pointer-events: auto; }