/* =========================================================
   Guide pages: a task followed one step at a time.
   Layout: _includes/layouts/guide.njk · Content: src/guides/<slug>.njk
   Behaviour: js/components/guide-flow.js (adds .is-flow; without it every step is shown).
   ========================================================= */

/* ---------- Compact header: the reader came here to act, so the steps start high ---------- */
.page-hero--compact { padding-bottom: clamp(24px, 3vw, 36px); }
.page-hero--compact .page-hero__copy { padding-top: clamp(8px, 1.5vw, 16px); }
.page-hero--compact .page-hero__title { font-size: clamp(30px, 3.4vw, 46px); }
.page-hero--compact .page-hero__intro { margin-top: 8px; font-size: 16px; }
/* ---------- Journey dots above the guide, on the right (small screens only) ---------- */
.journey { display: none; }
.journey__track { display: flex; align-items: center; }
.journey__track li { display: flex; align-items: center; }
.journey__track li + li::before { content: ""; width: 18px; height: 2px; background: var(--line-soft); }
.journey__dot { position: relative; display: grid; place-items: center; padding: 3px; border-radius: 50%; }
.journey__num {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--io4-line); background: var(--b15-white); color: var(--f2-ink-soft);
  font-size: 12px; font-weight: 900; transition: background-color .2s, border-color .2s, color .2s;
}
.journey__dot[aria-current="step"] .journey__num { background: var(--b3-teal-mid); border-color: var(--b3-teal-mid); color: #fff; }
.journey__dot.is-finished .journey__num { color: transparent; border-color: var(--success-ic); background: var(--success-ic) var(--tick) center / 12px no-repeat; }
.journey__tip { display: none; }
.journey__arrow { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--f2-ink-soft); }
.journey__arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.page-hero__updated { margin-top: 8px; font-size: 13px; color: rgb(226 251 255 / .6); }
.page-hero__kicker { margin-bottom: 8px; font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--b5-cyan-light); }


.flow { min-width: 0; }
.flow > * + * { margin-top: 24px; }

/* ---------- Left stepper: mirrors the flow; finished steps can be revisited ---------- */
.stepper { display: grid; gap: 4px; margin-top: 14px; }
.stepper__item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border-radius: 10px; border: 0; background: none;
  font: inherit; font-size: 15px; font-weight: 700; line-height: 1.35; text-align: left; color: var(--f2-ink-soft);
  cursor: pointer; transition: background-color .2s, color .2s;
}
.stepper__item:hover:not(:disabled) { background: var(--b14-surface); color: var(--f1-ink); }
.stepper__item[data-state="upcoming"] { color: var(--f3-ink-muted); }
.stepper__num {
  display: grid; place-items: center; flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--io4-line); font-size: 12px; font-weight: 900;
  transition: background-color .3s, border-color .3s, color .3s;
}
.stepper__item[data-state="current"] { color: var(--b3-teal-mid); background: var(--b6-cyan-wash); }
.stepper__item[data-state="current"] .stepper__num { background: var(--b3-teal-mid); border-color: var(--b3-teal-mid); color: #fff; }
.stepper__item[data-state="done"] .stepper__num { color: transparent; background: var(--b4-cyan) var(--tick) center / 13px no-repeat; border-color: var(--b4-cyan); }
.guide-layout, .tree { --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }

/* ---------- Returning reader ---------- */
.flow-resume[hidden] { display: none; }
.flow-resume { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 16px; border-radius: 12px; background: var(--b6-cyan-wash); font-size: 15px; }
.flow-resume a { font-weight: 900; color: var(--f4-button); text-decoration: underline; text-underline-offset: 3px; }
.flow-resume button {
  font: inherit; font-size: 14px; font-weight: 700; color: var(--f4-button); background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-decoration-color: rgb(16 78 88 / .3); text-underline-offset: 4px;
}
.flow-resume button:hover { text-decoration-color: currentColor; }
/* ---------- You'll need ---------- */
.flow-needs { padding: 16px 20px; border-radius: var(--radius); background: var(--b14-surface); }
.flow-needs__title { font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--f3-ink-muted); }
.flow-needs__list { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 8px; }
.flow-needs__list li { position: relative; padding-left: 16px; font-weight: 700; font-size: 15px; }
.flow-needs__list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--b4-cyan); }

/* ---------- Steps: one vertical article ----------
   A dotted rail runs down the left with a numbered marker per step; it fills teal as you scroll
   (--fill, set by guide-flow.js) and each marker lights up once its step is reached. */
/* a one-line intro (the guide's summary) above the steps: sets them up without another title */
.article-steps { --rail: 17px; position: relative; padding-left: 54px; margin-top: 28px; }
.article-steps::before, .article-steps__fill {
  content: ""; position: absolute; left: var(--rail); top: 8px; bottom: 0; width: 2px;
}
.article-steps::before { background: repeating-linear-gradient(180deg, var(--io4-line) 0 4px, transparent 4px 10px); }
.article-steps__fill { background: var(--b4-cyan); transform-origin: top; transform: scaleY(var(--fill, 0)); }

.a-step { position: relative; padding-bottom: clamp(28px, 3.5vw, 40px); scroll-margin-top: calc(var(--nav-h) + 24px); }
.a-step__marker {
  position: absolute; left: calc(-54px + var(--rail) - 17px); top: -4px; z-index: 1;
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid var(--io4-line); background: var(--b15-white);
  font-family: var(--font-body); font-weight: 900; font-size: 15px; color: var(--f3-ink-muted);
  transition: background-color .4s, border-color .4s, color .4s, transform .4s var(--ease-out);
}
.a-step.is-reached .a-step__marker { border-color: var(--b4-cyan); color: var(--b3-teal-mid); }
.a-step.is-current .a-step__marker { background: var(--b3-teal-mid); border-color: var(--b3-teal-mid); color: #fff; transform: scale(1.06); }
/* read: scrolled past */
.a-step.is-passed .a-step__marker { color: transparent; background: var(--b4-cyan) var(--tick) center / 15px no-repeat; border-color: var(--b4-cyan); }
.guide-layout:not(.is-flow) .a-step__marker { border-color: var(--b4-cyan); color: var(--b3-teal-mid); }

/* the last step needs no gap before the Next button */
.a-step:last-child { padding-bottom: 8px; }
.a-step__title { font-family: var(--font-body); font-weight: 900; font-size: 20px; line-height: 1.4; padding-top: 2px; }
.a-step__body { margin-top: 6px; }
.a-step__text { max-width: 62ch; font-size: 18px; line-height: 1.65; }

/* Reveal: parts rise into view as they're reached (only once the script is running) */
.js .is-flow [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease-out), transform .8s var(--ease-out); }
.js .is-flow [data-reveal].is-in { opacity: 1; transform: none; }
.js .is-flow .a-step__frames [data-reveal]:nth-child(2) { transition-delay: .1s; }
.js .is-flow .a-step__frames [data-reveal]:nth-child(3) { transition-delay: .2s; }

/* Media: a real image, or a frame naming the photo still needed */
.a-media { display: block; width: 100%; border-radius: var(--radius-lg); }
/* An arrow pointing to one part of a photo (point: in the guide file) */

.a-media--needed {
  display: grid; place-items: center; align-content: center; gap: 8px;
  aspect-ratio: 4 / 3; padding: 20px; text-align: center;
  background: var(--b6-cyan-wash); border: 1.5px dashed rgb(0 120 140 / .35);
  color: var(--b3-teal-mid); font-size: 14px; font-weight: 700;
}
.a-media--needed svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; opacity: .7; }
.a-media--small { aspect-ratio: 4 / 3; padding: 12px; border-radius: var(--radius); }
.a-media--small svg { width: 24px; height: 24px; }

/* split: instruction beside the picture */
/* the picture sits beside the title and text together, so short text leaves no gap */
.a-step--split { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 40px; align-content: start; }
/* a tall picture only stretches the last row, so the text stays right under its title */
.a-step--split .a-step__foot { align-self: start; }
.a-step--split .a-step__body { display: contents; }
.a-step--split .a-step__title, .a-step--split .a-step__copy, .a-step--split .a-step__foot { grid-column: 1; }
.a-step--split .a-step__copy { margin-top: 6px; }
.a-step--split .a-step__media { grid-column: 2; grid-row: 1 / span 3; align-self: start; justify-self: end; width: 100%; max-width: 240px; }

/* wide: one large picture under the instruction */
.a-step--wide .a-step__media { margin-top: 20px; }
.a-step--wide .a-media--needed { aspect-ratio: 16 / 9; }

/* trio: the app screen on the left, the words in the middle, the tracker on the right */
.a-step--trio { display: grid; grid-template-columns: 200px minmax(0, 1fr) minmax(0, 260px); grid-template-rows: auto auto 1fr; column-gap: 36px; align-content: start; }
.a-step--trio .a-step__body { display: contents; }
.a-step--trio :is(.a-step__title, .a-step__copy, .a-step__foot) { grid-column: 2; }
.a-step--trio .a-step__copy { margin-top: 6px; }
.a-step--trio .a-step__foot { align-self: start; }
.a-step--trio .a-step__media--left { grid-column: 1; grid-row: 1 / -1; align-self: start; }
.a-step--trio .a-step__media--left .phone { margin-left: 0; }
.a-step--trio .a-step__media--right { grid-column: 3; grid-row: 1 / -1; align-self: center; width: 100%; }

/* Alternating: every other step puts its picture on the left */
.article-steps--alternate .a-step--split:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); }
.article-steps--alternate .a-step--split:nth-child(even) :is(.a-step__title, .a-step__copy, .a-step__foot) { grid-column: 2; }
.article-steps--alternate .a-step--split:nth-child(even) .a-step__media { grid-column: 1; justify-self: start; }
.article-steps--alternate .a-step--split:nth-child(even) .phone { margin-left: 0; }
/* phones line up with the top of their step, beside the title and its number */
.article-steps--alternate .a-step--split .a-step__media { align-self: start; }

/* Every other step sits on a pale band, with room between steps, so each reads as one block */
.article-steps { isolation: isolate; }
.article-steps .a-step:not(:last-child) { padding-bottom: 80px; }
.article-steps .a-step:nth-child(even)::before {
  content: ""; position: absolute; z-index: -1; inset: -36px -24px 40px -78px;
  border-radius: var(--radius-lg); background: var(--b14-surface);
}
/* the last step has no 80px gap below it, so its band reaches past its foot instead (e.g. a trouble link) */
.article-steps .a-step:nth-child(even):last-child::before { bottom: -28px; }

/* Beside a tall picture, the words (and the step number with them) sit in the middle of it
   rather than at its top: rows = space, title, text, help link, space */
@media (min-width: 861px) {
  :is(.a-step--split, .a-step--trio) { grid-template-rows: 1fr auto auto auto 1fr; }
  :is(.a-step--split, .a-step--trio) .a-step__title { grid-row: 2; }
  :is(.a-step--split, .a-step--trio) .a-step__copy { grid-row: 3; }
  :is(.a-step--split, .a-step--trio) .a-step__foot { grid-row: 4; }
  /* the number sits level with the middle of the words (title, text and help link) */
  :is(.a-step--split, .a-step--trio) .a-step__marker { grid-row: 2 / 5; grid-column: 1 / -1; top: calc(50% - 18px); }
  :is(.a-step--split, .a-step--trio) .a-step__media { grid-row: 1 / -1; }
}

/* states with photos: after the step's text and help line, centred across the article,
   three states side by side with each label centred under its tracker */
.a-step--states:has(.a-step__states--photos) { display: flex; flex-direction: column; }
.a-step--states:has(.a-step__states--photos) .a-step__body { display: contents; }
.a-step--states:has(.a-step__states--photos) .a-step__foot { order: 1; }
.a-step--states .a-step__states--photos { order: 2; align-self: center; width: 100%; max-width: 720px; margin-top: 22px; }
.a-step__states--photos ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
/* centred under the tracker itself, not the whole photo (the cable on the left widens it) */
.a-step__states--photos .led-state__row { text-align: center; padding-left: 23.9%; }

/* sequence: a row of small numbered pictures */
.a-step__frames { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-top: 20px; }
.a-step__frames figcaption { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: 14px; font-weight: 700; line-height: 1.4; }
.a-step__frame-num { display: grid; place-items: center; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--b1-deep-teal); color: var(--b5-cyan-light); font-size: 11px; font-weight: 900; }

/* states: what an indicator light means, with drawn lights */
.a-step__states { margin-top: 20px; padding: 20px 22px; border-radius: var(--radius-lg); background: var(--b1-deep-teal); color: #fff; }
.a-step__states-title { font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--b5-cyan-light); }
.a-step__states ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px; margin-top: 14px; }
.led-state { font-size: 14px; line-height: 1.45; color: rgb(226 251 255 / .75); }
.led-state__row { display: flex; gap: 12px; align-items: flex-start; }
.led-state strong { display: block; font-size: 15px; color: #fff; }
.led { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; }
.led--orange { --led: #FF9F1C; }
.led--green { --led: #3BE36B; }
.led--red { --led: #FF4D4D; }
.led--blue { --led: #4DA3FF; }
.led { background: var(--led); box-shadow: 0 0 0 3px rgb(255 255 255 / .08), 0 0 14px 2px var(--led); }
.led--flash { animation: led-flash 1.2s steps(1, end) infinite; }
@keyframes led-flash { 50% { opacity: .15; box-shadow: none; } }

/* states with photos: a light panel so the dark tracker reads clearly */
.a-step__states--photos { background: var(--b14-surface); color: var(--f1-ink); }
.a-step__states--photos .a-step__states-title { color: var(--b3-teal-mid); }
.a-step__states--photos .led-state { color: var(--f2-ink-soft); }
.a-step__states--photos .led-state strong { color: var(--f1-ink); }
.a-step__states--photos .led { box-shadow: 0 0 0 3px var(--b15-white), 0 0 10px 1px var(--led); }
.led-state__img { display: block; width: 100%; margin-bottom: 12px; }
/* the photo already shows the light: no coloured dot, label centred under the picture */
.a-step__states--photos .led { display: none; }
.a-step__states--photos .led-state__row { display: block; }

/* App screenshots, whole, inside a phone outline */
.phone {
  position: relative; display: block; width: 100%; max-width: 200px; margin-left: auto;
  padding: 7px; border-radius: 34px; background: #0d1214;
  box-shadow: 0 0 0 1.5px #3a4245 inset, 0 18px 40px -16px rgb(2 19 22 / .45);
}
/* the camera island */
.phone::before { content: ""; position: absolute; top: 15px; left: 50%; translate: -50% 0; width: 54px; height: 15px; border-radius: 10px; background: #0d1214; z-index: 1; }
.phone__screen { display: block; width: 100%; border-radius: 27px; }
.a-step__media:has(.phone) { max-width: 220px; }
.a-step__media:has(.phone) > * + * { margin-top: 18px; }

/* links under a step's text, e.g. app stores */
.a-step__buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.store-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; background: var(--f1-ink); color: #fff; font-weight: 700; font-size: 14px; transition: background-color .2s; }
.store-btn:hover { background: var(--b1-deep-teal); }
.store-btn svg { width: 16px; height: 16px; fill: none; stroke: var(--b5-cyan-light); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.a-step__wait { margin-top: 16px; }
.a-step__wait .flow-wait { margin-top: 0; }

.a-step__foot { margin-top: 18px; }
.a-step__foot .flow-trouble { margin-top: 0; }

/* waiting step */
.flow-wait { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--b14-surface); font-size: 15px; color: var(--f2-ink-soft); }
.flow-wait svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; fill: none; stroke: var(--b3-teal-mid); stroke-width: 2; stroke-linecap: round; }
.flow-wait strong { color: var(--f1-ink); }
.flow-meanwhile { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-soft); transition: border-color .2s, background-color .2s; }
.flow-meanwhile:hover { border-color: rgb(6 186 215 / .5); background: var(--b6-cyan-wash); }
.flow-meanwhile__label { font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--b3-teal-mid); white-space: nowrap; }
.flow-meanwhile__title { flex: 1; font-weight: 700; }
.flow-meanwhile svg { width: 18px; height: 18px; fill: none; stroke: var(--b3-teal-mid); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* tips and cautions */
.callout { margin-top: 14px; padding: 12px 16px; border-radius: 12px; font-size: 15px; line-height: 1.55; border-left: 3px solid; }
.callout strong { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.callout--tip { background: var(--b6-cyan-wash); border-color: var(--b4-cyan); }
.callout--tip strong { color: var(--b3-teal-mid); }
.callout--caution { background: var(--error-bg); border-color: var(--error-ic); color: var(--error-f); }

/* "Didn't work?" help, right where it's needed */
.flow-trouble { margin-top: 16px; }
.flow-trouble > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 700; color: var(--f2-ink-soft); }
.flow-trouble > summary::-webkit-details-marker { display: none; }
.flow-trouble > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: -45deg; transition: rotate .25s var(--ease-out); }
.flow-trouble[open] > summary::before { rotate: 45deg; }
.flow-trouble > summary:hover { color: var(--b3-teal-mid); }
.flow-trouble p { margin-top: 8px; padding: 12px 14px; border-radius: 12px; background: var(--b14-surface); font-size: 15px; color: var(--f2-ink-soft); }

/* ---------- End: a minimal link on to the next guide ---------- */
.flow-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 28px; margin-bottom: clamp(32px, 4vw, 48px); padding-top: 20px; border-top: 1px solid var(--line-soft); scroll-margin-top: calc(var(--nav-h) + 24px); }
.flow-next {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px 11px 20px; border-radius: 999px;
  background: var(--b1-deep-teal); color: #fff; font-weight: 700; font-size: 15px;
  transition: background-color .2s, transform .15s var(--ease-out);
}
.flow-next:hover { background: var(--b2-teal); }
.flow-next:active { transform: scale(.97); }
.flow-next svg { width: 18px; height: 18px; fill: none; stroke: var(--b5-cyan-light); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease-out); }
.flow-next:hover svg { transform: translateX(3px); }

/* ---------- After the flow ---------- */
.flow-answers { margin-top: 40px; }
.flow-answers .quick-answers { margin-top: 0; }
.flow-foot__helpful { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 700; }
.flow-foot__helpful button { font: inherit; font-size: 14px; font-weight: 700; color: var(--f2-ink-soft); background: var(--b15-white); border: 1px solid var(--io4-line); border-radius: 999px; padding: 4px 14px; cursor: pointer; transition: border-color .2s, color .2s; }
.flow-foot__helpful button:hover { border-color: var(--b3-teal-mid); color: var(--b3-teal-mid); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .guide-layout { position: relative; padding-top: 44px; }
  .journey { display: inline-flex; align-items: center; gap: 4px; position: absolute; top: 0; right: var(--gutter); height: 44px; }
  .journey .journey__arrow { display: none; }
  /* the full list doesn't fit here: keep only this guide's steps, as a row */
  .toc > .toc__label, .tree__item:not(:has(> .tree__fold[open])), .tree__link, .tree__guide, .tree__guides li:not(:has(.tree__inner)) { display: none; }
  .tree__guides { margin: 0; padding: 0; border: 0; }
  .tree { margin: 0; }
  .tree__inner { margin: 0; padding: 0; border: 0; }
  .journey__track li + li::before { width: 6px; }
  .journey__dot { padding: 2px; }
  .journey__num { width: 22px; height: 22px; font-size: 11px; }
  /* the stepper becomes a row of numbered dots above the steps; the current one shows its name */
  .toc .toc__label { display: none; }
  .stepper { display: flex; gap: 6px; margin: 0 0 4px; overflow-x: auto; scrollbar-width: none; }
  .stepper__item { width: auto; padding: 6px; border-radius: 999px; }
  .stepper__item:not([data-state="current"]) .stepper__label { display: none; }
  .stepper__item[data-state="current"] { padding-right: 14px; white-space: nowrap; }
  .a-step--split { grid-template-columns: minmax(0, 1fr); }
  .a-step--split .a-step__media { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 16px; }
  .article-steps--alternate .a-step--split:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .article-steps--alternate .a-step--split:nth-child(even) :is(.a-step__title, .a-step__copy, .a-step__foot) { grid-column: 1; }
  .phone { margin-left: 0; max-width: 180px; }
  .a-step--trio { grid-template-columns: minmax(0, 1fr); }
  .a-step--trio :is(.a-step__title, .a-step__copy, .a-step__foot, .a-step__media--left, .a-step__media--right) { grid-column: 1; grid-row: auto; }
  .a-step--trio .a-step__media--left { margin-top: 16px; }
  .a-step--trio .a-step__media--right { max-width: 240px; margin-top: 12px; }
}
@media (max-width: 600px) {
  .article-steps { --rail: 15px; padding-left: 46px; }
  .article-steps .a-step:nth-child(even)::before { left: -54px; right: -8px; }
  .a-step__marker { left: calc(-46px + var(--rail) - 15px); width: 32px; height: 32px; font-size: 14px; }
  /* phones: one compact row per light state (small photo, label beside it) */
  .a-step__states--photos ul { grid-template-columns: 1fr; gap: 10px; }
  .a-step__states--photos .led-state { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 12px; }
  .a-step__states--photos .led-state__img { margin: 0; }
  .a-step__states--photos .led-state__row { text-align: left; padding-left: 0; }
  .a-step__text { font-size: 17px; }
  .a-step__frames { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .a-step__frames figcaption { font-size: 12px; }
  .a-step__frame-num { display: none; }
  .flow-meanwhile { flex-wrap: wrap; }
}
}