:root{--bg:#F4FAF8;--hero:#DCEFEA;--w1:#CBE7E0;--w2:#BFE1D9;--text:#2F3533;--text2:#45524E;--panel:#FFFFFF;--stitch:#A9DCCF;--chip:#DCEFEA;--chipText:#2F6E62;--fi:#E3F1F6;--ficon:#3F7C96;--link:#2F6E62;--linkHover:#3F7C96;--shadow:rgba(40,90,80,.10);--shotShadow:rgba(40,90,80,.22);--dash:#9CC7BC;--num:#4F8A7E;--amp:#E2685A;--focus:#3F7C96;--badgeLine:transparent}
:root[data-theme="dark"]{--bg:#1B1C1F;--hero:#202226;--w1:#25272C;--w2:#2B2D32;--text:#EDEDED;--text2:#B9C2BF;--panel:#2B2D32;--stitch:#4B6E66;--chip:#36383E;--chipText:#9FD3C6;--fi:#26343A;--ficon:#8CC3DA;--link:#8FD1C2;--linkHover:#8CC3DA;--shadow:rgba(0,0,0,.35);--shotShadow:rgba(0,0,0,.45);--dash:#5E6A67;--num:#8A9A96;--amp:#F08C7F;--focus:#8CC3DA;--badgeLine:#5A5D63}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
body{margin:0;min-height:100vh;font-family:'M PLUS Rounded 1c',system-ui,sans-serif;font-weight:500;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;text-wrap:pretty}
.theming,.theming *{transition:background-color .5s ease,color .5s ease,fill .5s ease}
a{color:var(--link)}
a:hover{color:var(--linkHover)}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:8px}
.skip{position:absolute;left:12px;top:-60px;z-index:10;padding:12px 16px;border-radius:12px;background:var(--panel);color:var(--text);font-weight:800}
.skip:focus{top:12px}
.page{overflow-x:clip}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* Theme-dependent images: the light one shows unless the dark theme is on */
.on-dark{display:none}
:root[data-theme="dark"] .on-dark{display:block}
:root[data-theme="dark"] .on-light{display:none}

/* Hero */
.hero{position:relative;background:var(--hero);overflow:hidden;padding:20px 0 120px}
.waves{position:absolute;left:0;right:0;bottom:0;width:100%;height:240px}
.topbar{position:relative;display:flex;justify-content:space-between;align-items:center;margin-bottom:40px}
.brand{display:flex;gap:10px;align-items:center;font-weight:800;font-size:18px;color:var(--text);text-decoration:none}
.brand:hover{color:var(--text)}
.bicon{width:36px;height:36px;border-radius:9px;overflow:hidden}
.bicon img{width:100%;height:100%}
.themebtn{width:44px;height:44px;border-radius:14px;border:0;background:var(--panel);color:var(--text);display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px var(--shadow);cursor:pointer;padding:0}
.themebtn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.themebtn .sun{display:none}
:root[data-theme="dark"] .themebtn .sun{display:block}
:root[data-theme="dark"] .themebtn .moon{display:none}
.hero-in{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:48px}
.hero-copy{flex:1 1 380px;min-width:0}
.appicon{width:104px;height:104px;border-radius:24px;overflow:hidden;box-shadow:0 8px 20px rgba(40,90,80,.18)}
.appicon img{width:100%;height:100%}
h1{font-size:64px;line-height:1.05;margin:24px 0 8px;font-weight:800;text-wrap:balance}
h1 .amp{color:var(--amp)}
.lead{font-size:26px;font-weight:800;margin:0 0 12px;color:var(--text)}
.sub{font-size:18px;line-height:1.55;margin:0 0 28px;max-width:30em;color:var(--text2)}
.badges{display:flex;flex-wrap:wrap;align-items:center;gap:12px;--bh:48px}
.badge{display:inline-flex;align-items:center;height:var(--bh);border-radius:10px;overflow:hidden;border:1.5px solid var(--badgeLine)}
.badge img{max-width:none}
.badge-appstore img{width:calc(var(--bh)*2.9915);height:var(--bh)}
/* The official Google Play artwork carries its own transparent margin; crop it to the badge height */
.badge-play img{height:calc(var(--bh)*1.4);width:auto;margin:0 calc(var(--bh)*-.17)}
.hero-shots{flex:1 1 380px;display:flex;justify-content:center;align-items:flex-start;gap:24px;min-width:0}
.hero-shots .shot:nth-child(2){margin-top:48px}

/* Phone frames: a screenshot, or a placeholder until one exists */
.shot{flex:none;width:250px;height:540px;border-radius:34px;overflow:hidden;box-shadow:0 18px 40px var(--shotShadow);background:var(--hero);margin:0;position:relative}
.shot img{width:100%;height:100%;object-fit:cover}
.shot-ph{display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;outline:2px dashed var(--stitch);outline-offset:-10px;color:var(--text2);font-weight:800;font-size:16px;background:var(--panel)}

/* Sections */
.sec{padding:72px 24px 8px}
h2{font-size:36px;font-weight:800;margin:0 0 28px;text-wrap:balance}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;list-style:none;margin:0;padding:0}
.card{background:var(--panel);border-radius:24px;padding:24px;outline:2px dashed var(--stitch);outline-offset:-8px;box-shadow:0 6px 18px var(--shadow);position:relative}
.art{height:96px;display:flex;align-items:center}
.num{position:absolute;top:22px;right:24px;width:36px;height:36px;border-radius:12px;background:var(--chip);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--chipText)}
h3{font-size:20px;font-weight:800;margin:12px 0 6px}
.card p,.feat p{font-size:16px;line-height:1.55;margin:0;color:var(--text2)}
.feat{display:flex;gap:16px;align-items:flex-start;padding:8px 4px}
.feat h3{margin:2px 0 6px}
.fi{flex:none;width:52px;height:52px;border-radius:16px;background:var(--fi);display:flex;align-items:center;justify-content:center}
.fi svg{width:28px;height:28px;fill:none;stroke:var(--ficon);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.shots-sec{padding-left:0;padding-right:0}
.strip{display:flex;gap:28px;overflow-x:auto;padding:8px 24px 32px;justify-content:safe center;list-style:none;margin:0}
.fam{display:flex;flex-wrap:wrap;gap:12px;list-style:none;margin:0;padding:0}
.famlink{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border-radius:14px;background:var(--panel);box-shadow:0 4px 12px var(--shadow);color:var(--text);text-decoration:none;font-weight:800}
.famlink:hover{color:var(--ficon)}

/* Footer */
.foot{margin-top:72px;background:var(--hero);padding:28px 0}
.foot-in{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;font-size:15px;color:var(--text2)}
.foot-nav{display:flex;gap:20px}
.foot-nav a{color:var(--link);font-weight:800;display:inline-flex;align-items:center;min-height:44px}
.legal{flex-basis:100%;font-size:12px;line-height:1.5;color:var(--text2)}
.legal p{margin:0 0 4px}

@media (max-width:640px){
  h1{font-size:46px}
  .lead{font-size:22px}
  h2{font-size:28px}
  .hero{padding:16px 0 96px}
  .badges{--bh:44px}
  .hero-shots .shot:nth-child(2){display:none}
}
@media (prefers-reduced-motion:reduce){.theming,.theming *{transition:none}}