.page-hero { background: var(--white); border-bottom: 1px solid var(--border); padding: 4rem 0 3rem; }
    .page-hero h1 { font-size: clamp(1.75rem,3.5vw,2.5rem); font-weight: 700; letter-spacing: -0.03em; margin-bottom: 1rem; }
    .page-hero p { font-size: 17px; color: var(--text-muted); max-width: 560px; line-height: 1.7; }

    .highlight { border-radius: var(--radius-lg); padding: 1.5rem 2rem; margin: 3rem 0 .5rem; }
    .highlight.green { background: var(--green-light); border: 1px solid #B8DCC0; }
    .highlight h3 { font-size: 15px; font-weight: 600; margin-bottom: .4rem; }
    .highlight.green h3 { color: var(--green-dark); }
    .highlight p { font-size: 14px; line-height: 1.6; }
    .highlight.green p { color: #2E6830; }

    .big-step { display: grid; grid-template-columns: 60px 1fr; gap: 1.75rem; padding: 2rem 0; border-top: 1px solid var(--border); }
    .big-step:last-of-type { border-bottom: 1px solid var(--border); }
    .big-step-num { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; flex-shrink: 0; }
    .num-green { background: var(--green-light); color: var(--green-dark); }
    .num-blue { background: var(--blue-light); color: var(--blue-dark); }
    .big-step h3 { font-size: 17px; font-weight: 700; margin-bottom: .4rem; }
    .big-step p { font-size: 15px; color: var(--text-muted); line-height: 1.7; margin-bottom: .75rem; }
    .step-tags { display: flex; gap: 8px; flex-wrap: wrap; }

    .principles { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-top: 2rem; }
    .principle-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.75rem; }
    .principle-num { font-size: 1.75rem; font-weight: 700; color: var(--green); letter-spacing: -0.04em; margin-bottom: .6rem; }
    .principle-card h3 { font-size: 16px; font-weight: 600; margin-bottom: .5rem; }
    .principle-card p { font-size: 14px; color: var(--text-muted); line-height: 1.6; }

    .faq-item { border-top: 1px solid var(--border); padding: 1.25rem 0; }
    .faq-item:last-child { border-bottom: 1px solid var(--border); }
    .faq-q { font-size: 15px; font-weight: 600; margin-bottom: .4rem; }
    .faq-a { font-size: 14px; color: var(--text-muted); line-height: 1.7; }

    .cta-banner { background: var(--white); border: 1.5px solid var(--green); border-radius: var(--radius-lg); padding: 2.5rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-top: 4rem; }
    .cta-banner h2 { font-size: 1.35rem; font-weight: 700; margin-bottom: .4rem; }
    .cta-banner p { font-size: 14px; color: var(--text-muted); }

    @media (max-width: 768px) {
      .big-step { grid-template-columns: 44px 1fr; gap: 1.25rem; }
      .big-step-num { width: 40px; height: 40px; font-size: 16px; }
      .principles { grid-template-columns: 1fr; }
    }

    @media (max-width: 640px) {
      .page-hero { padding: 2.6rem 0 2rem; }
      .highlight { padding: 1.2rem; margin-top: 2rem; }
      .big-step { grid-template-columns: 36px minmax(0, 1fr); gap: 0.85rem; padding: 1.25rem 0; }
      .big-step-num { width: 34px; height: 34px; font-size: 15px; }
      .big-step p { font-size: 14px; }
      .step-tags { gap: 0.45rem; }
      .step-tags .tag { max-width: 100%; white-space: normal; }
      .principle-card { padding: 1.25rem; }
      .cta-banner { padding: 1.25rem; margin-top: 2.5rem; }
      .container div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; gap: 1rem !important; }
    }