/* ============================================================
   Scam prevention - Figma frame 4696:777 ("Scam prevention — High Fidelity v1")
   Figma strokes on these cards are "inside" and not part of layout,
   so bordered boxes use (Figma padding - 1px) to keep content in place.
   ============================================================ */

/* Icons render at their own SVG size, centred in the Figma icon frame */
.scam-tile img,.scam-never__icon img,.scam-warn__icon img,.scam-protect__tick img{width:auto;height:auto;max-width:none}

/* ---- 01 Hero (4696:809) ---- */
.scam-hero{padding-block:var(--space-9);background:var(--surface-subtle)}
.scam-hero__row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6)}
.scam-hero__copy{display:flex;flex-direction:column;gap:var(--space-5);align-items:flex-start;width:528px;flex:none}
.scam-hero__title{white-space:nowrap}
.scam-hero__lead{max-width:487px;font-size:18px;line-height:28px;color:var(--gray-600)}
.scam-hero__lead p + p{margin-top:28px}              /* Figma separates the three paragraphs with one empty 28px line */
.scam-hero__art{flex:none;width:460px}
.scam-hero__art img{width:100%;height:auto}

/* ---- Shared section frame (02-06) ---- */
.scam-section{padding-block:var(--space-9);background:var(--surface)}
.scam-section--subtle{background:var(--surface-subtle)}
.scam-section--last{padding-bottom:112px}            /* Figma: 112 bottom padding on section 06 (raw value) */
.scam-title--1000{max-width:1000px}
.scam-title--1040{max-width:1040px}
.scam-title--900{max-width:900px}

/* White 48px icon tile used by the "What is a scam" and "Check the source" panels */
.scam-tile{display:flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;border-radius:var(--radius-md);background:var(--white)}

/* ---- 02 What is a scam (4696:810) ---- */
.scam-panel{display:flex;gap:var(--space-5);align-items:flex-start;margin-top:40px;padding:40px;background:var(--gray-50);border-radius:var(--radius-lg)}  /* 40 = Figma raw spacer/padding */
.scam-panel__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-4);font-size:16px;line-height:26px;color:var(--gray-700)}

/* ---- 03 Been scammed (4696:811) ---- */
.scam-emergency{
  display:flex;flex-direction:column;gap:var(--space-5);
  margin-top:56px;                                   /* Figma spacers 16 + 40 */
  padding:calc(var(--space-7) - 1px);
  background:var(--white);border:1px solid #fcdeb2;border-radius:20px;   /* raw values in Figma (not variables) */
}
.scam-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.scam-step{display:flex;flex-direction:column;gap:var(--space-2);padding:calc(var(--space-5) - 1px);background:var(--white);border:1px solid var(--gray-100);border-radius:var(--radius-lg)}
.scam-step__num{color:var(--primary-500)}
.scam-step__body{color:var(--gray-600)}
.scam-contact{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) 20px;background:var(--gray-50);border-radius:var(--radius-md)}
.scam-contact__text{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-1)}
.scam-contact__label{color:var(--gray-500)}
.scam-contact__value{color:var(--primary-700)}
.scam-contact__value a:hover{text-decoration:underline}

/* ---- 04 Is the contact legitimate (4696:812) ---- */
.scam-source{display:flex;gap:var(--space-5);align-items:flex-start;margin-top:40px;padding:36px 40px;background:var(--primary-50);border-radius:var(--radius-lg)}  /* 36/40 raw in Figma */
.scam-source__text{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-2)}
.scam-source__body{color:var(--gray-700)}
.scam-never{display:flex;flex-direction:column;gap:var(--space-5);margin-top:var(--space-5);padding:44px var(--space-7);background:var(--error-50);border-radius:20px}  /* 44 / 20 raw in Figma */
.scam-never h3{max-width:600px}
.scam-never__list{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)}
.scam-never__item{display:flex;align-items:center;gap:var(--space-3);min-height:56px;padding:calc(var(--space-4) - 1px);
  background:rgba(254,236,235,.4);border:1px solid var(--error-50);border-radius:var(--radius-md);color:var(--gray-900)}  /* fill is a raw 40% error-50 */
.scam-never__icon{display:flex;align-items:center;justify-content:center;flex:none;width:20px;height:20px}

/* ---- 05 How do I spot a scam (4696:813) ---- */
.scam-sub{max-width:900px;margin-top:var(--space-3);color:var(--gray-600)}
.scam-warn{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:40px}   /* 20 / 40 raw in Figma */
.scam-warn__item{display:flex;gap:20px;align-items:flex-start;padding:var(--space-4);background:var(--warning-50);border-radius:var(--radius-md);
  transition:box-shadow .18s var(--ease)}
.scam-warn__item--hug{align-self:start}             /* card 07 hugs its content in Figma (88px, not stretched to the row) */
.scam-warn__num{flex:none;width:40px;color:var(--gray-700);transition:color .18s var(--ease)}
.scam-warn__text{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-2)}
.scam-warn__head{display:flex;align-items:center;gap:10px}
.scam-warn__head h3{flex:1;min-width:0;color:var(--black)}
.scam-warn__icon{display:flex;align-items:center;justify-content:center;flex:none;width:20px;height:20px}
.scam-warn__text p{color:var(--gray-600)}
/* State=Hover (4692:35082): primary-100 inside stroke, number turns warning-700 */
.scam-warn__item:hover{box-shadow:inset 0 0 0 1px var(--primary-100)}
.scam-warn__item:hover .scam-warn__num{color:var(--warning-700)}

/* ---- 06 How can you protect yourself (4696:814) ---- */
.scam-protect{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4);margin-top:40px}
.scam-protect__item{display:flex;align-items:center;gap:var(--space-4);padding:calc(var(--space-4) - 1px) 19px;
  background:var(--primary-50);border:1px solid var(--gray-50);border-radius:var(--radius-md)}
.scam-protect__tick{display:flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;
  background:var(--white);border:1px solid var(--primary-100);border-radius:var(--radius-pill);
  transition:background-color .18s var(--ease),border-color .18s var(--ease)}
.scam-protect__tick img{transition:filter .18s var(--ease)}
.scam-protect__text{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-1)}
.scam-protect__text h3{color:var(--black);transition:color .18s var(--ease)}
.scam-protect__text p{color:var(--gray-700);transition:color .18s var(--ease)}
.scam-flip-y{transform:scaleY(-1)}                    /* Figma flips this glyph vertically (rotate 180 + mirror X) */
/* State=Hover (4692:35096): tick fills brand, icon turns white, text shifts to gray-900 / gray-600 */
.scam-protect__item:hover .scam-protect__tick{background:var(--primary-500);border-color:var(--primary-500)}
.scam-protect__item:hover .scam-protect__tick img{filter:brightness(0) invert(1)}
.scam-protect__item:hover .scam-protect__text h3{color:var(--gray-900)}
.scam-protect__item:hover .scam-protect__text p{color:var(--gray-600)}

/* ---- Responsive ---- */
@media (max-width:1100px){
  .scam-hero__row{flex-direction:column;align-items:flex-start;gap:var(--space-7)}
  .scam-hero__copy{width:auto;max-width:528px}
  .scam-hero__title{white-space:normal}
  .scam-hero__art{width:min(460px,100%);align-self:center}
  .scam-steps{grid-template-columns:1fr}
  .scam-warn,.scam-protect{grid-template-columns:1fr}
  .scam-warn__item--hug{align-self:stretch}
}
@media (max-width:640px){
  .scam-section--last{padding-bottom:var(--section-y)}
  .scam-panel,.scam-source{flex-direction:column;padding:var(--space-5)}
  .scam-emergency{margin-top:var(--space-6);padding:calc(var(--space-4) - 1px)}
  .scam-contact{flex-direction:column;align-items:flex-start}
  .scam-contact .btn{width:100%;white-space:normal;text-align:center}
  .scam-never{padding:var(--space-6) var(--space-5)}
  .scam-never__list{grid-template-columns:1fr}
  .scam-hero .btn{white-space:normal;text-align:center;height:auto;min-height:52px;padding-block:var(--space-3)}
}