:root{
    --primary:#00cde1; --primary-dark:#00b3c8;
    --text:#1a1a1a; --muted:#4b5563;
    --bg:#ffffff; --card:#f9fafb; --border:#e5e7eb;
  }

  .af-wrap{max-width:900px;margin:0 auto;padding:1.25rem;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);line-height:1.75;font-size:16px}
  .af-hero{text-align:center;margin-bottom:1.5rem}
  .af-hero h1{font-size:clamp(2rem,4vw,2.6rem);font-weight:800;color:var(--primary);margin:.25rem 0 .75rem}
  .af-lead{color:var(--muted);max-width:70ch;margin:0 auto 1rem}
  .af-meta{color:var(--muted);font-size:.95rem;margin-bottom:1rem}

  .af-cta{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin:1.25rem 0 1.5rem}
  .btn{display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 1.25rem;border-radius:14px;font-weight:700;text-decoration:none}
  .btn.primary{background:var(--primary);color:#fff;box-shadow:0 8px 22px rgba(0,205,225,.35);transition:all .15s ease}
  .btn.primary:hover{background:var(--primary-dark);transform:translateY(-2px)}
  .btn.outline{border:2px solid var(--primary);color:var(--primary);background:#fff}

  .card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1.25rem;margin:1rem 0}
  .card h2{font-size:1.5rem;color:var(--primary);font-weight:800;margin:0 0 .75rem}
  .list{padding-left:1.2rem;margin:.25rem 0}.list li{margin:.4rem 0}
  .note{background:#e6fbfd;border-left:4px solid var(--primary);padding:.85rem 1rem;border-radius:12px;color:#0b3e46;margin-top:.6rem}
  .mini{font-size:.95rem;color:var(--muted)}