/**
 * Fraud Alert — page-specific components on the za- enterprise design system.
 * Loads AFTER css/our-company-enterprise.css, inheriting the :root --za-*
 * tokens and shared button/close components. Prefix fa- to avoid colliding with
 * za- / hw- / cr- / iw- classes.
 */

/* ========== HERO (centered dark security banner) ========== */
.fa-hero{
  position:relative;
  background:#070b14;
  color:#fff;
  overflow:hidden;
  isolation:isolate;
  padding:clamp(72px,10vw,120px) 0;
}
.fa-hero-bg{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.fa-hero-bg .za-hero-grid{ position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 74%);
  mask-image:radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 74%);
}
.fa-hero-glow{ position:absolute; top:-30%; left:50%; transform:translateX(-50%);
  width:min(720px,80%); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(255,86,86,.20) 0%, rgba(0,87,255,.10) 45%, transparent 70%); }
.fa-hero-inner{ max-width:820px; margin:0 auto; text-align:center; }
.fa-hero-badge{
  display:inline-flex; align-items:center; gap:9px;
  margin:0 0 22px; padding:8px 16px;
  border:1px solid rgba(255,120,120,.4);
  border-radius:999px;
  background:rgba(255,86,86,.1);
  font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:#ff9d9d;
}
.fa-hero-badge svg{ width:15px; height:15px; }
.fa-hero h1{
  margin:0 0 20px;
  font-size:clamp(30px,4.2vw,52px);
  line-height:1.1; font-weight:700; letter-spacing:-0.03em; color:#fff;
}
.fa-hero-lead{
  margin:0 auto; max-width:60ch;
  font-size:17.5px; line-height:1.7; color:rgba(255,255,255,.78);
}

/* ========== SECTION SHELL ========== */
.fa-sec{ padding:var(--za-space) 0; background:#fff; border-bottom:1px solid var(--za-line); }
.fa-sec.is-soft{ background:var(--za-soft); }
.fa-head{ max-width:760px; margin:0 0 40px; }
.fa-head.is-center{ margin-left:auto; margin-right:auto; text-align:center; }
.fa-head h2{
  margin:0 0 16px;
  font-size:clamp(26px,3.2vw,38px); line-height:1.16; font-weight:700;
  letter-spacing:-0.025em; color:var(--za-ink);
}
.fa-head p{ margin:0; font-size:16.5px; line-height:1.7; color:var(--za-muted); }

/* Highlighted callout for the core domain/payment warning */
.fa-note{
  display:flex; gap:16px; align-items:flex-start;
  max-width:820px; margin:0 0 22px;
  padding:22px 24px;
  background:rgba(0,87,255,.05);
  border:1px solid rgba(0,87,255,.18);
  border-left:3px solid var(--za-blue);
  border-radius:12px;
}
.fa-note:last-child{ margin-bottom:0; }
.fa-note-ico{ flex:none; display:grid; place-items:center; width:40px; height:40px;
  border-radius:10px; background:rgba(0,87,255,.1); color:var(--za-blue); }
.fa-note-ico svg{ width:22px; height:22px; }
.fa-note p{ margin:0; font-size:15px; line-height:1.65; color:var(--za-ink); }
.fa-note strong{ font-weight:700; }
.fa-note code{
  padding:2px 7px; border-radius:5px; background:#fff;
  border:1px solid var(--za-line);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13px; color:var(--za-blue); font-weight:600;
}

/* ========== RED FLAGS GRID ========== */
.fa-flags{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px;
  margin:0; padding:0; list-style:none;
}
.fa-flag{
  display:flex; gap:14px; align-items:flex-start;
  padding:22px 22px; background:#fff;
  border:1px solid var(--za-line); border-radius:14px;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s var(--za-ease);
}
.fa-sec.is-soft .fa-flag{ background:#fff; }
.fa-flag:hover{ border-color:rgba(0,87,255,.28); box-shadow:0 14px 34px rgba(11,18,32,.08); transform:translateY(-2px); }
.fa-flag-ico{ flex:none; display:grid; place-items:center; width:40px; height:40px;
  border-radius:10px; background:#fff2f2; color:#e5484d; border:1px solid #ffdada; }
.fa-flag-ico svg{ width:20px; height:20px; }
.fa-flag p{ margin:0; font-size:14.5px; line-height:1.55; color:var(--za-ink); font-weight:500; }

/* ========== WILL / WON'T COLUMNS ========== */
.fa-cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.fa-col{ padding:28px 26px; border:1px solid var(--za-line); border-radius:16px; background:#fff; }
.fa-col h3{ display:flex; align-items:center; gap:10px; margin:0 0 18px;
  font-size:17px; font-weight:700; letter-spacing:-0.01em; color:var(--za-ink); }
.fa-col-ico{ flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:9px; }
.fa-col-ico svg{ width:19px; height:19px; }
.fa-col.is-do .fa-col-ico{ background:#e7f7ee; color:#1a8f4c; }
.fa-col.is-dont .fa-col-ico{ background:#fff2f2; color:#e5484d; }
.fa-list{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px; }
.fa-list li{ position:relative; padding-left:28px; font-size:14.5px; line-height:1.55; color:var(--za-muted); }
.fa-list li::before{ position:absolute; left:0; top:0; font-weight:700; }
.fa-col.is-do .fa-list li::before{ content:"\2713"; color:#1a8f4c; }
.fa-col.is-dont .fa-list li::before{ content:"\2715"; color:#e5484d; }
.fa-list strong{ color:var(--za-ink); font-weight:600; }
.fa-list code{ padding:1px 6px; border-radius:5px; background:var(--za-soft);
  border:1px solid var(--za-line); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px; color:var(--za-blue); font-weight:600; }

/* ========== WHAT TO DO (steps) ========== */
.fa-steps{ margin:0; padding:0; list-style:none; counter-reset:fa; display:flex; flex-direction:column; gap:14px; max-width:820px; }
.fa-step{ display:flex; gap:16px; align-items:flex-start; padding:20px 22px;
  background:#fff; border:1px solid var(--za-line); border-radius:14px; }
.fa-step::before{ counter-increment:fa; content:counter(fa,decimal-leading-zero);
  flex:none; display:grid; place-items:center; width:38px; height:38px; border-radius:10px;
  background:rgba(0,87,255,.09); border:1px solid rgba(0,87,255,.22);
  color:var(--za-blue); font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; }
.fa-step p{ margin:0; font-size:15px; line-height:1.6; color:var(--za-ink); }
.fa-step strong{ font-weight:700; }

/* ========== RESPONSIVE ========== */
@media (max-width:1024px){
  .fa-flags{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:680px){
  .fa-flags{ grid-template-columns:1fr; }
  .fa-cols{ grid-template-columns:1fr; }
  .fa-note{ flex-direction:column; gap:12px; }
}