/* Homepage "How It Works" (index.html #how-it-works): three steps on a rail with
   numbered nodes, each card with its next action, and a strip of what's included.
   Desktop: the rail runs across above the cards; phones: down the left side. */
.hiw-track { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; padding-left: 56px; }
.hiw-step { position: relative; display: flex; flex-direction: column; }
.hiw-node {
  position: absolute; left: -56px; top: 18px; width: 40px; height: 40px; border-radius: 50%; z-index: 2;
  display: grid; place-items: center; font: 800 1rem/1 var(--font-head, inherit); color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 0 6px var(--bg-elevated), 0 0 22px -2px color-mix(in srgb, var(--accent-2) 70%, transparent);
}
/* The rail: a soft line with a light that travels along it. */
.hiw-track::before, .hiw-track::after { content: ""; position: absolute; pointer-events: none; }
.hiw-track::before {
  left: 19px; top: 38px; bottom: 38px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  opacity: 0.35;
}
.hiw-track::after {
  left: 17px; top: 38px; width: 6px; height: 60px; border-radius: 6px; opacity: 0;
  background: linear-gradient(180deg, transparent, var(--accent-2), transparent);
  filter: drop-shadow(0 0 6px var(--accent-2));
}
.hiw-card {
  flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 24px 22px 22px; border-radius: var(--radius-md, 16px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--accent) 8%), var(--surface));
  border: 1px solid var(--border); position: relative; overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.hiw-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); opacity: 0.85;
}
.hiw-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent-2) 55%, var(--border)); box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--accent-2) 60%, transparent); }
.hiw-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.hiw-icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: var(--accent-2);
  background: color-mix(in srgb, var(--accent-2) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent-2) 35%, transparent);
}
.hiw-icon svg { width: 26px; height: 26px; }
.hiw-badge {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-2);
  padding: 5px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent-2) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-2) 28%, transparent);
}
.hiw-card h3 { font-size: 1.3rem; margin: 4px 0 0; }
.hiw-card p { margin: 0; color: var(--text-muted); line-height: 1.6; }
.hiw-cta { align-self: flex-start; margin-top: auto; }
.hiw-link {
  align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-weight: 700; color: var(--text); padding: 9px 14px; border-radius: 10px;
  background: var(--bg-elevated); border: 1px dashed color-mix(in srgb, var(--accent-2) 60%, var(--border));
}
.hiw-link svg { width: 18px; height: 18px; color: var(--accent-2); flex-shrink: 0; }
.hiw-link:hover { border-style: solid; color: var(--accent-2); }
.hiw-when {
  display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--text);
  padding: 10px 14px; border-radius: 10px; background: var(--bg-elevated); border: 1px solid var(--border);
}
.hiw-dot { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; flex-shrink: 0; box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
.hiw-more { align-self: flex-start; margin-top: auto; font-weight: 700; color: var(--accent-2); text-decoration: none; }
.hiw-more:hover { text-decoration: underline; }
.hiw-perks {
  list-style: none; margin: 34px auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px;
}
.hiw-perks li {
  display: inline-flex; align-items: center; gap: 8px; font-size: 0.92rem; font-weight: 600; color: var(--text);
  padding: 9px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border);
}
.hiw-perks svg { width: 16px; height: 16px; color: var(--success, #34d399); flex-shrink: 0; }

/* Computers and tablets: rail across the top, nodes centred over each card. */
@media (min-width: 860px) {
  .hiw-track { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding-left: 0; padding-top: 64px; }
  .hiw-node { left: 50%; top: -64px; transform: translateX(-50%); width: 44px; height: 44px; } /* on the rail, above its card */
  .hiw-track::before { left: calc(100% / 6); right: calc(100% / 6); top: 21px; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
  .hiw-track::after { left: calc(100% / 6); top: 19px; width: 90px; height: 6px; background: linear-gradient(90deg, transparent, var(--accent-2), transparent); }
  .hiw-card { padding: 28px 26px 26px; }
}

@media (prefers-reduced-motion: no-preference) {
  .hiw-track::after { animation: hiwTravelY 3.6s ease-in-out infinite; }
  .hiw-dot { animation: hiwLive 1.8s ease-out infinite; }
  .hiw-node { animation: hiwNode 3.6s ease-out infinite; }
  .hiw-step:nth-child(2) .hiw-node { animation-delay: 1.2s; }
  .hiw-step:nth-child(3) .hiw-node { animation-delay: 2.4s; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 860px) {
  .hiw-track::after { animation-name: hiwTravelX; }
}
@keyframes hiwTravelY { 0% { opacity: 0; transform: translateY(0); } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(var(--hiw-h, 520px) - 60px)); } }
@keyframes hiwTravelX { 0% { opacity: 0; left: calc(100% / 6); } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; left: calc(100% * 5 / 6 - 90px); } }
@keyframes hiwNode { 0%, 100% { box-shadow: 0 0 0 6px var(--bg-elevated), 0 0 22px -2px color-mix(in srgb, var(--accent-2) 70%, transparent); } 12% { box-shadow: 0 0 0 6px var(--bg-elevated), 0 0 0 12px color-mix(in srgb, var(--accent-2) 30%, transparent), 0 0 30px 2px var(--accent-2); } 30% { box-shadow: 0 0 0 6px var(--bg-elevated), 0 0 22px -2px color-mix(in srgb, var(--accent-2) 70%, transparent); } }
@keyframes hiwLive { 70% { box-shadow: 0 0 0 9px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }