/* Targeted support navigation; retain the existing Perko legal-page design. */
h1, h2 { overflow-wrap: anywhere; hyphens: auto; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 2; padding: 12px; background: var(--white); }
.skip:focus { top: 8px; }
:focus-visible { outline: 3px solid #5d3fc6; outline-offset: 4px; }
.topic-links { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.topic-links a { padding: 8px 0; font-weight: 700; }
.help-section { scroll-margin-top: 24px; }
.help-section h2 { margin-top: 46px; }
.help-section details { border-bottom: 1px solid var(--line); }
.help-section summary { cursor: pointer; padding: 18px 4px; font-weight: 700; }
.help-section summary::marker { color: #5d3fc6; }
.answer { padding: 0 4px 6px 24px; overflow-wrap: anywhere; }
.answer ol { padding-left: 22px; margin-top: 0; }
.callout { background: var(--lavender-soft); border-radius: 16px; padding: 18px; }
.callout.step { background: #eaf2ff; color: #153e76; }
.callout.routine { background: #e0f4f1; color: #00595b; }
.status-steps { margin: 0 0 18px; }
.status-steps dt { font-weight: 800; }
.status-steps dd { margin: 0 0 12px; }
.plan-example { margin: 24px 0 18px; padding: 22px; border: 1px solid var(--line); border-radius: 24px; background: var(--white); }
.example-label { color: var(--muted); font-size: 13px; font-weight: 700; }
.example-heading h3 { margin: 4px 0 20px; font-size: 22px; line-height: 1.35; }
.example-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.example-card { min-width: 0; padding: 18px; border-radius: 18px; }
.example-card h4 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; font-size: 17px; line-height: 1.4; }
.example-card h4 span { font-size: 22px; line-height: 1; }
.example-card p { margin: 0 0 12px; }
.example-card p:last-child { margin-bottom: 0; }
.example-once { background: #eaf2ff; color: #153e76; }
.example-repeat { background: #e0f4f1; color: #00595b; }
.example-reward { background: var(--lavender-soft); color: #493080; }
.example-side { display: grid; gap: 14px; }
.example-hint, .example-footnote, .schedule-label { font-size: 14px; line-height: 1.55; }
.assignment-list { padding: 0; margin: 18px 0; list-style: none; }
.assignment-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 0; border-top: 1px solid #cbdcf3; }
.assignment-list li + li { margin-top: 0; }
.assignment-name { font-weight: 700; line-height: 1.5; }
.assignment-tag { flex-shrink: 0; padding: 2px 8px; border-radius: 7px; background: white; font-size: 12px; font-weight: 700; }
.schedule-label { display: inline-block; margin-bottom: 12px; font-weight: 800; }
.plan-example figcaption { margin-top: 16px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.plan-example { overflow-wrap: anywhere; }
.contact { margin-top: 48px; padding-top: 1px; }
.release-note { margin-top: 30px; color: var(--muted); font-size: 14px; }
.button:hover { background: #382c48; color: white; }
.button.secondary:hover { background: var(--lavender-soft); color: var(--ink); }
@media (max-width: 620px) {
  .answer { padding-left: 8px; }
  .topic-links { gap: 4px 20px; }
  .hero .button { padding: 10px 18px; }
  .plan-example { padding: 16px; }
  .example-grid { grid-template-columns: 1fr; }
  .example-card { padding: 16px; }
}