:root {
  --hub-ink: #3d3035;
  --hub-muted: #75696d;
  --hub-pink: #d94d72;
  --hub-pink-soft: #fff3f6;
  --hub-blue: #3f849c;
  --hub-blue-soft: #f2f9fb;
  --hub-line: #eadfe3;
}
* { box-sizing: border-box; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.checklist-hub-page { color: var(--hub-ink); background: #fffdfd; }
.hub-main { width: min(100% - 30px, 880px); margin: 0 auto; padding: 20px 0 16px; }
.checklist-hub-page .site-footer { margin-top: 16px; }
.hub-breadcrumb { margin: 0 0 25px; display: flex; flex-wrap: wrap; gap: 8px; color: var(--hub-muted); font-size: .8rem; }
.hub-breadcrumb a { color: #536f79; }
.hub-intro { padding: clamp(24px, 5vw, 43px) clamp(18px, 5vw, 42px); border: 1px solid var(--hub-line); border-radius: 26px; background: linear-gradient(145deg, #fff, var(--hub-pink-soft)); box-shadow: 0 14px 38px rgba(72, 48, 58, .07); }
.hub-kicker { margin: 0 0 9px; color: var(--hub-pink); font-size: .8rem; font-weight: 900; letter-spacing: .08em; }
.hub-intro h1 { max-width: 720px; margin: 0; font-size: clamp(2rem, 6vw, 3.65rem); line-height: 1.2; letter-spacing: -.035em; }
.hub-subtitle { max-width: 640px; margin: 16px 0 0; color: #65595e; font-size: clamp(1rem, 2.2vw, 1.15rem); line-height: 1.8; }
.hub-progress-panel { margin-top: 24px; padding: 15px 17px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid #e5d8dd; border-radius: 17px; background: rgba(255,255,255,.86); }
.hub-progress-panel > div { display: grid; gap: 3px; }
.hub-progress-panel span { color: var(--hub-muted); font-size: .75rem; font-weight: 800; }
.hub-progress-panel output { color: var(--hub-pink); font-size: 1.05rem; font-weight: 900; }
.hub-progress-panel button { min-height: 44px; padding: 9px 13px; border: 1px solid #d8c9ce; border-radius: 12px; background: #fff; color: #6a555d; font: inherit; font-size: .82rem; font-weight: 800; cursor: pointer; }
.hub-progress-panel button:focus-visible, .hub-detail-link:focus-visible, .hub-check-control input:focus-visible + label { outline: 3px solid #e99ab0; outline-offset: 3px; }
.hub-next-copy { margin: 16px 0 0; font-weight: 900; }
.hub-storage-note { margin: 5px 0 0; color: var(--hub-muted); font-size: .78rem; }
.hub-stages { margin-top: 29px; display: grid; gap: 21px; }
.hub-stage { overflow: hidden; border: 1px solid var(--hub-line); border-radius: 22px; background: #fff; box-shadow: 0 8px 24px rgba(64, 45, 53, .04); }
.hub-stage-heading { min-height: 61px; padding: 14px 19px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid var(--hub-line); background: var(--hub-blue-soft); }
.hub-stage-heading > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 999px; background: #fff; color: var(--hub-blue); font-size: 1.05rem; }
.hub-stage-heading h2 { margin: 0; font-size: 1.15rem; }
.hub-topic-list { padding: 0 18px; }
.hub-topic { padding: 19px 0; display: grid; grid-template-columns: minmax(104px, auto) 1fr; align-items: start; gap: 17px; }
.hub-topic + .hub-topic { border-top: 1px solid #f0e8eb; }
.hub-check-control { min-height: 46px; display: flex; align-items: center; }
.hub-check-control input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hub-check-control label { min-height: 44px; min-width: 102px; padding: 8px 12px 8px 39px; position: relative; display: inline-flex; align-items: center; border: 1px solid #dccfd4; border-radius: 13px; color: #6c5960; font-size: .8rem; font-weight: 900; cursor: pointer; user-select: none; }
.hub-check-control label::before { content: ""; position: absolute; left: 11px; width: 19px; height: 19px; border: 2px solid #bdaeb4; border-radius: 6px; background: #fff; }
.hub-check-control input:checked + label { border-color: #8bc7b0; background: #f1faf6; color: #37745c; }
.hub-check-control input:checked + label::before { border-color: #4a9b79; background: #4a9b79; }
.hub-check-control input:checked + label::after { content: ""; position: absolute; left: 17px; top: 15px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.hub-topic-copy { min-width: 0; }
.hub-topic-copy h3 { margin: 0; font-size: 1.08rem; }
.hub-topic-copy p { margin: 7px 0 0; color: var(--hub-muted); font-size: .9rem; line-height: 1.7; }
.hub-detail-actions { margin-top: 11px; display: flex; flex-wrap: wrap; gap: 8px; }
.hub-detail-link, .hub-detail-pending { min-height: 44px; padding: 9px 12px; display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; border-radius: 12px; font-size: .82rem; font-weight: 900; }
.hub-detail-link { border: 1px solid #bcd9e3; background: #f5fbfd; color: #2d6e85; text-decoration: none; }
.hub-detail-link:hover { background: #eaf6fa; }
.hub-detail-pending { border: 1px dashed #ded3d7; color: #756a6e; background: #faf8f9; }
.hub-detail-pending small { font-size: .68rem; font-weight: 800; }
.hub-closing { margin-top: 24px; padding: 17px 19px; border-left: 4px solid #8abcca; border-radius: 0 14px 14px 0; background: var(--hub-blue-soft); }
.hub-closing p { margin: 0; color: #53666d; font-size: .85rem; line-height: 1.75; }
@media (max-width: 560px) {
  .hub-main { width: min(100% - 24px, 880px); padding-top: 16px; }
  .hub-intro { padding: 23px 17px; border-radius: 21px; }
  .hub-intro h1 { font-size: clamp(2rem, 10vw, 2.75rem); }
  .hub-progress-panel { align-items: stretch; flex-direction: column; }
  .hub-progress-panel button { width: 100%; }
  .hub-stage { border-radius: 18px; }
  .hub-stage-heading { padding-inline: 15px; }
  .hub-topic-list { padding-inline: 15px; }
  .hub-topic { grid-template-columns: 1fr; gap: 8px; }
  .hub-check-control label { width: 100%; }
  .hub-detail-actions { display: grid; grid-template-columns: 1fr; }
  .hub-detail-link, .hub-detail-pending { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .checklist-hub-page * { scroll-behavior: auto !important; transition: none !important; } }