/* survivors-review.css */
/* Design tokens */
:root{
  --bg: linear-gradient(180deg,#fffaf3 0%, #f9f5ff 50%, #e8fbff 100%);
  --card: #ffffff;
  --ink: #1d1d1f;
  --muted:#5c5f66;
  --brand:#c01a1a;          /* Firebusters red as accent */
  --brand-2:#ff7a00;        /* vibrant orange */
  --brand-3:#7c3aed;        /* violet */
  --brand-4:#00b7ff;        /* sky blue */
  --ring: rgba(0,0,0,.08);
  --radius:16px;
  --shadow: 0 12px 30px rgba(0,0,0,.08);
}

/* Optional theme toggle */
[data-theme="calm"]{
  --bg: linear-gradient(180deg,#f6fff6 0%, #eef7ff 50%, #fff9f2 100%);
  --brand:#1f7a8c;
  --brand-2:#ff9900;
  --brand-3:#2563eb;
  --brand-4:#10b981;
}

*{box-sizing:border-box}
.sr-visually-hidden{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden}

.sr-app{
  font:16px/1.7 system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:var(--bg);
  padding:24px 0 80px;
}

.sr-progress{
  position:fixed; top:0; left:0; height:4px; width:0;
  background: linear-gradient(90deg, var(--brand), var(--brand-2), var(--brand-3), var(--brand-4));
  box-shadow:0 2px 8px rgba(0,0,0,.15);
  z-index:9999;
}

.sr-container{max-width:980px;margin:0 auto;padding:0 18px}

.sr-hero{
  max-width:980px;margin:0 auto 24px; padding:24px 18px 8px;
}
.sr-hero-badge{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  color:#fff; font-weight:700; font-size:12px; letter-spacing:.4px; text-transform:uppercase;
  box-shadow:var(--shadow);
}
.sr-hero h1{
  margin:16px 0 8px; font-size:34px; line-height:1.15; letter-spacing:-.3px;
  background:linear-gradient(90deg,var(--brand),var(--brand-3)); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sr-hero-sub{font-size:18px;color:var(--muted);margin:4px 0 16px}

.sr-cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0 8px}
.sr-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 14px;border-radius:12px;border:1px solid transparent;cursor:pointer;
  font-weight:700; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease, background .2s ease, color .2s ease;
}
.sr-btn:focus{outline:2px solid transparent; box-shadow:0 0 0 4px var(--ring)}
.sr-btn:hover{transform:translateY(-1px)}
.sr-btn--primary{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff}
.sr-btn--ghost{background:#fff;color:var(--brand);border-color:rgba(0,0,0,.08)}
.sr-btn--ghost:hover{background:#fff}

.sr-meta{display:flex;gap:18px;flex-wrap:wrap;list-style:none;padding:0;margin:12px 0 0;color:var(--muted);font-size:14px}
.sr-meta li span{color:var(--ink);font-weight:600;margin-right:6px}

.sr-toc{
  max-width:980px;margin:8px auto 20px;padding:16px 18px;background:rgba(255,255,255,.75);
  border:1px solid rgba(0,0,0,.06); border-radius:var(--radius); box-shadow:var(--shadow);
  backdrop-filter:saturate(130%) blur(6px);
}
.sr-toc h2{font-size:20px;margin:0 0 8px}
.sr-toc ol{margin:0 0 0 18px;padding:0;columns:2;gap:24px}
.sr-toc a{color:var(--brand);text-decoration:none}
.sr-toc a:hover{text-decoration:underline}

.sr-section{background:var(--card);padding:22px;border-radius:var(--radius);box-shadow:var(--shadow);margin:18px auto}
.sr-section-title{font-size:24px;margin:0 0 10px}
.sr-lede{font-size:18px}
.sr-note{
  margin:14px 0 0; padding:12px 14px; border-left:4px solid var(--brand-3);
  background:linear-gradient(180deg,#ffffff 0%, #f6f3ff 100%); border-radius:10px;
}

.sr-media{margin:14px 0; border-radius:14px; overflow:hidden; box-shadow:var(--shadow); background:#0001}
.sr-media img{display:block;width:100%;height:auto}
.sr-media figcaption{font-size:14px;color:var(--muted);padding:10px 12px;background:#fff}

.sr-quote{
  margin:14px 0; padding:16px 18px; border-radius:14px; font-size:18px; font-weight:600;
  background:linear-gradient(90deg,#fff,#fff6), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width=\"160\" height=\"160\" viewBox=\"0 0 160 160\"><text x=\"10\" y=\"90\" font-size=\"120\" fill=\"%23f2d2ff\">“</text></svg>') no-repeat 12px 8px;
}

.sr-list{padding-left:18px;margin:10px 0}
.sr-list--ticks li{margin:6px 0;list-style: none;position:relative;padding-left:24px}
.sr-list--ticks li::before{
  content:""; position:absolute; left:0; top:.45em; width:14px; height:14px; border-radius:50%;
  background:conic-gradient(var(--brand),var(--brand-2),var(--brand-3),var(--brand-4));
  box-shadow:0 0 0 2px #fff inset, 0 0 0 1px rgba(0,0,0,.06);
}

.sr-accordion{margin-top:8px}
.sr-acc-item{border:1px solid rgba(0,0,0,.08);border-radius:12px;background:#fff;box-shadow:var(--shadow);margin:10px 0}
.sr-acc-btn{
  width:100%;text-align:left;padding:14px 16px;border:0;background:#fff;border-radius:12px;cursor:pointer;font-weight:700;
}
.sr-acc-btn:hover{background:#fff8f3}
.sr-acc-btn[aria-expanded="true"]{background:#fff1ed}
.sr-acc-panel{display:none;padding:0 16px 14px;color:var(--muted)}
.sr-acc-panel p{margin:12px 0 0}

.sr-steps{margin:0 0 8px 18px}
.sr-steps li{margin:8px 0}

.sr-closer{
  margin-top:12px;padding:16px;border-radius:12px;background:linear-gradient(90deg,#fff,#fdf7ff);border:1px solid rgba(0,0,0,.06)
}

/* FAQ visibility fix: ensure text isn't white on white */
.sr-acc-btn{
  color: var(--ink) !important;
  background: #fff !important;
}
.sr-acc-btn:hover,
.sr-acc-btn:focus,
.sr-acc-btn[aria-expanded="true"]{
  color: var(--ink) !important;
  background: #fff1ed !important; /* keep the subtle highlight */
}
/* In case the theme forces button children to white */
.sr-acc-btn * { color: var(--ink) !important; }


/* Responsive */
@media (max-width: 720px){
  .sr-toc ol{columns:1}
  .sr-hero h1{font-size:28px}
}