/* Shared landing-page styles for the marketing list pages (/pro-list,
   /standard-list). These two pages carry an identical hero / sections /
   steps / pricing / FAQ / CTA layout; the rules were duplicated inline in
   both HTML files until 2026-06-19, when they were lifted here verbatim.
   Loaded via <link> immediately after common.css so the cascade order
   (these rules override common.css) is preserved exactly as the old inline
   <style> block did. index.html intentionally does NOT use this file — its
   hero/plan-card rules differ. */

    body { color: #111; }

    /* Hero */
    .hero {
      text-align: center;
      padding: 100px 24px 40px;
      max-width: 740px;
      margin: 0 auto;
    }
    .hero h1 {
      font-size: 56px;
      line-height: 1.1;
      color: #111;
      font-weight: 800;
      margin-bottom: 20px;
      letter-spacing: -1px;
    }
    .hero p {
      font-size: 20px;
      color: #555;
      line-height: 1.6;
      margin-bottom: 40px;
    }
    .btn-hero {
      display: inline-block;
      padding: 16px 44px;
      background: #111;
      color: white;
      border-radius: 8px;
      font-size: 17px;
      font-weight: 700;
      text-decoration: none;
      transition: background 0.2s;
      letter-spacing: 0.01em;
    }
    .btn-hero:visited { color: white; }
    .btn-hero:hover { background: #333; }
    /* Reassurance microcopy directly under the hero CTA */
    .hero .hero-microcopy {
      font-size: 14px;
      color: #6b7280;
      margin-top: 14px;
      margin-bottom: 0;
      line-height: 1.5;
    }
    @media (max-width: 480px) {
      .hero .hero-microcopy { font-size: 13px; }
    }
    .hero .hero-learn-link {
      display: inline-block;
      margin-top: 16px;
      font-size: 14px;
      font-weight: 600;
      color: #111;
      text-decoration: none;
    }
    .hero .hero-learn-link:visited { color: #111; }
    .hero .hero-learn-link:hover { text-decoration: underline; }

    /* Sections */
    .section {
      max-width: 900px;
      margin: 0 auto;
      padding: 80px 24px;
    }
    .section--narrow { max-width: 760px; }
    .section-title {
      font-size: 32px;
      font-weight: 800;
      text-align: center;
      margin-bottom: 16px;
      letter-spacing: -0.5px;
    }
    .section-intro {
      font-size: 17px;
      color: #555;
      text-align: center;
      line-height: 1.6;
      max-width: 620px;
      margin: 0 auto 48px;
    }
    .features-bg { background: #f9f9f7; }
    .lead-visual { display: block; width: 100%; max-width: 720px; margin: 0 auto 8px; }

    /* Pain cards / generic 3-up card grid */
    .steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .step {
      background: white;
      border-radius: 12px;
      padding: 20px 16px;
      border: 1px solid #e5e7eb;
      text-align: center;
    }
    .step-icon {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: #f3f4f6;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 16px;
    }
    .step h3 { font-size: 16px; font-weight: 700; margin-bottom: 10px; color: #111; }
    .step p { font-size: 14px; color: #555; line-height: 1.6; margin: 0; }

    /* How-it-works 3-up flow summary */
    .flow-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 720px; margin: 8px auto 0; text-align: center; }
    .flow-step h3 { font-size: 16px; font-weight: 700; color: #111; margin-bottom: 6px; }
    .flow-step p { font-size: 14px; color: #555; line-height: 1.5; margin: 0; }

    /* How-it-works detailed mechanism steps (distinct from the .step cards) */
    .mech-step { margin-bottom: 40px; }
    .mech-step:last-child { margin-bottom: 0; }
    .mech-step-header { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
    .mech-step-header h3 { font-size: 16px; font-weight: 700; color: #111; margin-bottom: 0; }
    .mech-step-number {
      flex-shrink: 0;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: #111;
      color: white;
      font-size: 15px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .mech-step-content p { font-size: 15px; color: #555; line-height: 1.6; margin-bottom: 12px; }
    .mech-step-content p:last-child { margin-bottom: 0; }
    hr.divider { border: 0; border-top: 1px solid #e5e7eb; margin: 40px 0 32px; }

    /* Runs-itself feature grid */
    .features {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 36px;
    }
    .feature h3 { font-size: 15px; font-weight: 700; margin-bottom: 6px; color: #111; }
    .feature p { font-size: 14px; color: #555; line-height: 1.6; margin: 0; }

    /* Memory Book payoff */
    .memory-book { text-align: center; }
    .memory-book p { font-size: 15px; color: #555; line-height: 1.7; max-width: 640px; margin: 0 auto 12px; }
    .memory-book p:last-child { margin-bottom: 0; }
    .memory-book img { width: 100%; max-width: 360px; margin: 8px auto 24px; display: block; }
    .memory-book .memory-book-link { display: inline-block; margin-top: 20px; font-size: 15px; font-weight: 600; color: #111; text-decoration: none; }
    .memory-book .memory-book-link:visited { color: #111; }
    .memory-book .memory-book-link:hover { text-decoration: underline; }

    /* Pricing */
    .pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    /* 4-card pricing (e.g. /pro-list) renders as a balanced 2×2 instead of 3+1. */
    .pricing--2x2 { grid-template-columns: repeat(2, 1fr); }
    .price-card {
      background: white;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      padding: 24px 20px;
      text-align: center;
    }
    .price-card.is-addon { border-color: #93c5fd; background: #f5f9ff; }
    .price-card .price-name { font-size: 15px; font-weight: 700; color: #111; margin-bottom: 6px; }
    .price-card .price-amount { font-size: 30px; font-weight: 800; color: #111; letter-spacing: -0.5px; }
    .price-card .price-desc { font-size: 13px; color: #6b7280; line-height: 1.55; margin: 10px 0 0; }
    .pricing-note { font-size: 14px; color: #6b7280; text-align: center; line-height: 1.6; max-width: 620px; margin: 28px auto 0; }
    .pricing-note a { color: #2563eb; font-weight: 600; text-decoration: underline; }
    .pricing-note a:hover { color: #1d4ed8; }

    /* FAQ */
    .faq { max-width: 720px; margin: 0 auto; }
    .faq-item { padding: 0; margin-bottom: 28px; }
    .faq-item:last-child { margin-bottom: 0; }
    .faq-item h3 { font-size: 16px; font-weight: 700; color: #111; margin-bottom: 4px; line-height: 1.2; }
    .faq-item p { font-size: 15px; color: #555; line-height: 1.3; margin: 0; }

    /* CTA bands */
    .cta { background: #111; text-align: center; padding: 88px 24px; }
    .cta h2 { font-size: 38px; font-weight: 800; margin-bottom: 16px; color: white; letter-spacing: -0.5px; }
    .cta p { font-size: 16px; color: #9ca3af; margin-bottom: 40px; }
    .btn-cta {
      display: inline-block;
      padding: 16px 44px;
      background: white;
      color: #111;
      border-radius: 8px;
      font-size: 17px;
      font-weight: 700;
      text-decoration: none;
      transition: background 0.2s;
    }
    .btn-cta:visited { color: #111; }
    .btn-cta:hover { background: #e5e7eb; }

    @media (max-width: 640px) {
      .hero { padding: 64px 24px 48px; }
      .hero h1 { font-size: 36px; }
      .hero p { font-size: 17px; }
      .section { padding: 48px 24px; }
      .steps { grid-template-columns: 1fr; }
      .features { grid-template-columns: 1fr; }
      .flow-summary { grid-template-columns: 1fr; gap: 20px; }
      .pricing { grid-template-columns: 1fr; }
      .section-title { font-size: 26px; }
      .cta { padding: 64px 24px; }
      .cta h2 { font-size: 28px; }
    }
    @media (max-width: 360px) {
      .hero h1 { font-size: 28px; }
      .hero p { font-size: 16px; }
      .section-title { font-size: 22px; }
      .cta h2 { font-size: 24px; }
    }