/* Shared by every cancel guides page: colors, spacing, type, header, footer, buttons and the final call to action. */

:root {
  --bg: #f5f5f7;
  --card: #ffffff;
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --ink-3: #8e8e93;
  --line: #e2e2e7;
  --red: #e0281b;
  --green: #1e9e4a;
  --blue: #0a84ff;
  --radius: 22px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --section: 88px;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --lift: 0 1px 0 rgba(0,0,0,.04), 0 2px 10px rgba(0,0,0,.05);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.55 -apple-system, "system-ui", "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
header.top { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", system-ui, sans-serif; font-synthesis: none; }
header.top .wrap { display: flex; align-items: center; gap: 32px; min-height: 80px; width: min(1120px, calc(100% - 64px)); max-width: none; padding: 0; }
.logo { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 26px; letter-spacing: -0.05em; text-decoration: none; }
header.top nav { margin-left: auto; display: flex; gap: 32px; font-size: 15px; font-weight: 500; line-height: 1.47; }
header.top nav a { text-decoration: none; padding: 12px 0; }
header.top nav a[aria-current="page"] { color: var(--ink-2); }
header.top .btn { min-height: 40px; padding: 10px 18px; line-height: 20px; border: 0; color: #f5f5f7; }
header.top .btn:hover { background: #2c2c2e; }
.btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 12px var(--s5); font-size: 15px; font-weight: 500; text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; }
.crumbs { font-size: 13px; color: var(--ink-2); }
.crumbs a { text-decoration: none; display: inline-block; padding: var(--s1) 0; }
.crumbs a:hover { text-decoration: underline; }
/* Hero */
.hero { text-align: center; padding: var(--s6) 0; }
h1 { font-size: clamp(32px, 4.2vw, 52px); line-height: 1.05; letter-spacing: -0.045em; margin: var(--s4) 0 var(--s3); font-weight: 700; }
.lede { font-size: 17px; color: var(--ink-2); margin: 0 auto; max-width: 60ch; }
section.block { padding: var(--section) 0 0; }
h2.sec { font-size: clamp(26px, 3.2vw, 36px); letter-spacing: -0.035em; line-height: 1.1; margin: 0 0 var(--s2); font-weight: 700; }
.sec-lede { color: var(--ink-2); margin: 0 0 var(--s6); max-width: 60ch; }
.final { margin: var(--section) 0 0; background: var(--ink); color: #fff; border-radius: 28px; padding: var(--s7) var(--s8); display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.final h2 { margin: 0 0 var(--s2); font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -0.04em; line-height: 1.05; }
.final h2 .t { color: #ff6b5f; }
.final p { margin: 0; color: #c7c7cc; font-size: 18px; }
.final .btn { background: #fff; color: var(--ink); justify-self: start; }
footer { padding: var(--s7) 0 var(--s8); color: var(--ink-2); font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s5); justify-content: space-between; }
footer a { text-decoration: none; display: inline-block; padding: var(--s1) 0; }
footer nav { display: flex; gap: var(--s5); }
@media (max-width: 900px) {
  :root { --section: 64px; }
}
@media (min-width: 768px) and (max-width: 899px) {
  header.top .wrap, header.top nav { gap: 16px; }
}
@media (max-width: 767px) {
  header.top .wrap { min-height: 64px; gap: 16px; width: calc(100% - 40px); }
  header.top nav a:not(:last-child) { display: none; }
  .logo { font-size: 22px; }
  header.top .btn { min-height: 36px; padding: 8px 14px; font-size: 14px; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 16px; }
  .hero { padding: var(--s5) 0 var(--s6); }
  .final { padding: var(--s6) var(--s5); }
}