:root{
  --bg:#ffffff; --surface:#f6f6f7; --surface-2:#fbfbfc;
  --ink:#0d0d0f; --ink-2:#56565c; --ink-3:#8a8a90;
  --line:#eaeaec; --line-2:#dcdce0;
  --blue:#0d3d9e; --blue-soft:#e7edf9; --red:#c62828; --red-soft:#fbe9e9;
  --radius:14px; --maxw:1120px;
  --display:'M PLUS Rounded 1c',sans-serif; --body:'M PLUS Rounded 1c',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--ink);font-family:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
img,svg{display:block;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.5rem;}
section{padding:5rem 0;}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-0.01em;line-height:1.08;}
.display{font-size:clamp(2.4rem,5.4vw,3.8rem);font-weight:800;}
.h2{font-size:clamp(1.8rem,3.6vw,2.6rem);}
.mark{background:linear-gradient(transparent 58%, rgba(198,40,40,0.18) 58%);padding:0 0.08em;}
.eyebrow{display:inline-block;font-size:0.78rem;font-weight:600;letter-spacing:0.04em;color:var(--blue);margin-bottom:1.1rem;}
.lead{color:var(--ink-2);font-size:1.12rem;line-height:1.6;}
.muted{color:var(--ink-2);}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:0.5rem;background:var(--blue);color:#fff;font-weight:700;font-size:0.96rem;padding:0.82rem 1.4rem;border-radius:11px;transition:transform .12s,opacity .12s;}
.btn:hover{opacity:0.9;}
.btn:active{transform:scale(0.98);}
.btn-ghost{display:inline-flex;align-items:center;gap:0.5rem;background:transparent;color:var(--ink);font-weight:600;font-size:0.96rem;padding:0.82rem 1.4rem;border-radius:11px;border:1.5px solid var(--line-2);}
.btn-ghost:hover{border-color:var(--ink);}

/* nav */
nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,0.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:0.85rem 1.5rem;display:flex;align-items:center;justify-content:space-between;}
.brand{display:flex;align-items:center;gap:0.6rem;font-family:var(--display);font-weight:700;font-size:1.18rem;}
.brand .logo{width:34px;height:34px;border-radius:9px;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:700;font-size:0.92rem;}
.brand img.logo-img,.foot-brand img.logo-img{width:34px;height:34px;border-radius:9px;object-fit:cover;}
.foot-brand img.logo-img{width:30px;height:30px;}
.showcase{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center;}
@media(max-width:760px){.showcase{grid-template-columns:1fr;}}
.nav-links{display:flex;align-items:center;gap:1.6rem;}
.nav-links a.txt{font-size:0.94rem;color:var(--ink-2);font-weight:500;}
.nav-links a.txt:hover{color:var(--ink);}
.nav-pill{background:var(--blue);color:#fff;padding:0.55rem 1.05rem;border-radius:999px;font-weight:700;font-size:0.9rem;}
@media(max-width:680px){.nav-links a.txt{display:none;}}

/* hero */
.hero{padding:4rem 0 3.5rem;text-align:center;}
.hero .intro{max-width:780px;margin:0 auto;}
.hero .ctas{display:flex;gap:0.7rem;flex-wrap:wrap;justify-content:center;margin-top:1.9rem;}
.trust{margin-top:1.4rem;display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;color:var(--ink-3);font-size:0.86rem;}
.trust span{display:inline-flex;align-items:center;gap:0.4rem;}

/* hero stage: the watch controls a landscape display */
.hero-stage{display:flex;align-items:center;justify-content:center;gap:1.4rem;flex-wrap:wrap;margin-top:3.2rem;}
.stage-item{display:flex;flex-direction:column;align-items:center;gap:0.75rem;}
.stage-cap{font-size:0.84rem;font-weight:600;color:var(--ink-3);}
.connector{display:flex;flex-direction:column;align-items:center;gap:0.35rem;color:var(--blue);}
.connector .lbl{font-size:0.7rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-3);}
@media(max-width:620px){.connector{transform:rotate(90deg);margin:0.4rem 0;}}

/* device mocks */
.scoreboard-land{width:min(560px,86vw);aspect-ratio:16/9;background:#0d0d0f;border-radius:22px;padding:11px;box-shadow:0 26px 64px rgba(13,13,15,0.22);}
.scoreboard-land .screen{height:100%;border-radius:13px;overflow:hidden;display:flex;position:relative;}
.scoreboard-land .half{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;gap:0.5rem;}
.scoreboard-land .half.t1{background:var(--blue);} .scoreboard-land .half.t2{background:var(--red);}
.scoreboard-land .nm{font-size:clamp(0.8rem,2.4vw,1.05rem);font-weight:700;opacity:0.95;}
.scoreboard-land .sc{font-family:var(--display);font-size:clamp(3.2rem,12vw,6.6rem);font-weight:800;line-height:0.9;}
.scoreboard-land .dots{display:flex;gap:6px;}
.scoreboard-land .dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,0.4);}
.scoreboard-land .dots i.on{background:#fff;}
.scoreboard-land .serve{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:11px;height:11px;border-radius:50%;background:#ffd84d;box-shadow:0 0 0 4px rgba(255,216,77,0.25);}
.device-land{width:min(560px,86vw);background:#0d0d0f;border-radius:24px;padding:7px;box-shadow:0 26px 64px rgba(13,13,15,0.22);}
.device-land img{display:block;width:100%;border-radius:18px;}
.device-phone{width:min(260px,68vw);background:#0d0d0f;border-radius:32px;padding:8px;box-shadow:0 22px 56px rgba(13,13,15,0.18);}
.device-phone img{display:block;width:100%;border-radius:25px;}
.lhero{display:grid;grid-template-columns:1.05fr 0.95fr;gap:2.5rem;align-items:center;}
.device-stage{display:flex;justify-content:center;}
@media(max-width:760px){.lhero{grid-template-columns:1fr;}.lhero .device-stage{order:-1;}}
.device-watch{width:112px;background:#0d0d0f;border-radius:32px;padding:6px;box-shadow:0 16px 40px rgba(13,13,15,0.16);}
.device-watch img{display:block;width:100%;border-radius:26px;}
.watch{width:104px;height:128px;border-radius:30px;background:#0d0d0f;padding:8px;box-shadow:0 16px 40px rgba(13,13,15,0.16);}
.watch .screen{width:100%;height:100%;border-radius:23px;overflow:hidden;display:flex;}
.watch .half{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;}
.watch .half.t1{background:var(--blue);} .watch .half.t2{background:var(--red);}
.watch .nm{font-size:0.5rem;font-weight:600;opacity:0.9;margin-bottom:0.2rem;}
.watch .sc{font-family:var(--display);font-size:1.5rem;font-weight:800;line-height:1;}

/* on every screen */
.screens-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.5rem;}
.screen-card{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:1.7rem 1.2rem;text-align:left;}
.screen-card .ic{color:var(--blue);margin-bottom:0.9rem;}
.screen-card h3{font-size:1.05rem;margin-bottom:0.35rem;}
.screen-card p{color:var(--ink-2);font-size:0.9rem;}
.screens-note{margin-top:1.4rem;color:var(--ink-3);font-size:0.85rem;}
@media(max-width:760px){.screens-grid{grid-template-columns:1fr 1fr;}}

/* how to use — 3 steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.5rem;}
.step{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:1.7rem;}
.step .n{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--blue);color:#fff;font-family:var(--display);font-weight:800;font-size:1.1rem;margin-bottom:1rem;}
.step h3{font-size:1.1rem;margin-bottom:0.4rem;}
.step p{color:var(--ink-2);font-size:0.93rem;}
@media(max-width:760px){.steps{grid-template-columns:1fr;}}

/* sport tags */
.tags{border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.tags .wrap{display:flex;flex-wrap:wrap;gap:0.6rem 2.2rem;justify-content:center;padding:1.5rem;color:var(--ink-3);font-weight:600;font-family:var(--display);letter-spacing:0.02em;font-size:0.98rem;}

/* two screens */
.alt{background:var(--surface);}
.split{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-top:2.5rem;}
.split .card{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:2rem;display:flex;flex-direction:column;gap:1.1rem;}
.split .card .role{font-size:0.78rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--blue);}
.split .card h3{font-size:1.4rem;}
.split .card .stage{margin-top:auto;display:flex;justify-content:center;padding-top:1rem;}
@media(max-width:680px){.split{grid-template-columns:1fr;}}

/* features */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.5rem;}
.feat{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;transition:border-color .15s,transform .15s;}
.feat:hover{border-color:var(--line-2);transform:translateY(-2px);}
.feat .ic{width:42px;height:42px;border-radius:11px;background:var(--surface);display:grid;place-items:center;margin-bottom:1rem;color:var(--ink);}
.feat h3{font-size:1.1rem;margin-bottom:0.45rem;}
.feat p{color:var(--ink-2);font-size:0.94rem;}
.feat .pro{display:inline-block;margin-top:0.7rem;font-size:0.7rem;font-weight:700;letter-spacing:0.06em;color:var(--red);background:var(--red-soft);padding:0.2rem 0.6rem;border-radius:999px;}
@media(max-width:760px){.feat-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.feat-grid{grid-template-columns:1fr;}}

/* setups teaser */
.setups{background:var(--surface);}
.chips{display:flex;flex-wrap:wrap;gap:0.6rem;margin-top:1.8rem;}
.chip{background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:0.6rem 1.05rem;font-weight:600;font-size:0.92rem;color:var(--ink-2);}
.setups-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;}

/* free vs pro */
.fp-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2.5rem;}
.fp{border:1px solid var(--line);border-radius:16px;padding:2rem;}
.fp.pro{border-color:var(--red);}
.fp .tier{font-family:var(--display);font-weight:700;font-size:1.3rem;margin-bottom:0.3rem;}
.fp .price{color:var(--ink-3);font-size:0.92rem;margin-bottom:1.2rem;}
.fp ul{list-style:none;display:flex;flex-direction:column;gap:0.65rem;}
.fp li{display:flex;gap:0.6rem;font-size:0.95rem;color:var(--ink-2);}
.fp li svg{flex:none;margin-top:3px;color:var(--blue);}
@media(max-width:680px){.fp-grid{grid-template-columns:1fr;}}

/* faq */
.faq-list{margin-top:2rem;border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);padding:1.4rem 0;}
.faq-item h3{font-family:var(--body);font-weight:600;font-size:1.05rem;letter-spacing:0;margin-bottom:0.45rem;}
.faq-item p{color:var(--ink-2);font-size:0.95rem;}

/* cta band */
.cta{background:var(--ink);color:#fff;border-radius:24px;text-align:center;padding:4rem 2rem;}
.cta h2{color:#fff;}
.cta p{color:rgba(255,255,255,0.7);max-width:34rem;margin:1rem auto 2rem;}
.cta .btn{background:#fff;color:var(--ink);}

/* footer */
footer{border-top:1px solid var(--line);padding:3rem 0 2.5rem;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem;}
.foot-brand{font-family:var(--display);font-weight:700;font-size:1.1rem;display:flex;align-items:center;gap:0.55rem;margin-bottom:0.8rem;}
.foot-brand .logo{width:30px;height:30px;border-radius:8px;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:0.82rem;font-weight:700;}
.foot-col h4{font-size:0.78rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:0.9rem;}
.foot-col a{display:block;color:var(--ink-2);font-size:0.92rem;padding:0.28rem 0;}
.foot-col a:hover{color:var(--ink);}
.foot-bottom{max-width:var(--maxw);margin:2.5rem auto 0;padding:1.5rem 1.5rem 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;color:var(--ink-3);font-size:0.86rem;}
@media(max-width:680px){.foot-grid{grid-template-columns:1fr 1fr;}}

/* prose / blog articles */
main{max-width:760px;margin:0 auto;padding:3.2rem 1.5rem 4.5rem;}
.back{display:inline-flex;color:var(--blue);font-weight:600;font-size:0.9rem;margin-bottom:1.6rem;}
.meta{display:flex;gap:0.8rem;flex-wrap:wrap;margin-bottom:1rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:0.07em;font-size:0.74rem;font-weight:600;}
main h1{font-family:var(--display);font-weight:800;font-size:clamp(2.1rem,5vw,3.2rem);line-height:1.06;letter-spacing:-0.01em;margin-bottom:1.1rem;}
.lede{font-size:1.12rem;color:var(--ink-2);line-height:1.6;margin-bottom:1.4rem;}
article p{margin:1.1rem 0;color:var(--ink);line-height:1.75;}
article h2{font-family:var(--display);font-weight:700;font-size:1.5rem;margin:2.2rem 0 0.6rem;}
article ul,article ol{margin:1.1rem 0 1.1rem 1.3rem;color:var(--ink);line-height:1.7;}
article li{margin:0.35rem 0;}
article a,.lede a,.meta a{color:var(--blue);font-weight:600;}