/* SunFlow v2 staging: step arrows for pinned scroll stories (home "How it works", installation blueprint).
   Built only from site tokens and the .btn / .btn-ghost button style. Dennis, Oct 27 2026. */
.has-stepper .melt-progress{display:none}
.stepper{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-5);flex-wrap:nowrap;position:relative;z-index:2;min-width:0;max-width:100%}
.stepper-btn{min-width:48px;min-height:48px;padding:0;justify-content:center;flex:none}
.stepper-btn.is-continue{padding:0 20px 0 22px;gap:8px}
.stepper-btn:disabled{opacity:.38;cursor:not-allowed}
.stepper-btn:disabled:active{transform:none}
@media (hover:hover){.dark .stepper-prev:not(:disabled):hover{background:rgba(245,247,246,.1)}}
.stepper-dots{display:flex;align-items:center}
.stepper-dot{position:relative;width:28px;height:48px;padding:0;margin:0;border:0;background:none;cursor:pointer;color:inherit}
.stepper-dot::before{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:var(--radius-pill);border:1.5px solid currentColor;opacity:.55;transition:background var(--dur-1),opacity var(--dur-1),transform var(--dur-2) var(--ease-out)}
.stepper-dot:hover::before{opacity:.9}
.stepper-dot[aria-current=step]::before{background:var(--green);border-color:var(--green);opacity:1;transform:scale(1.25)}
.stepper-dot:focus-visible{outline-offset:-6px;border-radius:var(--radius-pill)}
.stepper-count{font-size:var(--step--1);font-variant-numeric:tabular-nums;white-space:nowrap;opacity:.85;margin-inline:var(--s-1) auto}
.stepper .stepper-next{margin-left:auto}
.stepper-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.dark .stepper-btn:focus-visible,.dark .stepper-dot:focus-visible{outline-color:var(--green)}
@media (max-width:900px){
  .stepper{margin-top:var(--s-3);gap:var(--s-2)}
  .stepper-dot{width:44px;height:48px}
  .has-stepper .melt-stage{touch-action:pan-y}
}
@media (max-width:420px){.stepper-count{display:none}.stepper-dots{margin-inline:auto}.stepper-btn.is-continue{padding:0}.stepper-btn.is-continue span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){
  .stepper{position:sticky;bottom:12px;width:fit-content;max-width:100%;margin-inline:auto;padding:6px 10px;border-radius:var(--radius-pill);background:var(--snow);border:1px solid var(--line);box-shadow:0 6px 24px rgba(0,0,0,.18)}
  .dark .stepper{background:var(--night);border-color:var(--line-dark)}
  .stepper-dot::before{transition:none}
  [data-step].is-current,.melt-steps li.is-current{outline:1px solid var(--line-dark);outline-offset:12px;border-radius:var(--radius-s)}
}
/* installation blueprint: the bar replaces the thin progress bars and sits under the callout */
.has-stepper .bp-progress{display:none}
.bp-copy>.stepper{margin-top:var(--s-3)}
.stepper.is-tight .stepper-count{display:none}
.stepper.is-count .stepper-dots{display:none}
.stepper.is-count .stepper-count{display:inline;margin-inline:auto}
@media (max-width:899px){.has-stepper .bp-stage{touch-action:pan-y}}
/* blueprint, motion on: room for the bar is reserved in CSS so adding it in JS moves nothing (no layout shift) */
@media (prefers-reduced-motion:no-preference){
  .bp-track[data-stepper] .bp-copy{padding-bottom:76px;position:relative}
  .bp-copy>.stepper{position:absolute;left:0;right:0;bottom:12px;margin:0}
}
@media (prefers-reduced-motion:no-preference) and (max-width:899px){
  .bp-track[data-stepper] .bp-copy{padding-bottom:64px}
  .bp-copy>.stepper{bottom:4px}
}

/* ---------- phones and small tablets: tap-through (Oct 27 mobile pass) ----------
   Nothing is pinned. The bar sits directly under the drawing: previous (ghost) and next (solid, the site's
   primary button) at 56 px, a clear "Step 2 of 4" label with a segmented progress line between them.
   Swiping the drawing left or right is the main gesture; the arrows are the backup. */
.stepper-label{display:none}
.stepper.is-tap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;height:64px;margin:16px 0;width:100%;position:relative}
.stepper.is-tap .stepper-dots,.stepper.is-tap .stepper-count{display:none!important}
.stepper.is-tap .stepper-btn{width:56px;height:56px;min-width:56px;min-height:56px;padding:0;margin:0;border-radius:var(--radius-pill)}
.stepper.is-tap .stepper-btn svg{width:24px;height:24px}
.stepper.is-tap .stepper-btn.is-continue,.stepper.is-tap .stepper-btn.is-start{width:auto;padding:0 18px 0 22px;gap:8px}
.stepper.is-tap .stepper-label{display:block;text-align:center;min-width:0}
.stepper-label b{display:block;font-size:1rem;font-weight:600;line-height:1.3;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.stepper-hint{display:block;font-size:.875rem;line-height:1.4;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1.4em}
.stepper-segs{display:flex;gap:4px;margin:6px auto 4px;max-width:220px}
.stepper-segs i{flex:1;height:4px;border-radius:2px;background:var(--line-dark);transition:background var(--dur-2)}
.stepper-segs i.done{background:rgba(89,196,122,.55)}
.stepper-segs i.on{background:var(--green)}
@media (max-width:420px){.stepper.is-tap .stepper-btn.is-start{padding:0}.stepper.is-tap .stepper-btn.is-start{width:56px}.stepper.is-tap .stepper-btn.is-start span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.stepper.is-tap .stepper-btn.is-continue{width:56px}}
.tap-mode .stepper-next.is-continue span{white-space:nowrap}
@media (max-width:899px) and (prefers-reduced-motion:no-preference){
  .bp-track[data-stepper] .bp-copy{padding-bottom:0}
}