/* Athle - the Swiss look of getathle.com: off-white and black, heavy
   Inter Tight caps, Barlow text, hairlines, numbered sections, black and
   white photography. Colour comes only from the app itself (its videos)
   and the one lime mark. Shared by index.html and app.html. */
:root{
  --green:#b4f000;
  --dark:#0a0a0a;
  --gray:#f5f4f0;
  --sand:#ecebe5;
  --text-2:#3a3a3a;
  --muted:#5c5c5c;
  --hair:rgba(10,10,10,.14);
  --hair-dark:rgba(245,244,240,.14);
  --font-display:'Inter Tight',sans-serif;
  --font-body:'Barlow',sans-serif;
  --font-condensed:'Barlow Condensed',sans-serif;
  --pad:clamp(1.25rem,3.2vw,3rem);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-body);background:var(--gray);color:var(--dark);overflow-x:hidden;-webkit-font-smoothing:antialiased;}
img,video{display:block;max-width:100%;}
button{font-family:inherit;}
a{color:inherit;}

/* ── type ── */
.eyebrow{display:flex;align-items:center;gap:1rem;}
.eyebrow .num{font-size:.7rem;font-weight:600;}
.eyebrow .rule{width:4rem;height:1px;background:var(--dark);opacity:.5;}
.eyebrow .label{font-size:.65rem;letter-spacing:.14em;font-weight:500;text-transform:uppercase;color:var(--muted);}
.dark .eyebrow .num{color:var(--gray);}
.dark .eyebrow .rule{background:var(--gray);opacity:.35;}
.dark .eyebrow .label{color:rgba(245,244,240,.55);}

.headline{font-family:var(--font-display);font-weight:800;font-size:clamp(52px,8.2vw,134px);line-height:.85;letter-spacing:-.055em;text-transform:uppercase;}
.h2{font-family:var(--font-display);font-weight:800;font-size:clamp(42px,6vw,96px);line-height:.86;letter-spacing:-.055em;text-transform:uppercase;}
.h3{font-family:var(--font-display);font-weight:800;font-size:clamp(22px,2.2vw,30px);letter-spacing:-.04em;text-transform:uppercase;}
.lead{font-size:1rem;line-height:1.65;color:var(--text-2);max-width:24rem;}
.dark .lead{color:rgba(245,244,240,.7);}
.micro{font-size:.65rem;letter-spacing:.16em;font-weight:500;text-transform:uppercase;color:var(--muted);}
.dark .micro{color:rgba(245,244,240,.55);}

/* ── buttons ── */
.btn-dark,.btn-outline{display:inline-flex;align-items:center;gap:.75rem;border-radius:50px;padding:.55rem 1.6rem .55rem .55rem;min-height:48px;font-size:.72rem;letter-spacing:.14em;font-weight:600;text-transform:uppercase;cursor:pointer;font-family:var(--font-body);border:none;text-decoration:none;white-space:nowrap;transition:transform .2s ease;}
.btn-dark:hover,.btn-outline:hover{transform:translateY(-1px);}
.btn-dark{background:var(--dark);color:var(--gray);}
.btn-outline{background:none;color:var(--gray);border:1.5px solid rgba(245,244,240,.45);}
.btn-dot{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--gray);color:var(--dark);flex-shrink:0;}
.link-under{font-size:.72rem;letter-spacing:.14em;font-weight:600;text-transform:uppercase;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px;}
.store-note{font-size:.62rem;letter-spacing:.16em;font-weight:500;text-transform:uppercase;color:var(--muted);}
.dark .store-note{color:rgba(245,244,240,.5);}

/* ── nav ── */
nav.site-nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:0 2rem;height:64px;background:var(--gray);border-bottom:1px solid rgba(0,0,0,.06);}
nav.site-nav .logo img{height:28px;}
.nav-links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:2.5rem;font-size:.75rem;letter-spacing:.12em;font-weight:500;white-space:nowrap;}
.nav-links a{text-decoration:none;}
.nav-links a.active{border-bottom:1px solid var(--dark);padding-bottom:2px;}
.nav-right{display:flex;align-items:center;gap:2rem;}
.built-label{font-size:.65rem;letter-spacing:.12em;font-weight:500;}
.burger{background:none;border:none;cursor:pointer;padding:6px;color:var(--dark);}
@media(max-width:860px){nav.site-nav{padding:0 1.25rem;}.nav-links,.built-label{display:none;}}
.mobile-nav{display:none;position:fixed;inset:0;z-index:150;background:var(--gray);flex-direction:column;padding:96px 1.25rem 2rem;}
.mobile-nav.open{display:flex;}
.mobile-nav a{font-family:var(--font-display);font-size:2.2rem;font-weight:800;text-transform:uppercase;text-decoration:none;color:var(--dark);padding:.6rem 0;border-bottom:1px solid rgba(0,0,0,.08);}
.mobile-nav .btn-dark{margin-top:2rem;align-self:flex-start;}

/* ── sections ── */
.sec{padding:clamp(4.5rem,9vw,7.5rem) var(--pad);border-bottom:1px solid var(--hair);}
.sec.sand{background:var(--sand);}
.dark{background:var(--dark);color:var(--gray);}
.sec.dark{border-bottom-color:transparent;}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:clamp(2.5rem,5vw,4.5rem);}
.sec-head .left{display:flex;flex-direction:column;gap:1.75rem;}

/* hairline lists: name left, detail right */
.hair-list{list-style:none;}
.hair-list li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.35rem 1.5rem;padding:1.05rem 0;border-top:1px solid var(--hair);}
.hair-list li:last-child{border-bottom:1px solid var(--hair);}
.hair-list b{font-weight:500;font-size:1.05rem;}
.hair-list span{font-size:.85rem;color:var(--muted);}
.dark .hair-list li{border-color:var(--hair-dark);}
.dark .hair-list span{color:rgba(245,244,240,.55);}

/* term + explanation, one row each */
.facts{list-style:none;margin-top:.5rem;max-width:40rem;}
.facts li{display:grid;grid-template-columns:minmax(8rem,11rem) minmax(0,1fr);gap:.35rem 1.5rem;padding:1rem 0;border-top:1px solid var(--hair);}
.facts li:last-child{border-bottom:1px solid var(--hair);}
.facts b{font-weight:600;font-size:.95rem;}
.facts span{font-size:.93rem;line-height:1.55;color:var(--text-2);}
.dark .facts li{border-color:var(--hair-dark);}
.dark .facts span{color:rgba(245,244,240,.65);}
@media(max-width:560px){.facts li{grid-template-columns:1fr;}}

/* three columns, a black rule on top of each */
.cols3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2.5rem;}
.col{border-top:1px solid var(--dark);padding-top:1.4rem;display:flex;flex-direction:column;gap:.9rem;}
.col .no{font-size:.75rem;font-weight:600;color:var(--muted);}
.col p{font-size:.95rem;line-height:1.65;color:var(--text-2);}
.col-head{display:flex;align-items:baseline;gap:1rem;}
.dark .col{border-top-color:rgba(245,244,240,.5);}
.dark .col p{color:rgba(245,244,240,.65);}

/* ── app films ──
   .film: the transparent rotating-phone film (HEVC+alpha / VP9+alpha).
   .device: a screen recording in a plain black phone outline. */
.film{width:min(360px,80vw);aspect-ratio:640/1140;}
.film video{width:100%;height:100%;object-fit:contain;background:transparent;}
.device{width:min(300px,72vw);aspect-ratio:590/1282;border-radius:48px;padding:9px;background:#050505;box-shadow:0 0 0 1px rgba(0,0,0,.25),0 50px 90px -40px rgba(0,0,0,.55);}
.dark .device{box-shadow:0 0 0 1px rgba(245,244,240,.16),0 50px 90px -40px rgba(0,0,0,.9);}
.device video,.device img{width:100%;height:100%;object-fit:cover;border-radius:39px;background:#000;}
.device.small{width:min(240px,62vw);border-radius:40px;padding:7px;}
.device.small video,.device.small img{border-radius:33px;}

/* two phones side by side, each with a caption */
.duo{display:flex;flex-wrap:wrap;justify-content:center;gap:1.75rem;}
.duo figure{display:flex;flex-direction:column;align-items:center;gap:1rem;}
.duo figcaption{width:100%;max-width:240px;border-top:1px solid var(--hair);padding-top:.7rem;display:flex;flex-direction:column;gap:.2rem;}
.duo figcaption b{font-size:.9rem;font-weight:600;}
.dark .duo figcaption{border-top-color:var(--hair-dark);}

/* a row of real app screens */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1.75rem 1.25rem;}
.gallery figure{display:flex;flex-direction:column;gap:1rem;}
.gallery .device{width:100%;border-radius:34px;padding:6px;}
.gallery .device img{border-radius:28px;}
.gallery figcaption{border-top:1px solid var(--hair);padding-top:.7rem;display:flex;flex-direction:column;gap:.2rem;}
.gallery figcaption b{font-size:.9rem;font-weight:600;}
.gallery figcaption span{font-size:.85rem;line-height:1.45;color:var(--text-2);}

/* ranked tiers with the in-app emblems */
.tiers{list-style:none;width:100%;}
.tiers li{display:grid;grid-template-columns:2.5rem 3.25rem minmax(0,1fr) auto;align-items:center;column-gap:.75rem;padding:.55rem 0;border-top:1px solid var(--hair);}
.tiers li:last-child{border-top-color:var(--dark);border-bottom:1px solid var(--dark);}
.tiers .no{font-size:.75rem;font-weight:600;color:var(--muted);}
.tiers img{width:3.25rem;height:auto;}
.tiers b{white-space:nowrap;font-family:var(--font-display);font-weight:800;font-size:clamp(19px,1.9vw,25px);letter-spacing:-.035em;text-transform:uppercase;}
.tiers .xp{font-size:.7rem;letter-spacing:.12em;font-weight:500;text-transform:uppercase;color:var(--muted);text-align:right;}
.tiers li:last-child .no,.tiers li:last-child .xp{color:var(--dark);}

/* XP vs SHP */
.currency{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));border-top:1px solid var(--dark);}
.currency div{padding:1.6rem 2rem 0 0;display:flex;flex-direction:column;gap:.75rem;}
.currency b{font-family:var(--font-display);font-weight:800;font-size:clamp(40px,5vw,72px);line-height:.85;letter-spacing:-.05em;}
.currency p{font-size:.95rem;line-height:1.65;color:var(--text-2);max-width:30rem;}
.dark .currency{border-top-color:rgba(245,244,240,.5);}
.dark .currency p{color:rgba(245,244,240,.65);}

.film-caption{margin-top:1.25rem;text-align:center;}

/* ── footer ── */
.big-foot{padding:clamp(4rem,7vw,5.5rem) var(--pad) 2rem;display:flex;flex-direction:column;gap:clamp(2.5rem,4vw,3.5rem);}
.big-foot .closing{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.75rem;}
.big-foot .closing p{max-width:34rem;font-family:var(--font-display);font-weight:800;font-size:clamp(28px,3vw,44px);line-height:.95;letter-spacing:-.045em;text-transform:uppercase;}
.big-foot .wordmark{width:100%;height:auto;}
.big-foot .base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem 2rem;padding-top:1.1rem;border-top:1px solid var(--hair);font-size:.65rem;letter-spacing:.16em;font-weight:500;text-transform:uppercase;color:var(--muted);}
.big-foot .base nav{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;}
.big-foot .base a{color:var(--dark);text-decoration:none;}

/* ── modal (waitlist) ── */
.modal-overlay{display:none;position:fixed;inset:0;z-index:300;background:rgba(10,10,10,.7);align-items:center;justify-content:center;padding:1.5rem;}
.modal-overlay.open{display:flex;}
.modal-box{background:var(--gray);border-radius:20px;padding:2.5rem;max-width:420px;width:100%;position:relative;}
.modal-box h3{font-family:var(--font-display);font-size:1.6rem;font-weight:800;text-transform:uppercase;letter-spacing:-.02em;margin-bottom:.6rem;}
.modal-sub{font-size:.82rem;color:#555;line-height:1.5;margin-bottom:1.5rem;}
.modal-field{margin-bottom:1rem;}
.modal-field label{display:block;font-size:.7rem;letter-spacing:.08em;font-weight:600;margin-bottom:.4rem;color:#555;}
.modal-field input{width:100%;border:1.5px solid rgba(0,0,0,.15);border-radius:10px;padding:.7rem .9rem;font-size:.9rem;font-family:inherit;background:#fff;}
.modal-submit{width:100%;background:var(--dark);color:var(--gray);border:none;border-radius:50px;padding:.85rem;font-size:.72rem;letter-spacing:.12em;font-weight:600;cursor:pointer;margin-top:.5rem;}
.modal-note{font-size:.68rem;color:#888;margin-top:1rem;text-align:center;}
.modal-close{position:absolute;top:1.25rem;right:1.25rem;background:none;border:none;font-size:1.1rem;cursor:pointer;color:#888;}

/* ── scroll reveal (assets/reveal.js) ── */
[data-reveal]{opacity:0;transform:translateY(32px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);will-change:opacity,transform;}
[data-reveal].is-visible{opacity:1;transform:translateY(0);}
[data-reveal="scale"]{transform:scale(.94);}
[data-reveal="scale"].is-visible{transform:scale(1);}
[data-reveal-delay="1"]{transition-delay:.09s;}
[data-reveal-delay="2"]{transition-delay:.18s;}
[data-reveal-delay="3"]{transition-delay:.27s;}
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1!important;transform:none!important;transition:none!important;}}