.document-page { min-height: 100vh; display: flex; flex-direction: column; }
.document-main { flex: 1; }
.document-main :where(h1, h2, p, ul) { margin-top: 0; margin-bottom: 0; }
    /* Hero */
    .doc-hero {
      padding: 64px 24px 48px;
      text-align: center;
      max-width: 720px;
      margin: 0 auto;
    }

    .doc-hero__icon {
      width: 56px; height: 56px; border-radius: 16px;
      background: rgba(43, 181, 166, 0.08); border: 1px solid rgba(43, 181, 166, 0.15);
      display: flex; align-items: center; justify-content: center;
      font-size: 24px; margin: 0 auto 20px;
    }

    .doc-hero__eyebrow {
      font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
      color: var(--teal-dark); margin-bottom: 12px;
    }

    .doc-hero__title {
      font-family: var(--font-heading);
      font-size: clamp(2rem, 4vw, 2.8rem);
      font-weight: 900; letter-spacing: -0.03em;
      color: var(--gray-900); margin-bottom: 12px; line-height: 1.1;
    }

    .doc-hero__sub {
      font-size: 1rem; font-weight: 400; color: var(--gray-600);
      line-height: 1.7; max-width: 500px; margin: 0 auto;
    }

    /* Content */
    .content {
      max-width: 720px; margin: 0 auto; padding: 0 24px 80px; width: 100%; flex: 1;
    }

    .doc-card {
      background: var(--gray-100);
      border-radius: 20px;
      border: 1px solid var(--gray-200);
      overflow: hidden;
    }

    .doc-section {
      padding: 28px 36px;
      border-bottom: 1px solid var(--gray-200);
      transition: background 0.2s ease;
    }

    .doc-section:last-child { border-bottom: none; }
    .doc-section:hover { background: rgba(43, 181, 166, 0.02); }

    .doc-section-header {
      display: flex; align-items: center; gap: 14px; margin-bottom: 12px;
    }

    .section-num {
      min-width: 30px; height: 30px; border-radius: 8px;
      background: rgba(43, 181, 166, 0.08);
      border: 1px solid rgba(43, 181, 166, 0.15);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-heading);
      font-size: 0.68rem; font-weight: 800; color: var(--teal-dark);
      letter-spacing: 0.04em; margin-top: 1px;
    }

    .doc-section h2 {
      font-family: var(--font-heading);
      font-size: 1.05rem; font-weight: 800; color: var(--gray-900);
      letter-spacing: -0.01em; line-height: 1.35;
    }

    .doc-section p {
      font-size: 0.9rem; font-weight: 400; color: var(--gray-600);
      line-height: 1.75; margin-left: 44px;
    }

    .doc-section p + p { margin-top: 10px; }
    .doc-section ul + p { margin-top: 14px; }

    .doc-section ul {
      list-style: none; margin-left: 44px; padding-left: 0;
      display: flex; flex-direction: column; gap: 8px;
    }

    .doc-section ul li {
      font-size: 0.9rem; font-weight: 400; color: var(--gray-600);
      line-height: 1.65; padding-left: 18px; position: relative;
    }

    .doc-section ul li::before {
      content: ''; position: absolute; left: 0; top: 9px;
      width: 5px; height: 5px; border-radius: 50%;
      background: var(--teal); opacity: 0.7;
    }

    .doc-section ul li strong { color: var(--gray-900); font-weight: 500; }

    .doc-section a {
      color: var(--teal-dark); text-decoration: none;
      border-bottom: 1px solid rgba(43, 181, 166, 0.3);
      transition: border-color 0.2s;
    }
    .doc-section a:hover { border-color: var(--teal-dark); }

    .last-updated {
      display: flex; align-items: center; justify-content: center;
      gap: 8px; margin-top: 32px;
      font-size: 0.72rem; font-weight: 400; color: var(--gray-400);
      letter-spacing: 0.06em;
    }

    .last-updated::before, .last-updated::after {
      content: ''; flex: 1; height: 1px;
      background: linear-gradient(90deg, transparent, var(--gray-200));
    }
    .last-updated::after { background: linear-gradient(90deg, var(--gray-200), transparent); }


    .doc-hero { width: 100%; }
    .doc-section p + ul { margin-top: 12px; }
    .doc-section strong { color: var(--gray-900); font-weight: 600; }
    .doc-section a { overflow-wrap: anywhere; }
    @media (max-width: 640px) {
      .doc-hero { padding: 40px 20px 32px; }
      .doc-section { padding: 22px 20px; }
      .doc-section p, .doc-section ul { margin-left: 0; }
      .content { padding: 0 16px 48px; }
    }