/* "How to cancel X" pages: reading pages in the same park as the home page. Loaded after site.css. */
.guide-head { padding-bottom: 72px; }
.guide-title { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; padding: 28px 24px 8px; }
.guide-title h1 { font-size: clamp(34px, 5.2vw, 56px); }
.guide-title .lede { font-size: 20px; max-width: 52ch; }
.dot { display: inline-block; width: 18px; height: 18px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.55); }
.guide-title h1 .dot { width: 0.42em; height: 0.42em; margin-right: 0.3em; vertical-align: 0.06em; box-shadow: inset 0 0 0 0.1em rgba(255, 255, 255, 0.55); }

.guide { max-width: 800px; display: grid; gap: 28px; padding-top: 52px; padding-bottom: 8px; }
.guide h2 { font-size: clamp(24px, 3vw, 32px); margin: 0 0 12px; }
.guide .stone h2 { color: var(--ink); font-size: clamp(21px, 2.4vw, 26px); }
.guide p { margin: 0 0 12px; text-wrap: pretty; }
.guide .stone p, .guide .stone li { color: var(--ink); }
.guide a { text-underline-offset: 3px; }
.guide a.btn { text-decoration: none; }

/* numbered steps: big lawn numerals, one per line */
.steps { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 12px; counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: center; background: var(--stone); color: var(--ink); border-radius: var(--r-stone); padding: 16px 20px 16px 16px; box-shadow: var(--shadow-stone); font-size: 18px; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--lawn); color: var(--lawn-ink); font-family: var(--display); font-weight: 800; font-size: 24px; }
.steps-note { color: var(--lawn-ink-2); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }

.plain { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.tip { background: var(--marigold); color: var(--marigold-ink); box-shadow: var(--shadow-stone); }
.guide .tip h2, .guide .tip p { color: var(--marigold-ink); }
.tip p { margin: 0; }

.cta-card { display: grid; gap: 16px; background: var(--ink); color: var(--stone); padding: 28px; border-radius: var(--r-band); }
.guide .cta-card h2, .guide .cta-card p { color: var(--stone); }
.guide .cta-card .caption { color: color-mix(in srgb, var(--stone) 72%, transparent); }
.cta-card p { margin: 0; max-width: 56ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-card .btn-ink { background: var(--lawn); color: var(--lawn-ink); }
.cta-card .btn-ghost { background: color-mix(in srgb, var(--stone) 16%, transparent); color: var(--stone); }

.faq { display: grid; gap: 10px; }
.faq h2 { margin-bottom: 6px; }
.faq details { padding: 0; }
.faq summary { cursor: pointer; padding: 16px 18px; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 22px; line-height: 1; color: var(--ink-2); }
.faq details[open] summary::after { content: '\2212'; }
.faq details p { padding: 0 18px 16px; margin: 0; color: var(--ink-2); }

.more-links { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.4); color: var(--lawn-ink); font-weight: 700; text-decoration: none; transition: transform 200ms var(--ease-out), background 200ms var(--ease-out); }
.chip-link:hover { background: rgba(255, 255, 255, 0.65); transform: translateY(-2px); }
.chip-link .dot { width: 12px; height: 12px; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.55); }

.guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.guide-card { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; align-items: start; text-decoration: none; overflow-wrap: anywhere; color: var(--ink); transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out); }
.guide-card .dot { margin-top: 5px; }
.guide-card strong { display: block; font-family: var(--display); font-size: 20px; letter-spacing: -0.01em; }
.guide-card .caption { display: block; margin-top: 4px; }
@media (hover: hover) { .guide-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-float); } }
@media (max-width: 640px) { .guide-grid { grid-template-columns: minmax(0, 1fr); } .steps li { grid-template-columns: 40px 1fr; font-size: 17px; } .steps li::before { width: 40px; height: 40px; font-size: 20px; } .cta-card { padding: 22px; } }

@media (prefers-reduced-motion: no-preference) {
  .guide-title > * { animation: rise 520ms var(--ease-out) both; }
  .guide-title > :nth-child(2) { animation-delay: 70ms; }
  .guide-title > :nth-child(3) { animation-delay: 130ms; }
  .steps li { animation: rise 520ms var(--ease-out) both; }
  .steps li:nth-child(2) { animation-delay: 80ms; }
  .steps li:nth-child(3) { animation-delay: 160ms; }
}

.group-title { margin: 28px 0 12px; font-size: clamp(22px, 2.6vw, 28px); }
.group-title:first-child { margin-top: 0; }
.guide-grid + .group-title { margin-top: 36px; }

.guide-title .lede, .guide p, .steps li span, .plain li, .faq details p { overflow-wrap: anywhere; }