*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: #EEF4F8; }
a { color: inherit; }

.page { min-height: 100vh; background: #EEF4F8; color: #0C2231; font-family: Onest, system-ui, sans-serif; }
.wrap { max-width: 860px; margin: 0 auto; padding: 32px 20px 56px; display: flex; flex-direction: column; gap: 28px; }

.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { height: 72px; width: auto; display: block; }

.intro { display: flex; flex-direction: column; gap: 10px; padding: 20px 6px 4px; }
.intro h1 { margin: 0; font-size: clamp(36px, 5.6vw, 54px); line-height: 1.05; font-weight: 700; letter-spacing: -0.035em; }
.intro p { margin: 0; font-size: 17px; color: #4A6270; }

.blocks { display: flex; flex-direction: column; gap: 28px; }
.block { display: flex; flex-direction: column; gap: 10px; }
.card { background: #FFFFFF; border-radius: 22px; overflow: hidden; box-shadow: 0 1px 2px rgba(12,34,49,.05), 0 18px 40px -28px rgba(12,34,49,.35); }
.item + .item { border-top: 1px solid #E7EEF3; }

.rw { width: 100%; display: grid; grid-template-columns: 48px minmax(0,1fr) auto 24px; gap: 16px; align-items: center; padding: 18px 22px; border: 0; background: transparent; font-family: inherit; color: inherit; text-align: left; cursor: pointer; }
.rw:hover { background: #F7FAFC; }
.tile { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: #E3F6FB; color: #0B7E9E; }
.nm { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nm-t { font-size: 17px; font-weight: 600; }
.nm-b { font-size: 13.5px; color: #54707F; }
.pr { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.pr-f { font-size: 12px; color: #54707F; }
.amt { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.chev { transition: transform .18s; }
.chev-on { transform: rotate(180deg); }

.panel { padding: 6px 22px 26px; display: flex; flex-direction: column; gap: 22px; }
.panel[hidden] { display: none; }
.blurb { margin: 0; font-size: 15px; line-height: 1.55; color: #4A6270; }
.sub { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 24px 32px; }
.sec { display: flex; flex-direction: column; gap: 9px; }
.sec h3 { margin: 0; font-size: 14px; font-weight: 600; }
.lst { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; font-size: 14px; line-height: 1.35; color: #31424F; }
.lst li { display: flex; gap: 8px; overflow-wrap: anywhere; }
.lst svg { flex: none; margin-top: 2px; }
.miss { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: 14px; background: #FFF3EE; border: 1px solid #FBD5C7; }
.miss-t { margin: 0; font-size: 14px; font-weight: 600; color: #9A3412; }
.miss-lst { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 7px 32px; color: #5C2A16; }

.go { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 12px; background: #0C2231; color: #FFFFFF; font-weight: 600; font-size: 15px; text-decoration: none; }
.go:hover { background: #0B7E9E; }
.go-light, .go-light:hover { background: #FFFFFF; color: #0C2231; min-height: 44px; }
.cap { margin: 0; font-size: 13px; font-weight: 600; color: #54707F; padding: 0 6px; }

.foot { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; font-size: 14px; color: #4A6270; padding: 0 6px; }

@media (max-width: 560px) {
  .rw { grid-template-columns: 40px minmax(0,1fr) auto; gap: 12px; padding: 16px; }
  .tile { width: 40px; height: 40px; border-radius: 12px; }
  .chev { display: none; }
  .amt { font-size: 24px; }
}