/* ============================================================
   Assay Amino — Shipping page
   Built from the Spectrum tokens only: no new colours, no new
   type. The one signature moment is the transit rail, which
   runs the brand gradient horizontally through four states.
   ============================================================ */

/* ---------- transit rail ---------- */
.ship-rail { position:relative; margin-top:8px; }

/* the track: a hairline that the spectrum gradient overlays */
.ship-rail__track {
  position:absolute; left:0; right:0; top:19px; height:2px;
  background:var(--line); border-radius:2px;
}
.ship-rail__fill {
  position:absolute; left:0; right:0; top:19px; height:2px; border-radius:2px;
  background:var(--spectrum);
  /* drawn once on load, then held - a permanently animating rail on a policy
     page is noise, not craft */
  transform-origin:left center; animation:ship-draw 1.1s var(--ease-std) both;
}
@keyframes ship-draw { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@media (prefers-reduced-motion:reduce){ .ship-rail__fill { animation:none; } }

.ship-rail__steps {
  position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
.ship-step__dot {
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--line);
  box-shadow:0 0 0 5px var(--bg);       /* punches a hole in the rail */
  position:relative; z-index:1;
}
.ship-step__dot svg { width:18px; height:18px; color:var(--accent); }
.ship-step:first-child .ship-step__dot { border-color:var(--brand-sky); }
.ship-step:last-child .ship-step__dot  { border-color:var(--accent); }
.ship-step h3 {
  font-size:var(--step-0); margin-top:16px; letter-spacing:-.02em;
}
.ship-step p { margin-top:6px; font-size:var(--step--1); color:var(--ink-2); line-height:1.6; }
.ship-step__when {
  display:inline-block; margin-top:10px; font-family:var(--font-mono);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}

@media (max-width:820px){
  .ship-rail__track,.ship-rail__fill { display:none; }
  .ship-rail__steps { grid-template-columns:1fr; gap:26px; }
  .ship-step { display:grid; grid-template-columns:40px 1fr; gap:16px; align-items:start; }
  .ship-step__dot { box-shadow:none; }
  .ship-step h3 { margin-top:2px; }
}

/* ---------- fact cards ---------- */
.ship-facts { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:900px){ .ship-facts { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .ship-facts { grid-template-columns:1fr; } }
.ship-fact {
  background:var(--surface); border-radius:var(--r-lg);
  box-shadow:var(--sh-border); padding:20px;
}
.ship-fact__k {
  font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-3);
}
.ship-fact__v {
  font-family:var(--font-display); font-weight:600; letter-spacing:-.02em;
  font-size:var(--step-2); margin-top:8px; color:var(--ink);
}
.ship-fact p { margin-top:6px; font-size:var(--step--1); color:var(--ink-2); line-height:1.6; }

/* ---------- what ships with every order ---------- */
.ship-incl { list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.ship-incl li {
  display:grid; grid-template-columns:22px 1fr; gap:12px; align-items:start;
  padding:14px 0; border-bottom:1px solid var(--line-2);
}
.ship-incl li:last-child { border-bottom:0; }
.ship-incl svg { width:16px; height:16px; margin-top:3px; color:var(--ok); }
.ship-incl b { display:block; font-weight:600; }
.ship-incl span { color:var(--ink-2); font-size:var(--step--1); line-height:1.6; }

/* ---------- storage panel ---------- */
.ship-store {
  background:var(--surface); border-radius:var(--r-xl);
  box-shadow:var(--sh-border); overflow:hidden;
}
.ship-store__row {
  display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center;
  padding:16px 20px; border-bottom:1px solid var(--line-2);
}
.ship-store__row:last-child { border-bottom:0; }
.ship-store__row b { font-weight:600; }
.ship-store__row small { display:block; color:var(--ink-3); font-size:var(--step--1); margin-top:3px; }
.ship-store__val {
  font-family:var(--font-mono); font-size:var(--step--1); color:var(--accent);
  background:var(--accent-tint); border:1px solid var(--accent-tint-2);
  padding:5px 11px; border-radius:999px; white-space:nowrap;
}

/* ---------- claims steps ---------- */
.ship-claim { counter-reset:cl; display:grid; gap:14px; }
.ship-claim li {
  list-style:none; display:grid; grid-template-columns:30px 1fr; gap:14px; align-items:start;
}
.ship-claim li::before {
  counter-increment:cl; content:counter(cl);
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:var(--ink); color:#fff; font-size:13px; font-weight:600;
}
.ship-claim p { color:var(--ink-2); line-height:1.65; }