/* ============================================================
   Follow & Win — campaign landing page
   Prefix: fw-. Scoped to .fw-page, light + dark aware.
   ============================================================ */
.fw-page{
  --fw-blue:#1b4dd8;
  --fw-blue-dark:#1339a6;
  --fw-green:#12a150;
  --fw-amber:#f7b500;
  --fw-ink:#111827;
  --fw-ink2:#374151;
  --fw-muted:#6b7280;
  --fw-line:#e5e7eb;
  --fw-surface:#ffffff;
  --fw-surface2:#f5f6f8;
  --fw-radius:14px;
  padding:0 0 56px;
  background:var(--fw-surface);
  color:var(--fw-ink);
}
body[theme="dark"] .fw-page{
  --fw-ink:#e8edf2; --fw-ink2:#c3ccd5; --fw-muted:#94a3b1;
  --fw-line:#26313c; --fw-surface:#111820; --fw-surface2:#0d141a;
}

/* ---------- hero ---------- */
.fw-hero{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; align-items:center;
  margin:28px 0 32px; padding:32px; border-radius:var(--fw-radius);
  background:linear-gradient(135deg, rgba(27,77,216,.12), rgba(18,161,80,.12)); }
.fw-badge{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:99px;
  background:var(--fw-surface); color:var(--fw-blue); font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.fw-hero-copy h1{ margin:14px 0 0; font-size:clamp(26px,3.4vw,42px); font-weight:800; line-height:1.1; letter-spacing:-.02em; }
.fw-lede{ margin:12px 0 0; max-width:52ch; color:var(--fw-muted); font-size:15px; line-height:1.6; }

.fw-countdown{ margin-top:22px; }
.fw-countdown-label{ display:block; margin-bottom:8px; color:var(--fw-muted); font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.fw-countdown-clock{ display:flex; gap:10px; }
.fw-countdown-clock > div{ display:flex; flex-direction:column; align-items:center; gap:2px; min-width:62px; padding:10px 6px;
  border-radius:10px; background:var(--fw-surface); box-shadow:0 8px 20px -14px rgba(17,24,39,.5); }
.fw-countdown-clock .countdown-count{ color:var(--fw-blue); font-size:20px; font-weight:800; line-height:1; }
.fw-countdown-clock .countdown-text{ color:var(--fw-muted); font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }

.fw-prizes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:14px; }
.fw-prize{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 10px;
  border:1px solid var(--fw-line); border-radius:var(--fw-radius); background:var(--fw-surface); }
.fw-prize-thumb{ display:grid; place-items:center; width:100%; aspect-ratio:1/1; overflow:hidden; border-radius:10px; background:var(--fw-surface2); }
.fw-prize-thumb img{ width:100%; height:100%; object-fit:contain; }
.fw-prize-thumb i{ font-size:26px; color:var(--fw-amber); }
.fw-prize-name{ color:var(--fw-ink2); font-size:12.5px; font-weight:700; text-align:center; }

/* ---------- alerts ---------- */
.fw-alert{ display:flex; align-items:flex-start; gap:12px; margin-bottom:20px; padding:14px 18px;
  border-radius:var(--fw-radius); font-size:14px; }
.fw-alert i{ font-size:18px; line-height:1.3; }
.fw-alert strong{ display:block; font-weight:700; }
.fw-alert span{ color:var(--fw-muted); font-size:13px; }
.fw-alert--success{ border:1px solid rgba(18,161,80,.35); background:rgba(18,161,80,.1); color:#0d8541; }
.fw-alert--error{ border:1px solid rgba(225,29,46,.35); background:rgba(225,29,46,.08); color:#c2182a; }

/* ---------- sections ---------- */
.fw-section-title{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:0 0 18px; }
.fw-section-title span{ font-size:19px; font-weight:800; letter-spacing:-.01em; color:var(--fw-ink); }
.fw-section-title small{ color:var(--fw-muted); font-size:13px; font-weight:500; }

.fw-flow{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:24px; align-items:start; }

/* ---------- steps ---------- */
.fw-step{ display:grid; grid-template-columns:40px minmax(0,1fr); gap:14px; margin-bottom:14px; padding:18px;
  border:1px solid var(--fw-line); border-radius:var(--fw-radius); background:var(--fw-surface);
  transition:border-color .18s ease, box-shadow .18s ease; }
.fw-step.is-waiting{ border-color:var(--fw-amber); }
.fw-step.is-done{ border-color:var(--fw-green); box-shadow:0 10px 24px -18px rgba(18,161,80,.8); }
.fw-step-index{ display:grid; place-items:center; width:40px; height:40px; border-radius:99px;
  background:var(--fw-surface2); color:var(--fw-ink2); font-size:15px; font-weight:800; }
.fw-step.is-done .fw-step-index{ color:#fff; background:var(--fw-green); }

.fw-step-head{ display:flex; align-items:flex-start; gap:12px; }
.fw-step-head i{ font-size:22px; line-height:1.2; }
.fw-step-head h3{ margin:0; font-size:15.5px; font-weight:700; }
.fw-step-head p{ margin:4px 0 0; color:var(--fw-muted); font-size:13px; }

.fw-step-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:14px; }
.fw-step-hint{ margin:8px 0 0; min-height:18px; color:var(--fw-muted); font-size:12.5px; }

.fw-input{ height:42px; padding:0 14px; border:1px solid var(--fw-line);
  border-radius:10px; background:var(--fw-surface); color:var(--fw-ink); font-size:14px; }
.fw-step-actions .fw-input{ min-width:200px; flex:1 1 200px; }
.fw-input:focus{ outline:0; border-color:var(--fw-blue); }
.fw-input:disabled{ background:var(--fw-surface2); cursor:not-allowed; }

.fw-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:0 18px;
  border:1px solid transparent; border-radius:10px; font-size:14px; font-weight:700; text-decoration:none;
  transition:background .16s ease, color .16s ease, opacity .16s ease; }
.fw-btn--primary{ color:#fff; background:var(--fw-blue); }
.fw-btn--primary:hover{ color:#fff; background:var(--fw-blue-dark); }
.fw-btn--done{ color:var(--fw-green); border-color:var(--fw-green); background:transparent; }
.fw-btn--done:disabled{ opacity:.55; cursor:not-allowed; }
.fw-step.is-done .fw-btn--done{ color:#fff; background:var(--fw-green); opacity:1; }

/* ---------- entry ---------- */
.fw-entry{ position:sticky; top:90px; padding:22px; border:1px solid var(--fw-line); border-radius:var(--fw-radius); background:var(--fw-surface2); }
.fw-entry-grid{ display:grid; gap:14px; }
.fw-entry-grid label{ display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:700; color:var(--fw-ink2); }
.fw-entry-grid label small{ color:var(--fw-muted); font-weight:500; }
.fw-entry-grid .fw-input{ width:100%; }

.fw-entry-foot{ display:flex; flex-direction:column; gap:10px; margin-top:18px; }
.fw-entry-progress{ margin:0; color:var(--fw-muted); font-size:12.5px; font-weight:700; }
.fw-entry-progress.is-ready{ color:var(--fw-green); }
.fw-btn--submit{ width:100%; min-height:48px; color:#fff; background:var(--fw-green); font-size:15px; }
.fw-btn--submit:hover:not(:disabled){ color:#fff; background:#0d8541; }
.fw-btn--submit:disabled{ opacity:.5; cursor:not-allowed; }

.fw-terms{ margin-top:16px; color:var(--fw-muted); font-size:12.5px; }
.fw-terms summary{ cursor:pointer; font-weight:700; color:var(--fw-ink2); }
.fw-terms p{ margin:8px 0 0; line-height:1.6; }

/* ---------- winners ---------- */
.fw-winners{ margin-top:38px; }
.fw-winner-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; }
.fw-winner{ display:flex; flex-direction:column; gap:4px; padding:16px; border:1px solid var(--fw-line);
  border-radius:var(--fw-radius); background:var(--fw-surface); }
.fw-winner-date{ color:var(--fw-muted); font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.fw-winner strong{ font-size:15px; font-weight:800; }
.fw-winner-prize{ color:var(--fw-blue); font-size:13px; font-weight:700; }

/* ---------- empty ---------- */
.fw-empty{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:80px 20px; text-align:center; }
.fw-empty i{ font-size:44px; color:var(--fw-amber); }
.fw-empty h1{ margin:0; font-size:24px; font-weight:800; }
.fw-empty p{ margin:0 0 12px; color:var(--fw-muted); }

@media (max-width:991px){
  .fw-hero{ grid-template-columns:minmax(0,1fr); padding:24px; }
  .fw-flow{ grid-template-columns:minmax(0,1fr); }
  .fw-entry{ position:static; }
}
@media (max-width:575px){
  .fw-step{ grid-template-columns:32px minmax(0,1fr); padding:14px; }
  .fw-step-index{ width:32px; height:32px; font-size:13px; }
  .fw-countdown-clock > div{ min-width:54px; }
  .fw-btn, .fw-input{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  .fw-step, .fw-btn{ transition:none; }
}

/* ---------- prize groups ---------- */
.fw-prize-groups{ display:flex; flex-direction:column; gap:18px; }
.fw-prize-group-title{ margin:0 0 10px; color:var(--fw-ink2); font-size:13px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; }
.fw-prize{ position:relative; }
.fw-prize-rank{ position:absolute; top:8px; inset-inline-start:8px; padding:2px 8px; border-radius:99px;
  background:var(--fw-amber); color:#3b2a00; font-size:10px; font-weight:800; letter-spacing:.03em; }