/* athlinkapp.com. Dark, cinematic, the real app under light. Tokens first. */
@font-face{font-family:"Inter Tight";src:url("fonts/InterTight-fc3a814c.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/Inter-Regular-f3d2d063.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/Inter-Medium-a235b21f.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/Inter-SemiBold-d1ca40b8.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/Inter-Bold-83f4406b.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --bg:#070B16;
  --bg-2:#0B1222;
  --bg-3:#111A2E;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --glass:rgba(255,255,255,.04);
  --glass-2:rgba(255,255,255,.08);
  --fg:#F4F6FB;
  --fg-2:#A9B4CB;
  --fg-3:#7C879F;
  --brand:#2650B3;
  --brand-2:#3D66D1;
  --brand-3:#5C80D2;
  --brand-4:#8EA8E3;
  --glow:rgba(38,80,179,.55);
  --display:"Inter Tight",system-ui,-apple-system,sans-serif;
  --text:"Inter",system-ui,-apple-system,sans-serif;
  --gutter:clamp(20px, 5vw, 72px);
  --max:1180px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --h-item:clamp(22px, 1.9vw, 28px);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--text);font-size:17px;line-height:1.6;
  font-variant-numeric:tabular-nums;overflow-x:clip;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.035;
  background-image:url("noise.svg");
}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--brand-4);outline-offset:4px;border-radius:6px}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ol,ul{margin:0}
ul,ol{padding:0;list-style:none}
.skip{position:absolute;left:var(--gutter);top:-100px;padding:10px 14px;background:var(--fg);color:var(--bg);font-weight:600;text-decoration:none;z-index:60;border-radius:999px}
.skip:focus{top:12px}

/* Type */
h1,h2,.display{font-family:var(--display);font-weight:600;letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
h1{font-size:clamp(42px, 7.2vw, 96px)}
h2{font-size:clamp(32px, 4.6vw, 62px)}
h3{font-family:var(--display);font-weight:600;font-size:clamp(20px, 1.6vw, 24px);letter-spacing:-.02em;line-height:1.2}
h1,h2{color:var(--fg)}
.lead{font-size:clamp(17px, 1.45vw, 21px);line-height:1.55;color:var(--fg-2);max-width:56ch;text-wrap:pretty}
.note{font-size:14px;line-height:1.5;color:var(--fg-3)}
.link{color:var(--fg);text-decoration:none;font-weight:600;border-bottom:1px solid var(--line-2);padding-bottom:2px;transition:border-color .2s}
.link:hover{border-color:var(--fg)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;
  font-family:var(--text);font-weight:600;font-size:16px;line-height:1;text-decoration:none;white-space:nowrap;color:var(--fg);
  background:var(--glass-2);border:1px solid var(--line-2);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:background .2s,transform .25s var(--ease),box-shadow .25s;
}
.btn:hover{background:rgba(255,255,255,.12);transform:translateY(-1px)}
.btn-primary{background:var(--brand-2);border-color:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.btn-primary:hover{background:#4A72D8;box-shadow:inset 0 1px 0 rgba(255,255,255,.26)}
.btn-small{min-height:42px;padding:0 18px;font-size:15px}
.stores{display:flex;flex-wrap:wrap;gap:12px}

/* Header */
.top{position:sticky;top:0;z-index:40;background:rgba(7,11,22,.6);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.top.scrolled{border-color:var(--line);background:rgba(7,11,22,.78)}
.top-inner{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);min-height:68px;display:flex;align-items:center;gap:28px}
.mark{display:inline-flex;align-items:center;gap:12px;text-decoration:none;min-height:44px;font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.02em}
.mark img{width:48px;height:48px;border-radius:12px;box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.top-nav{display:flex;gap:4px;margin-left:12px}
.top-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:999px;color:var(--fg-2);font-weight:500;font-size:15px;text-decoration:none;transition:color .2s,background .2s}
.top-nav a:hover,.top-nav a[aria-current]{color:var(--fg);background:var(--glass)}
.top-cta{margin-left:auto}

/* Phone */
.phone{
  position:relative;width:min(340px, 82vw);aspect-ratio:390/817;border-radius:46px;padding:10px;
  background:linear-gradient(180deg,#141C30,#0B1120);
  box-shadow:0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.18),0 60px 140px -30px rgba(0,0,0,.85),0 0 160px -20px rgba(38,80,179,.45);
}
.phone .screen{position:absolute;inset:10px;border-radius:37px;overflow:hidden;background:#EEF1F7}
.phone .screen img{width:100%;height:100%;object-fit:contain;object-position:top}
.phone-stage .screen img{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease)}
.phone-stage .screen img.active{opacity:1}

/* Layout helpers */
.hero-inner,.story-inner,.safe-inner,.host-inner,.sports-inner,.download-inner,.page-head,.how-rows,.safety,.help,.desk,.foot-inner,.foot-base{max-width:var(--max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}

/* ------------------------------------------------------------------ Hero */
.hero{position:relative;overflow:hidden;padding:clamp(72px, 10vh, 120px) 0 0;text-align:center;isolation:isolate}
.hero::before{
  content:"";position:absolute;left:50%;top:-10%;width:140vw;max-width:1800px;height:120%;transform:translateX(-50%);z-index:-1;pointer-events:none;
  background:
    radial-gradient(42% 36% at 50% 30%, rgba(38,80,179,.55) 0%, rgba(38,80,179,0) 70%),
    radial-gradient(60% 30% at 50% 95%, rgba(92,128,210,.35) 0%, rgba(92,128,210,0) 70%);
  filter:blur(28px);
}
.hero-inner{display:grid;justify-items:center;gap:24px;max-width:900px}
.hero h1{font-size:clamp(48px, 8.4vw, 112px);line-height:.98}
.hero .lead{max-width:44ch;text-align:center}
.hero .note{margin-top:-6px}
.hero-film{
  position:relative;margin:clamp(40px, 6vh, 72px) auto 0;width:min(1120px, calc(100% - 2 * var(--gutter)));aspect-ratio:16/9;
  border-radius:22px;overflow:hidden;background:#0B1120;
  box-shadow:0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.14),0 60px 140px -30px rgba(0,0,0,.85),0 0 160px -20px rgba(38,80,179,.45);
}
.hero-film video{width:100%;height:100%;display:block;object-fit:cover;background:#0B1120}
.film-sound,.film-play{
  position:absolute;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.18);
  background:rgba(7,11,22,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--fg);
  font-family:var(--text);font-weight:600;font-size:14px;cursor:pointer;transition:background .2s;
}
.film-sound{right:16px;bottom:16px}
.film-play{left:50%;top:50%;transform:translate(-50%,-50%);min-height:56px;padding:0 28px;font-size:16px;background:rgba(7,11,22,.7)}
.film-sound:hover,.film-play:hover{background:rgba(7,11,22,.85)}
.hero-film.paused video{filter:brightness(.7)}

/* ----------------------------------------------------------------- Story */
.story{padding:clamp(80px, 10vw, 150px) 0 clamp(40px, 6vw, 80px);overflow-x:clip}
.story-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px, 440px);column-gap:clamp(40px, 7vw, 120px);align-items:start}
.story h2{max-width:16ch}
.story-steps{display:grid;row-gap:clamp(56px, 14vh, 140px);padding:clamp(40px, 8vh, 80px) 0}
.story-step{position:relative;max-width:46ch}
.story-step h3{font-size:var(--h-item);transition:color .4s}
.story-step p{margin-top:10px;color:var(--fg-2);font-size:clamp(16px, 1.25vw, 18px);transition:color .4s}
.js .story-step:not(.active) h3{color:var(--fg-2)}
.js .story-step:not(.active) p{color:var(--fg-3)}
.story-step .phone-sm{display:none}
.story-stage{position:sticky;top:max(96px, calc(50vh - 340px));display:flex;align-items:flex-start;justify-content:center}
.phone-stage{width:min(320px, 100%)}
.story-more{margin-top:8px}

/* ------------------------------------------------------------------ Safe */
.safe{padding:clamp(80px, 10vw, 150px) 0;position:relative;overflow:hidden}
.safe-inner{display:grid;grid-template-columns:minmax(0, 1.15fr) minmax(280px, .85fr);column-gap:clamp(40px, 7vw, 120px);align-items:center}
.safe h2{max-width:18ch}
.rules{margin-top:40px;display:grid}
.rule{padding:24px 0;border-top:1px solid var(--line);max-width:52ch}
.rule:last-child{border-bottom:1px solid var(--line)}
.rule h3{font-size:var(--h-item)}
.rule h2{font-family:var(--display);font-weight:600;font-size:var(--h-item);letter-spacing:-.02em;line-height:1.2}
.rule p{margin-top:8px;color:var(--fg-2);font-size:16px;line-height:1.6}
.safe-more{margin-top:28px}
.safe-stage{position:relative;display:flex;justify-content:center}
.phone-safe{width:min(320px, 80vw)}

/* ------------------------------------------------------------------ Host */
.host{padding:clamp(40px, 6vw, 80px) 0 clamp(80px, 10vw, 150px);position:relative;overflow:hidden}
.host-inner{display:grid;grid-template-columns:minmax(300px, 1fr) minmax(0, 1.15fr);column-gap:clamp(40px, 7vw, 120px);align-items:center}
.host-stage{position:relative;display:flex;justify-content:center}
.phone-host{width:min(320px, 80vw)}
.host .lead{margin-top:18px}
.host-list{margin-top:28px;display:grid}
.host-list li{padding:14px 0;border-top:1px solid var(--line);color:var(--fg-2);font-size:16px;max-width:52ch}
.host-list li:last-child{border-bottom:1px solid var(--line)}

/* -------------------------------------------------------------- Download */
.download{position:relative;padding:clamp(100px, 14vw, 200px) 0;text-align:center;overflow:hidden;isolation:isolate;border-top:1px solid var(--line)}
.download::before{content:"";position:absolute;left:50%;top:50%;width:120vw;max-width:1600px;height:140%;transform:translate(-50%,-50%);z-index:-1;background:radial-gradient(40% 50% at 50% 50%, rgba(38,80,179,.5), rgba(38,80,179,0) 70%);filter:blur(36px);pointer-events:none}
.download-inner{display:grid;justify-items:center;gap:22px;max-width:820px}
.download h2{font-size:clamp(40px, 6.4vw, 88px)}
.download .lead{text-align:center}
.download .note{margin-top:-10px}
.download .note + .note{margin-top:-14px}

/* ---------------------------------------------------------------- Footer */
.foot{border-top:1px solid var(--line);background:var(--bg-2);padding:56px 0 40px;font-size:15px;color:var(--fg-2)}
.foot-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px 32px}
.foot-brand a{display:inline-flex;align-items:center;gap:14px;text-decoration:none;color:var(--fg)}
.foot-nav{display:flex;flex-wrap:wrap;gap:0 4px}
.foot-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;color:var(--fg-2);text-decoration:none;transition:color .2s}
.foot-nav a:hover{color:var(--fg)}
.foot-base{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 32px;color:var(--fg-3);font-size:14px}
.foot-base a{color:var(--fg-2);text-decoration:underline;text-underline-offset:4px}

/* ------------------------------------------------------------ Inner pages */
.page-head{padding:clamp(72px, 9vh, 120px) var(--gutter) clamp(40px, 5vw, 72px);display:grid;gap:18px;max-width:var(--max);margin:0 auto;position:relative}
.page-head h1{font-size:clamp(40px, 5.6vw, 76px);max-width:16ch}
.page-head .lead{max-width:52ch}
/* How it works */
.how-rows{display:grid;row-gap:clamp(56px, 8vw, 120px);padding-bottom:clamp(60px, 8vw, 120px);overflow-x:clip}
.how-row{display:grid;grid-template-columns:minmax(260px, .9fr) minmax(0, 1.1fr);column-gap:clamp(32px, 6vw, 100px);align-items:center}
.how-row.flip .how-stage{order:2}
.how-stage{position:relative;display:flex;justify-content:center}
.how-stage .phone{width:min(300px, 78vw)}
.how-text h2{font-size:clamp(26px, 2.6vw, 36px)}
.how-points{margin-top:22px;display:grid}
.how-points li{padding:14px 0;border-top:1px solid var(--line);color:var(--fg-2);font-size:16.5px;line-height:1.55;max-width:52ch}
.how-points li:last-child{border-bottom:1px solid var(--line)}

/* Safety */
.safety{padding-bottom:clamp(80px, 10vw, 150px);overflow-x:clip}
.safety-inner{display:grid;grid-template-columns:minmax(0, 1.15fr) minmax(280px, .85fr);column-gap:clamp(40px, 7vw, 120px);align-items:start}
.rules-page{margin-top:0}
.rules-page .rule{padding:30px 0;max-width:60ch}
.safety-stage{position:sticky;top:100px;display:flex;justify-content:center}
.safety-foot{margin-top:48px;display:grid;gap:12px;color:var(--fg-2);max-width:68ch}

/* Reading desk */
.desk{display:grid;grid-template-columns:minmax(200px, 250px) minmax(0, 68ch);grid-template-areas:"side head" "side doc";column-gap:clamp(40px, 6vw, 100px);align-items:start;padding-top:clamp(56px, 7vh, 96px);padding-bottom:clamp(80px, 10vw, 150px)}
.desk-head{grid-area:head;display:grid;gap:16px}
.desk-head h1{font-size:clamp(38px, 5vw, 64px)}
.desk-updated{color:var(--fg-3);font-size:15px}
.desk-intro{font-size:clamp(18px, 1.4vw, 21px);line-height:1.55;color:var(--fg-2)}
.desk-side{grid-area:side;position:sticky;top:88px;font-size:14.5px;padding:22px 20px;border-radius:18px;background:var(--glass);border:1px solid var(--line)}
.desk-doc{grid-area:doc}
.desk-kicker{font-weight:600;color:var(--fg);margin-bottom:10px}
.desk-contents ol{counter-reset:s}
.desk-contents li{counter-increment:s}
.desk-contents a{display:flex;gap:10px;min-height:34px;align-items:baseline;padding:4px 0;color:var(--fg-2);text-decoration:none;line-height:1.3;transition:color .2s}
.desk-contents a::before{content:counter(s);font-family:var(--display);font-weight:600;font-size:12px;color:var(--fg-3);min-width:1.6em}
.desk-contents a:hover,.desk-contents a[aria-current]{color:var(--fg)}
.desk-links{display:grid;gap:2px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.desk-links a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:none;color:var(--fg)}
.desk-doc section{margin-top:44px;scroll-margin-top:96px}
.desk-doc section:first-child{margin-top:48px}
.desk-doc h2{font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:-.015em;line-height:1.25;color:var(--fg)}
.desk-doc section p{margin-top:12px;font-size:17px;line-height:1.65;color:var(--fg-2)}
.desk-doc a,.help-body a{color:var(--fg);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* Support */
.help{display:grid;padding-bottom:clamp(80px, 10vw, 150px);max-width:var(--max)}
.help-group{padding:32px 0;border-top:1px solid var(--line);scroll-margin-top:96px;max-width:68ch}
.help-group:last-child{border-bottom:1px solid var(--line)}
.help-group h2{font-size:clamp(22px, 2vw, 28px)}
.help-body{margin-top:12px}
.help-body p{font-size:17px;line-height:1.7;margin-top:10px;color:var(--fg-2);max-width:62ch}

/* 404 */
.lost{padding-bottom:clamp(80px, 10vw, 140px)}

/* ------------------------------------------------------- Motion (scripted) */
.js .intro{animation:rise .9s var(--ease) both}
.js .hero-inner .intro:nth-child(2){animation-delay:.08s}
.js .hero-inner .intro:nth-child(3){animation-delay:.16s}
.js .hero-inner .intro:nth-child(4){animation-delay:.24s}
.js .hero-inner .intro:nth-child(5){animation-delay:.3s}
.js .hero-film{animation:rise-phone 1.3s var(--ease) .2s both}
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .rules .rule:nth-child(2){transition-delay:.07s}
.js .rules .rule:nth-child(3){transition-delay:.14s}
.js .rules .rule:nth-child(4){transition-delay:.21s}
.js .rules .rule:nth-child(5){transition-delay:.28s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes rise-phone{from{opacity:0;transform:translateY(70px) scale(.98)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------ Responsive */
@media (max-width: 900px){
  .top-inner{flex-wrap:wrap;row-gap:0;padding-bottom:8px}
  .top-nav{order:3;flex-basis:100%;margin-left:-6px;overflow-x:auto;scrollbar-width:none}
  .top-nav::-webkit-scrollbar{display:none}
  .top-nav a{min-height:38px;font-size:14px;white-space:nowrap}
  .story-inner{grid-template-columns:minmax(0,1fr)}
  .story-stage{display:none}
  .story-steps{row-gap:56px;padding:48px 0 24px}
  .story-step{max-width:none}
  .story-step .phone-sm{display:block;margin:24px 0 0;width:min(240px, 64vw)}
  .story-step[data-screen="find"] .phone-sm{display:none}
  .how-stage,.safe-stage,.host-stage,.safety-stage{justify-content:flex-start}
  .js .story-step{opacity:1}
  .host-inner{grid-template-columns:minmax(0,1fr);row-gap:40px}
  .host-stage{order:2}
  .how-row{grid-template-columns:minmax(0,1fr);row-gap:32px}
  .how-row.flip .how-stage{order:0}
  .safe-inner,.safety-inner{grid-template-columns:minmax(0,1fr);row-gap:40px}
  .safe-stage{order:2}
  .safety-stage{position:relative;top:auto;order:2}
  .desk{grid-template-columns:minmax(0,68ch);grid-template-areas:"head" "side" "doc"}
  .desk-side{position:static;margin-top:32px;background:none;border:0;padding:0}
  .desk-contents ol{display:flex;flex-wrap:wrap;gap:0 18px}
}
@media (max-width: 600px){
  body{font-size:16px}
  .top-inner{min-height:60px;gap:12px}
  .hero{padding-top:56px}
  .hero h1{font-size:clamp(44px, 13vw, 64px)}
  .hero-inner{gap:18px}
  .hero-film{margin-top:36px;border-radius:14px}
  .film-sound{right:10px;bottom:10px;min-height:40px;padding:0 14px}
  .stores{width:100%}
  .stores .btn{flex:1 1 100%}
  .help-group{padding:26px 0}
  .foot-nav{gap:0}
  .foot-nav a{padding:0 8px 0 0;margin-right:8px}
  .desk-side{padding:18px}
  .download h2{font-size:clamp(36px, 11vw, 52px)}
}

@media print{
  :root{--bg:#fff;--bg-2:#fff;--fg:#000;--fg-2:#222;--fg-3:#555;--line:#999}
  body::before,.top,.foot,.desk-side,.skip,.hero-film,.phone{display:none}
  .desk{display:block;padding:0}
  h1,h2,.shine{background:none;color:#000;-webkit-text-fill-color:#000}
  p{orphans:3;widows:3}
}