:root {
  --brand: #7CCBFA;
  --brand-soft: #BCE7FD;
  --gradient: linear-gradient(90deg, var(--brand), var(--brand-soft));
  --ink: #17324D;
  --muted: #536C80;
  --sheet-width: 540px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: "Segoe UI", Arial, sans-serif;
  color-scheme: light;
  font-size: 100%;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: #F2F8FD; color: var(--ink); font-size: 1rem; line-height: 1.65; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
a { color: #245F8D; text-underline-offset: .18em; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #246B9B; outline-offset: 3px; }
button svg { display: block; width: 1.55rem; height: 1.55rem; }
.skip-link { position: fixed; top: .75rem; left: .75rem; z-index: 80; padding: .6rem 1rem; background: #fff; transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.frame-shell { display: none; position: fixed; inset: 0; z-index: 1; background: #EAF6FE; }
.frame-shell iframe { display: block; width: 100%; height: 100%; border: 0; }
.frame-mode .frame-shell { display: block; }
.js[data-frame-state="loading"] .page-panel { visibility: hidden; }
.page-panel { position: relative; z-index: 10; }
.panel-sheet { position: relative; max-width: 720px; margin: auto; background: #fff; }
.panel-handle, .panel-backdrop, .panel-dismiss, .frame-continue { display: none; }
.panel-scroll { padding: 1.5rem 1.65rem 2rem; overflow-wrap: anywhere; }
.brand-banner { display: block; width: 100%; height: auto; object-fit: contain; margin: 0 0 1.4rem; border-radius: 1rem; background: #EAF6FE; }
.title-wrap { display: flex; align-items: center; justify-content: center; gap: .7rem; margin-bottom: 1.1rem; }
.title-wrap::before, .title-wrap::after { content: ""; flex: none; width: .5rem; height: 1.7rem; border-radius: 999px; background: var(--gradient); transform: rotate(-24deg); }
.title-wrap::after { transform: rotate(24deg); }
h1 { margin: 0; font-size: clamp(1.45rem, 4.8vw, 1.8rem); line-height: 1.45; font-weight: 750; text-align: center; text-wrap: balance; }
#page-title:focus { outline: none; }
h2 { display: flex; align-items: flex-start; gap: .6rem; margin: 2rem 0 .65rem; font-size: 1.22rem; line-height: 1.45; font-weight: 750; }
h2::before { content: ""; flex: none; margin-top: .27rem; width: 4px; height: 1.15rem; border-radius: 2px; background: var(--gradient); }
h3 { font-size: 1.05rem; line-height: 1.5; margin: 1.3rem 0 .55rem; }
p { margin: 0 0 1rem; color: var(--muted); }
.eyebrow { margin: .25rem 0 .5rem; text-align: center; color: #245F8D; font-size: .78rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.lead { margin: 0 0 1.4rem; color: var(--ink); font-weight: 500; }
.quick-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 1.15rem 0 1.8rem; }
.quick-links a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: .55rem .3rem; border: 1px solid #C4E3F5; border-radius: .6rem; background: #F4FAFF; text-align: center; font-size: .875rem; font-weight: 650; line-height: 1.4; text-decoration: none; }
.quick-links a:hover { background: #E1F2FD; }
.help-list { padding: .25rem 1rem; border: 1px solid #DCEAF4; border-radius: .8rem; }
.help-list > div + div { border-top: 1px solid #DCEAF4; }
.help-list h3 { margin-top: .9rem; font-size: 1rem; }
.help-list p { font-size: .96rem; }
section[id] { scroll-margin-top: 1rem; }
.cta { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 3.25rem; padding: .7rem 1.2rem; border: 0; border-radius: 999px; background: var(--gradient); color: var(--ink); text-align: center; text-decoration: none; font-size: 1.0625rem; line-height: 1.5; font-weight: 750; }
.cta:hover { filter: brightness(.97); }
.cta:active, .round-button:active { opacity: .85; }
.cta-outline { background: transparent; border: 1px solid #72BCE7; color: #245F8D; }
ol, ul { padding-left: 1.4rem; margin: 0 0 1rem; color: var(--muted); }
li { padding-left: .15rem; margin-bottom: .55rem; }
li::marker { color: #245F8D; font-weight: 700; }
.note { padding: .85rem 1rem; border-radius: .75rem; background: #EEF8FE; }
.invite { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem; padding: 1rem; margin-bottom: 1rem; border-radius: .75rem; background: #EEF8FE; }
.invite-label { display: block; color: var(--muted); font-size: .875rem; }
.invite-code { font-weight: 750; font-size: 1.2rem; letter-spacing: .04em; }
.copy { min-height: 2.75rem; padding: .5rem .85rem; border: 1px solid #C4E3F5; border-radius: .5rem; background: #fff; color: #245F8D; font-weight: 650; }
.faq-item { margin-top: .7rem; padding: 1rem; border-radius: .8rem; background: #F1F8FD; }
.faq-item h3 { margin: 0 0 .5rem; }
.faq-item p { margin-bottom: 0; }
.faq-item summary { cursor: pointer; color: var(--ink); font-weight: 650; line-height: 1.5; }
.faq-item[open] summary { margin-bottom: .65rem; }
.fallback-note { padding: .9rem 1rem; margin-bottom: 1rem; background: #EEF8FE; border-radius: .75rem; }
.fallback-note p { margin: 0; color: #365A75; }
.noscript-note { padding: .9rem; background: #EEF8FE; border-radius: .75rem; }
.site-footer { margin-top: 1.8rem; padding-top: 1rem; border-top: 1px solid #17324D1A; text-align: center; font-size: .875rem; }
.site-footer p { margin-bottom: .4rem; }
.round-button { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; color: var(--ink); background: var(--brand); box-shadow: 0 3px 20px #2447651F; }
.info-toggle { position: fixed; right: max(1rem, env(safe-area-inset-right, 0px)); bottom: calc(1rem + var(--safe-bottom)); z-index: 20; width: 62px; height: 62px; touch-action: none; user-select: none; transition: transform .25s ease, opacity .2s ease; }
.frame-mode body { height: 100vh; height: 100dvh; overflow: hidden; }
.frame-mode .page-panel { position: fixed; inset: 0; background: transparent; visibility: hidden; pointer-events: none; transition: visibility .24s; }
.frame-mode .page-panel[data-open="true"] { visibility: visible; pointer-events: auto; }
.frame-mode .panel-backdrop { display: block; position: absolute; inset: 0; background: #17324D66; opacity: 0; transition: opacity .22s; }
.frame-mode .page-panel[data-open="true"] .panel-backdrop { opacity: 1; }
.frame-mode .panel-sheet { position: absolute; inset: auto 0 0; display: flex; flex-direction: column; width: min(100%, var(--sheet-width)); max-height: 88vh; max-height: 88dvh; margin-inline: auto; overflow: hidden; border-radius: 28px 28px 0 0; background: #fff; background-image: linear-gradient(#BCE7FD80, #fff0 115px); box-shadow: 0 -8px 32px #24476526; transform: translateY(101%); transition: transform .24s ease; }
.frame-mode .page-panel[data-open="true"] .panel-sheet { transform: translateY(0); }
.frame-mode .panel-handle { display: flex; align-items: center; justify-content: center; flex: none; height: 43px; padding: 0; touch-action: none; cursor: grab; }
.panel-grip { width: 42px; height: 4px; background: #17324D38; border-radius: 999px; }
.frame-mode .panel-scroll { min-height: 0; padding-top: .3rem; padding-bottom: calc(5.5rem + var(--safe-bottom)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.panel-scroll::-webkit-scrollbar { display: none; }
.frame-mode .panel-dismiss { display: flex; position: absolute; right: 1rem; bottom: calc(1rem + var(--safe-bottom)); z-index: 3; }
.frame-mode .frame-continue { display: block; margin-top: 1.5rem; }
.frame-mode body[data-panel="open"] .info-toggle { opacity: 0; visibility: hidden; pointer-events: none; }
.splash { display: none; }
.js .splash { display: flex; position: fixed; inset: 0; align-items: stretch; justify-content: center; z-index: 60; background: #EDF7FE; }
.splash-column { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem; width: min(100%, var(--sheet-width)); padding: 2rem; background: linear-gradient(160deg, #BCE7FD, #F2FAFF); }
.splash-name { margin: 0; color: #17324D; font-size: clamp(2rem, 10vw, 3rem); font-weight: 800; letter-spacing: .03em; line-height: 1.2; }
.splash-caption { margin: 0; color: #365A75; text-align: center; }
.splash-progress { width: 130px; height: 4px; overflow: hidden; border-radius: 999px; background: #72BCE733; }
.splash-progress::before { content: ""; display: block; width: 45%; height: 100%; background: #438ABA; animation: progress 1.1s ease-in-out infinite; }
.splash-seen .splash-column { background: #EAF6FE; }
.splash-seen .splash-column > * { visibility: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes progress { from { transform: translateX(-105%); } to { transform: translateX(330%); } }
@media (min-width: 800px) { :root { --sheet-width: 400px; } }
@media (max-width: 360px) { .panel-scroll { padding-inline: 1.15rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
@media print { .splash, .frame-shell, .info-toggle, .panel-handle, .panel-dismiss, .panel-backdrop, .frame-continue { display: none !important; } .frame-mode body { height: auto; overflow: visible; } .frame-mode .page-panel, .frame-mode .panel-sheet { position: static; visibility: visible; width: 100%; max-height: none; transform: none; box-shadow: none; } .frame-mode .panel-scroll { overflow: visible; padding-bottom: 1rem; } }