/* Feature rows: copy + steps on one side, animated app preview on the other */
.band { padding: 8px 0; }
.band:first-of-type { padding-top: 56px; }
.feature { padding: clamp(20px, 3vw, 40px); border-radius: 0; background: #111111; display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: clamp(28px, 5vw, 60px); align-items: center; }
.feature.flip { grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); }
.feature.flip .feature-copy { order: 2; }
.feature-copy h2 { font-size: clamp(28px, 3vw, 40px); margin-top: 12px; letter-spacing: -0.04em; }
.feature-copy > p { margin-top: 12px; color: var(--muted); font-size: 16px; line-height: 1.5; }

/* Step tracker */
.steps { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 8px; }
.step { cursor: pointer; display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 0; color: var(--dim); transition: color 0.3s, border-color 0.3s, background 0.3s; }
.step > b { flex: none; width: 18px; margin-top: 2px; font: 500 12px var(--mono); color: var(--dim); text-align: left; transition: color 0.3s; }
.step span { display: block; font-size: 14.5px; font-weight: 500; line-height: 1.3; }
.step small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--dim); }
.step.done { color: var(--muted); }
.step.done > b { color: var(--muted); }
.step.active { color: var(--text); background: #1c1c1c; }
.step.active > b { color: var(--text); }
.step.active small { color: var(--muted); }

/* Demo stage: photo (black and white) behind the app replica */
.stage { padding: clamp(14px, 3vw, 36px); padding-bottom: 52px; }
.stage .cam { max-width: none; }
.stage-a { --bp: 20% 55%; --bs: 150%; }
.stage-b { --bp: 88% 45%; --bs: 150%; }
.stage-c { --bp: 50% 70%; --bs: 170%; }
.stage-d { --bp: 10% 30%; --bs: 160%; }
/* Faded colour photos behind the demo stages, dimmed and mostly desaturated so only a hint of colour is left. */
.frame.stage-a { --photo: url('../bg-coast.jpg'); }
.frame.stage-b { --photo: url('../bg-forest.jpg'); }
.frame.stage-c { --photo: url('../bg-canyon.jpg'); }
.frame.stage-d { --photo: url('../bg-lake.jpg'); }
.frame.stage-a::before, .frame.stage-b::before, .frame.stage-c::before, .frame.stage-d::before { background-image: var(--photo); background-position: center; background-size: cover; filter: saturate(0.68) brightness(0.68) contrast(1.05); }
.frame.stage-a::after, .frame.stage-b::after, .frame.stage-c::after, .frame.stage-d::after { background: linear-gradient(180deg, rgba(10, 10, 10, 0.1), rgba(10, 10, 10, 0.45)); }
/* One warm neutral behind every demo panel (hue 45, saturation 9%, lightness 8%), so the photos change
   and the panel stays the same. */
.feature:has(.frame.stage) { --tint: hsl(45 9% 8%); }
.feature:has(.frame.stage) { background: var(--tint); }
.feature:has(.frame.stage) .step.active { background: color-mix(in srgb, var(--tint) 70%, #fff 8%); }
.replay {
  position: absolute; right: 12px; bottom: 10px; z-index: 5;
  display: inline-flex; gap: 6px; align-items: center; height: 28px; padding: 0 12px;
  border-radius: 6px; border: 1px solid var(--line-2); background: rgba(10, 10, 10, 0.7);
  backdrop-filter: blur(10px); font-size: 12px; color: var(--muted); transition: color 0.2s;
}
.replay:hover { color: var(--text); }

@media (max-width: 900px) {
  .feature, .feature.flip { grid-template-columns: 1fr; gap: 26px; }
  .feature.flip .feature-copy { order: 0; }
  .steps { grid-template-columns: 1fr; }
}

/* Thin dot slider along the bottom of each preview */
.scrub { position: absolute; left: 50%; bottom: 18px; z-index: 6; transform: translateX(-50%); display: flex; gap: 44px; align-items: center; height: 16px; }
.scrub::before, .scrub::after { content: ''; position: absolute; left: 8px; right: 8px; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: rgba(255, 255, 255, 0.18); }
.scrub::after { right: auto; width: calc((100% - 16px) * var(--p, 0)); background: rgba(255, 255, 255, 0.85); transition: width 0.6s var(--ease); }
.sdot { position: relative; z-index: 1; width: 16px; height: 16px; padding: 0; border: 0; background: none; cursor: pointer; }
.sdot::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); transition: background 0.3s, transform 0.3s var(--ease); }
.sdot.done::before { background: #fff; }
.sdot.active::before { background: #fff; transform: scale(1.5); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18); }
.sdot:hover::before { background: #fff; }