:root{
  --font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --bg:#F6F7FB;--surface:#FFFFFF;--surface-alt:#EEF0F6;--border:#E4E7EE;--border-strong:#CBD0DB;
  --text-strong:#1D1D1D;--text:#494949;--muted:#7C7C7C;
  --primary:#3D5AFE;--primary-light:#ECEFFF;--on-primary:#FFFFFF;
  --segment-off:#FFFFFF;--logo-filter:none;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0B0D12;--surface:#151821;--surface-alt:#1E2230;--border:#262B38;--border-strong:#363C4D;
  --text-strong:#F2F4F8;--text:#C9CDD6;--muted:#8B91A0;
  --primary:#5B73FF;--primary-light:#1C2342;
  --segment-off:#363C4D;--logo-filter:invert(1);
}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font:400 15px/22px var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
p{margin:0}
.hidden{display:none!important}
.logo{filter:var(--logo-filter)}

/* Buttons and badges (app Button: 52pt, 16pt radius, headline text) */
.btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;padding:0 16px;border-radius:16px;border:1px solid transparent;font:600 17px/22px var(--font);text-decoration:none;margin-top:10px}
.btn.primary{background:var(--primary);color:var(--on-primary);box-shadow:0 6px 12px color-mix(in srgb,var(--primary) 28%,transparent)}
.btn.secondary{background:var(--surface-alt);color:var(--primary);border-color:var(--border)}
.store-badge{display:inline-block;line-height:0}
.store-badge img{height:48px;width:auto}

/* Single-card pages: invite, 404 */
body.card-page{display:flex;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;padding:24px 16px}
.card-page main{width:100%;max-width:420px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:24px;text-align:center;overflow:hidden}
.card .logo{display:block;width:48px;height:48px;object-fit:contain;margin:0 auto 16px}
.card h1{font:700 22px/28px var(--font);color:var(--text-strong);margin:12px 0 4px;overflow-wrap:anywhere}
.card .store-badge{margin-top:16px}
.muted{color:var(--muted)}
.cover{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:16px;margin:0 0 16px;background:var(--surface-alt)}
.inviter{display:flex;align-items:center;justify-content:center;gap:10px;margin:18px 0 22px;text-align:left}
.inviter span{overflow-wrap:anywhere}
.avatar{flex:none;width:36px;height:36px;border-radius:12px;object-fit:cover;background:var(--surface-alt)}
.help{margin-top:16px;font-size:13px;line-height:18px;color:var(--muted)}
.spinner{width:28px;height:28px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--primary);margin:24px auto;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.card-page footer{margin-top:16px;text-align:center;font-size:13px;color:var(--muted)}
.card-page footer a{color:inherit}

/* Landing */
.site{max-width:1040px;margin:0 auto;padding:0 16px}
.site-header{padding:max(20px,env(safe-area-inset-top)) 0 8px}
.wordmark{display:inline-flex;align-items:center;gap:10px;color:var(--text-strong);text-decoration:none;font:600 17px/22px var(--font)}
.wordmark .logo{width:28px;height:28px;object-fit:contain}
.hero{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;padding:32px 0 40px}
.hero h1{font:800 34px/41px var(--font);color:var(--text-strong);margin:0 0 12px;max-width:520px;text-wrap:balance}
.hero-text p{font-size:17px;line-height:24px;max-width:440px;margin-bottom:24px;text-wrap:pretty}
@media (min-width:900px){.hero{grid-template-columns:minmax(0,1fr) 400px;align-items:center;column-gap:64px;padding:64px 0 72px}}

/* The app's weekly progress card */
.week{background:var(--primary-light);border-radius:22px;padding:16px;display:grid;gap:16px;max-width:400px}
.week-top{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px}
.week-top>div{flex:1}
.eyebrow{font:700 12px/16px var(--font);letter-spacing:1px;color:var(--primary)}
.week-count{font:800 34px/41px var(--font);color:var(--text-strong)}
.week-count span{font:700 22px/28px var(--font);color:var(--muted)}
.week-sub{font-size:16px;line-height:22px;color:var(--muted);white-space:nowrap}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border-radius:999px;padding:6px 12px;font:600 13px/18px var(--font);color:var(--primary);white-space:nowrap}
.pill svg{width:13px;height:13px}
.segments{display:flex;gap:6px}
.segments i{flex:1;height:12px;border-radius:6px;background:var(--segment-off)}
.segments i.on{background:var(--primary)}

.screens{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px;margin:0 -16px;padding:0 16px 4px;scrollbar-width:none}
.screens::-webkit-scrollbar{display:none}
.screens img{flex:none;width:min(70vw,280px);height:auto;border-radius:22px;scroll-snap-align:start}
@media (min-width:900px){.screens{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin:0;padding:0;overflow:visible}.screens img{width:100%}}

.site-footer{border-top:1px solid var(--border);margin-top:48px;padding:20px 0 max(28px,env(safe-area-inset-bottom));font-size:13px;line-height:18px;color:var(--muted)}