/* Yatay overflow güvenlik ağı — `clip` kullan ki position:sticky kırılmasın
     (overflow-x:hidden parent'ı yeni scroll container yapar, sticky çalışmaz) */
  html, body { overflow-x: clip; }
  body {
    background-color: #051424;
    color: #d4e4fa;
    font-family: 'Inter', sans-serif;
  }
  html[lang="ar"] body { font-family: 'Cairo', 'Inter', sans-serif; }

  /* landing.min.css'te eksik olan Tailwind utility'leri */
  .py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .mb-12 { margin-bottom: 3rem; }
  @media (min-width: 768px) {
    .md\:py-24 { padding-top: 6rem; padding-bottom: 6rem; }
  }
  @media (min-width: 640px) {
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  /* Navbar nav + CTA yalnızca tam masaüstü nav sığdığında (≥1024px) görünür;
     landing.min.css'te bu lg utility'leri yok, burada tanımlanır */
  @media (min-width: 1024px) {
    .lg\:flex { display: flex; }
    .lg\:inline-flex { display: inline-flex; }
  }

  /* ── MOBILE NAV ── */
  .mobile-nav-btn {
    display: inline-flex; align-items: center; justify-content: center;
    color: #cbd5e1; background: transparent; border: 0; cursor: pointer;
    padding: 10px; margin-right: -10px;
    min-width: 44px; min-height: 44px;
  }
  .mobile-nav-btn:hover { color: #fff; }
  .mobile-nav-drawer {
    display: none;
    position: fixed; top: 64px; left: 0; right: 0; z-index: 40;
    background: rgba(2, 6, 23, 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(30, 41, 59, 0.6);
    max-height: calc(100vh - 64px); overflow-y: auto;
  }
  .mobile-nav-drawer.is-open { display: block; }
  .mobile-nav-drawer .mobile-nav-inner {
    display: flex; flex-direction: column; padding: 1rem 1.5rem;
  }
  .mobile-nav-drawer a {
    color: #cbd5e1; padding: 0.75rem 0; font-size: 0.875rem;
    border-bottom: 1px solid rgba(30, 41, 59, 0.5); text-decoration: none;
    transition: color 0.15s ease;
  }
  .mobile-nav-drawer a:hover { color: #fff; }
  .mobile-nav-drawer a.mobile-nav-cta {
    margin-top: 1rem; background: #ef4444; color: #fff;
    text-align: center; font-weight: 700; letter-spacing: 0.025em;
    padding: 0.75rem 1rem; border-radius: 2px; border-bottom: 0;
  }
  .mobile-nav-drawer a.mobile-nav-cta:hover { background: #dc2626; }
  @media (min-width: 1024px) {
    .mobile-nav-btn, .mobile-nav-drawer { display: none !important; }
  }

  .glass-card {
    background: rgba(17, 24, 39, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid #1e293b;
  }

  /* ── LED PULSE ── */
  @keyframes ledPulseGreen { 0%,100%{opacity:1} 50%{opacity:0.3} }

  /* ── CAMERA MONITOR FRAME ── */
  .cam-monitor {
    position: relative; width: 100%; aspect-ratio: 16/9;
    background: #000; border-radius: 6px; overflow: hidden;
    border: 1px solid #1e3a5f;
    box-shadow: 0 0 0 1px rgba(59,130,246,0.08), 0 0 40px rgba(59,130,246,0.12);
  }
  [data-stage="1"] .cam-monitor,
  [data-stage="2"] .cam-monitor,
  [data-stage="3"] .cam-monitor { border-color: #7f1d1d; box-shadow: 0 0 0 1px rgba(239,68,68,0.15), 0 0 40px rgba(239,68,68,0.15); }

  /* ── STACKED IMAGES ── */
  .scene-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0; transition: opacity 0.85s ease;
  }
  .scene-img.active { opacity: 1; }

  /* ── CAMERA HUD TOP ── */
  .cam-hud-top {
    position: absolute; top: 0; left: 0; right: 0; z-index: 10;
    display: flex; justify-content: space-between; align-items: center;
    padding: 7px 10px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.65), transparent);
    font-family: 'Inter', monospace; font-size: 10px;
    letter-spacing: 0.07em; color: #64748b; font-weight: 600;
  }
  .cam-hud-bottom {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 10;
    display: flex; justify-content: space-between; align-items: center;
    padding: 7px 10px;
    background: linear-gradient(to top, rgba(0,0,0,0.65), transparent);
    font-family: 'Inter', monospace; font-size: 10px;
    letter-spacing: 0.06em; color: #475569; font-weight: 500;
  }
  .live-badge {
    display: flex; align-items: center; gap: 5px;
    color: #22c55e; font-weight: 700; font-size: 10px; letter-spacing: 0.1em;
  }
  .live-dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; animation: ledPulseGreen 1.4s ease infinite; }
  [data-stage="1"] .live-dot,[data-stage="2"] .live-dot,[data-stage="3"] .live-dot { background: #ef4444; }
  [data-stage="1"] .live-badge,[data-stage="2"] .live-badge,[data-stage="3"] .live-badge { color: #ef4444; }

  /* ── SCAN LINE ── */
  @keyframes scanDown { 0%{top:-2px;opacity:.7} 100%{top:100%;opacity:.15} }
  .scan-line {
    position: absolute; left: 0; right: 0; height: 2px; z-index: 9; pointer-events: none;
    background: linear-gradient(to right, transparent 0%, rgba(59,130,246,0.85) 40%, rgba(59,130,246,0.85) 60%, transparent 100%);
    animation: scanDown 4s linear infinite;
  }
  [data-stage="1"] .scan-line,[data-stage="2"] .scan-line,[data-stage="3"] .scan-line {
    background: linear-gradient(to right, transparent 0%, rgba(239,68,68,0.85) 40%, rgba(239,68,68,0.85) 60%, transparent 100%);
  }

  /* ── BOUNDING BOX OVERLAY ── */
  #bbox-overlay {
    position: absolute; z-index: 20; pointer-events: none;
    left: 25%; top: 10%; width: 48%; height: 80%;
    opacity: 0; transition: opacity 0.3s ease;
  }
  [data-stage="2"] #bbox-overlay { opacity: 1; }

  @keyframes drawBbox { from{stroke-dashoffset:999} to{stroke-dashoffset:0} }
  #bbox-rect { stroke-dasharray: 999; stroke-dashoffset: 999; }
  [data-stage="2"] #bbox-rect {
    animation: drawBbox 0.9s cubic-bezier(0.4,0,0.2,1) forwards;
  }

  /* ── THREAT BADGE ── */
  #threat-badge {
    position: absolute; top: 8%; left: 50%; transform: translateX(-50%);
    z-index: 25; opacity: 0; pointer-events: none; white-space: nowrap;
  }
  @keyframes threatAppear {
    0%{opacity:0;transform:translateX(-50%) scale(.9)}
    10%{opacity:1;transform:translateX(-50%) scale(1.04)}
    22%{opacity:.08} 38%{opacity:1} 54%{opacity:.08} 70%{opacity:1} 86%{opacity:.08}
    100%{opacity:1;transform:translateX(-50%) scale(1)}
  }
  [data-stage="2"] #threat-badge {
    animation: threatAppear 2s ease forwards;
  }

  /* ── RED VIGNETTE ── */
  #alert-vignette {
    position: absolute; inset: 0; z-index: 15; pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 35%, rgba(180,0,0,0.4) 100%);
    opacity: 0; transition: opacity 0.5s ease;
  }
  @keyframes vigFlash { 0%,100%{opacity:1} 50%{opacity:.45} }
  [data-stage="2"] #alert-vignette { animation: vigFlash 0.85s ease infinite; }

  /* ── NOTIFICATION TOASTS ── */
  #notif-container {
    display: flex; flex-direction: column; gap: 5px;
    overflow: hidden; max-height: 0;
    transition: max-height 0.5s ease 0.2s, opacity 0.4s ease 0.2s;
    opacity: 0; margin-top: 8px;
  }
  [data-stage="3"] #notif-container { max-height: 120px; opacity: 1; }
  .notif-toast {
    display: flex; align-items: center; gap: 7px;
    background: rgba(20,10,10,0.9); border: 1px solid rgba(239,68,68,0.45);
    border-left: 3px solid #ef4444; padding: 6px 10px; border-radius: 4px;
    font-size: 11px; font-family: 'Inter',sans-serif;
    color: #fca5a5; font-weight: 600; letter-spacing: 0.02em;
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
    opacity: 0; animation: toastSlide 0.4s ease forwards;
  }
  html[dir="rtl"] .notif-toast { border-left: none; border-right: 3px solid #ef4444; }
  @keyframes toastSlide { from{transform:translateX(14px);opacity:0} to{transform:translateX(0);opacity:1} }
  [data-stage="3"] .notif-toast:nth-child(1){animation-delay:.3s}
  [data-stage="3"] .notif-toast:nth-child(2){animation-delay:.5s}
  [data-stage="3"] .notif-toast:nth-child(3){animation-delay:.7s}

  /* ── STAGE CARD ── */
  #stage-card {
    border-left: 3px solid #3b82f6;
    padding: 12px 16px;
    background: rgba(30,58,138,0.08);
    border-radius: 0 6px 6px 0;
    transition: border-color 0.4s, background 0.4s;
  }
  html[dir="rtl"] #stage-card {
    border-left: none;
    border-right: 3px solid #3b82f6;
    border-radius: 6px 0 0 6px;
  }
  [data-stage="2"] #stage-card,
  [data-stage="3"] #stage-card {
    border-left-color: #ef4444;
    background: rgba(185,0,0,0.07);
  }
  html[dir="rtl"] [data-stage="2"] #stage-card,
  html[dir="rtl"] [data-stage="3"] #stage-card {
    border-right-color: #ef4444;
  }
  #stage-label  { font-size:10px; font-weight:700; letter-spacing:.12em; font-family:'Inter',sans-serif; margin-bottom:4px; }
  #stage-title  { font-size:16px; font-weight:700; color:#d4e4fa; line-height:1.35; font-family:'Inter',sans-serif; }
  #stage-desc   { font-size:13px; color:#64748b; margin-top:5px; line-height:1.5; font-family:'Inter',sans-serif; }
  html[lang="ar"] #stage-label,
  html[lang="ar"] #stage-title,
  html[lang="ar"] #stage-desc { font-family: 'Cairo', 'Inter', sans-serif; }
  #stage-label, #stage-title, #stage-desc { transition: opacity 0.25s ease, transform 0.25s ease; }
  .stage-txt-changing #stage-label,
  .stage-txt-changing #stage-title,
  .stage-txt-changing #stage-desc { opacity: 0; transform: translateY(5px); }

  /* ── STAGE DOTS ── */
  .stage-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #1e293b;
    transition: background 0.3s, transform 0.3s;
  }
  .stage-dot.active {
    background: #3b82f6;
    transform: scale(1.5);
  }

  /* ── SCROLL HINT ── */
  @keyframes bounceDown {
    0%, 100% { transform: translateY(0); opacity: 0.5; }
    50%       { transform: translateY(6px); opacity: 1; }
  }
  .scroll-hint { animation: bounceDown 1.5s ease infinite; }

  /* ── SECTION FADE IN ── */
  .fade-in-section {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .fade-in-section.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* ── LANGUAGE SWITCHER ── */
  #lang-switcher {
    background: #0f172a;
    border: 1px solid #1e293b;
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 28px 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%2364748b' d='M0 0l5 6 5-6z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    transition: border-color 0.2s;
  }
  html[dir="rtl"] #lang-switcher {
    padding: 6px 10px 6px 28px;
    background-position: left 8px center;
  }
  #lang-switcher:hover { border-color: #3b82f6; color: #f1f5f9; }
  #lang-switcher:focus { outline: none; border-color: #3b82f6; }

  /* ── FEATURE MARQUEE ── */
  .feature-marquee {
    position: relative;
    overflow: hidden;
    padding: 8px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  }
  .feature-track {
    display: flex;
    gap: 1.25rem;
    width: max-content;
    animation: featureScroll 80s linear infinite;
    will-change: transform;
  }
  .feature-track:hover { animation-play-state: paused; }
  html[dir="rtl"] .feature-track { animation-direction: reverse; }
  .feature-track > .glass-card {
    flex: 0 0 280px;
    min-height: 168px;
  }
  @keyframes featureScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce) {
    /* O-6: Vestibüler bozukluğu olan kullanıcılar için tüm animasyonlar durdurulur */
    .feature-track,
    .scan-line,
    .scroll-hint,
    .live-dot,
    #alert-vignette,
    #threat-badge,
    .notif-toast,
    #bbox-rect {
      animation: none !important;
      transition: none !important;
    }
    .fade-in-section {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }
  }

  /* ── CTA FORM STATUS ── */
  .cta-status {
    display: none;
    padding: 14px 18px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    line-height: 1.5;
    border: 1px solid transparent;
  }
  .cta-status.is-success {
    display: block;
    background: rgba(34, 197, 94, 0.10);
    border-color: rgba(34, 197, 94, 0.45);
    color: #86efac;
  }
  .cta-status.is-error {
    display: block;
    background: rgba(239, 68, 68, 0.10);
    border-color: rgba(239, 68, 68, 0.45);
    color: #fca5a5;
  }

  /* ── MOBILE ── */
  /* Spacer desktop'ta görünmez */
  #hero-mobile-spacer { display: none; }
  @media (max-width: 1023px) {
    /* Outer hero artık 400vh değil; içeriğe göre uzar (text + camera + spacer) */
    #hero-scroll { height: auto !important; }
    /* Outer .sticky'yi kapat (overflow:hidden de iç sticky'yi kırardı) */
    #hero-scroll > .sticky {
      position: static !important;
      height: auto !important;
      overflow: visible !important;
      padding-top: 88px;
      padding-bottom: 0;
    }
    /* Inner flex'i normal akışa al */
    #hero-scroll > .sticky > .max-w-7xl {
      height: auto !important;
      align-items: stretch !important;
      display: block !important;
      padding-top: 0 !important;
    }
    /* Grid: tek kolon, normal akış */
    #hero-scroll .grid { align-items: stretch !important; }
    /* Text bloğu (üstte, normal akış) */
    #hero-text { text-align: center; align-items: center; }
    #hero-text .flex { justify-content: center; }
    /* Kamera monitörü — mobilde normal akışta, scroll-jack YOK (aşamalar zamanlayıcıyla döner) */
    #scene-wrapper {
      display: flex !important;
      width: 100%;
      margin-top: 28px;
      position: static;
      z-index: 5;
    }
    #scene-wrapper #scene-container {
      max-width: 520px;
      width: 100%;
      margin: 0 auto;
    }
    /* Scroll-jack spacer'ı mobilde kaldırıldı — altındaki boş siyah alanı (scroll boşluğu) yok eder */
    #hero-mobile-spacer { display: none !important; }
    /* Stage card görünür kalsın */
    #stage-indicators { display: block !important; margin-top: 18px; }
    /* Mobilde anlamsız hintleri gizle */
    .scroll-hint { display: none !important; }
    #stage-indicators [data-i18n="hero.scrollNote"] { display: none !important; }
    /* Marquee mobilde daha rahat */
    .feature-track > .glass-card { flex: 0 0 240px; min-height: 160px; }
    .feature-track { animation-duration: 60s; }
  }

  /* Çok küçük telefonlar (≤480px) — marquee kart küçült, akış hissi geri gelsin */
  @media (max-width: 480px) {
    .feature-track > .glass-card { flex: 0 0 200px; min-height: 150px; }
    .feature-track { animation-duration: 50s; }
  }

  /* Landscape phone (max-height: 500px) — kamera viewport'a sığsın */
  @media (max-width: 1023px) and (orientation: landscape) and (max-height: 500px) {
    #scene-wrapper #scene-container {
      max-width: min(520px, calc(55vh * 1.78));
    }
  }

  /* ── SKIP-TO-CONTENT (a11y) ── */
  .skip-link {
    position: absolute; left: -9999px; top: 0;
    background: #3b82f6; color: #fff; padding: 8px 16px;
    font-weight: 700; text-decoration: none; z-index: 100;
    border-radius: 0 0 4px 0;
  }
  .skip-link:focus { left: 0; top: 0; }

  /* ══════════════════════════════════════════════════════════
     MISSING TAILWIND UTILITIES — landing.min.css build eksikleri
     ══════════════════════════════════════════════════════════ */

  /* #1 — w-14 / h-14 (3.5rem = 56px)
     Use Cases ve İletişim bölümlerindeki ikon konteynerleri */
  .w-14 { width: 3.5rem; }
  .h-14 { height: 3.5rem; }

  /* #2 — max-w-5xl (56rem = 896px)
     Demo Video ve İletişim bölüm genişlik kısıtı */
  .max-w-5xl { max-width: 56rem; }

  /* #3 — border-t-2 ve border-t renk utility'leri
     Use Cases kart üst accent çizgisi */
  .border-t-2 { border-top-width: 2px; }
  .border-t-blue-500\/40 { border-top-color: rgba(59,130,246,.4); }
  .hover\:border-t-blue-500:hover { border-top-color: rgb(59 130 246); }

  /* #4 — rounded-full override (landing.min.css'te 0.75rem → 9999px)
     Navbar badge pill görünümü + ikon çemberleri */
  .rounded-full { border-radius: 9999px; }

  /* #5 — pb-6 (1.5rem)
     Demo Video başlık bloğu alt boşluk */
  .pb-6 { padding-bottom: 1.5rem; }

  /* #5b — Eksik padding/margin utility'leri (build eksiği)
     Bunlar tanımsız olduğu için bölümler dikey boşluk almıyor, birbirine yapışıyordu
     (ör. fiyatlandırma disclaimer'ı ile footer sertifika şeridi dip dibeydi). */
  .p-0  { padding: 0; }
  .p-12 { padding: 3rem; }
  .py-8  { padding-top: 2rem;   padding-bottom: 2rem; }
  .py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .mt-1 { margin-top: 0.25rem; }
  .mt-3 { margin-top: 0.75rem; }
  .mb-1 { margin-bottom: 0.25rem; }
  .mb-5 { margin-bottom: 1.25rem; }
  /* md: (≥768px) dikey bölüm boşlukları — eksikti, masaüstünde bölümler sıkışıyordu */
  @media (min-width: 768px) {
    .md\:py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
    .md\:py-16 { padding-top: 4rem;   padding-bottom: 4rem; }
    .md\:py-20 { padding-top: 5rem;   padding-bottom: 5rem; }
    .md\:mb-14 { margin-bottom: 3.5rem; }
    .md\:mb-16 { margin-bottom: 4rem; }
  }
  @media (min-width: 640px) {
    .sm\:gap-3 { gap: 0.75rem; }
  }

  /* ══════════════════════════════════════════════════════════
     RESPONSIVE FIXES
     ══════════════════════════════════════════════════════════ */

  /* #6 — lg:grid-cols-3
     Use Cases: 1024px+ ekranlarda 3 kolonlu düzen */
  @media (min-width: 1024px) {
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  /* Sistem Gereksinimleri kartı — geniş ekranda iki sütun */
  @media (min-width: 640px) {
    .req-grid { grid-template-columns: 1fr 1fr !important; }
  }
  /* Metrics bandı — geniş ekranda üç sütun (640–768'de tek sütun, sıkışmasın) */
  @media (min-width: 768px) {
    .metrics-grid { grid-template-columns: repeat(3, 1fr) !important; }
  }
  /* Case study kartı — geniş ekranda logo + metin iki sütun */
  @media (min-width: 768px) {
    .case-grid { grid-template-columns: 200px 1fr !important; gap: 36px !important; }
  }

  /* #7 — Hero mobil hizalama
     Live badge self-start override + CTA buton ortalama */
  @media (max-width: 1023px) {
    /* Live badge: parent'ın align-items:center'ını takip et */
    #hero-text .self-start { align-self: center; }
    /* CTA buton wrapper: dikey yığılmada çapraz eksen ortalansın */
    #hero-text .flex.flex-col.items-start { align-items: center; }
    /* Butonlar tam genişlik + ortalanmış metin */
    #hero-text .flex.flex-col.items-start > a {
      width: 100%; text-align: center; justify-content: center;
    }
  }
  /* sm+ (640-1023px) satır düzeninde orijinal davranışı geri getir */
  @media (min-width: 640px) and (max-width: 1023px) {
    #hero-text .flex.flex-col.items-start { align-items: flex-start; }
    #hero-text .flex.flex-col.items-start > a { width: auto; }
  }

  /* #8 — Stats bar divide-x + 2-kolon grid çakışması
     Mobil 2×2 grid'de her satırın ilk elemanının sol border'ını kaldır */
  @media (max-width: 767px) {
    .grid-cols-2.divide-x > :not([hidden]):nth-child(2n+1):not(:first-child) {
      border-left-width: 0;
    }
  }
  @media (max-width: 1023px) {
    #hero-stats-bar { display: none !important; }
  }

  /* ── MODAL ── */
  #modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    padding: 1rem;
  }
  #modal-overlay.modal-open {
    display: flex;
  }
  .modal-box {
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: .75rem;
    width: 100%;
    max-width: 680px;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 60px rgba(0,0,0,.6);
  }
  .modal-box[hidden] {
    display: none;
  }
  .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(220,38,38,.25);
    flex-shrink: 0;
  }
  .modal-header h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #f1f5f9;
    letter-spacing: .02em;
    margin: 0;
  }
  .modal-close {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    padding: .25rem .5rem;
    border-radius: .375rem;
    transition: color .15s, background .15s;
  }
  .modal-close:hover { color: #f1f5f9; background: #1e293b; }
  .modal-body {
    overflow-y: auto;
    overflow-wrap: anywhere;
    padding: 1.5rem;
    color: #94a3b8;
    font-size: .92rem;
    line-height: 1.75;
    flex: 1;
  }
  .modal-body h3 {
    color: #e2e8f0;
    font-size: 1rem;
    font-weight: 600;
    margin: 1.25rem 0 .4rem;
  }
  .modal-body h3:first-child { margin-top: 0; }
  .modal-body p  { margin: 0 0 .75rem; }
  .modal-body ul { margin: 0 0 .75rem; padding-inline-start: 1.25rem; }
  .modal-body li { margin-bottom: .3rem; }
  .modal-body a  { color: #ef4444; text-decoration: underline; }
  .modal-body a:hover { color: #fca5a5; }
  .modal-body strong { color: #cbd5e1; font-weight: 600; }
  @media (max-width: 640px) {
    .modal-box { max-height: 90vh; border-radius: .5rem; }
    .modal-header { padding: 1rem 1.25rem; }
    .modal-body   { padding: 1rem 1.25rem; }
  }