@import url("navi/theme.css");

a { color: var(--link-hover); }
a:focus-visible { outline: 3px solid var(--link-hover); outline-offset: 3px; }

body > main.shell {
  width: min(48rem, calc(100% - 24px));
  margin-inline: auto;
  padding-block: 14px 32px;
}

.heading {
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--outline);
}

.heading h1 { margin: 0; font-size: clamp(20px, 4vw, 30px); line-height: 1.2; }
.heading p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.services { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }

.service, .guide section {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 2px solid var(--outline);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
}

.service { text-decoration: none; }
.service:hover { background: var(--surface-soft); }
.service strong { font-size: 16px; }
.service span { color: var(--muted); font-size: 13px; }
.back { display: inline-block; margin-bottom: 12px; font-size: 13px; font-weight: 700; }
.guide section { margin-bottom: 10px; }
.guide h2 { margin: 0; font-size: 16px; }
.guide p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }