/* Editing styles guide additions to /guides/_shared/guide.css. */
html { scroll-padding-block-start: 100px; }
h1, h2, h3, h4, p, li, label { overflow-wrap: anywhere; }
h1, h2, h3, h4, summary { text-wrap: balance; }
p, li, label, figcaption { text-wrap: pretty; }
bdi { white-space: nowrap; }

.styles-hero { align-items: center; gap: clamp(28px, 5vw, 72px); }
.styles-hero h1 { font-size: clamp(36px, 4.4vw, 58px); }
@media (min-width: 651px) { .styles-hero { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.frame-pair { margin: 0; justify-self: center; max-inline-size: 420px; }
.frame-pair img, .step-shot img { display: block; inline-size: 100%; block-size: auto; border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 16px 40px var(--shade); }
.frame-pair figcaption, .step-shot figcaption { margin-block-start: 10px; font-size: 16px; }

.benefit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-block: 32px 8px; }
.benefit-grid article { border-block-start: 2px solid var(--line); padding-block-start: 20px; }
.feature-number { font: 700 15px Rubik, sans-serif; color: var(--color-primary); }
.benefit-grid h3 { margin-block: 14px 12px; font-size: 23px; }
.benefit-grid p { font-size: 19px; }

.guide-section { padding-block: 72px; }
.section-lead { max-inline-size: 72ch; font-size: 20px; margin-block-start: 16px; }
.need-list { margin-block: 20px 0; padding-inline-start: 22px; display: grid; gap: 12px; max-inline-size: 72ch; font-size: 19px; }
.need-list li::marker { color: var(--color-primary); }

.steps-band, .testers-band { background: var(--color-bg-alt); padding-block: 72px; }
.purchase-steps { list-style: none; padding: 0; margin-block: 24px 0; }
.purchase-steps > li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 26px; padding-block: 30px; border-block-end: 1px solid var(--line); }
.step-index { font: 700 25px/1.5 Rubik, sans-serif; color: var(--color-primary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.purchase-steps h3 { margin-block: 0 12px; font-size: 26px; }
.purchase-steps p { max-inline-size: 72ch; }
.purchase-steps p + p { margin-block-start: 14px; }
.purchase-steps .prompt-code { margin-block: 16px; max-inline-size: 820px; }
.purchase-steps .tip { max-inline-size: 72ch; }
.prompt-code pre { font-size: 17px; line-height: 1.75; white-space: pre-wrap; }
.step-shot { margin: 18px 0 0; max-inline-size: 260px; }
.step-shot-wide { max-inline-size: 420px; }
.prep-list { list-style: decimal; margin-block: 12px 16px; padding-inline-start: 26px; display: grid; gap: 8px; max-inline-size: 72ch; }
.prep-list li::marker { color: var(--color-primary); font-weight: 700; }
.purchase-steps code { font-family: ui-monospace, Consolas, monospace; font-size: .9em; padding-inline: 4px; border-radius: 4px; background: var(--color-bg); unicode-bidi: isolate; }

.work-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-block-start: 36px; padding: 28px; border-radius: 18px; background: color-mix(in srgb, var(--color-primary) 9%, var(--color-bg)); }
.work-cta p { font: 700 clamp(20px, 2.2vw, 25px)/1.45 Rubik, Arial, sans-serif; max-inline-size: 46ch; }

.testers-band { background: color-mix(in srgb, var(--color-primary) 9%, var(--color-bg)); }
.testers { max-inline-size: 860px; }
.testers .button { margin-block-start: 26px; }
.testers .small-note { margin-block-start: 12px; }

@media (max-width: 650px) {
  .benefit-grid { grid-template-columns: 1fr; gap: 20px; }
  .purchase-steps > li { grid-template-columns: 1fr; gap: 8px; }
  .guide-section, .steps-band, .testers-band { padding-block: 52px; }
  .step-shot { max-inline-size: 200px; }
  .step-shot-wide { max-inline-size: 100%; }
  .work-cta { padding: 22px 18px; }
}
.faq { padding-block-start: 64px; }