/* COOP Central — Welcome Screen */
:root { --navy: #0A2A66; --blue: #0B57D0; --blue-600: #0A4DBA; --green: #2E8B2E; --green-l: #8FDB7E; --ink: #1F3157; --muted: #56627A; --line: #DCE5F2;
  --head: 'Poppins', 'Segoe UI', Arial, sans-serif; --body: 'DM Sans', 'Segoe UI', Arial, sans-serif; }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--body); color: var(--ink); background: linear-gradient(135deg, #FCFDFE 0%, #EEF4FC 55%, #E3F3E1 100%); min-height: 100vh; min-height: 100dvh; }
img { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }
:focus-visible { outline: 3px solid #7AB0FF; outline-offset: 3px; }

.wl { min-height: 100vh; min-height: 100dvh; max-width: 1240px; margin: 0 auto; padding: 40px 32px 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 24px 48px; align-items: center; }
.wl-copy { max-width: 540px; }
.wl-logo { display: inline-flex; background: #fff; border-radius: 18px; padding: 10px 16px; box-shadow: 0 10px 30px rgba(10,42,102,.08); margin-bottom: 26px; }
.wl-logo img { width: 150px; height: auto; }
.wl-eyebrow { margin: 0 0 10px; font-size: .8rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--green); }
h1 { font-family: var(--head); font-weight: 800; color: var(--navy); font-size: clamp(2rem, 4.2vw, 3.3rem); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 14px; }
h1 span { color: var(--green); }
.wl-lead { font-size: 1.08rem; color: var(--muted); margin: 0 0 24px; line-height: 1.55; }

.wl-install { width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; font: inherit; cursor: pointer; border: 0; border-radius: 18px; padding: 14px 18px 14px 14px; color: #fff;
  background: linear-gradient(135deg, var(--navy), var(--blue) 60%, #1E7A5A); box-shadow: 0 16px 36px rgba(11,87,208,.32); transition: transform .15s ease, box-shadow .15s ease; }
.wl-install:hover { transform: translateY(-2px); box-shadow: 0 20px 44px rgba(11,87,208,.38); }
.wl-install img { width: 46px; height: 46px; border-radius: 12px; background: #fff; flex: none; }
.wl-install span { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.wl-install strong { font-family: var(--head); font-size: 1.08rem; }
.wl-install small { opacity: .85; font-size: .82rem; margin-top: 2px; }
.wl-install svg { width: 26px; height: 26px; flex: none; }
.wl-installed { margin: 10px 0 0; color: #1E5A20; font-weight: 600; font-size: .92rem; }

.wl-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.wl-btn { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 52px; padding: 12px 14px; border-radius: 14px; font-weight: 700; font-size: .98rem; border: 2px solid var(--blue); transition: background .15s ease; }
.wl-btn.primary { background: var(--blue); color: #fff; }
.wl-btn.primary:hover { background: var(--blue-600); border-color: var(--blue-600); }
.wl-btn.outline { background: #fff; color: var(--blue); }
.wl-btn.outline:hover { background: #E8F0FC; }
.wl-member { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 16px; border-radius: 14px; background: rgba(255,255,255,.8); border: 1px solid var(--line); color: var(--ink); }
.wl-member:hover { border-color: var(--blue); }
.wl-member-ic { width: 38px; height: 38px; border-radius: 10px; background: #EAF6E8; display: grid; place-items: center; font-size: 1.1rem; flex: none; }
.wl-member span:nth-child(2) { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.wl-member strong { color: var(--navy); font-size: .95rem; }
.wl-member small { color: var(--muted); font-size: .82rem; }
.wl-member > span:last-child { font-size: 1.6rem; color: #9AA8C0; }

.wl-stats { display: flex; gap: 12px; margin-top: 20px; }
.wl-stats div { flex: 1; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; }
.wl-stats strong { display: block; font-family: var(--head); font-size: 1.4rem; color: var(--blue); line-height: 1.1; }
.wl-stats span { font-size: .8rem; color: var(--muted); font-weight: 600; }
.wl-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; font-size: .9rem; font-weight: 600; }

.wl-visual { position: relative; display: flex; justify-content: center; align-items: center; gap: 6%; }
.wl-glow { position: absolute; inset: 10% 5%; border-radius: 50%; background: radial-gradient(closest-side, rgba(11,87,208,.18), rgba(46,139,46,.10) 60%, transparent); filter: blur(10px); }
.wl-phone { position: relative; height: auto; max-height: min(620px, calc(100vh - 160px)); object-fit: contain; filter: drop-shadow(0 26px 40px rgba(10,42,102,.25)); }
.wl-phone.front { width: 46%; }
.wl-phone.back { order: 2; width: 42%; transform: translateY(18px); }

.wl-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; color: var(--muted); font-size: .85rem; font-weight: 600; padding-top: 8px; }
.wl-foot .chip { background: #fff; border-radius: 10px; padding: 5px 10px; height: 40px; display: inline-flex; align-items: center; border: 1px solid var(--line); }
.wl-foot .chip img { width: 110px; height: auto; }
.wl-foot .chip img.surge { width: auto; height: 30px; }
.wl-copyright { width: 100%; text-align: center; font-weight: 500; font-size: .8rem; }

/* install banner + sheets */
.install-banner { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 50; max-width: 460px; margin: 0 auto; display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 10px 12px; box-shadow: 0 18px 50px rgba(10,42,102,.25); }
.install-banner img { width: 42px; height: 42px; border-radius: 10px; flex: none; }
.install-banner div { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.install-banner strong { color: var(--navy); font-size: .95rem; }
.install-banner span { color: var(--muted); font-size: .8rem; }
.ib-btn { font: inherit; font-weight: 700; border: 0; border-radius: 12px; background: var(--blue); color: #fff; padding: 10px 16px; cursor: pointer; }
.ib-x { border: 0; background: transparent; color: var(--muted); width: 34px; height: 34px; border-radius: 8px; cursor: pointer; font-size: 1rem; }
.sheet { position: fixed; inset: 0; z-index: 60; background: rgba(10,22,50,.45); display: flex; align-items: flex-end; justify-content: center; padding: 12px; }
.sheet-card { position: relative; width: 100%; max-width: 460px; background: #fff; border-radius: 20px; padding: 20px 20px 16px; box-shadow: 0 -10px 40px rgba(0,0,0,.25); }
.sheet-card .ib-x { position: absolute; top: 8px; right: 8px; }
.sheet-card h3 { font-family: var(--head); color: var(--navy); margin: 0 0 8px; }
.sheet-card ol { margin: 0 0 8px; padding-left: 20px; color: var(--muted); line-height: 1.6; }
.sheet-card p { margin: 0; color: var(--muted); font-size: .9rem; }
.standalone .install-banner, .standalone .wl-install { display: none !important; }
.standalone .wl-installed { display: block !important; }

@media (max-width: 900px) {
  .wl { grid-template-columns: 1fr; grid-template-rows: auto; padding: 24px 18px calc(96px + env(safe-area-inset-bottom)); gap: 24px; align-items: start; }
  .wl-copy { max-width: 560px; margin: 0 auto; width: 100%; text-align: center; }
  .wl-logo { margin-bottom: 18px; }
  .wl-logo img { width: 128px; }
  .wl-install { text-align: left; }
  .wl-stats, .wl-links { justify-content: center; }
  .wl-member { text-align: left; }
  .wl-visual { display: none; }
}
@media (max-width: 380px) {
  .wl-actions { grid-template-columns: 1fr; }
  h1 { font-size: 1.85rem; }
}