/* ========== Shipping Policy (pages/shipping.css) ========== */
:root{
  --sky-200:#bae6fd; --sky-300:#7dd3fc; --sky-400:#38bdf8;
  --emerald-200:#a7f3d0; --emerald-300:#6ee7b7; --emerald-400:#34d399;
  --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1; --slate-700:#334155; --slate-900:#0f172a;
}

.banner{
  position:relative;border-radius:1.5rem;overflow:hidden;border:2px solid var(--slate-200);
  box-shadow:0 14px 40px rgba(15,23,42,.10);
}
.banner .grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,6,23,0),rgba(2,6,23,.42))}
.banner .ring{position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);pointer-events:none}

.card{background:#fff;border:1px solid var(--slate-200);border-radius:1.25rem;transition:border-color .25s, box-shadow .25s, transform .18s}
.card:hover{border-color:var(--emerald-300);box-shadow:0 18px 40px rgba(15,23,42,.1);transform:translateY(-2px)}

.badge{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--slate-200);border-radius:999px;padding:.45rem .8rem;background:#fff;font-weight:800}

.timeline{position:relative}
.step{position:relative;padding-right:3.4rem}
.step::before{
  content: attr(data-step);
  position:absolute;right:.7rem;top:.45rem;width:2.25rem;height:2.25rem;display:grid;place-items:center;
  border-radius:999px;border:2px solid var(--slate-200);background:#fff;font-weight:900;color:var(--slate-700)
}

.table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--slate-200);border-radius:14px;overflow:hidden}
.table thead th{background:var(--slate-100);font-weight:800}
.table th,.table td{padding:.9rem 1rem;border-bottom:1px solid var(--slate-200)}
.table tr:last-child td{border-bottom:0}

.kit{display:flex;gap:.6rem;align-items:center;border:1px dashed var(--slate-200);border-radius:12px;padding:.6rem .8rem;background:var(--slate-50)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:.7rem 1.1rem;border-radius:14px;
  border:2px solid transparent;font-weight:700;transition:background-color .2s,border-color .2s,box-shadow .2s,transform .08s
}
.btn:active{transform:scale(.985)}
.btn-outline{background:#fff;color:var(--slate-900);border-color:var(--slate-200)}
.btn-outline:hover{border-color:var(--slate-300);background:var(--slate-50);box-shadow:0 10px 22px rgba(15,23,42,.08)}
.btn-outline.sky{border-color:color-mix(in oklab, var(--sky-300) 50%, transparent)}
.btn-outline.sky:hover{border-color:var(--sky-400)}
.btn-outline.emerald{border-color:color-mix(in oklab, var(--emerald-300) 50%, transparent)}
.btn-outline.emerald:hover{border-color:var(--emerald-400)}

@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.reveal{animation:fadeUp .45s ease both}