/* ==========================================================================
   ArztFix design system - shared by every page except the home page.

   The home page is a separate design that reuses the same class names with
   different values, so it keeps its own stylesheet next to this one.
   ========================================================================== */

/* ArztFix Design System — inlined (only rules used by this page; vars resolved; global overrides dropped) */
.af-muted { color: #4a5b58; }

/* Buttons */
.af-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .65rem 1.4rem; border-radius: 999px; font-weight: 600; text-decoration: none; transition: background .2s, transform .2s, color .2s; border: 0; cursor: pointer; line-height: 1.2; }
.af-btn-primary { background: #0E7164; color: #fff; }
.af-btn-primary:hover { background: #056150; color: #fff; transform: translateY(-1px); }
.af-btn-amber { background: #DD9425; color: #fff; }
.af-btn-amber:hover { background: #c47e1c; color: #fff; }
.af-btn-light { background: #fff; color: #0E7164; }
.af-btn-light:hover { background: #F4F8F7; color: #056150; }

/* Hero */
.af-hero { background: #0E7164; color: #fff; padding: 3rem 0 4rem; border-radius: 0 0 28px 28px; position: relative; overflow: hidden; }
.af-hero h1 { font-weight: 700; line-height: 1.15; font-size: clamp(1.9rem, 3.4vw, 3rem); }
.af-hero p.lead { color: rgba(255,255,255,.92); }
.af-hero-eyebrow { display: inline-flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.12); border-radius: 999px; padding: .35rem .85rem; font-size: .85rem; }
.af-hero-img { border-radius: 18px; overflow: hidden; box-shadow: 0 18px 40px rgba(0,0,0,.18); max-width: 100%; }

/* Sections */
.af-section { padding: 4rem 0; }
.af-section-alt { background: #F4F8F7; padding: 4rem 0; }
.af-section-header { text-align: center; margin-bottom: 2.5rem; }
.af-section-header h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.af-section-eyebrow { display: inline-block; color: #0E7164; font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; margin-bottom: .5rem; }

/* Steps */
.af-steps { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1.25rem; }
@media (min-width: 768px) { .af-steps { grid-template-columns: repeat(3, 1fr); } }
.af-step { background: #fff; border-radius: 18px; padding: 1.5rem; text-align: center; box-shadow: 0 4px 14px rgba(14,64,47,.06); border: 1px solid #eef2f1; }
.af-step-num { width: 48px; height: 48px; border-radius: 50%; background: #0E7164; color: #fff; font-weight: 700; font-size: 1.2rem; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.af-step h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.af-step p { font-size: .9rem; color: #4a5b58; margin: 0; }

/* FAQ accordion */
.af-faq { max-width: 880px; margin: 0 auto; }
.af-faq details { border-bottom: 1px solid #eaeef0; padding: 1rem .25rem; }
.af-faq summary { font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: #1a1a1a; }
.af-faq summary::-webkit-details-marker { display: none; }
.af-faq summary::after { content: '+'; color: #0E7164; font-size: 1.6rem; line-height: 1; transition: transform .2s; }
.af-faq details[open] summary::after { content: '\2212'; }
.af-faq-answer { padding-top: .65rem; color: #4a5b58; line-height: 1.65; font-size: .95rem; }

/* Hero v2 (progressive overrides) */
.af-hero { padding: 4rem 0 5rem; min-height: 480px; display: flex; align-items: center; border-radius: 0 0 32px 32px; }
.af-hero .container { width: 100%; }
.af-hero h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); margin-bottom: 1.5rem; line-height: 1.1; font-weight: 700; }
.af-hero .lead { font-size: 1.05rem; }
@media (min-width: 992px) { .af-hero { min-height: 580px; padding: 5rem 0 6rem; } }
.af-hero { overflow: hidden; }
.af-hero > .container > .row { display: flex; flex-wrap: wrap; }

/* Hero overhaul (gradient + decorative shapes) */
.af-hero {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(255,255,255,.12), transparent 60%),
    radial-gradient(800px 400px at 10% 110%, rgba(255,255,255,.07), transparent 60%),
    linear-gradient(135deg, #0E7164 0%, #056150 60%, #06402F 100%);
  position: relative; overflow: hidden; padding: 5rem 0 8rem; border-radius: 0; min-height: 640px;
}
.af-hero::before { content:""; position:absolute; top:-100px; right:-100px; width:500px; height:500px; border-radius:50%; background: radial-gradient(circle, rgba(221,148,37,.18) 0%, transparent 70%); }
.af-hero::after  { content:""; position:absolute; bottom:60px; left:-150px; width:400px; height:400px; border-radius:50%; background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 70%); }
.af-hero .container { position: relative; z-index: 2; }

/* Section padding (generous) */
.af-section { padding: 5.5rem 0; }
.af-section-alt { padding: 5.5rem 0; }

/* Steps connecting line */
.af-steps { position: relative; }
@media (min-width: 768px) {
  .af-steps::before { content:""; position:absolute; top: 36px; left: 12%; right: 12%; height: 2px; background: repeating-linear-gradient(90deg, #0E7164 0 8px, transparent 8px 16px); z-index: 0; }
}
.af-step { position: relative; z-index: 1; }

/* Hero curved bottom safety */
.af-hero { margin-bottom: 0; }

/* FAQ as cards (progressive override) */
.af-faq { max-width: 880px; margin: 0 auto; }
.af-faq details { background: #fff; border: 1px solid #e6eceb; border-radius: 14px; padding: 1.1rem 1.4rem;
  margin-bottom: .75rem; box-shadow: 0 2px 8px rgba(14,64,47,.04); transition: box-shadow .2s, border-color .2s; border-bottom: 1px solid #e6eceb; }
.af-faq details:hover { box-shadow: 0 6px 18px rgba(14,113,100,.1); border-color: #c5dbd6; }
.af-faq details[open] { border-color: #0E7164; box-shadow: 0 10px 24px rgba(14,113,100,.12); }
.af-faq summary { padding: 0; color: #1a1a1a; font-size: 1rem; }
.af-faq summary::after { width: 28px; height: 28px; border-radius: 50%;
  background: #F4F8F7; color: #0E7164; display: inline-flex;
  align-items: center; justify-content: center; font-size: 1.2rem; line-height: 1; font-weight: 700; }
.af-faq details[open] summary::after { background: #0E7164; color: #fff; }
.af-faq-answer { padding-top: .85rem; border-top: 1px solid #f0f3f2; margin-top: .85rem; }

/* Section coloring */
.af-section-alt { background: #F4F8F7; }


/* Buttons and headings the account page adds on top. */
.af-heading { color: #0E7164; }
.af-btn-outline { background: transparent; color: #0E7164; border: 2px solid #0E7164; padding: calc(.65rem - 2px) calc(1.4rem - 2px); }
.af-btn-outline:hover { background: #0E7164; color: #fff; }