/* The extraction guide: a help chapter on the landing page's shell and tokens.
   Same construction as pricing.css. Grouping is carried by space and by the dark
   captures themselves, not by rules: no divider hairlines, no status dots. The
   walkthrough numbers use a coral counter, which is the established step
   language on the pricing page's .extractionSteps. */

.guidePage .siteHeader{transform:translateX(-50%);--shell-offset:0px}

/* .sectionEyebrow and a visually-hidden helper are declared HERE, not inherited:
   both live in pricing.css, which this page does not load. pricing.css only ever
   places the eyebrow on a dark slab, so its ink is wrong here; this page has no
   slab and needs the foreground coral throughout. If these ever move into
   landing.css, delete them from here. */
.guidePage .sectionEyebrow{display:block;color:var(--accent-ink);font-size:12px;letter-spacing:.08em;font-weight:700;margin-bottom:22px}
.guidePage .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

.guidePage h1,.guidePage h2{margin:0;font-weight:400;letter-spacing:-.04em;line-height:1;text-wrap:balance}
.guidePage h1{font-size:clamp(32px,4vw,56px)}
.guidePage h2{font-size:clamp(30px,3.4vw,48px)}
.guidePage p{font-size:16px;line-height:1.65}

/* Figures ----------------------------------------------------------------
   Two kinds, and they round differently on purpose.

   .shotCard holds a capture of the whole app window. The file is cropped to
   the card's own edge, so the rounded corner is already drawn INTO the pixels
   and the CSS radius only has to agree with it. That radius has to be a
   PERCENTAGE, because it scales with the rendered width. Measured off the
   sources: the card is 2076x1400 inside the capture and its corner is a 64px
   circle, so 3.08% / 4.57%. The value below is 8% larger, which clips
   marginally INTO the card's corner on purpose: under-clipping leaves a
   background sliver that reads as a second arc, while over-clipping a dark
   rounded corner is invisible. Two values, not one: a single percentage would
   resolve against width and height separately and draw an ellipse.

   .shotPlain holds a crop from INSIDE a screen, so its corners are square in
   the file and the radius is a free choice. It is set to sit close to
   .shotCard's RENDERED radius, which is why it changes inside .pairRow: the
   two images stand side by side there at different widths, and an arc that
   does not agree with its neighbour reads as a mistake. */
.shotCard{overflow:hidden;border-radius:3.33% / 4.94%;background:#202626}
.shotPlain{overflow:hidden;border-radius:3.3%;background:#202626}
.shotCard img,.shotPlain img,.shotPlain picture{display:block;width:100%;height:auto}

/* Lead ------------------------------------------------------------------ */
.guideLead{padding-top:118px;padding-bottom:0;display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:start}
.guideLeadCopy p{margin:20px 0 0;color:var(--muted);max-width:48ch}
.guideExample{margin:0;width:100%;max-width:520px;justify-self:end}
.guideExampleImage{overflow:hidden;border-radius:3.3%;background:#202626}
.guideExampleImage img{display:block;width:100%;height:auto}
.guideExample figcaption{font-size:13px;line-height:1.6;color:var(--muted);margin-top:14px}

/* Before you start: same two-column rhythm as the scope section ---------- */
.guideShot{display:grid;grid-template-columns:1fr 1.2fr;gap:6vw;padding-block:64px 4px}
.shotLead{margin:0 0 30px;color:var(--muted);max-width:62ch}
.shotPoints{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:28px 6%}
.shotPoints h3{margin:0 0 9px;font-size:17px;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.shotPoints p{margin:0;font-size:15px;line-height:1.6;color:var(--muted)}

/* Walkthrough ------------------------------------------------------------ */
.guideWalk{padding-block:60px}
.walkHead{margin-bottom:clamp(40px,4vw,60px)}
.walkList{list-style:none;margin:0;padding:0;display:grid;gap:clamp(56px,6vw,96px);counter-reset:step}
.walkStep{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:6vw;align-items:start;position:relative;padding-top:42px}
/* The number is drawn as a counter rather than a marker so it can sit above
   both columns in its own optical row. The wait step opts out of the count:
   it is not something the reader does, so numbering it would overstate it. */
.walkStep::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  position:absolute;top:0;left:0;white-space:nowrap;
  font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--accent-ink)
}
.walkStep--wait::before{counter-increment:none;content:"WHILE IT READS"}
.walkCopy h3{margin:0 0 16px;font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.walkCopy p{margin:0 0 14px;font-size:15px;line-height:1.65;color:var(--muted);max-width:46ch}
.walkCopy p:last-child{margin-bottom:0}
.walkShot{margin:0}
.walkShot figcaption{font-size:13px;line-height:1.6;color:var(--muted);margin-top:14px;max-width:58ch}
/* The scan is square and is a detail, not a whole screen. Held to a smaller
   measure so it reads as an inset instead of towering over the row. */
.walkShot--inset{max-width:470px}
/* The outline step is two moments of one screen, so they stand side by side.
   flex-grow is each image's ASPECT RATIO against a zero basis, which makes the
   widths proportional to the ratios and therefore the heights equal: one band,
   not two mismatched blocks. */
.pairRow{display:flex;align-items:flex-start;gap:2.4%}
.pairRow>.shotCard{flex:1.4822 1 0}
.pairRow>.shotPlain{flex:0.9796 1 0;border-radius:4.9%}

/* Scope ----------------------------------------------------------------- */
.guideScope{display:grid;grid-template-columns:1fr 1.2fr;gap:6vw;padding-block:60px}
.guideScope p{margin:0 0 18px;color:var(--muted);max-width:62ch}
.guideScope .actionLink{margin-top:12px}

/* Credits note ---------------------------------------------------------- */
.guideNote{padding-block:28px;display:flex;align-items:start;justify-content:space-between;gap:40px}
.guideNote p{font-size:12px;color:var(--muted);margin:0;max-width:110ch;line-height:1.6}
.guideNote a{font-size:13px;white-space:nowrap;text-decoration:underline;text-underline-offset:4px;padding-block:8px}

.guidePage a:focus-visible{outline:2px solid var(--accent-ink);outline-offset:5px}

/* Narrow ---------------------------------------------------------------- */
@media(max-width:1080px){
  .walkStep{grid-template-columns:1fr;gap:26px}
  .walkCopy p,.walkShot figcaption{max-width:62ch}
  .walkShot--inset{max-width:520px}
  .pairRow{gap:18px}
}
@media(max-width:860px){
  .shotPoints{grid-template-columns:1fr;gap:24px}
  .shotPoints p{max-width:56ch}
}
@media(max-width:760px){
  .guideLead{grid-template-columns:1fr;gap:28px;padding-top:110px}
  .guideLeadCopy p{margin-top:16px;font-size:15px}
  .guideExample{justify-self:start;max-width:none}
  .guideShot{grid-template-columns:1fr;gap:26px;padding-block:44px 0}
  .guideWalk{padding-block:44px}
  .walkList{gap:52px}
  .pairRow{display:grid;grid-template-columns:1fr;gap:16px}
  .pairRow>.shotPlain{border-radius:3.3%}
  .guideScope{grid-template-columns:1fr;gap:26px;padding-block:40px}
  .guideExample figcaption,.walkShot figcaption{font-size:12px}
  .guideNote{display:block}
  .guideNote a{display:inline-block;margin-top:14px}
}
@media(prefers-reduced-motion:reduce){.guidePage{scroll-behavior:auto}}