/* Buyer guides (use case, cost, roundup): an open reading layout on top of pages.css.
   Wide container, generous section spacing, one idea per block; stacks to one column on phones. */
body{font-size:18px;line-height:1.7}
.g{max-width:1080px;margin-inline:auto;padding-inline:var(--gutter)}
.g-hero{padding-block:clamp(44px,7vw,88px) clamp(28px,4vw,48px);display:grid;gap:20px;max-width:820px}
.g-hero h1{font-size:clamp(32px,4.8vw,54px);line-height:1.1}
.g-hero .lede{font-size:clamp(18px,1.8vw,21px);line-height:1.65;color:var(--ink-2);max-width:60ch}
.g-hero .meta{font-size:15px;color:var(--ink-3)}
.g-sec{padding-block:clamp(44px,6vw,72px);border-top:1px solid var(--line);display:grid;gap:clamp(22px,3vw,32px);scroll-margin-top:60px}
.g-head{display:grid;gap:12px;max-width:700px}
.g-head h2{font-size:clamp(26px,3.2vw,38px);line-height:1.15}
.g-head p{font-size:clamp(17px,1.5vw,19px);color:var(--ink-2)}
.g p{color:var(--ink-2)}
.g strong{color:var(--ink);font-weight:600}
.g a{text-underline-offset:3px}

/* cards */
.g-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:16px}
.g-card{background:var(--card);border-radius:18px;box-shadow:var(--shadow);padding:clamp(20px,2.4vw,28px);display:grid;gap:10px;align-content:start;min-width:0}
.g-card h3{font-size:clamp(19px,1.8vw,22px);line-height:1.25}
.g-card p{font-size:16.5px;line-height:1.6}
.g-card.hl{box-shadow:inset 0 0 0 2px var(--blue),var(--shadow)}
.g-card.hl h3{color:var(--blue)}
.g-list{list-style:none;display:grid;gap:9px;margin:0;padding:0}
.g-list li{position:relative;padding-left:22px;font-size:16.5px;line-height:1.55;color:var(--ink-2)}
.g-list li::before{content:"";position:absolute;left:2px;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--blue)}
.g-list.muted li::before{background:var(--sand)}
.g-kicker{font:700 12.5px/1.2 var(--f-ui);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.g-kicker.blue{color:var(--blue)}
@media (prefers-color-scheme:dark){.g-kicker.blue,.g-card.hl h3{color:#9DB2FF}}

/* callout and notes */
.g-callout{background:var(--card);border-left:5px solid var(--blue);border-radius:6px 18px 18px 6px;box-shadow:var(--shadow);padding:clamp(22px,3vw,32px);display:grid;gap:12px;max-width:820px}
.g-callout p{font-size:clamp(17px,1.6vw,19px);line-height:1.65;color:var(--ink)}
.g-callout b{color:var(--ink)}
.note{font-size:14.5px;line-height:1.6;color:var(--ink-3);max-width:75ch}
.later{display:inline-block;margin-left:4px;font:700 10.5px/1 var(--f-ui);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--line);border-radius:5px;padding:3px 5px;vertical-align:2px;white-space:nowrap}
.tag-ours{display:inline-block;margin-left:8px;font:700 11px/1 var(--f-ui);letter-spacing:.05em;text-transform:uppercase;color:var(--blue);border:1.5px solid currentColor;border-radius:6px;padding:4px 6px;vertical-align:3px}
@media (prefers-color-scheme:dark){.tag-ours{color:#9DB2FF}}
.price-chip{display:inline-block;font:700 14px/1.2 var(--f-ui);color:var(--ink);background:var(--paper-2);border-radius:8px;padding:6px 10px;font-variant-numeric:tabular-nums}

/* numbered steps with a screen beside them */
.g-steps{list-style:none;counter-reset:st;display:grid;gap:clamp(28px,4vw,44px);margin:0;padding:0}
.g-step{counter-increment:st;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,260px);gap:clamp(20px,4vw,56px);align-items:center}
.g-step.wide{grid-template-columns:minmax(0,1fr) minmax(0,520px)}
.g-step .tx{display:grid;gap:10px}
.g-step .tx::before{content:counter(st);width:40px;height:40px;border-radius:12px;background:var(--blue);color:#fff;display:grid;place-items:center;font:700 17px/1 var(--f-ui)}
.g-step h3{font-size:clamp(21px,2.2vw,26px);line-height:1.2}
.g-step p{font-size:17px}
.g-step figure{margin:0;display:grid;gap:8px;justify-items:center}
.g-step img{display:block;width:100%;height:auto;border-radius:22px;border:1px solid var(--line);background:var(--paper);box-shadow:var(--shadow)}
.g-step.wide img{border-radius:12px}
.g-step figcaption{font-size:13.5px;color:var(--ink-3);text-align:center}
@media (max-width:760px){
  .g-step,.g-step.wide{grid-template-columns:1fr}
  .g-step figure{max-width:250px;margin-inline:auto}
  .g-step.wide figure{max-width:none}
}

/* simple numbered list */
.g-num{list-style:none;counter-reset:n;display:grid;gap:14px;margin:0;padding:0;max-width:760px}
.g-num li{counter-increment:n;position:relative;padding:18px 20px 18px 66px;background:var(--card);border-radius:16px;box-shadow:var(--shadow);font-size:16.5px;line-height:1.6;color:var(--ink-2)}
.g-num li::before{content:counter(n);position:absolute;left:20px;top:17px;width:30px;height:30px;border-radius:9px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;font:700 14px/1 var(--f-ui)}
@media (prefers-color-scheme:dark){.g-num li::before{color:#DCE4FF}}
.g-num b{color:var(--ink)}

/* faq, sources, related, end */
.g .faq{max-width:820px}
.srcs{list-style:none;display:grid;gap:8px;font-size:15px;margin:0;padding:0}
.g .related{max-width:none}
.g-end{display:grid;gap:14px;justify-items:start;background:var(--card);border-radius:22px;box-shadow:var(--shadow);padding:clamp(24px,4vw,40px)}
.g-end h2{font-size:clamp(24px,2.8vw,32px)}
.g-end .go{display:inline-flex;align-items:center;height:52px;padding:0 24px;border-radius:12px;background:var(--blue);color:#fff;font:700 16px/1 var(--f-ui);text-decoration:none}
.g-end .go:hover{background:var(--blue-2)}
.g-end small{font-size:14.5px;color:var(--ink-3)}
.g-foot{padding-block:0 clamp(56px,7vw,88px);display:grid;gap:clamp(28px,4vw,40px)}
.strip-in{max-width:calc(1080px + 2*var(--gutter))}
.g-cards.four{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.g-step{grid-template-columns:minmax(0,1fr) minmax(0,230px)}
@media (max-width:760px){.g-step figure{max-width:200px}}