/* Leev — speedrun sheet (LiveSplit). Tokens mirror Ink in the app's Shared.swift. */
/* Extenro (tabular digits patched in) for every header, label and numeral; no accents, no €/+/−: those fall back to the system face. size-adjust matches the app's 0.78 scale. */
@font-face{font-family:"Extenro";src:url("/fonts/Extenro-Regular.woff2") format("woff2");font-weight:400;font-display:swap;size-adjust:78%}
@font-face{font-family:"Extenro";src:url("/fonts/Extenro-Bold.woff2") format("woff2");font-weight:700;font-display:swap;size-adjust:78%}
@font-face{font-family:"Extenro";src:url("/fonts/Extenro-ExtraBold.woff2") format("woff2");font-weight:800 900;font-display:swap;size-adjust:78%}
:root{
  --bg:#0B0C0F;
  --rule:#1D2026;
  --fg:#F3F4F6;
  --dim:#8B919B;
  --ahead:#37D67A;
  --behind:#FF5A4E;
  --gold:#F2C14E;
  --lift:#15171B; /* fg at 6% on bg: the SOS field */
  --text:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --num:"Extenro",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{background:var(--bg);color:var(--fg);font:17px/1.55 var(--text);overflow-x:hidden}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--ahead)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;background:var(--fg);color:var(--bg);padding:8px 12px;z-index:2}

/* type */
.n,h1,h2,.logo,.lbl{font-family:var(--num);font-variant-numeric:tabular-nums}
.n{font-weight:900;font-stretch:75%;line-height:1}
.lbl{font-weight:800;font-stretch:85%;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
h1,h2{text-wrap:balance}
h1{font-weight:900;font-stretch:75%;text-transform:uppercase;line-height:.9;letter-spacing:-.005em;font-size:clamp(28px,7.6vw,84px)}
h2{font-weight:900;font-stretch:75%;text-transform:uppercase;line-height:.92;font-size:clamp(26px,6.6vw,58px);margin-bottom:20px}
h3{font-size:19px;line-height:1.3;margin-bottom:4px}
.sec-block h3,.price h3{font:800 22px/1.1 var(--num);font-stretch:85%}
.dim{color:var(--dim)}
.ahead{color:var(--ahead)}
.behind{color:var(--behind)}
.gold{color:var(--gold)}
p{max-width:36em}

/* header */
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:60px;border-bottom:1px solid var(--rule)}
.logo{font-weight:900;font-stretch:75%;font-size:28px;letter-spacing:.02em;text-decoration:none;text-transform:uppercase}
.logo b{color:var(--ahead);font-weight:inherit}
.top nav{display:flex;gap:4px;font-size:15px}
.top nav a{text-decoration:none;color:var(--dim);padding:10px 8px}
.top nav a:hover{color:var(--fg)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-height:56px;padding:0 20px;background:var(--fg);color:var(--bg);text-decoration:none;font:800 16px/1 var(--num);font-stretch:85%;letter-spacing:.06em;text-transform:uppercase}
.btn{transition:background-color .15s,transform .1s}
.btn:hover{background:#fff;color:var(--bg)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline-offset:4px}
.btn span{font-size:20px}
.cta{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin-top:24px}
.cta small{font-size:14px;color:var(--dim)}

/* hero */
.hero{padding-top:28px;padding-bottom:40px;display:grid;gap:28px}
.lead{font-size:clamp(18px,2.2vw,21px);margin-top:16px;max-width:30em}
.lead strong{color:var(--fg)}

/* run sheet */
.sheet{border-top:2px solid var(--fg);container-type:inline-size}
.sh-head{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:44px;border-bottom:1px solid var(--rule)}
.sh-head .lbl i{font-style:normal;color:var(--dim);font-size:12px}
.world{text-align:center;border-bottom:1px solid var(--rule)}
.ann{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 10px;padding-top:14px;font-size:10px;white-space:nowrap;color:rgba(55,214,122,.22)}
.ann b{font-weight:inherit;color:var(--ahead)}
/* one size for the whole run, like the LCD on Home: "1d 04:17:33" on one line */
.clock{padding:6px 0 0;color:var(--ahead);font-size:clamp(26px,9.4cqi,80px);line-height:1.05;white-space:nowrap;filter:drop-shadow(0 0 10px rgba(55,214,122,.45))}
.mood{font-size:12px;color:var(--ahead);padding-top:6px}
/* her world, rendered by the app; the sky fades into the sheet */
.world img{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(transparent,#000 24%);mask-image:linear-gradient(transparent,#000 24%)}
.who{font-size:12px;color:var(--dim);padding:8px 0 10px}
.who b{font-weight:inherit;color:var(--fg)}
.next{padding:12px 0;border-bottom:1px solid var(--rule)}
.next > div{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.next .lbl{font-size:13px}
.next .n{font-size:18px;font-weight:800;white-space:nowrap}
.bar{display:block;height:6px;background:var(--rule);margin-top:10px}
.bar i{display:block;height:100%;width:60%;background:var(--fg)}
.drop{display:block;font-size:11px;color:var(--dim);margin-top:10px}
.widget{display:block;width:min(100%,280px);height:auto}
.totals{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px 0;border-bottom:1px solid var(--rule)}
.totals .n{font-size:24px;font-weight:800;font-stretch:90%;display:block}
.totals .lbl{font-size:11px;color:var(--dim);display:block;margin-top:2px}
.sheet-note{font-size:14px;color:var(--dim);margin-top:10px}

/* ticking digits: pure CSS, no script (CSP stays script-free). Each digit is a vertical strip
   stepped by an animation; a negative delay (--t) sets the starting value. */
.d{display:inline-block;height:1em;line-height:1;overflow:hidden;vertical-align:top}
.d::before{display:block;white-space:pre;animation:roll var(--p) steps(var(--k)) infinite;animation-delay:var(--t)}
.u10::before{--p:10s;--k:10;content:"0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9"}
.t60::before{--p:60s;--k:6;content:"0\A 1\A 2\A 3\A 4\A 5"}
.u600::before{--p:600s;--k:10;content:"0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9"}
.t3600::before{--p:3600s;--k:6;content:"0\A 1\A 2\A 3\A 4\A 5"}
/* countdowns: same strips, descending */
.dn.u10::before,.dn.u600::before{content:"9\A 8\A 7\A 6\A 5\A 4\A 3\A 2\A 1\A 0"}
.dn.t60::before,.dn.t3600::before{content:"5\A 4\A 3\A 2\A 1\A 0"}
/* run 1d 04:17:42 → 1062 s into the hour; next stage in 19:42:18 → 3599−2538 (+0.5 s off the step edge) */
.up{--t:-1062.5s}
.down{--t:-1061.5s}
@keyframes roll{to{transform:translateY(-100%)}}

/* sections */
.sec-block{padding:56px 0 64px;border-top:1px solid var(--rule)}
/* SOS sits on its own field: the tone step is the transition, so no rule above or below it */
.field{background:var(--lift);border-top:0}
.after-field{border-top:0}
.sec-block > .wrap > p{margin-bottom:12px}
.cols{display:grid;gap:28px}.cols>*{min-width:0}

/* slip */
.slip{border-top:2px solid var(--fg)}
.slip > div{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:4px 12px;padding:12px 0;border-bottom:1px solid var(--rule)}
.slip .lbl{grid-column:1/-1;color:var(--dim);font-size:12px}
.slip .n{font-size:clamp(30px,8vw,44px)}
.slip .what{font-size:14px;color:var(--dim);text-align:right}
.slip .tap{display:flex;justify-content:space-between;align-items:center;min-height:50px;padding:0 16px;margin:14px 0;border:1.5px solid #3A3F49}
.slip .tap .lbl{font-size:14px;color:var(--fg)}
.slip .tap span:last-child{font-size:14px;color:var(--dim)}
#marks-title{margin-top:36px}
.marks{list-style:none;display:flex;flex-wrap:wrap;gap:0;margin-top:10px;border-top:1px solid var(--rule)}
.marks li{flex:1 0 33%;padding:10px 0;border-bottom:1px solid var(--rule);font:700 14px/1.2 var(--num);text-transform:uppercase}
.marks .gold{color:var(--gold)}
.marks .done{color:var(--dim)}
.marks.stages li{flex-basis:50%}
.cols p+p{margin-top:12px}

/* step-down chart */
.chart{width:100%;height:auto;display:block;margin-top:8px}
.chart .bar{fill:#3A3F49}
.chart .bar.base{fill:none;stroke:var(--dim);stroke-width:1.5;stroke-dasharray:4 4}
.chart .bar.now{fill:var(--fg)}
.chart .zero{fill:var(--ahead)}
.chart .axis{stroke:var(--rule);stroke-width:1}
.chart text{font-family:var(--num);fill:var(--fg);font-weight:800;font-stretch:90%}
.chart .v{font-size:22px}
.chart .w{font-size:13px;fill:var(--dim);letter-spacing:.06em}
.chart .z{fill:var(--ahead)}
.caption{font-size:14px;color:var(--dim);margin-top:8px}
.quota{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:48px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-top:18px}
.quota .lbl{color:var(--dim);font-size:12px}
.slots{display:flex;gap:3px;margin-left:auto}
.slots i{width:8px;height:20px;border:1.5px solid var(--fg)}
.slots i.on{background:var(--fg)}
.quota .n{font-size:22px;font-weight:800;font-stretch:90%}

/* SOS */
.sos-num{font-size:clamp(96px,30vw,260px);color:var(--fg);display:block;line-height:.85}
.sos-num small{font-size:.3em;color:var(--dim);font-weight:700}
.phases{list-style:none;border-top:1px solid var(--rule);margin-top:20px}
.phases li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid var(--rule)}
.phases .n{font-size:26px}
.phases .lbl{font-size:18px;text-transform:none;letter-spacing:0}
.track{height:3px;background:var(--rule);margin-top:18px;overflow:hidden}
.track::before{content:"";display:block;height:100%;background:var(--fg);transform-origin:left;animation:fill 90s linear infinite}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* share card mock */
.card{width:min(100%,300px);aspect-ratio:9/16;border:1px solid var(--rule);padding:20px;display:flex;flex-direction:column;background:var(--bg)}
.card .hd{display:flex;justify-content:space-between;border-bottom:2px solid var(--fg);padding-bottom:10px}
.card .k{margin-top:22px;font-size:12px;color:var(--dim)}
.card .big{font-size:58px;color:var(--ahead)}
.card .pb{font-size:12px;color:var(--ahead)}
.card dl{margin-top:auto}
.card dl div{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--rule);padding:5px 0;font-size:13px}
.card dd{font:800 19px/1 var(--num);font-stretch:90%}
.card .ft{font-size:10px;color:var(--dim);margin-top:10px}

/* promise */
.promise{list-style:none;border-top:2px solid var(--fg);margin-top:8px}
.promise li{padding:14px 0;border-bottom:1px solid var(--rule)}
.promise li strong{display:block;font:900 24px/1.05 var(--num);font-stretch:75%;text-transform:uppercase;margin-bottom:4px}

/* pricing */
.price{display:grid;grid-template-columns:minmax(0,1fr);border-top:2px solid var(--fg)}
.price > div{padding:20px 0;border-bottom:1px solid var(--rule)}
.price .tag{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:0 12px}
.price .tag .n{font-size:clamp(44px,12vw,64px)}
.price .pro .tag .n{color:var(--gold)}
.price ul{list-style:none;margin-top:10px}
.price li{padding:8px 0 8px 26px;position:relative;border-top:1px solid var(--rule)}
.price li::before{content:"";position:absolute;left:2px;top:.85em;width:10px;height:5px;border:solid var(--ahead);border-width:0 0 2px 2px;transform:rotate(-45deg)}
.price .pro li::before{border-color:var(--gold)}
.fine{font-size:14px;color:var(--dim);margin-top:14px}

/* FAQ */
.faq{border-top:2px solid var(--fg)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary:hover{color:var(--ahead)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center;min-height:56px;padding:8px 0;font-weight:600;font-size:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:800 26px/1 var(--num);color:var(--dim)}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 0 16px;color:var(--dim)}
.more{display:inline-block;margin-top:18px}
#faq + div{max-width:760px}

.note{font-size:14px;color:var(--dim);max-width:44em;margin-top:22px}
.end h2{margin-bottom:8px}
.pageclock .n{display:block;color:var(--ahead);font-size:clamp(44px,15vw,200px);white-space:nowrap}
.pageclock p{color:var(--dim);font-size:16px;margin-top:10px;max-width:30em}
.end .cta{margin-top:32px}

/* long-form pages */
.doc{padding:32px 0 48px;max-width:70ch}
.doc h1{font-size:clamp(48px,12vw,84px);margin-bottom:10px}
.doc .updated{color:var(--dim);font-size:15px;margin-bottom:24px}
.doc h2{font-size:clamp(28px,6vw,38px);margin:40px 0 10px;padding-top:16px;border-top:1px solid var(--rule)}
.doc h2 small{font-size:.5em;color:var(--dim);letter-spacing:.04em}
.doc h3{margin-top:24px}
.doc p,.doc ul{margin:10px 0;max-width:none}
.doc ul{padding-left:20px}
.doc li{margin:6px 0}
.doc strong{color:#fff}
.doc a{color:var(--fg)}
.doc .btn,.doc .btn:hover{color:var(--bg)}
.doc .cta+p{margin-top:24px}
.callout{border-top:2px solid var(--gold);padding:14px 0 0;margin:20px 0}
.tel{font-weight:700;white-space:nowrap}

footer{padding:28px 0 40px;font-size:14px;color:var(--dim);border-top:1px solid var(--rule)}
footer .links{display:flex;flex-wrap:wrap;gap:4px 18px;margin-bottom:10px}
footer .links a{color:var(--fg);display:inline-block;padding:12px 0}

@media (min-width:860px){
  body{font-size:18px}
  .hero{grid-template-columns:6fr 7fr;gap:48px;align-items:start;padding-top:56px;padding-bottom:64px}
  h1{font-size:clamp(64px,5.6vw,80px)}
  :lang(fr) .hero h1{font-size:clamp(60px,5.1vw,74px)}
  .hero-copy{position:sticky;top:24px}
  .sec-block{padding:120px 0 128px}
  .field{padding:136px 0}
  .flip > :first-child{order:2}
  .after-field .cols{grid-template-columns:5fr 7fr}
  .cols{grid-template-columns:1fr 1fr;gap:72px;align-items:start}
  .field .cols{grid-template-columns:5fr 7fr;align-items:end}
  .field .sos-num{font-size:clamp(160px,18vw,240px)}
  .phases{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px}
  .phases li{flex-direction:column;align-items:flex-start;gap:6px;padding:14px 0}
  .phases .n{font-size:40px}
  /* the three promises read as a ledger: claim left, proof right */
  .promise{margin-top:40px}
  .promise li{display:grid;grid-template-columns:5fr 7fr;gap:0 72px;align-items:baseline;padding:22px 0}
  .promise li strong{font-size:36px;margin:0}
  .faq summary{font-size:19px}
  .pageclock .n{font-size:clamp(120px,14vw,180px)}
  .marks li{flex-basis:20%}
  .price{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 48px}
}
@media (prefers-reduced-motion:reduce){
  /* paused at its negative delay, each strip still shows the right digit */
  .d::before,.track::before{animation-play-state:paused}
  /* the page clock only means something while it runs */
  .pageclock{display:none}
  .track::before{transform:scaleX(.6);animation:none}
}