/* AthletiGo, /online-training/
   Cool treatment, the mirror of the personal page. The page cools downwards
   from the void into a cool near-black, one light source rises from the bottom
   corner, and the content sits in separate rounded cards with hairline borders
   rather than in full width bars.
   Nothing here is brighter than about six percent above the void. */

:root{
  --void:#050506;--ink:#0b0b0d;--ink-2:#101013;
  --orange:#FF6F20;--orange-2:#C9541F;--ember:#ff9450;--deep:#2b1004;
  --cream:#FBF3EA;--muted:#8d8880;--line:rgba(251,243,234,.10);
  --maxw:1180px;--gutter:clamp(20px,5vw,54px);
  /* the cool end of the page: a near-black with a trace of blue in it */
  --cool:#090a0d;--cool-2:#0c0d11;
}

/* This stylesheet loads on this one page only, so the bare element rules
   below cannot reach anything else. */
html{background:var(--void)}
body.athletigo-online{background-color:var(--void);
  background-image:linear-gradient(180deg,var(--void) 0%,var(--cool) 46%,var(--cool-2) 100%)}

.ol{
  color:var(--cream);direction:rtl;
  font-family:"Heebo",system-ui,-apple-system,"Segoe UI",sans-serif;
  background-color:transparent;
  background-image:linear-gradient(180deg,var(--void) 0%,var(--cool) 52%,var(--cool-2) 100%);
}
.ol .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.ol a{color:inherit;text-decoration:none}
.ol :focus-visible{outline:2px solid var(--orange);outline-offset:4px}

/* the single light source, rising from the bottom corner */
#glow{
  position:fixed;inset:0;pointer-events:none;z-index:2;mix-blend-mode:screen;
  background:radial-gradient(720px 520px at 12% 106%,rgba(255,111,32,.06),transparent 68%)}

.ol .num{font-family:"Barlow Condensed","Heebo",sans-serif;font-weight:700}
.ol .eyebrow{font-size:clamp(13px,1.5vw,16px);letter-spacing:.22em;color:var(--orange-2);
  margin:0 0 14px}
.ol .h1{font-size:clamp(30px,5.4vw,62px);line-height:1.04;font-weight:900;
  letter-spacing:-.03em;margin:0 0 18px;color:#FBF3EA}
.ol .h2{font-size:clamp(23px,3.2vw,40px);line-height:1.12;font-weight:900;
  letter-spacing:-.02em;margin:0 0 18px;color:#FBF3EA}
.ol-p{color:#c7c1b9;font-weight:200;font-size:clamp(16px,1.85vw,19px);line-height:1.68;
  margin:0 0 22px;max-width:60ch}
.ol-lead{color:#cdc7bf;font-weight:200;font-size:clamp(17px,2.1vw,22px);line-height:1.6;
  margin:0 0 26px;max-width:46ch}

.ol .btn{display:inline-block;background:var(--orange);color:var(--deep);font-weight:700;
  font-size:clamp(15px,1.5vw,17px);padding:clamp(12px,1.5vw,16px) clamp(24px,3vw,36px);
  border-radius:999px;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease}
.ol .btn:hover{transform:translateY(-3px);box-shadow:0 16px 44px rgba(255,111,32,.35)}
.ol-cta{margin:0}

/* head */
.ol-head{padding:clamp(46px,8vh,104px) 0 clamp(26px,4vw,52px)}
.ol-crumbs{font-size:13px;color:var(--muted);font-weight:200;margin:0 0 22px}
.ol-crumbs a:hover{color:var(--orange)}
.ol-crumbs span[aria-hidden]{margin:0 8px;opacity:.6}

.ol-sec{padding:clamp(34px,5.5vh,72px) 0;position:relative;z-index:1}
.ol-after{margin:22px 0 0;color:#b8b2aa}

/* cards: separate, rounded, hairline border, a whisper of the cool tone */
.cards{display:grid;gap:clamp(12px,1.6vw,18px)}
.cards.loop{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards.four{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{
  border:1px solid var(--line);border-radius:18px;
  padding:clamp(18px,2.3vw,28px);
  background-image:linear-gradient(180deg,rgba(16,17,22,.72),rgba(5,5,6,.35));
  transition:border-color .3s ease,transform .3s cubic-bezier(.2,.8,.2,1);
}
.card:hover{border-color:rgba(255,111,32,.4);transform:translateY(-3px)}
.card-n{margin:0 0 10px;color:var(--orange);font-size:clamp(20px,2.5vw,28px);
  letter-spacing:.06em;line-height:1;opacity:.9}
.card h3{margin:0 0 10px;font-size:clamp(17px,2vw,21px);font-weight:700;color:#FBF3EA;
  line-height:1.3}
.card p{margin:0;color:#b5afa7;font-weight:200;font-size:clamp(15px,1.7vw,17px);line-height:1.62}
.card a{border-bottom:1px solid rgba(255,111,32,.55)}
.card a:hover{color:var(--orange)}

/* faq */
.ol-faq details{border-top:1px solid var(--line);padding:16px 0}
.ol-faq details:last-of-type{border-bottom:1px solid var(--line)}
.ol-faq summary{cursor:pointer;list-style:none;font-size:clamp(16px,1.9vw,19px);
  font-weight:500;color:#FBF3EA;position:relative;padding-left:28px}
.ol-faq summary::-webkit-details-marker{display:none}
.ol-faq summary::after{content:"+";position:absolute;left:0;top:-2px;color:var(--orange);
  font-size:20px;line-height:1;transition:transform .25s ease}
.ol-faq details[open] summary::after{transform:rotate(45deg)}
.ol-faq details p{color:#b5afa7;font-weight:200;font-size:clamp(15px,1.7vw,17px);
  line-height:1.7;margin:12px 0 0;max-width:70ch}

/* close */
.ol-close{padding-bottom:clamp(56px,9vh,120px)}
.ol-back{margin:22px 0 0;font-size:15px;color:var(--muted);font-weight:200}
.ol-back a{border-bottom:1px solid rgba(255,111,32,.5)}
.ol-back a:hover{color:var(--orange)}

@media (max-width:900px){
  .cards.three{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .cards.loop,.cards.four,.cards.three{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .ol *{transition:none !important;animation:none !important}
}