/* Pakstoor :: safety.css :: v1.1-000003 :: 2026-06-12 */
/* ============================================================
   SAFETY PAGE — animated protection modules.
   Loaded after cinematic.css so it inherits the global motion
   language: cubic-bezier(.2,.7,.2,1), gold halos, glass surfaces,
   layered shadows. Page-specific keyframes carry "lock", "scan",
   "shield" semantics.
   ============================================================ */

/* -- Page shell --------------------------------------------- */
.sf-page {
  position: relative;
  isolation: isolate;
  padding: clamp(48px, 7vw, 88px) 24px clamp(80px, 9vw, 120px);
  color: var(--ink, #ECEFF2);
  overflow: hidden;
}
.sf-page-inner {
  max-width: 1120px;
  margin: 0 auto;
}

/* -- Hero --------------------------------------------------- */
.sf-hero {
  text-align: center;
  margin-bottom: clamp(64px, 8vw, 110px);
  position: relative;
}
.sf-hero::before {
  content: '';
  position: absolute;
  inset: -10% -10% auto -10%;
  height: 60%;
  background: radial-gradient(
    ellipse 50% 60% at 50% 30%,
    rgba(212,175,55,0.08) 0%,
    transparent 65%
  );
  pointer-events: none;
  z-index: -1;
  filter: blur(20px);
}
.sf-hero-eyebrow {
  display: inline-block;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size:var(--fs-11);
  font-weight:var(--fw-700);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold, #D9A625);
  padding: 8px 16px;
  border: 1px solid rgba(217,166,37,0.30);
  border-radius: 999px;
  background: rgba(217,166,37,0.06);
  margin-bottom: 22px;
  opacity: 0;
  transform: translateY(8px);
  animation: sf-fade-up 700ms cubic-bezier(.2,.7,.2,1) 100ms forwards;
}
.sf-hero-title {
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-size: clamp(34px, 5vw, 64px);
  font-weight:var(--fw-700);
  letter-spacing: -0.018em;
  line-height: 1.04;
  text-transform: uppercase;
  margin: 0 auto 22px;
  max-width: 920px;
  opacity: 0;
  transform: translateY(10px);
  animation: sf-fade-up 800ms cubic-bezier(.2,.7,.2,1) 280ms forwards;
}
.sf-hero-title-line2 {
  background: linear-gradient(135deg, #f1d061 0%, #d4af37 50%, #b8941f 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 24px rgba(212,175,55,0.16);
}
.sf-hero-lede {
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.62;
  color: var(--ink-muted, #A6AFB9);
  max-width: 680px;
  margin: 0 auto 28px;
  opacity: 0;
  transform: translateY(8px);
  animation: sf-fade-up 800ms cubic-bezier(.2,.7,.2,1) 460ms forwards;
}
.sf-hero-modules {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  animation: sf-fade-up 800ms cubic-bezier(.2,.7,.2,1) 640ms forwards;
}
.sf-hero-module-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  background: rgba(255,255,255,0.02);
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  transition:
    border-color 220ms ease,
    background 220ms ease,
    color 220ms ease,
    transform 220ms cubic-bezier(.2,.7,.2,1);
}
.sf-hero-module-link::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold, #D9A625);
  box-shadow: 0 0 6px rgba(212,175,55,0.6);
}
@media (hover: hover) {
  .sf-hero-module-link:hover {
    border-color: rgba(212,175,55,0.30);
    background: rgba(212,175,55,0.06);
    color: var(--ink, #ECEFF2);
    transform: translateY(-1px);
  }
}

@keyframes sf-fade-up {
  to { opacity: 1; transform: translateY(0); }
}

/* -- Module shell ------------------------------------------- */
.sf-module {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding: clamp(32px, 4vw, 56px);
  margin-bottom: clamp(28px, 4vw, 56px);
  border-radius: 24px;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.020) 0%,
      rgba(255,255,255,0.010) 50%,
      rgba(0,0,0,0.06) 100%
    ),
    #1A1E26;
  backdrop-filter: blur(12px) saturate(1.04);
  -webkit-backdrop-filter: blur(12px) saturate(1.04);
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.05) inset,
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 24px 60px -40px rgba(0,0,0,0.50),
    0 6px 18px -10px rgba(0,0,0,0.20);
  isolation: isolate;
  scroll-margin-top: 100px;
}
.sf-module::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(212,175,55,0.16) 0%,
    rgba(212,175,55,0.04) 30%,
    transparent 60%,
    rgba(212,175,55,0.04) 80%,
    rgba(212,175,55,0.12) 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.85;
}
.sf-module-art {
  position: relative;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sf-module-num {
  display: inline-block;
  font-family: var(--font-mono, monospace);
  font-size:var(--fs-11);
  font-weight:var(--fw-700);
  letter-spacing: 0.22em;
  color: rgba(212,175,55,0.85);
  margin-bottom: 12px;
}
.sf-module-title {
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight:var(--fw-700);
  letter-spacing: -0.012em;
  text-transform: uppercase;
  line-height: 1.06;
  margin: 0 0 16px;
}
.sf-module-lede {
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--ink-muted, #A6AFB9);
  margin: 0 0 18px;
}
.sf-module-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.sf-module-points li {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
}
.sf-module-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(94,168,114,0.18);
  border: 1.5px solid rgba(94,168,114,0.65);
  box-shadow: 0 0 8px rgba(94,168,114,0.30);
}
.sf-module-points li::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 9px;
  width: 6px;
  height: 4px;
  border-left: 1.5px solid #5ea872;
  border-bottom: 1.5px solid #5ea872;
  transform: rotate(-45deg);
}

/* Reverse layout for alternating modules */
.sf-module.sf-reverse {
  grid-template-columns: 1fr 1fr;
}
.sf-module.sf-reverse .sf-module-art {
  order: 2;
}

/* -- ART: Vault / lock icon (Module 1) ---------------------- */
.sf-vault {
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sf-vault::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(212,175,55,0.18) 0%,
    rgba(212,175,55,0.05) 40%,
    transparent 70%
  );
  animation: sf-vault-breathe 4.5s ease-in-out infinite;
}
.sf-vault-ring {
  position: absolute;
  inset: 14px;
  border: 2px solid rgba(212,175,55,0.30);
  border-radius: 50%;
}
.sf-vault-ring-2 {
  position: absolute;
  inset: 28px;
  border: 1px solid rgba(212,175,55,0.20);
  border-radius: 50%;
  border-style: dashed;
  animation: sf-vault-rotate 24s linear infinite;
}
.sf-vault-icon {
  position: relative;
  width: 80px;
  height: 80px;
  color: var(--gold, #D9A625);
  filter: drop-shadow(0 0 14px rgba(212,175,55,0.55));
  z-index: 2;
}
.sf-vault-status {
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border: 1px solid rgba(94,168,114,0.45);
  background: rgba(94,168,114,0.10);
  border-radius: 999px;
  font-family: var(--font-mono, monospace);
  font-size:var(--fs-10);
  font-weight:var(--fw-700);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7fc695;
  white-space: nowrap;
}
.sf-vault-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5ea872;
  box-shadow: 0 0 6px rgba(94,168,114,0.7);
  animation: sf-pulse 2.4s ease-in-out infinite;
}
@keyframes sf-vault-breathe {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.08); opacity: 1; }
}
@keyframes sf-vault-rotate {
  to { transform: rotate(360deg); }
}
@keyframes sf-pulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

/* -- ART: Courier handoff visual (Module 2) ----------------- */
.sf-courier-art {
  position: relative;
  width: 100%;
  max-width: 360px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.sf-courier-node {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(212,175,55,0.20);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink, #ECEFF2);
  flex-shrink: 0;
}
.sf-courier-node svg {
  width: 32px;
  height: 32px;
  color: rgba(212,175,55,0.85);
  filter: drop-shadow(0 0 8px rgba(212,175,55,0.30));
}
.sf-courier-node-label {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono, monospace);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
}
.sf-courier-line {
  flex: 1;
  height: 2px;
  position: relative;
  background: rgba(212,175,55,0.15);
  border-radius:var(--r-1);
  overflow: hidden;
}
.sf-courier-line::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(212,175,55,0.85) 50%,
    transparent 100%
  );
  width: 40%;
  animation: sf-courier-flow 2.6s ease-in-out infinite;
}
@keyframes sf-courier-flow {
  0%   { transform: translateX(-100%); opacity: 0.6; }
  50%  { opacity: 1; }
  100% { transform: translateX(300%); opacity: 0.6; }
}

/* -- The "vs" comparison block (Module 2 detail) ----------- */
.sf-vs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: stretch;
  margin-top: 18px;
}
.sf-vs-side {
  position: relative;
  padding: 18px 20px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.5;
}
.sf-vs-bad {
  background: rgba(220,80,80,0.05);
  border: 1px solid rgba(220,80,80,0.20);
  color: rgba(255,255,255,0.78);
  animation: sf-vs-jitter 6s ease-in-out infinite;
}
.sf-vs-good {
  background: rgba(94,168,114,0.05);
  border: 1px solid rgba(94,168,114,0.25);
  color: rgba(255,255,255,0.85);
  box-shadow: 0 0 0 1px rgba(94,168,114,0.10) inset;
}
.sf-vs-tag {
  display: inline-block;
  font-family: var(--font-mono, monospace);
  font-size: 9.5px;
  font-weight:var(--fw-700);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.sf-vs-bad .sf-vs-tag { color: #e88e8e; }
.sf-vs-good .sf-vs-tag { color: #7fc695; }
.sf-vs-quote {
  font-style: italic;
  margin: 0 0 8px;
}
.sf-vs-note {
  font-size: 12.5px;
  color: rgba(255,255,255,0.55);
  margin: 0;
}
.sf-vs-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(212,175,55,0.65);
  font-size:var(--fs-24);
  width: 24px;
}
@keyframes sf-vs-jitter {
  0%, 100% { transform: translate3d(0, 0, 0); }
  35%      { transform: translate3d(0.8px, -0.5px, 0); }
  70%      { transform: translate3d(-0.6px, 0.6px, 0); }
}

/* -- ART: Chat shield (Module 3) ---------------------------- */
.sf-chat-art {
  position: relative;
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sf-chat-bubble {
  position: relative;
  padding: 12px 14px;
  border-radius: 14px;
  font-size:var(--fs-13);
  line-height: 1.4;
  max-width: 85%;
}
.sf-chat-bubble-from {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  align-self: flex-start;
  color: rgba(255,255,255,0.82);
}
.sf-chat-bubble-blocked {
  background: rgba(220,80,80,0.08);
  border: 1px solid rgba(220,80,80,0.30);
  align-self: flex-end;
  color: #e88e8e;
  text-decoration: line-through;
  text-decoration-color: rgba(220,80,80,0.55);
  position: relative;
}
.sf-chat-bubble-blocked::after {
  content: 'BLOCKED';
  position: absolute;
  top: -8px;
  right: 10px;
  font-family: var(--font-mono, monospace);
  font-size: 8.5px;
  font-weight:var(--fw-700);
  letter-spacing: 0.18em;
  padding: 3px 7px;
  border-radius: 4px;
  background: rgba(220,80,80,0.20);
  color: #e88e8e;
  border: 1px solid rgba(220,80,80,0.40);
  text-decoration: none;
}
.sf-chat-bubble-allowed {
  background: rgba(94,168,114,0.08);
  border: 1px solid rgba(94,168,114,0.30);
  align-self: flex-end;
  color: rgba(255,255,255,0.85);
}
.sf-chat-bubble-allowed::after {
  content: '✓';
  position: absolute;
  top: 50%;
  right: -22px;
  transform: translateY(-50%);
  font-size:var(--fs-14);
  color: #7fc695;
  filter: drop-shadow(0 0 5px rgba(94,168,114,0.7));
}

/* -- ART: Verification shield (Module 4) -------------------- */
.sf-shield-art {
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sf-shield-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(94,168,114,0.18) 0%,
    transparent 65%
  );
  animation: sf-vault-breathe 4s ease-in-out infinite;
}
.sf-shield-icon {
  position: relative;
  width: 96px;
  height: 96px;
  color: rgba(127,198,149,0.95);
  filter: drop-shadow(0 0 12px rgba(94,168,114,0.50));
  z-index: 2;
}
.sf-shield-tick {
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(94,168,114,0.30);
  border-radius: 50%;
  animation: sf-vault-rotate 32s linear infinite reverse;
}

/* -- ART: Dispute timeline (Module 5) ----------------------- */
.sf-timeline {
  position: relative;
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sf-timeline-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
}
.sf-timeline-active {
  border-color: rgba(212,175,55,0.30);
  background: rgba(212,175,55,0.04);
}
.sf-timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.20);
  flex-shrink: 0;
}
.sf-timeline-active .sf-timeline-dot {
  background: var(--gold, #D9A625);
  box-shadow: 0 0 10px rgba(212,175,55,0.7);
  animation: sf-pulse 2.4s ease-in-out infinite;
}
.sf-timeline-label {
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}
.sf-timeline-active .sf-timeline-label { color: var(--ink, #ECEFF2); font-weight:var(--fw-600); }
.sf-timeline-when {
  margin-left: auto;
  font-family: var(--font-mono, monospace);
  font-size:var(--fs-10);
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.08em;
}

/* -- "What we won't do" block ------------------------------- */
.sf-wont {
  position: relative;
  margin: clamp(40px, 5vw, 72px) 0 0;
  padding: clamp(28px, 4vw, 48px);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.20);
  isolation: isolate;
}
.sf-wont-head {
  text-align: center;
  margin-bottom: 24px;
}
.sf-wont-eyebrow {
  display: inline-block;
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  font-weight:var(--fw-700);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(220,80,80,0.85);
  margin-bottom: 12px;
}
.sf-wont-title {
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight:var(--fw-700);
  letter-spacing: -0.010em;
  text-transform: uppercase;
  line-height: 1.10;
  margin: 0;
}
.sf-wont-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.sf-wont-grid li {
  position: relative;
  padding: 14px 16px 14px 44px;
  border-radius: 12px;
  background: rgba(220,80,80,0.04);
  border: 1px solid rgba(220,80,80,0.16);
  font-size:var(--fs-14);
  line-height: 1.50;
  color: rgba(255,255,255,0.85);
}
.sf-wont-grid li::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(220,80,80,0.15);
  border: 1.5px solid rgba(220,80,80,0.55);
}
.sf-wont-grid li::after {
  content: '';
  position: absolute;
  left: 19px;
  top: 50%;
  width: 8px;
  height: 1.5px;
  background: #e88e8e;
  transform: translateY(-50%);
}

/* -- Bottom CTA --------------------------------------------- */
.sf-cta {
  margin: clamp(48px, 6vw, 80px) auto 0;
  text-align: center;
  max-width: 580px;
}
.sf-cta-title {
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight:var(--fw-700);
  letter-spacing: -0.008em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.sf-cta-lede {
  color: var(--ink-muted, #A6AFB9);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0 0 22px;
}
.sf-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* -- Responsive --------------------------------------------- */
@media (max-width: 860px) {
  .sf-module {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 28px 22px;
  }
  .sf-module-art { min-height: 180px; }
  .sf-module.sf-reverse .sf-module-art { order: 0; }
  .sf-vs {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .sf-vs-arrow {
    transform: rotate(90deg);
    height: 28px;
    width: auto;
  }
  .sf-wont-grid { grid-template-columns: 1fr; }
}

/* -- Reduced motion ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sf-hero-eyebrow,
  .sf-hero-title,
  .sf-hero-lede,
  .sf-hero-modules { animation: none !important; opacity: 1 !important; transform: none !important; }
  .sf-vault::before,
  .sf-vault-ring-2,
  .sf-courier-line::before,
  .sf-shield-glow,
  .sf-shield-tick,
  .sf-timeline-active .sf-timeline-dot,
  .sf-vault-dot,
  .sf-vs-bad { animation: none !important; }
  .sf-hero-module-link,
  .sf-hero-module-link:hover { transform: none !important; transition: none !important; }
}

/* ============================================================
   AUDIT 2026-05-10 — mobile + tablet rendering fixes.
   Applied after the safety.css cinematic pass; intentionally kept
   in a single block so a future review can revert wholesale if a
   redesign supersedes them.
   ============================================================ */

/* Module 02 "CORE DIFFERENTIATOR" — was an inline color style on a
   <span> sibling of the module number. Wraps cleanly at 360 px now
   and obeys the project no-inline-styles convention. */
.sf-module-num-em {
  display: inline;
  color: rgba(220, 80, 80, 0.85);
  white-space: nowrap;
}
@media (max-width: 480px) {
  .sf-module-num-em {
    display: inline-block;
    margin-top: 2px;
  }
  /* Also break the leading "02 · " on its own line so the long
     differentiator label isn't cramped on a 360 px viewport. */
  .sf-module-num { line-height: 1.5; }
}

/* Tighter padding on small phones — page + module stacked on 375 px
   left only ~257 px usable for body text; this restores ~310 px. */
@media (max-width: 480px) {
  .sf-page { padding-left: 16px; padding-right: 16px; }
  .sf-module { padding: 22px 16px; }
}

/* Hero pill nav: bump to 44 px tap target below 480 px. */
@media (max-width: 480px) {
  .sf-hero-module-link {
    padding: 12px 16px;
    min-height: 44px;
    font-size: 11.5px;
    line-height: 1.4;
  }
  .sf-hero-modules { gap: 6px; }
}

/* Module 03 chat bubble: ✓ glyph was at right: -22px and clipped
   against rounded card edges on small viewports. Anchor it inside
   the bubble so it can't escape, with a reserved padding-right. */
@media (max-width: 480px) {
  .sf-chat-bubble-allowed { padding-right: 36px !important; }
  .sf-chat-bubble-allowed::after {
    right: 10px !important;
    top: 50%;
    transform: translateY(-50%);
  }
}

/* Module 02 .sf-vs jitter on the BAD card reads as a layout glitch
   on phones where every pixel of motion is more visible. Disable. */
@media (max-width: 720px) {
  .sf-vs-bad { animation: none !important; }
}

/* Module 02 rotated → arrow collides with stacked cards on mobile.
   Bigger, with breathing room above and below. */
@media (max-width: 860px) {
  .sf-vs-arrow {
    font-size:var(--fs-28) !important;
    line-height: 1 !important;
    margin: -2px 0 !important;
  }
}

/* Module 01 vault: "FUNDS LOCKED" pill collides with the "01" line
   on stacked mobile. Smaller vault, tighter anchor. */
@media (max-width: 480px) {
  .sf-vault { width: 160px; height: 160px; }
  .sf-vault-status { bottom: -6px; padding: 5px 12px; font-size:var(--fs-10); }
  .sf-module-art { min-height: 168px; }
}

/* Module 02 courier 3-node visualization overflows on 320-360 px.
   Shrink nodes + gap; lift labels back into the row so they don't
   collide with each other below the icons. */
@media (max-width: 480px) {
  .sf-courier-art { gap: 8px; max-width: 100%; }
  .sf-courier-node { width: 56px; height: 56px; }
  .sf-courier-node svg { width: 26px; height: 26px; }
  .sf-courier-node-label { font-size:var(--fs-10); bottom: -18px; }
}

/* ============================================================
   PER-TAB: hero pill switcher (Buyers / Sellers / Report)
   Tabs sit above the eyebrow on /safety/buying, /safety/selling,
   /safety/report so the user always knows which view they're on
   and can flip between them without going back to /safety.
   ============================================================ */
.sf-hero-tabs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  margin: 0 0 22px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(201, 162, 39, 0.18);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.sf-hero-tab {
  display: inline-block;
  padding: 8px 16px;
  font-size: 12.5px;
  font-weight:var(--fw-600);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  border-radius: 999px;
  transition: color 200ms ease, background 200ms ease, transform 200ms ease;
  min-height: 36px;
  line-height: 1.6;
}
.sf-hero-tab:hover {
  color: #fff;
  background: rgba(201, 162, 39, 0.08);
}
.sf-hero-tab.is-active {
  color: #14181D;
  background: linear-gradient(135deg, #E0BB45 0%, #C9A227 50%, #A88512 100%);
  box-shadow: 0 4px 14px rgba(201, 162, 39, 0.28),
              inset 0 1px 0 rgba(255, 255, 255, 0.4);
  cursor: default;
}
.sf-hero-tab.is-active:hover {
  background: linear-gradient(135deg, #E0BB45 0%, #C9A227 50%, #A88512 100%);
  transform: none;
}
@media (max-width: 480px) {
  .sf-hero-tabs {
    width: 100%;
    justify-content: center;
    gap: 4px;
    padding: 4px;
  }
  .sf-hero-tab {
    flex: 1;
    text-align: center;
    padding: 10px 8px;
    font-size: 11.5px;
    min-height: 44px;
    line-height: 1.4;
  }
}

/* ============================================================
   /safety/report — focused report block, replaces the modules
   ============================================================ */
.sf-report-block { margin: 24px 0 64px; }
.sf-page.is-tab-report .sf-page-inner > .sf-hero { padding-bottom: 8px; }

.sf-report-card {
  position: relative;
  padding: clamp(28px, 4vw, 48px);
  border-radius: 24px;
  background:
    radial-gradient(1200px 400px at 100% -10%, rgba(201, 162, 39, 0.08), transparent 60%),
    rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  overflow: hidden;
}
.sf-report-eyebrow {
  display: inline-block;
  font-size:var(--fs-11);
  letter-spacing: 0.22em;
  font-weight:var(--fw-700);
  color: #E0BB45;
  margin: 0 0 14px;
}
.sf-report-title {
  font-family: Oswald, 'Inter', system-ui, sans-serif;
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight:var(--fw-600);
  line-height: 1.08;
  color: #fff;
  margin: 0 0 14px;
}
.sf-report-lede {
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.6;
  margin: 0 0 28px;
  max-width: 64ch;
}
.sf-report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.sf-report-tile {
  display: block;
  padding: 22px 22px 18px;
  border-radius:var(--r-5);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none;
  color: inherit;
  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 240ms ease,
              background 240ms ease,
              box-shadow 240ms ease;
}
.sf-report-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(201, 162, 39, 0.4);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
}
.sf-report-tile-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
}
.sf-report-tile-head svg {
  width: 22px;
  height: 22px;
  color: #C9A227;
  flex: 0 0 auto;
}
.sf-report-tile-head h3 {
  font-family: Oswald, 'Inter', system-ui, sans-serif;
  font-size: 17px;
  font-weight:var(--fw-600);
  letter-spacing: 0.01em;
  color: #fff;
  margin: 0;
}
.sf-report-tile p {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 14px;
}
.sf-report-tile-cta {
  display: inline-block;
  font-size: 12.5px;
  font-weight:var(--fw-600);
  color: #E0BB45;
  letter-spacing: 0.02em;
}
.sf-report-fineprint {
  margin: 28px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.52);
}
@media (max-width: 480px) {
  .sf-report-card {
    padding: 24px 18px;
    border-radius: 18px;
  }
  .sf-report-tile { padding: 18px 18px 14px; }
}