.info-page { background: #f6f6f3; color: #29363d; font: 17px/1.65 "Segoe UI", "Open Sans", Arial, sans-serif; }
.info-page * { box-sizing: border-box; }
.info-main, .info-footer { width: min(1120px, 100% - 48px); margin: auto; }
.info-main { padding: 80px 0 64px; }
.info-eyebrow { color: #a71d4b; font-size: 13px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.info-main h1 { max-width: 920px; margin: 12px 0 24px; color: #202a30; font-size: clamp(36px, 5vw, 64px); line-height: 1.12; letter-spacing: -.035em; }
.info-lead { max-width: 760px; margin-bottom: 36px; color: #526169; font-size: 21px; }
.info-main h2 { margin: 0 0 12px; color: #202a30; font-size: 25px; line-height: 1.3; }
.info-main h3 { margin-bottom: 10px; font-size: 20px; line-height: 1.3; }
.info-main p + p { margin-top: 14px; }
.info-main a:not(.info-button), .info-footer a { color: #a71d4b; text-decoration: underline; text-underline-offset: .18em; }
.info-main a:focus-visible, .info-footer a:focus-visible { outline: 3px solid #d0245e; outline-offset: 5px; }
.info-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 24px 0 18px; }
.info-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 20px; border: 1px solid #b8c0c2; border-radius: 4px; background: #fff; color: #29363d; font-weight: 600; }
.info-button:hover { border-color: #a71d4b; color: #a71d4b; }
.info-button-primary { border-color: #a71d4b; background: #a71d4b; color: #fff; }
.info-button-primary:hover { border-color: #7e1638; background: #7e1638; color: #fff; }
.info-panel { padding: clamp(24px, 4vw, 42px); border: 1px solid #d7ddde; border-top: 4px solid #d0245e; border-radius: 6px; background: #fff; }
.info-panel > p { max-width: 790px; }
.info-note { color: #5b6870; font-size: 14px; }
.info-note strong { color: #29363d; }
.info-section { margin-top: 52px; }
.info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 24px; }
.info-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.info-card { padding: 26px; border: 1px solid #d7ddde; border-radius: 6px; background: #fff; }
.info-card p { color: #526169; }
.info-step { display: block; margin-bottom: 18px; color: #a71d4b; font-size: 13px; font-weight: 700; letter-spacing: .1em; }
.info-code { margin: 18px 0; padding: 20px; overflow: auto; border-radius: 4px; background: #17232b; color: #e8eff3; font: 14px/1.7 ui-monospace, SFMono-Regular, Consolas, monospace; }
.info-code code { font: inherit; }
.info-footer { padding: 24px 0 36px; border-top: 1px solid #d7ddde; color: #5b6870; font-size: 14px; }
.info-skip { position: fixed; top: 8px; left: 16px; z-index: 3; padding: 10px 16px; background: #fff; color: #a71d4b; transform: translateY(-150%); }
.info-skip:focus { transform: none; }
@media (max-width: 700px) {
  .info-main, .info-footer { width: calc(100% - 32px); }
  .info-main { padding-top: 76px; }
  .info-lead { font-size: 18px; }
  .info-grid, .info-grid-three { grid-template-columns: 1fr; }
  .info-actions { align-items: stretch; flex-direction: column; }
  .info-button { width: 100%; }
}