/* Content-only styles; shared navigation and footer use the homepage styles. */
.info-hero, .info-layout, .info-hero *, .info-layout * { box-sizing: border-box; }
.info-layout a:focus-visible, .info-hero a:focus-visible { outline: 3px solid var(--site-blue, #00a6ea); outline-offset: 4px; }
.info-skip { position: absolute; z-index: 100; top: -80px; left: 16px; padding: 10px; background: #fff; color: #123047; }
.info-skip:focus { top: 8px; }
.info-hero { color: #fff; background: linear-gradient(115deg, #123047 0%, #125a80 75%, #00a6ea 150%); }
.info-hero-inner { width: min(1120px, calc(100% - 40px)); margin: auto; padding: 44px 0 52px; display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 36px; align-items: center; }
.info-hero h1 { max-width: 880px; margin: 18px 0; font-size: clamp(28px, 3.3vw, 42px); line-height: 1.5; font-weight: 700; }
.info-hero p { max-width: 740px; margin: 0; font-size: 18px; color: #e2f3ff; }
.info-crumb { margin: 0 0 20px; font-size: 14px; line-height: 1.7; color: var(--site-muted, #5c6470); }
.info-crumb a { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.info-crumb span { margin: 0 8px; }
.info-hero-icon { width: 152px; height: 152px; padding: 32px; border: 1px solid #6db8db; border-radius: 24px; background: rgba(202,236,255,.08); color: var(--site-blue-soft, #caecff); }
.info-icon { width: 28px; height: 28px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.info-hero-icon .info-icon { width: 100%; height: 100%; }
.info-layout { width: min(960px, calc(100% - 40px)); margin: auto; padding: 44px 0 64px; }
.info-content { min-width: 0; color: var(--site-text, #333); font-size: 17px; line-height: 1.85; letter-spacing: 0; }
.info-content a { color: #006faf; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.info-content .info-intro { margin: 0 0 32px; color: #465463; font-size: 18px; }
.info-section { padding: 28px 0; border-top: 1px solid #dae8ef; scroll-margin-top: 24px; }
.info-section h2 { margin: 0 0 18px; color: #123047; font-size: clamp(23px, 2.3vw, 28px); line-height: 1.6; font-weight: 700; }
.info-section h3 { margin: 0 0 10px; color: #125a80; font-size: 20px; line-height: 1.6; }
.info-section p { margin: 0 0 14px; }
.info-section ul, .info-section ol { margin: 10px 0 18px; padding-left: 24px; }
.info-section ul > li { list-style: disc; }
.info-section ol > li { list-style: decimal; }
.info-section li { margin: 6px 0; }
.info-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 18px 0; }
.info-card { padding: 22px; border: 1px solid var(--site-blue-soft, #caecff); border-radius: 8px; background: #f4fbff; }
.info-card p:last-child { margin-bottom: 0; }
.info-card .info-icon { margin-bottom: 12px; color: #0076aa; }
.info-notice { padding: 20px 24px; margin: 20px 0; border-left: 4px solid #c29a3b; border-radius: 0 8px 8px 0; background: #fff9e9; }
.info-notice p:last-child { margin: 0; }
.info-notice.info-debt-reminder { color: #943b24; border-left-color: #c65c36; background: #fff2eb; }
.info-formula { padding: 22px 24px; margin: 20px 0; border-left: 4px solid var(--site-blue, #00a6ea); border-radius: 0 8px 8px 0; background: #f4fbff; color: #123047; font-size: 21px; font-weight: 700; }
.info-source { font-size: 14px; color: var(--site-muted, #5c6470); }
.info-contact { margin: 0; }
.info-contact > div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid #dae8ef; }
.info-contact dt { color: #315b72; font-weight: 600; }
.info-contact dd { margin: 0; }
.info-related { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 20px 0; }
.info-updated { color: var(--site-muted, #5c6470); font-size: 14px; }
.info-back-top { display: inline-block; margin-top: 16px; }

@media (max-width: 820px) {
  .info-layout { padding-top: 24px; }
}
@media (max-width: 768px) {
  .info-hero-inner { position: relative; grid-template-columns: 1fr; gap: 0; padding: 28px 0 36px; }
  .info-hero-icon { position: absolute; top: 24px; right: 0; width: 44px; height: 44px; padding: 9px; border-radius: 10px; }
  .info-hero h1 { font-size: 28px; }
  .info-hero p { font-size: 17px; }
  .info-cards { grid-template-columns: 1fr; }
  .info-section { padding: 24px 0; }
  .info-formula { font-size: 19px; padding: 18px; }
  .info-contact > div { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .info-hero *, .info-layout *, .info-hero *::before, .info-layout *::before, .info-hero *::after, .info-layout *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}