/* Cheapfax — how-to guides (/guides/*). Layered over home.css, which carries
   the tokens, fonts, top bar, .fphone bezel, .qa, .ctaband and footer.
   Monochrome like the homepage: the only fills are ink and #F4F4F4. */

.guide{max-width:820px;margin:0 auto;padding:0 var(--pad)}

/* ---------- header ---------- */
.ghead{padding:clamp(2rem,5vw,3.4rem) 0 clamp(1.6rem,4vw,2.4rem);border-bottom:1px solid var(--line)}
.ghead h1{font-weight:800;letter-spacing:-.045em;line-height:.98;font-size:clamp(2rem,5vw,3.2rem)}
.ghead .lede{margin-top:1.2rem}

/* ---------- body copy ---------- */
.gsec{padding:clamp(2.2rem,5vw,3.2rem) 0;border-bottom:1px solid var(--line)}
.gsec:last-child{border-bottom:0}
.gsec.faq{border-top:0}
.gsec.faq .qa:last-of-type{border-bottom:0}
.gsec h2{font-size:clamp(1.35rem,3vw,1.9rem);font-weight:700;letter-spacing:-.03em;line-height:1.1;margin-bottom:1.1rem}
.gsec h3{font-size:1.1rem;font-weight:700;letter-spacing:-.02em;margin:1.6rem 0 .5rem}
.gsec p{color:#333;font-size:1.02rem;margin-bottom:1rem}
.gsec p:last-child{margin-bottom:0}
.gsec a{border-bottom:1px solid var(--line)}
.gsec a:hover{border-bottom-color:var(--ink)}
.gsec ul{margin:0 0 1rem 1.2rem;color:#333;font-size:1.02rem}
.gsec li{margin-bottom:.45rem}
.gsec b{color:var(--ink);font-weight:600}

/* Numbered steps. The counter runs across every .gsteps list on the page. */
.gsteps{list-style:none;counter-reset:gstep;margin:0 0 1rem}
.gsteps li{counter-increment:gstep;position:relative;padding:0 0 0 2.6rem;margin-bottom:1rem;color:#333;font-size:1.02rem}
.gsteps li::before{content:counter(gstep);position:absolute;left:0;top:.05rem;width:1.7rem;height:1.7rem;border-radius:50%;border:1.5px solid var(--ink);font-family:var(--mono);font-size:.78rem;font-weight:600;display:grid;place-items:center;color:var(--ink)}

/* ---------- annotated screenshot ---------- */
.shot{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:clamp(1.8rem,5vw,3.5rem);align-items:center;margin:2rem 0 1.4rem}
.shot .fphone{margin:0 auto;max-width:280px}
.shot .fscreen{position:relative}
.shot figcaption{font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;color:var(--muted);margin-bottom:1.1rem}

/* Marker and outline, placed in % of the screenshot so they track the image
   at any rendered size. aria-hidden: the .notes list carries the text. */
.mk{position:absolute;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;font-family:var(--mono);font-size:.74rem;font-weight:600;line-height:1;display:grid;place-items:center;box-shadow:0 0 0 3px #fff,0 6px 14px -4px rgba(0,0,0,.5);z-index:2}
.hl{position:absolute;border:2px solid var(--ink);border-radius:14px;box-shadow:0 0 0 2px #fff;pointer-events:none}

.notes{list-style:none;display:flex;flex-direction:column;gap:1.1rem}
.notes li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:.9rem;align-items:start}
.notes .n{width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;font-family:var(--mono);font-size:.74rem;font-weight:600;display:grid;place-items:center}
.notes .t{font-weight:600;letter-spacing:-.01em;color:var(--ink);line-height:1.3;padding-top:.15rem}
.notes .d{color:#555;font-size:.95rem;margin-top:.2rem}

@media(max-width:720px){
  .shot{grid-template-columns:1fr}
  .shot .fphone{max-width:236px}
}

/* ---------- related guides ---------- */
.gnav{display:flex;gap:1.2rem;flex-wrap:wrap;font-size:.95rem}
.gnav a{border-bottom:1px solid var(--line);padding-bottom:2px}
.gnav a:hover{border-bottom-color:var(--ink)}