/* WodBuddy marketing site — built on the WodBuddy design system tokens.
   Web-scale type steps extend the mobile-first DS scale; everything else is tokens. */
:root{--sz-hero:clamp(34px,5.2vw,60px);--sz-sec:clamp(26px,3.2vw,38px);--sz-sub:clamp(16px,1.3vw,19px);--maxw:1200px}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--wb-font-body);font-size:var(--wb-text-body);line-height:var(--wb-line-normal);color:var(--wb-fg);background:var(--wb-bg);-webkit-font-smoothing:antialiased;text-wrap:pretty}
img,svg{max-width:100%;display:block}
h1,h2,h3,h4,p,ul{margin:0}
ul{padding:0;list-style:none}
a{color:var(--wb-red-600);text-decoration:none}
a:hover{color:var(--wb-red-700)}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--wb-space-6)}
.eyebrow{font-size:var(--wb-text-xs);font-weight:var(--wb-weight-semibold);letter-spacing:var(--wb-track-eyebrow);text-transform:uppercase;color:var(--wb-fg-muted)}
.sec-title{font-size:var(--sz-sec);font-weight:var(--wb-weight-bold);letter-spacing:var(--wb-track-tight);line-height:var(--wb-line-tight)}
.lede{font-size:var(--sz-sub);color:var(--wb-fg-secondary);line-height:var(--wb-line-normal)}
.muted{color:var(--wb-fg-muted)}
section{padding:var(--wb-space-16) 0}
.sec-head{display:flex;flex-direction:column;gap:var(--wb-space-3);max-width:620px}

/* header */
.site-head{position:sticky;top:0;z-index:20;background:rgba(248,248,250,.94);border-bottom:1px solid var(--wb-border)}
.head-in{display:flex;align-items:center;gap:var(--wb-space-6);height:68px}
.head-in .logo{height:34px;width:auto}
.nav{display:flex;gap:var(--wb-space-6);margin-left:auto}
.nav a{color:var(--wb-fg-secondary);font-size:var(--wb-text-body);font-weight:var(--wb-weight-medium)}
.nav a:hover{color:var(--wb-fg)}
.head-cta{display:flex;gap:var(--wb-space-2)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--wb-space-2);height:48px;padding:0 var(--wb-space-5);border-radius:var(--wb-radius-md);font-size:var(--wb-text-body);font-weight:var(--wb-weight-semibold);border:1px solid transparent;transition:background var(--wb-dur-fast) var(--wb-ease),border-color var(--wb-dur-fast) var(--wb-ease),transform var(--wb-dur-fast) var(--wb-ease);cursor:pointer;white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--wb-red-500);color:var(--wb-white)}
.btn-primary:hover{background:var(--wb-red-600);color:var(--wb-white)}
.btn-secondary{background:var(--wb-surface);color:var(--wb-fg);border-color:var(--wb-border)}
.btn-secondary:hover{background:var(--wb-ink-100);color:var(--wb-fg)}
.btn-sm{height:40px;padding:0 var(--wb-space-4);font-size:var(--wb-text-sm)}
.btn:focus-visible{outline:none;box-shadow:var(--wb-shadow-focus)}
.store-row{display:flex;flex-wrap:wrap;gap:var(--wb-space-3)}
.store{display:flex;align-items:center;gap:var(--wb-space-3);height:56px;padding:0 var(--wb-space-5);border-radius:var(--wb-radius-md);background:var(--wb-ink-900);color:var(--wb-white);transition:background var(--wb-dur-fast) var(--wb-ease),transform var(--wb-dur-fast) var(--wb-ease)}
.store:hover{background:var(--wb-ink-700);color:var(--wb-white)}
.store:active{transform:scale(.98)}
.store svg{width:22px;height:22px;flex:none;fill:currentColor}
.store .txt{display:flex;flex-direction:column}
.store .txt span{display:block;font-size:10px;letter-spacing:var(--wb-track-eyebrow);text-transform:uppercase;opacity:.7;line-height:1.2}
.store .txt strong{display:block;font-size:var(--wb-text-h3);font-weight:var(--wb-weight-semibold);letter-spacing:var(--wb-track-snug);line-height:1.2}

/* pills */
.pill{display:inline-flex;align-items:center;gap:var(--wb-space-2);height:28px;padding:0 var(--wb-space-3);border-radius:var(--wb-radius-full);background:var(--wb-surface);border:1px solid var(--wb-border);font-size:var(--wb-text-xs);font-weight:var(--wb-weight-semibold);letter-spacing:var(--wb-track-eyebrow);text-transform:uppercase;color:var(--wb-fg-secondary);white-space:nowrap}
.pill .dot{width:6px;height:6px;border-radius:var(--wb-radius-full);background:var(--wb-success)}
.pill-row{display:flex;flex-wrap:wrap;gap:var(--wb-space-2)}

/* hero */
.hero{padding:var(--wb-space-16) 0 var(--wb-space-12)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--wb-space-12);align-items:center}
.hero h1{font-size:var(--sz-hero);font-weight:var(--wb-weight-black);letter-spacing:var(--wb-track-tight);line-height:1.02}
.hero-copy{display:flex;flex-direction:column;gap:var(--wb-space-5);max-width:600px}
.hero-note{font-size:var(--wb-text-sm);color:var(--wb-fg-muted)}
.watch-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--wb-space-6);align-items:end}
.watch-cell{width:100%;display:flex;flex-direction:column;align-items:center;gap:var(--wb-space-3)}
.watch-cell .dev-apple,.watch-cell .dev-garmin{margin:0 auto}
.watch-cap{font-size:var(--wb-text-sm);font-weight:var(--wb-weight-semibold);color:var(--wb-fg-secondary);text-align:center}

/* device frames */
.dev-apple{position:relative;width:100%;max-width:212px;aspect-ratio:198/240;background:linear-gradient(160deg,#3A3A3F,#15151A);border-radius:22%/18%;padding:11px;box-shadow:var(--wb-shadow-lg)}
.dev-apple .screen{width:100%;height:100%;border-radius:19%/16%;overflow:hidden;background:#000}
.dev-apple::before{content:"";position:absolute;right:-5px;top:26%;width:7px;height:34px;border-radius:4px;background:linear-gradient(90deg,#4A4A50,#232328)}
.dev-apple::after{content:"";position:absolute;right:-4px;top:47%;width:5px;height:44px;border-radius:4px;background:#2B2B31}
.dev-garmin{position:relative;width:100%;max-width:232px;aspect-ratio:1;background:linear-gradient(160deg,#3A3A3F,#15151A);border-radius:var(--wb-radius-full);padding:14px;box-shadow:var(--wb-shadow-lg)}
.dev-garmin .screen{width:100%;height:100%;border-radius:var(--wb-radius-full);overflow:hidden;background:#000}
.dev-garmin i{position:absolute;right:-4px;width:6px;height:26px;border-radius:3px;background:#2B2B31}
.dev-garmin i:nth-of-type(1){top:24%}
.dev-garmin i:nth-of-type(2){top:60%}
.dev-phone{position:relative;width:100%;max-width:268px;aspect-ratio:9/19;background:linear-gradient(160deg,#3A3A3F,#15151A);border-radius:38px;padding:9px;box-shadow:var(--wb-shadow-lg)}
.dev-phone .screen{position:relative;width:100%;height:100%;border-radius:30px;overflow:hidden;background:var(--wb-white)}
.dev-phone .screen::after{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:34%;height:18px;border-radius:var(--wb-radius-full);background:#101014;z-index:2}
.screen img{width:100%;height:100%;object-fit:cover}

/* platform split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--wb-space-6)}
.card{background:var(--wb-surface);border:1px solid var(--wb-border);border-radius:var(--wb-radius-lg);padding:var(--wb-space-6)}
.plat{display:flex;flex-direction:column;gap:var(--wb-space-5)}
.plat-head{display:flex;align-items:center;gap:var(--wb-space-3)}
.plat-head h3{font-size:var(--wb-text-h1);font-weight:var(--wb-weight-bold);letter-spacing:var(--wb-track-snug)}
.plat-visual{display:flex;justify-content:center;padding:var(--wb-space-4) 0}
.speclist{display:flex;flex-direction:column;gap:var(--wb-space-3)}
.speclist li{display:flex;gap:var(--wb-space-3);align-items:flex-start;color:var(--wb-fg-secondary)}
.speclist svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--wb-red-500);stroke-width:2}
.models{display:flex;flex-wrap:wrap;gap:var(--wb-space-2);padding-top:var(--wb-space-1)}
.chip{font-size:var(--wb-text-sm);color:var(--wb-fg-muted);background:var(--wb-ink-100);border-radius:var(--wb-radius-sm);padding:4px var(--wb-space-3)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--wb-space-6);margin-top:var(--wb-space-10)}
.step{display:flex;flex-direction:column;gap:var(--wb-space-4)}
.step-shot{background:var(--wb-ink-100);border:1px solid var(--wb-border);border-radius:var(--wb-radius-lg);padding:var(--wb-space-6) var(--wb-space-6) 0;display:flex;justify-content:center;overflow:hidden}
.step-shot .dev-phone{max-width:220px;margin-bottom:calc(var(--wb-space-8) * -1)}
.step-n{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--wb-radius-full);background:var(--wb-red-500);color:var(--wb-white);font-size:var(--wb-text-sm);font-weight:var(--wb-weight-bold)}
.step h3{font-size:var(--wb-text-h2);font-weight:var(--wb-weight-semibold);letter-spacing:-0.01em}
.step-top{display:flex;align-items:center;gap:var(--wb-space-3)}

/* phone showcase */
.phones{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--wb-space-8);margin-top:var(--wb-space-10);justify-items:center}
.phone-cell{width:100%;display:flex;flex-direction:column;gap:var(--wb-space-4);align-items:center;text-align:center;max-width:300px}
.phone-cell h4{font-size:var(--wb-text-h3);font-weight:var(--wb-weight-semibold)}

/* features */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--wb-space-6);margin-top:var(--wb-space-10)}
.feat{display:flex;flex-direction:column;gap:var(--wb-space-3)}
.feat-icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--wb-radius-sm);background:var(--wb-accent-tint);color:var(--wb-red-500)}
.feat-icon svg{width:22px;height:22px;stroke-width:2}
.feat h3{font-size:var(--wb-text-h3);font-weight:var(--wb-weight-semibold)}
.feat p{color:var(--wb-fg-secondary)}
.soon{display:inline-block;font-size:var(--wb-text-xs);font-weight:var(--wb-weight-semibold);letter-spacing:var(--wb-track-eyebrow);text-transform:uppercase;color:var(--wb-fg-muted);border:1px solid var(--wb-border);border-radius:var(--wb-radius-full);padding:2px var(--wb-space-2);margin-left:var(--wb-space-2);vertical-align:2px}

/* quotes */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--wb-space-6);margin-top:var(--wb-space-10)}
.quote{display:flex;flex-direction:column;gap:var(--wb-space-4);justify-content:space-between}
.quote p{font-size:var(--wb-text-h3);line-height:var(--wb-line-snug);color:var(--wb-fg-secondary)}
.quote footer{display:flex;flex-direction:column;gap:2px;font-size:var(--wb-text-sm)}
.quote footer b{font-weight:var(--wb-weight-semibold)}

/* cta band */
.band{background:var(--wb-red-500);color:var(--wb-white);border-radius:var(--wb-radius-lg);padding:var(--wb-space-12);display:flex;flex-direction:column;align-items:center;gap:var(--wb-space-5);text-align:center}
.band h2{font-size:var(--sz-sec);font-weight:var(--wb-weight-bold);letter-spacing:var(--wb-track-tight);line-height:var(--wb-line-tight)}
.band p{color:rgba(255,255,255,.88);max-width:520px;font-size:var(--sz-sub)}
.band .store{background:var(--wb-white);color:var(--wb-ink-900)}
.band .store:hover{background:var(--wb-red-50);color:var(--wb-ink-900)}

/* footer */
.site-foot{border-top:1px solid var(--wb-border);background:var(--wb-surface);padding:var(--wb-space-12) 0 var(--wb-space-8)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--wb-space-8)}
.foot-grid h4{font-size:var(--wb-text-xs);font-weight:var(--wb-weight-semibold);letter-spacing:var(--wb-track-eyebrow);text-transform:uppercase;color:var(--wb-fg-muted);margin-bottom:var(--wb-space-4)}
.foot-links{display:flex;flex-direction:column;gap:var(--wb-space-3)}
.foot-links a{color:var(--wb-fg-secondary)}
.foot-links a:hover{color:var(--wb-fg)}
.foot-bottom{display:flex;justify-content:space-between;gap:var(--wb-space-4);flex-wrap:wrap;margin-top:var(--wb-space-10);padding-top:var(--wb-space-6);border-top:1px solid var(--wb-border);font-size:var(--wb-text-sm);color:var(--wb-fg-muted)}
.foot-logo{height:32px;width:auto;margin-bottom:var(--wb-space-4)}

/* legal pages */
.legal{max-width:760px;margin:0 auto;padding:var(--wb-space-16) var(--wb-space-6)}
.legal h1{font-size:var(--sz-sec);font-weight:var(--wb-weight-bold);letter-spacing:var(--wb-track-tight);margin-bottom:var(--wb-space-3)}
.legal h2{font-size:var(--wb-text-h2);font-weight:var(--wb-weight-semibold);margin:var(--wb-space-10) 0 var(--wb-space-3)}
.legal p,.legal li{color:var(--wb-fg-secondary);font-size:var(--sz-sub);line-height:var(--wb-line-normal)}
.legal ul{display:flex;flex-direction:column;gap:var(--wb-space-2);margin:var(--wb-space-3) 0 0;padding-left:var(--wb-space-5);list-style:disc}
.legal .meta{font-size:var(--wb-text-sm);color:var(--wb-fg-muted);margin-bottom:var(--wb-space-8)}
.legal-card{background:var(--wb-surface);border:1px solid var(--wb-border);border-radius:var(--wb-radius-lg);padding:var(--wb-space-6);margin-top:var(--wb-space-8)}

@media (max-width:1000px){
  .hero-grid,.split,.steps,.feat-grid,.quotes,.phones,.foot-grid{grid-template-columns:1fr}
  .hero-grid{gap:var(--wb-space-10)}
  .nav{display:none}
  section{padding:var(--wb-space-12) 0}
  .band{padding:var(--wb-space-8) var(--wb-space-6)}
  .phones,.quotes,.steps,.feat-grid{gap:var(--wb-space-8)}
}
@media (max-width:640px){
  .head-in{height:60px}
  .watch-pair{gap:var(--wb-space-3)}
  .store{flex:1 1 auto}
}