body { background: #F4F6FA; }
.owrap { max-width: 960px; margin: 0 auto; padding: 0 16px; }
.ohead { background: var(--brand); color: #fff; padding: calc(28px + env(safe-area-inset-top)) 0 28px; }
.ohead .owrap { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.ologo { height: 72px; max-width: 160px; object-fit: contain; background: #fff; border-radius: 16px; padding: 8px; }
.ohead h1 { color: #fff; font-size: clamp(26px, 5vw, 38px); margin: 0 0 4px; }
.ohead p { margin: 0; opacity: .85; }
main.owrap { padding-top: 22px; padding-bottom: 40px; }
.ocard { background: #fff; border: 1px solid #DCE3EF; border-radius: 20px; padding: 22px; margin-bottom: 16px; }
.ocard h2 { font-size: 21px; color: var(--brand); }
.ocard p { color: #33456E; margin: 0 0 14px; max-width: 64ch; }
.ogrid { display: grid; gap: 12px; }
@media (min-width: 640px) { .ogrid { grid-template-columns: 1fr 1fr; } }
.obtn { display: block; text-align: left; border: 2px solid #DCE3EF; background: #fff; border-radius: 16px; padding: 16px; cursor: pointer; font: inherit; color: #10214A; text-decoration: none; }
.obtn:hover, .obtn:focus-visible { border-color: var(--brand); }
.obtn b { display: block; font: 700 17px var(--font-display); color: var(--brand); }
.obtn span { display: block; font-size: 13.5px; color: #5B6B8C; margin-top: 2px; }
.obtn.solid { display: inline-block; background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; padding: 14px 22px; }
.obtn:disabled { opacity: .6; }
.oerr { color: #D92D3A; min-height: 1em; margin-top: 10px; }
.ofoot { font-size: 13px; color: #5B6B8C; text-align: center; }

.grow { flex: 1; min-width: 200px; }
.onav { display: flex; gap: 10px; align-items: center; }
.onav a { color: #fff; text-decoration: none; font-weight: 600; padding: 10px 14px; border-radius: 12px; }
.onav a:hover { background: rgba(255,255,255,.12); }
.onav .osign { background: var(--accent); color: #fff; }