/* ============================================================
   PROCESS PAGE
   The device: a sixteen-day scrubber. Open any day of the build
   and see what we do that day, what you do, and what has landed
   in your account by the time it ends.

   Page hero, demo panel and output cells come from components.css.
   Phase colour is passed down as --c so one rule set serves all four.
   ============================================================ */

/* ---------------- Hero phase band ----------------
   Four segments under the headline. It reads as a summary on its
   own, and doubles as the jump control into the scrubber below. */
.phases{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--hair);
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  margin-top:var(--s60);
}
.phase{
  position:relative;background:#000;text-align:left;
  font-family:inherit;border:0;cursor:pointer;
  padding:var(--s30) var(--s24) var(--s24);
  display:flex;flex-direction:column;gap:9px;
  transition:background .4s ease;
}
.phase:hover{background:rgba(255,255,255,.032)}
.phase__bar{position:absolute;top:0;left:0;right:0;height:2px;background:rgba(255,255,255,.07);overflow:hidden}
.phase__bar::after{
  content:"";position:absolute;inset:0;background:var(--c);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.2s var(--ease) var(--d,0s);
}
.is-in .phase__bar::after{transform:scaleX(1)}
.phase__k{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#4a4a4a}
.phase__t{font-size:var(--t-2xs);font-weight:var(--fw-r);letter-spacing:-0.035em;color:#fff;line-height:1.1}
.phase__w{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--c)}
.phase__d{font-size:13px;font-weight:var(--fw-xl);color:var(--ash);line-height:1.55;margin-top:3px}

/* ============================================================
   Day-by-day scrubber
   ============================================================ */
.dbd{border-top:1px solid var(--hair);padding-block:var(--s120)}

/* ---------------- The rail ----------------
   Bar height encodes how much of the build is finished on that day,
   so the rail is a progress curve as well as a set of controls. */
.rail{margin-bottom:var(--s60)}
.rail__head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--s24);flex-wrap:wrap;margin-bottom:var(--s12);
}
.rail__k{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ash)}
.rail__k b{color:#fff;font-weight:var(--fw-sb)}
.rail__ctrl{display:flex;align-items:center;gap:8px}

.ctl{
  width:36px;height:36px;flex:none;border-radius:50%;
  border:1px solid var(--hair-2);background:none;color:var(--mist);
  display:grid;place-items:center;cursor:pointer;
  transition:border-color .3s ease,color .3s ease,background .3s ease,transform .4s var(--ease);
}
.ctl:hover:not([disabled]){border-color:rgba(128,82,255,.6);background:rgba(128,82,255,.14);color:#fff}
.ctl[disabled]{opacity:.28;cursor:not-allowed}
.ctl--play{
  width:auto;height:36px;padding:0 18px;border-radius:var(--r-full);
  display:inline-flex;align-items:center;gap:9px;
  font-size:11px;font-weight:var(--fw-sb);letter-spacing:.14em;text-transform:uppercase;
}
.ctl--play.is-playing{border-color:rgba(255,184,41,.5);color:var(--spark);background:rgba(255,184,41,.08)}

.rail__scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.rail__scroll::-webkit-scrollbar{display:none}
.rail__track{
  display:flex;gap:5px;align-items:flex-end;
  padding-top:var(--s30);border-bottom:1px solid var(--hair);
}
.tick{
  flex:1 1 0;min-width:0;background:none;border:0;padding:0 0 13px;
  display:flex;flex-direction:column;align-items:center;gap:11px;cursor:pointer;
}
.tick__bar{
  width:100%;height:calc(11px + var(--p,0) * 0.42px);
  border-radius:5px 5px 0 0;background:rgba(255,255,255,.075);
  transition:background .35s ease,box-shadow .5s ease,height .5s var(--ease);
}
.tick:hover .tick__bar{background:rgba(255,255,255,.18)}
.tick.is-done .tick__bar{background:var(--c);opacity:.34}
.tick.is-on .tick__bar{background:var(--c);opacity:1;box-shadow:0 0 26px -5px var(--c)}
.tick__d{
  font-size:10px;letter-spacing:.06em;color:#4a4a4a;
  font-variant-numeric:tabular-nums;transition:color .3s ease;
}
.tick:hover .tick__d{color:var(--mist)}
.tick.is-on .tick__d{color:#fff}

.legend{display:flex;flex-wrap:wrap;gap:var(--s24);margin-top:var(--s18)}
.legend span{display:inline-flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#5f5f5f}
.legend i{width:9px;height:9px;border-radius:3px;background:var(--c);flex:none}

/* ---------------- Day panel + banked ledger ---------------- */
.dbd__grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:var(--s60);align-items:start}
.bank{position:sticky;top:calc(var(--nav-h) + var(--s30))}

/* Without JS every day stays on the page as a readable list.
   .is-live is added by process.js once the scrubber takes over. */
.days:not(.is-live){grid-column:1/-1}
.days .day + .day{margin-top:var(--s60);padding-top:var(--s60);border-top:1px solid var(--hair)}
.days.is-live .day{display:none}
.days.is-live .day + .day{margin-top:0;padding-top:0;border-top:0}
.days.is-live .day.is-on{display:block;animation:dayIn .55s var(--ease) both}
@keyframes dayIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.day__head{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-bottom:var(--s18)}
.day__ph{
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--c);
  padding:6px 13px;border-radius:var(--r-full);background:rgba(255,255,255,.05);
}
.day__n{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#4a4a4a;font-variant-numeric:tabular-nums}
.day__t{
  font-size:clamp(27px,3.6vw,var(--t-sm));font-weight:var(--fw-r);
  letter-spacing:-0.04em;line-height:1.08;margin-bottom:var(--s36);
}

.beat{
  display:grid;grid-template-columns:118px minmax(0,1fr);gap:var(--s24);
  padding-top:var(--s18);border-top:1px solid var(--hair);
}
.beat + .beat{margin-top:var(--s24)}
.beat__k{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ash);line-height:1.5}
.beat__k b{display:block;font-weight:var(--fw-sb);color:var(--spark);letter-spacing:.08em;margin-top:6px}
.beat__k b.is-free{color:var(--verdant)}
.beat__d{font-size:16px;font-weight:var(--fw-xl);color:var(--mist);line-height:1.65}

/* shared tick-list: used by the day panel, the banked ledger and
   the deliverables section */
.gets{display:flex;flex-direction:column;gap:11px}
.gets li{
  position:relative;padding-left:29px;
  font-size:15px;font-weight:var(--fw-xl);color:var(--mist);line-height:1.5;
}
.gets li::before{
  content:"";position:absolute;left:0;top:2px;width:17px;height:17px;
  border-radius:50%;background:rgba(21,132,110,.15);border:1px solid rgba(21,132,110,.42);
}
.gets li::after{
  content:"";position:absolute;left:5.5px;top:5.5px;
  width:4px;height:8px;border:solid #7fd3c0;border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg);
}
.gets li small{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#4a4a4a;margin-top:5px}

/* the running ledger inside the sticky panel */
.meter{display:block;height:4px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;margin-bottom:var(--s24)}
.meter__fill{
  display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--iris),var(--spark));
  transition:width .8s var(--ease);
}
.bank__list{
  display:flex;flex-direction:column;gap:12px;
  max-height:296px;overflow-y:auto;padding:var(--s6) 4px var(--s24) 0;
}
.bank__list li.is-new{animation:bankIn .5s var(--ease) both}
@keyframes bankIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.bank__empty{font-size:14px;color:#5a5a5a;padding-block:var(--s18) var(--s24)}
.demo__q b{color:#fff;font-weight:var(--fw-sb)}

/* ---------------- Numbers band ---------------- */
.stats{border-top:1px solid var(--hair);padding-block:var(--s96)}
.stats__grid{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;
  background:var(--hair);border:1px solid var(--hair);
  border-radius:var(--r-3xl);overflow:hidden;
}
.stat{background:#050505;padding:var(--s30) var(--s24);transition:background .4s ease}
.stat:hover{background:#0b0910}
.stat b{
  display:block;font-size:clamp(30px,3.6vw,46px);font-weight:var(--fw-r);
  letter-spacing:-0.045em;line-height:1;color:#fff;font-variant-numeric:tabular-nums;
}
.stat span{display:block;font-size:12px;color:var(--ash);line-height:1.5;margin-top:13px}

/* ---------------- What we provide ---------------- */
.prov{border-top:1px solid var(--hair);padding-block:var(--s120)}
.prov__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s60) var(--s96)}
.pack{position:relative;padding-top:var(--s24);border-top:1px solid var(--hair-2)}
.pack::after{
  content:"";position:absolute;top:-1px;left:0;height:1px;width:0;
  background:var(--c);transition:width 1.2s var(--ease) var(--d,0s);
}
.pack.is-in::after{width:100%}
.pack__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s18);margin-bottom:var(--s18)}
.pack__k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--c)}
.pack__c{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#4a4a4a;white-space:nowrap}
.pack__t{font-size:var(--t-2xs);font-weight:var(--fw-r);letter-spacing:-0.035em;margin-bottom:var(--s12)}
.pack__d{font-size:15px;font-weight:var(--fw-xl);color:var(--ash);line-height:1.6;margin-bottom:var(--s24)}
.prov__foot{
  margin-top:var(--s60);padding-top:var(--s30);border-top:1px solid var(--hair);
  display:flex;align-items:center;gap:var(--s30);flex-wrap:wrap;
}
.prov__foot p{font-size:15px;font-weight:var(--fw-xl);color:var(--ash);max-width:62ch;line-height:1.65}
.prov__foot p b{color:#fff;font-weight:var(--fw-r)}

/* ---------------- What we need from you ---------------- */
.yours{border-top:1px solid var(--hair);padding-block:var(--s120)}
.ask{
  display:grid;grid-template-columns:56px minmax(0,1fr) auto;
  gap:var(--s24);align-items:start;
  padding-block:var(--s30);border-bottom:1px solid var(--hair);
  position:relative;isolation:isolate;
}
.ask:first-of-type{border-top:1px solid var(--hair)}
.ask::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(128,82,255,.09),transparent 55%);
  opacity:0;transition:opacity .45s ease;
}
.ask:hover::after{opacity:1}
.ask__n{font-size:var(--t-caption);letter-spacing:.16em;color:#4a4a4a;padding-top:5px;font-variant-numeric:tabular-nums;transition:color .35s ease}
.ask:hover .ask__n{color:var(--spark)}
.ask__t{font-size:clamp(19px,2.1vw,23px);font-weight:var(--fw-r);letter-spacing:-0.035em;margin-bottom:9px}
.ask__d{font-size:15px;font-weight:var(--fw-xl);color:var(--ash);line-height:1.6;max-width:60ch}
.ask__time{
  justify-self:end;white-space:nowrap;margin-top:3px;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mist);padding:7px 14px;border-radius:var(--r-full);
  background:rgba(255,255,255,.05);border:1px solid var(--hair);
}
.ask__total{
  display:flex;align-items:baseline;gap:var(--s18);flex-wrap:wrap;
  margin-top:var(--s36);
}
.ask__total b{font-size:clamp(27px,3.2vw,38px);font-weight:var(--fw-r);letter-spacing:-0.04em;color:#fff}
.ask__total span{font-size:15px;font-weight:var(--fw-xl);color:var(--ash)}

/* ---------------- Honest answers (accordion) ---------------- */
.qa{border-top:1px solid var(--hair);padding-block:var(--s120)}
.qa__item{border-bottom:1px solid var(--hair)}
.qa__item:first-of-type{border-top:1px solid var(--hair)}
.qa__q{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--s24);
  padding-block:var(--s30);
  font-size:clamp(18px,2.1vw,23px);font-weight:var(--fw-r);letter-spacing:-0.03em;
  color:var(--mist);transition:color .3s ease;
}
.qa__q::-webkit-details-marker{display:none}
.qa__q:hover{color:#fff}
.qa__item[open] .qa__q{color:#fff}
.qa__n{font-size:11px;letter-spacing:.16em;color:#4a4a4a;flex:none;font-variant-numeric:tabular-nums}
.qa__q::after{
  content:"+";margin-left:auto;flex:none;color:#3d3d3d;
  font-size:25px;line-height:1;font-weight:var(--fw-xl);
  transition:transform .5s var(--ease),color .35s ease;
}
.qa__item[open] .qa__q::after{transform:rotate(135deg);color:var(--iris)}
.qa__a{
  font-size:16px;font-weight:var(--fw-xl);color:var(--ash);line-height:1.75;
  max-width:74ch;padding:0 var(--s36) var(--s36) calc(var(--s24) + 34px);
  animation:qaIn .45s var(--ease) both;
}
.qa__a b{color:var(--mist);font-weight:var(--fw-r)}
@keyframes qaIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---------------- Responsive ---------------- */
@media (max-width:1024px){
  .phases{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dbd__grid{grid-template-columns:1fr;gap:var(--s60)}
  .bank{position:static}
  .stats__grid{grid-template-columns:repeat(3,minmax(0,1fr));border-radius:18px}
  .prov__grid{grid-template-columns:1fr;gap:var(--s36)}
  .bank__list{max-height:none;overflow:visible}
}

@media (max-width:760px){
  .phase{padding:var(--s24) var(--s18)}
  /* bleed to the screen edge — must track the wrap gutter exactly,
     or the rail ends up wider than the viewport */
  .rail__scroll{margin-inline:calc(var(--wrap-pad) * -1);padding-inline:var(--wrap-pad)}
  .rail__track{min-width:720px}
  .tick{flex:1 0 38px}
  .beat{grid-template-columns:1fr;gap:12px}
  .stats__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ask{grid-template-columns:minmax(0,1fr) auto;gap:var(--s18)}
  .ask__n{grid-column:1/-1;padding-top:0;margin-bottom:-10px;color:var(--spark);font-size:11px;letter-spacing:.2em}
  .ask__time{justify-self:start;grid-column:1/-1;margin-top:var(--s12)}
  .qa__a{padding-left:0;padding-right:0}
  .qa__q{gap:var(--s12)}
}

@media (max-width:480px){
  .phases{grid-template-columns:1fr}
  .stats__grid{grid-template-columns:1fr}
  .rail__ctrl{width:100%;justify-content:space-between}
}

@media (prefers-reduced-motion:reduce){
  .days.is-live .day.is-on,.bank__list li.is-new,.qa__a{animation:none}
  .phase__bar::after{transform:scaleX(1)}
  .pack::after{width:100%}
}