/* Section 3 · How it works — timeline rail. Everything scoped to .how. */
.how {
  --bg:#F5F7FA; --surface:#FFFFFF; --ink:#0E151E; --ink-2:#2B3442; --muted:#5B6472; --line:#DCE1E8;
  --gold:#F2B36B; --gold-soft:#FBEBD5; --amber:#9A5410; --on-gold:#17110A; --green:#22B573;
  --ease:cubic-bezier(.2,.7,.2,1); --soft:cubic-bezier(.45,0,.2,1);
  background:var(--bg); color:var(--ink); font:400 17px/1.6 var(--sans); border-top:1px solid #E3E8EF;
}
.how :focus-visible { outline-color:var(--amber); }
.how .sec { padding:120px clamp(16px,5vw,80px); max-width:1440px; margin:0 auto; }
.how .head { display:flex; flex-direction:column; align-items:center; text-align:center; gap:0; margin-bottom:64px; }
.how .head .h2 { margin-inline:auto; } .how .head .intro { margin-inline:auto; }
.how .eyebrow { font:500 12px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--amber); margin:0 0 20px; }
.how .h2 { font:300 clamp(34px,4vw,60px)/1.02 var(--sans); font-stretch:88%; letter-spacing:-.03em; margin:0; max-width:24ch; text-wrap:balance; }
.how .h2 b { font-weight:600; font-stretch:100%; }
.how .intro { font-size:clamp(17px,1.3vw,19px); color:var(--ink-2); max-width:52ch; margin:20px 0 0; }

/* rail + progress line (positions are measured by how-it-works.js so it fits any layout) */
.how .rail-wrap { position:relative; }
.how .rail { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; position:relative; }
.how .track, .how .line { position:absolute; z-index:0; border-radius:2px; pointer-events:none; }
.how .track { background:var(--line); }
.how .line { background:linear-gradient(90deg, var(--gold), var(--green)); transform-origin:left center; transform:scaleX(0);
  transition:transform 1s var(--soft); box-shadow:0 0 12px rgba(242,179,107,.55); }
.how .rail-wrap.vertical .line { background:linear-gradient(180deg, var(--gold), var(--green)); transform-origin:center top; transform:scaleY(0); }

.how .step { position:relative; z-index:1; display:flex; flex-direction:column; gap:14px; }
.how .dot { position:relative; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:var(--surface);
  border:2px solid var(--line); color:var(--muted); font:500 15px/1 var(--mono);
  transition:background .5s var(--ease), border-color .5s var(--ease), color .5s, box-shadow .6s var(--ease), transform .5s var(--ease); }
.how .dot b { font-weight:500; transition:opacity .3s, transform .4s var(--ease); }
.how .dot svg { position:absolute; width:22px; height:22px; color:#fff; opacity:0; transform:scale(.4); transition:opacity .3s, transform .5s cubic-bezier(.3,1.6,.5,1); }
.how .dot::before, .how .dot::after { content:''; position:absolute; inset:-2px; border-radius:50%; border:2px solid var(--gold); opacity:0; pointer-events:none; }

/* selected: warm glow that breathes, with ripples out of the dot */
.how .step.active .dot { border-color:var(--gold); color:var(--amber); transform:scale(1.06); box-shadow:0 0 0 6px rgba(242,179,107,.18), 0 0 24px rgba(242,179,107,.55); }
.how .step.active .dot::before { animation:howRing 2s var(--soft) infinite; }
.how .step.active .dot::after { animation:howRing 2s var(--soft) 1s infinite; }
@keyframes howRing { 0% { transform:scale(1); opacity:.75; } 100% { transform:scale(1.9); opacity:0; } }

/* completed: green with a tick, and a one-off green glow */
.how .step.done .dot { background:var(--green); border-color:var(--green); color:#fff; box-shadow:0 0 0 0 rgba(34,181,115,0); }
.how .step.done .dot b { opacity:0; transform:scale(.6); }
.how .step.done .dot svg { opacity:1; transform:none; }
.how .step.flash .dot { animation:howDone 1s var(--ease); }
@keyframes howDone { 0% { box-shadow:0 0 0 0 rgba(34,181,115,.55); } 100% { box-shadow:0 0 0 18px rgba(34,181,115,0); } }

/* the boxes */
.how .card { background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:24px 22px 26px; display:flex; flex-direction:column; gap:12px; flex:1;
  transition:transform .7s var(--ease), border-color .6s var(--ease), box-shadow .7s var(--ease), background .6s; }
.how .card h3 { margin:0; font:500 22px/1.15 var(--sans); letter-spacing:-.015em; }
.how .card p { margin:0; color:var(--ink-2); font-size:16px; }
.how .step.active .card { transform:translateY(-8px); border-color:#F2CF9D; animation:howCard 2.6s ease-in-out infinite;
  box-shadow:0 30px 60px -30px rgba(154,84,16,.35), 0 0 0 4px rgba(242,179,107,.12); }
@keyframes howCard { 50% { box-shadow:0 34px 70px -30px rgba(154,84,16,.45), 0 0 0 8px rgba(242,179,107,.2); } }
.how .step.done .card { border-color:rgba(34,181,115,.38); }
.how .step.flash .card { animation:howCardDone 1.1s var(--ease); }
@keyframes howCardDone { 0% { box-shadow:0 0 0 0 rgba(34,181,115,.4); } 100% { box-shadow:0 0 0 14px rgba(34,181,115,0); } }

.how .who { align-self:flex-start; display:inline-flex; align-items:center; gap:6px; font:500 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; padding:6px 8px; border-radius:6px; }
.how .who.w-you { background:var(--gold-soft); color:var(--amber); }
.how .who.w-us { background:#E6EBF2; color:#2B3442; }
.how .who.w-us img { width:12px; }

/* "Archelaus working" pill on the last step */
.how .live { position:relative; overflow:hidden; margin-top:auto; align-self:flex-start; min-width:158px; text-align:center; border-radius:999px; padding:8px 12px;
  font:600 12.5px/1 var(--sans); background:#EEF1F5; color:#8A93A1; transition:background .5s, color .5s; }
.how .live .fill { position:absolute; inset:0; transform-origin:left; transform:scaleX(0); background:linear-gradient(90deg, #FCEBD3, #F6C98E 70%, #F2B36B); opacity:0; }
.how .live .txt { position:relative; display:inline-flex; align-items:center; gap:6px; }
.how .live .txt svg { width:13px; height:13px; }
.how .step.active .live { background:#F4EFE7; color:#7A430C; }
.how .step.active .live .fill { opacity:1; transform:scaleX(1); transition:transform 2.6s linear, opacity .3s; }
.how .step.done .live { background:#E2F6EB; color:#138A52; }
.how .step.done .live .fill { opacity:0; transition:opacity .5s; }

.how .foot { margin-top:48px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:26px 28px; border-radius:20px; background:var(--surface); border:1px solid var(--line); }
.how .foot p { margin:0; max-width:56ch; color:var(--ink-2); }
.how .foot p b { color:var(--ink); }
.how .btn { background:var(--gold); color:var(--on-gold); }
.how .btn:hover { box-shadow:0 14px 34px -12px rgba(242,179,107,.9); }

/* scroll reveal (shared behaviour from page.js) */
.how .reveal { opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.how .reveal.on { opacity:1; transform:none; }

@media (max-width:980px) {
  .how .sec { padding:80px 16px; } .how { font-size:16px; }
  .how .head { margin-bottom:36px; }
  .how .rail { grid-template-columns:1fr; gap:14px; }
  .how .step { flex-direction:row; align-items:flex-start; gap:14px; }
  .how .dot { flex:none; }
  .how .card { padding:18px; }
  .how .step.active .card { transform:translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.force-motion) .how *, html:not(.force-motion) .how *::before, html:not(.force-motion) .how *::after { animation:none !important; transition:none !important; }
  html:not(.force-motion) .how .reveal { opacity:1; transform:none; }
}