/* Guide pages — a how-to that reads as a walkthrough, not alternating paragraphs and
   pictures. Loaded AFTER legal.css. It owns three things the legal/comparison sheets
   have no reason to carry: the numbered walkthrough, the screenshot figure, and the
   collapsible FAQ.

   🔴 THE FAQ IS A <details>, AND ITS TEXT IS THE SOURCE THE JSON-LD COPIES. Collapsed
   is still visible to a crawler (it is in the DOM, not display:none on load), which is
   what Google's own guidance asks for. Change the wording here and in the head together
   or the rich result silently stops matching the page. */

/* Narrower than a comparison page: this is prose and screenshots, not wide tables. */
:root{ --wrap:760px; }

h2{ margin:40px 0 4px; font-size:22px; letter-spacing:-.01em; }
h2 + .lede{ margin:0 0 2px; }
.lede{ color:var(--muted); font-size:15px; }

/* ── The walkthrough ─────────────────────────────────────────────────────────
   A rail with a numbered bead per step. The rail is what makes this read as ONE
   sequence rather than a stack of unrelated cards, and it costs one border. */
ol.steps{ list-style:none; margin:22px 0 0; padding:0; counter-reset:step; }
ol.steps > li{
  counter-increment:step; position:relative;
  margin:0; padding:0 0 28px 40px;
  border-left:2px solid var(--line);
}
/* The last bead has nothing below it, so the rail stops rather than trailing into
   whitespace and looking like a missing step. */
ol.steps > li:last-child{ border-left-color:transparent; padding-bottom:4px; }
ol.steps > li::before{
  content:counter(step);
  position:absolute; left:-15px; top:-1px;
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--coral); color:#fff; font-weight:700; font-size:13px;
  font-variant-numeric:tabular-nums;
}
ol.steps h3{ margin:3px 0 5px; font-size:17px; color:var(--ink); }
ol.steps p{ margin:0; }

/* A plain numbered list, for the "in any tool" section where there are no pictures. */
ol.plain{ margin:16px 0 0; padding-left:22px; }
ol.plain li{ margin:0 0 7px; }

/* ── Screenshots ─────────────────────────────────────────────────────────────
   ⚠️ Capped, not full-bleed. These are 2x crops of ONE panel of the app; stretched
   to the column they stop reading as evidence and start reading as decoration, and
   a tall panel shot then pushes the next step off the screen entirely. */
figure.shot{ margin:13px 0 0; padding:0; max-width:430px; }
figure.shot.wide{ max-width:100%; }
figure.shot img{
  width:100%; height:auto; display:block; border-radius:10px;
  border:1px solid var(--line); background:var(--paper-2);
}
figure.shot figcaption{ margin-top:8px; font-size:13px; color:var(--muted); line-height:1.5; }

/* ── FAQ ─────────────────────────────────────────────────────────────────────
   Same accordion the homepage uses, so the site has one FAQ and not two. */
.faq{ margin:18px 0 0; border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); padding:16px 2px; }
.faq summary{
  cursor:pointer; font-weight:640; font-size:16px; color:var(--ink);
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:18px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--coral); font-weight:700; font-size:22px; line-height:1; }
.faq details[open] summary::after{ content:"\2013"; }
.faq details p{ margin:11px 0 2px; color:var(--ink-2); }

.endnote{ font-size:13px; color:var(--muted); margin:26px 0 0; }

/* A guide is read on a phone more than a comparison table is. The bead sits ON the
   rail rather than outside it at this width, so nothing touches the 16px gutter. */
@media (max-width:560px){
  ol.steps > li{ padding-left:32px; }
  ol.steps > li::before{ left:-14px; width:26px; height:26px; font-size:12px; }
  figure.shot{ max-width:100%; }
  h2{ font-size:20px; }
}