:root{
  color-scheme:dark;
  --night:#06101d;
  --night-2:#0a1727;
  --night-3:#10243a;
  --paper:#f3f1eb;
  --paper-2:#ebe8e0;
  --ink:#f7fbff;
  --ink-dark:#0d1a29;
  --muted:#9aabc0;
  --muted-dark:#5d6977;
  --blue:#0878ff;
  --blue-2:#56b7ff;
  --cyan:#70e5f8;
  --line:rgba(255,255,255,.13);
  --dark-line:rgba(13,26,41,.13);
  --max:1320px;
  --radius:26px;
  --shadow:0 30px 80px rgba(0,0,0,.25);
  --story-progress:0%;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  background:var(--night);
  color:var(--ink);
  font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body::selection{background:#167cff;color:#fff}
img{display:block;max-width:100%}
button,input,textarea,select{font:inherit}
a{color:inherit}
.container{width:min(calc(100% - 3rem),var(--max));margin-inline:auto}
.skip-link{position:absolute;left:-9999px;top:1rem;z-index:1000;background:#fff;color:#000;padding:.7rem 1rem;border-radius:.5rem}
.skip-link:focus{left:1rem}
a:focus-visible,button:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(6,16,29,.82);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  backdrop-filter:blur(20px) saturate(140%);
}
.nav{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.brand{display:inline-flex;align-items:center;gap:.72rem;text-decoration:none;color:#fff;font-weight:900;letter-spacing:.01em}
.brand-mark{width:38px;height:38px;border-radius:10px;pointer-events:none;user-select:none;-webkit-user-drag:none}
.nav-links{display:flex;align-items:center;gap:1.25rem}
.nav-links a{text-decoration:none;color:#c8d4e2;font-size:.82rem;font-weight:750}
.nav-links a:hover{color:#fff}
.nav-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 1rem;
  border-radius:999px;
  background:#fff;
  color:#07111f;
  text-decoration:none;
  font-size:.78rem;
  font-weight:900;
  white-space:nowrap;
}

.hero-editorial{
  position:relative;
  overflow:hidden;
  padding:5rem 0 0;
  background:
    radial-gradient(circle at 84% 4%,rgba(8,120,255,.19),transparent 28rem),
    linear-gradient(180deg,#07111f 0%,#06101d 100%);
}
.hero-layout{
  min-height:700px;
  display:grid;
  grid-template-columns:minmax(0,.83fr) minmax(560px,1.17fr);
  gap:4rem;
  align-items:center;
}
.hero-copy{padding:3rem 0 5rem}
.hero-kicker,.section-kicker{
  display:inline-block;
  margin-bottom:1rem;
  color:#7fb9ff;
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.section-kicker.light{color:#a6cbff}
.hero-copy h1,.section-heading h2,.story-intro h2,.challenge-copy h2,.rewards-copy h2,.data-section h2,.launch-shell h2{
  margin:0;
  font-weight:800;
  letter-spacing:-.048em;
  line-height:.98;
  text-wrap:balance;
}
.hero-copy h1{font-size:clamp(4.6rem,8.6vw,8.8rem)}
.hero-copy h1 em{font-style:normal;color:var(--blue-2)}
.hero-lead{max-width:590px;margin:1.6rem 0 0;color:#c5d1df;font-size:clamp(1.1rem,1.8vw,1.35rem);line-height:1.65}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.65rem;
  min-height:52px;
  padding:0 1.25rem;
  border-radius:999px;
  text-decoration:none;
  font-weight:900;
  font-size:.86rem;
  transition:background .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.button-primary{background:var(--blue);color:#fff;box-shadow:0 14px 32px rgba(8,120,255,.22)}
.button-quiet{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);color:#fff}
/* Approved French prelaunch artwork. Each clickable badge is one image,
   preventing duplicated text or accidental use of obsolete store symbols. */
.store-availability{margin-top:1.55rem}
.store-platform-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:485px;gap:.8rem}
.store-platform-link{display:block;width:100%;min-width:0;border-radius:15px;text-decoration:none}
.store-platform-link:focus-visible{outline:2px solid #7fb9ff;outline-offset:3px}
.store-platform-badge{display:block;width:100%;height:auto;aspect-ratio:3/1;object-fit:contain;filter:drop-shadow(0 5px 9px rgba(0,0,0,.24));pointer-events:none;user-select:none;-webkit-user-drag:none}
.store-platform-link:hover .store-platform-badge{filter:drop-shadow(0 6px 12px rgba(0,0,0,.32)) brightness(1.07)}
.hero-disciplines{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:1.7rem}
.hero-disciplines span{padding:.4rem .62rem;border-top:1px solid rgba(255,255,255,.18);color:#8f9eb2;font-size:.65rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}

.hero-visual{position:relative;min-height:640px;display:flex;align-items:center}
.hero-photo{
  position:relative;
  margin:0;
  width:100%;
  height:620px;
  overflow:hidden;
  border-radius:34px 0 0 34px;
  background:#0b1929;
  box-shadow:var(--shadow);
}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none;user-select:none;-webkit-user-drag:none}
.hero-photo::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 48%,rgba(3,9,17,.72) 100%)}
.hero-photo figcaption{position:absolute;left:1.6rem;right:1.6rem;bottom:1.5rem;z-index:2;display:flex;justify-content:space-between;align-items:end;gap:1rem}
.hero-photo figcaption span{max-width:360px;font-size:1.25rem;font-weight:900}
.hero-photo figcaption small{color:#c4d1df;font-weight:700}
.hero-marquee{pointer-events:none;overflow:hidden;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);background:#071321}
.hero-marquee div{width:max-content;padding:.95rem 0;font-size:.68rem;font-weight:900;letter-spacing:.18em;color:#607389;animation:marquee 34s linear infinite}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-25%)}}

.light-section{background:var(--paper);color:var(--ink-dark)}
.product-section{padding:8rem 0 9rem}
.section-heading{margin-bottom:3.25rem}
.split-heading{display:grid;grid-template-columns:1.05fr .95fr;gap:5rem;align-items:end}
.section-heading h2,.challenge-copy h2,.rewards-copy h2,.data-section h2,.launch-shell h2{font-size:clamp(3.4rem,6.2vw,6.8rem)}
.split-heading p,.practice-heading p{margin:0;max-width:650px;color:var(--muted-dark);font-size:1rem;line-height:1.8}
.product-sequence{display:grid;grid-template-columns:1.12fr .88fr;grid-template-rows:1fr 1fr;gap:1rem}
.product-panel{position:relative;min-height:360px;overflow:hidden}
.product-panel-photo{grid-row:1/3;border-radius:var(--radius);background:#15212b}
.product-panel-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none;-webkit-user-drag:none}
.product-panel-photo::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 42%,rgba(6,16,29,.84) 100%)}
.product-panel-caption{position:absolute;left:1.6rem;right:1.6rem;bottom:1.6rem;z-index:2;color:#fff}
.product-panel-caption span{font-size:.66rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#acd0ff}
.product-panel-caption h3{max-width:520px;margin:.6rem 0 0;font-size:clamp(2rem,3.2vw,3.8rem);line-height:.98;letter-spacing:-.035em}
.product-panel-ui{display:grid;grid-template-columns:auto 1fr;gap:1.15rem;padding:1.35rem;border:1px solid var(--dark-line);background:#fff;border-radius:var(--radius)}
.product-panel-dark{background:#0a1727;color:#fff;border-color:rgba(255,255,255,.1)}
.panel-number{display:block;color:#8997a7;font-size:.66rem;font-weight:900;letter-spacing:.14em}
.interface-card{align-self:start;padding:1rem;border-radius:18px;background:#091524;color:#fff;box-shadow:0 15px 40px rgba(0,0,0,.16)}
.interface-title{display:flex;align-items:center;justify-content:space-between;font-size:.75rem;font-weight:900}
.interface-title i{width:8px;height:8px;border-radius:50%;background:#56d9a0;box-shadow:0 0 0 5px rgba(86,217,160,.11)}
.metric-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;margin-top:.9rem}
.metric-grid div{padding:.65rem;border-radius:12px;background:rgba(255,255,255,.055)}
.metric-grid small{display:block;color:#8191a5;font-size:.56rem}
.metric-grid strong{font-size:.8rem}
.product-copy{grid-column:1/-1;align-self:end}
.product-copy h3{margin:0;font-size:1.45rem;letter-spacing:-.025em}
.product-copy p{margin:.55rem 0 0;color:#64707c;font-size:.86rem;line-height:1.65}
.product-panel-dark .product-copy p{color:#91a0b2}
.stats-lines{pointer-events:none;grid-column:2;align-self:center;display:grid;gap:.75rem}
.stats-lines div{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:.7rem;color:#91a0b2;font-size:.62rem}
.stats-lines i{height:5px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden}
.stats-lines i::before{content:"";display:block;height:100%;width:62%;border-radius:inherit;background:linear-gradient(90deg,var(--blue),var(--cyan))}\n.stats-lines .bar-w78::before{width:78%}\n.stats-lines .bar-w92::before{width:92%}

.story-section{position:relative;padding:9rem 0;background:#06101d}
.story-line{pointer-events:none;position:absolute;left:0;right:0;top:0;height:2px;background:rgba(255,255,255,.06)}
.story-line i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--blue),var(--cyan));transition:width .18s linear}
.story-section.progress-1 .story-line i{width:10%}
.story-section.progress-2 .story-line i{width:20%}
.story-section.progress-3 .story-line i{width:30%}
.story-section.progress-4 .story-line i{width:40%}
.story-section.progress-5 .story-line i{width:50%}
.story-section.progress-6 .story-line i{width:60%}
.story-section.progress-7 .story-line i{width:70%}
.story-section.progress-8 .story-line i{width:80%}
.story-section.progress-9 .story-line i{width:90%}
.story-section.progress-10 .story-line i{width:100%}
.story-layout{display:grid;grid-template-columns:.82fr 1.18fr;gap:6rem;align-items:start}
.story-intro{position:sticky;top:125px}
.story-intro h2{font-size:clamp(3.4rem,6vw,6.4rem)}
.story-intro p{max-width:500px;margin:1.4rem 0 0;color:#9babbf;line-height:1.8}
.story-steps{display:grid}
.story-step{display:grid;grid-template-columns:72px 1fr;gap:1.4rem;padding:2.2rem 0;border-top:1px solid rgba(255,255,255,.12)}
.story-step>span{font-size:.68rem;font-weight:900;letter-spacing:.14em;color:#6f8195}
.story-step small{display:block;color:#77b7ff;font-size:.68rem;font-weight:900;text-transform:uppercase;letter-spacing:.12em}
.story-step h3{margin:.5rem 0 .55rem;font-size:clamp(1.8rem,3vw,3rem);letter-spacing:-.035em}
.story-step p{margin:0;max-width:600px;color:#93a3b7}
.story-step-accent h3{color:#7fc0ff}

.challenge-section{padding:8.5rem 0}
.challenge-layout{display:grid;grid-template-columns:.82fr 1.18fr;gap:5rem;align-items:center}
.challenge-copy p{max-width:520px;color:var(--muted-dark);line-height:1.8}
.micro-note{font-size:.76rem!important;color:#798695!important}
.challenge-rules{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.challenge-rule{min-height:260px;padding:1.2rem;border-top:5px solid #cbd1d6;background:#fff;display:flex;flex-direction:column;justify-content:space-between}
.challenge-rule span{font-size:.68rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#65707e}
.challenge-rule strong{font-size:clamp(2.8rem,5vw,5.2rem);letter-spacing:-.06em;line-height:.9}
.challenge-rule small{color:#697481;font-weight:800}
.challenge-rule-featured{position:relative;top:-18px;border-top-color:var(--blue);background:#07111f;color:#fff}
.challenge-rule-featured span,.challenge-rule-featured small{color:#93a6bc}

.practice-section{padding:9rem 0;background:#0a1727}
.practice-heading{display:grid;grid-template-columns:1.05fr .95fr;gap:5rem;align-items:end}
.practice-heading h2{margin:0;font-size:clamp(3.4rem,6.2vw,6.8rem);line-height:.93;letter-spacing:-.055em}
.practice-heading p{color:#93a4b8}
.practice-selector{display:flex;gap:.55rem;flex-wrap:wrap;margin-bottom:1.25rem}
.practice-button{border:1px solid rgba(255,255,255,.15);background:transparent;color:#a7b5c5;border-radius:999px;padding:.58rem .88rem;font-size:.72rem;font-weight:900;cursor:pointer}
.practice-button.active{border-color:#76bbff;background:#fff;color:#08111e}
.practice-stage{position:relative;min-height:650px;margin:0;overflow:hidden;border-radius:30px;background:#101d2a}
.practice-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none;-webkit-user-drag:none;transition:opacity .24s ease}\n.practice-stage.is-switching img{opacity:.25}
.practice-stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,12,20,.04) 34%,rgba(5,12,20,.84) 100%)}
.practice-stage figcaption{position:absolute;left:2rem;right:2rem;bottom:2rem;z-index:2;max-width:680px}
.practice-stage figcaption span{font-size:.68rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#8fc3ff}
.practice-stage figcaption h3{margin:.55rem 0 .55rem;font-size:clamp(2.5rem,4.8vw,5.3rem);line-height:.95;letter-spacing:-.05em}
.practice-stage figcaption p{margin:0;max-width:570px;color:#d0d9e5}
.practice-grid{pointer-events:none;display:grid;grid-template-columns:1.3fr .7fr 1fr;grid-template-rows:240px 240px;gap:.75rem;margin-top:.75rem}
.practice-tile{overflow:hidden;min-height:0}
.practice-tile img{width:100%;height:100%;object-fit:cover}
.practice-tile.tall{grid-row:1/3}
.practice-tile.wide{grid-column:2/4}

.rewards-section{padding:8.5rem 0}
.rewards-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:5rem;align-items:center}
.rewards-visual{position:relative;min-height:580px;overflow:hidden}
.rewards-visual img{width:100%;height:580px;object-fit:cover;pointer-events:none;user-select:none;-webkit-user-drag:none}
.coming-badge{position:absolute;left:1.2rem;bottom:1.2rem;padding:.55rem .78rem;border-radius:999px;background:#fff;color:#0b1826;font-size:.7rem;font-weight:950}
.rewards-copy p{max-width:650px;color:var(--muted-dark);font-size:1rem;line-height:1.8}
.text-link{display:inline-flex;gap:.6rem;align-items:center;margin-top:.8rem;color:#0a63cb;font-size:.84rem;font-weight:950;text-decoration:none}
.light-link{color:#84c2ff}

.data-section{padding:8.5rem 0;background:#06101d}
.data-section .split-heading p{color:#9aaabd}
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:3rem}
.trust-item{min-height:260px;padding:1.35rem;border-top:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.025)}
.trust-item span{display:block;margin-bottom:3rem;color:#5f748d;font-size:.65rem;font-weight:900}
.trust-item h3{margin:0;font-size:1.35rem}
.trust-item p{margin:.65rem 0 0;color:#91a2b6;line-height:1.7}

.launch-section{padding:7rem 0;background:var(--paper);color:var(--ink-dark)}
.launch-shell{display:grid;grid-template-columns:1.05fr .95fr;gap:5rem;align-items:end;padding:4.5rem;border:1px solid var(--dark-line);background:#fff}
.launch-action p{max-width:560px;margin:0 0 1.3rem;color:var(--muted-dark);line-height:1.75}
.launch-action small{display:block;margin-top:.75rem;color:#7b8794;font-size:.7rem}

.site-footer{padding:4rem 0 2rem;background:#040b14;color:#91a0b3;border-top:1px solid rgba(255,255,255,.08)}
.footer-premium{display:grid;grid-template-columns:2fr 1fr 1.2fr;gap:4rem;padding-bottom:3rem}
.footer-brand-block p{max-width:430px;color:#7e8ea2;font-size:.85rem}
.footer-column{display:grid;align-content:start;gap:.7rem}
.footer-column strong{color:#fff;font-size:.75rem}
.footer-column a{color:#92a0b2;text-decoration:none;font-size:.76rem}
.footer-column a:hover{color:#fff}
.footer-bottom{display:flex;justify-content:space-between;gap:1rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.06);font-size:.7rem;color:#66768a}

/* Shared secondary pages */
body:not(.home-page){background:#06101d}
.page-hero{padding:5.2rem 0 1.8rem;background:linear-gradient(180deg,#081625,#06101d)}
.page-hero h1{max-width:980px;margin:1rem 0;font-size:clamp(3rem,6vw,5.8rem);line-height:.95;letter-spacing:-.05em}
.page-hero .lead{max-width:760px;color:#b9c7d6;font-size:1.06rem}
.content{padding:1rem 0 6rem}
.content article{max-width:880px}
.content h2{margin-top:2.8rem;font-size:1.75rem;letter-spacing:-.02em}
.content h3{margin-top:1.7rem;font-size:1.16rem}
.content p,.content li{color:#c1ccda}
.content strong{color:#fff}
.content ul,.content ol{padding-left:1.3rem}
.content a{color:#8ec3ff;font-weight:700}
.notice{border-left:3px solid var(--blue);background:rgba(8,120,255,.08);padding:1rem 1.1rem;border-radius:0 12px 12px 0}
.danger{border-left-color:#e45858;background:rgba(228,88,88,.07)}
.email-button{display:inline-block;margin:.5rem 0;padding:.78rem 1.05rem;background:#075fc6;color:#fff!important;text-decoration:none;border-radius:999px;font-weight:900}
.small{font-size:.9rem;color:#94a2b4}
.footer-inner{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.footer-links{display:flex;gap:1rem;flex-wrap:wrap}
.footer-links a{color:#c9d4e6;text-decoration:none}

.reveal{opacity:0;transition:opacity .65s ease}
.reveal[data-reveal-delay="1"]{transition-delay:.08s}
.reveal[data-reveal-delay="2"]{transition-delay:.16s}
.reveal.is-visible{opacity:1;transform:none}

@media(hover:hover){
  .practice-button:hover{border-color:rgba(255,255,255,.4);color:#fff}
  .practice-button.active:hover{color:#08111e}
  .nav-cta:hover{background:#dcecff}
}
@media(max-width:1100px){
  .nav-links-home a:nth-child(n+5){display:none}
  .hero-layout{grid-template-columns:.9fr 1.1fr;gap:2rem}
  .hero-photo{height:570px}
  .story-layout,.challenge-layout{gap:3rem}
  .practice-grid{grid-template-rows:210px 210px}
}
@media(max-width:1100px){
  .store-platform-links{grid-template-columns:1fr;max-width:242px}
}
@media(max-width:880px){
  .container{width:min(calc(100% - 2rem),var(--max))}
  .hero-editorial{padding-top:2rem}
  .hero-layout,.split-heading,.story-layout,.challenge-layout,.practice-heading,.rewards-layout,.launch-shell{grid-template-columns:1fr}
  .hero-layout{min-height:auto}
  .hero-copy{padding-bottom:1rem}
  .hero-visual{min-height:auto}
  .hero-photo{height:600px;border-radius:28px}
  .product-sequence{grid-template-columns:1fr}
  .product-panel-photo{grid-row:auto;min-height:600px}
  .product-panel-ui{min-height:360px}
  .story-intro{position:static;margin-bottom:2rem}
  .challenge-rule-featured{top:0}
  .practice-stage{min-height:620px}
  .rewards-visual,.rewards-visual img{height:520px;min-height:520px}
  .launch-shell{padding:3rem}
  .footer-premium{grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
}
@media(max-width:680px){
  html{scroll-padding-top:70px}
  .container{width:min(calc(100% - 1.25rem),var(--max))}
  .nav{min-height:68px}
  .nav-links{display:none}
  .nav-cta{min-height:38px;padding:0 .78rem;font-size:.7rem}
  .brand span{font-size:.92rem}
  .brand-mark{width:34px;height:34px}
  .hero-editorial{padding-top:1rem}
  .hero-copy{padding:2rem 0 1rem}
  .hero-copy h1{font-size:clamp(3.35rem,16vw,5.2rem)}
  .hero-lead{font-size:1rem}
  .hero-actions{display:grid}
  .store-platform-links{grid-template-columns:1fr;max-width:242px;gap:.7rem}
  .button{width:100%}
  .hero-disciplines{gap:.35rem}
  .hero-visual{margin-inline:-.625rem}
  .hero-photo{height:500px;border-radius:0}
  .hero-photo figcaption{left:1rem;right:1rem;bottom:1rem;display:block}
  .hero-photo figcaption small{display:block;margin-top:.3rem}
  .hero-marquee div{font-size:.61rem}
  .product-section,.challenge-section,.practice-section,.rewards-section,.data-section{padding:5.5rem 0}
  .section-heading h2,.challenge-copy h2,.rewards-copy h2,.data-section h2,.launch-shell h2,.practice-heading h2,.story-intro h2{font-size:clamp(2.8rem,13.2vw,4.6rem)}
  .section-heading{margin-bottom:2rem}
  .product-panel-photo{min-height:470px}
  .product-panel-ui{min-height:330px}
  .product-panel{border-radius:20px}
  .story-section{padding:5.5rem 0}
  .story-step{grid-template-columns:44px 1fr;gap:.8rem}
  .story-step h3{font-size:1.8rem}
  .challenge-rules{grid-template-columns:1fr}
  .challenge-rule{min-height:190px}
  .practice-selector{overflow-x:auto;flex-wrap:nowrap;padding-bottom:.4rem}
  .practice-button{white-space:nowrap}
  .practice-stage{min-height:520px;border-radius:20px}
  .practice-stage figcaption{left:1.1rem;right:1.1rem;bottom:1.1rem}
  .practice-grid{grid-template-columns:1fr 1fr;grid-template-rows:210px 210px 210px}
  .practice-tile.tall{grid-row:1/3}
  .practice-tile.wide{grid-column:1/3}
  .rewards-visual,.rewards-visual img{height:430px;min-height:430px}
  .trust-grid{grid-template-columns:1fr}
  .trust-item{min-height:190px}
  .trust-item span{margin-bottom:1.8rem}
  .launch-section{padding:4rem 0}
  .launch-shell{padding:1.5rem;border-radius:20px}
  .footer-premium{grid-template-columns:1fr}
  .footer-bottom{display:grid}
  .page-hero{padding:3.5rem 0 1rem}
  .page-hero h1{font-size:clamp(2.7rem,13vw,4rem)}
}
@media(max-width:360px){
  .store-platform-links{max-width:242px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* SOCIAL-FIRST HOMEPAGE — one lifestyle photo, one device, concise content */
.simple-heading{max-width:720px;margin-bottom:2.7rem}
.simple-heading h2,.preview-copy h2,.faq-intro h2{margin:0;font-size:clamp(2.45rem,4.8vw,4.6rem);font-weight:800;line-height:1.08;letter-spacing:-.042em;text-wrap:balance}
.simple-heading p{margin:1.15rem 0 0;max-width:620px;color:var(--muted-dark);font-size:1.07rem}

.preview-section{padding:7rem 0;background:radial-gradient(circle at 75% 42%,rgba(15,99,194,.16),transparent 37%),#081522;color:#fff}
.preview-layout{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(2rem,6vw,7rem);align-items:center}
.preview-copy{max-width:520px}
.preview-copy h2,.faq-intro h2{font-size:clamp(2.75rem,5.4vw,5.3rem)}
.preview-copy p{max-width:490px;margin:1.5rem 0 0;color:#c5d1df;font-size:1.1rem;line-height:1.75}
.preview-copy .preview-disclaimer{margin-top:1.2rem;font-size:.81rem;color:#9eafc1}
.preview-interactive{display:grid;justify-items:center;min-width:0;gap:1.8rem}
.device-frame{width:min(100%,340px);padding:7px;border-radius:43px 39px 43px 39px;background:linear-gradient(138deg,#aac5df 0%,#516e8a 15%,#0a1727 40%,#3b5268 84%,#8da9c7 100%);box-shadow:0 36px 80px rgba(0,0,0,.45);position:relative}
.device-ridge{position:absolute;right:-4px;top:28%;height:63px;width:5px;background:linear-gradient(#7af2ff,#1679d3);border-radius:4px}
.device-screen{position:relative;aspect-ratio:9/19.7;background:linear-gradient(165deg,#0c192b,#07111f);border:3px solid #020912;border-radius:36px 32px 36px 32px;overflow:hidden}
.device-topbar{position:absolute;top:7px;left:9px;right:9px;height:27px;display:flex;align-items:center;justify-content:center;gap:.5rem;color:#91accc;font-size:.55rem;letter-spacing:.16em;font-weight:900;z-index:2;pointer-events:none}
.device-sigil{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:4px 9px 4px 9px;background:#0878ff;color:#fff;font-size:.63rem;letter-spacing:0;transform:rotate(-12deg)}
.preview-screen-panel{position:absolute;inset:0;overflow:hidden;border-radius:32px 28px 32px 28px;background:linear-gradient(170deg,#152b45,#071625);outline-offset:-3px}
.preview-screen-image{display:block;width:100%;height:100%;object-fit:contain;object-position:center;background:#071421;pointer-events:none;user-select:none;-webkit-user-drag:none}
.preview-screen-image[hidden],.preview-screen-placeholder[hidden]{display:none!important}
.preview-screen-placeholder{height:100%;min-height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:1rem;padding:1.6rem;color:#fff}
.preview-placeholder-mark{display:grid;place-items:center;height:72px;width:72px;border-radius:20px;background:linear-gradient(150deg,#0c8dff,#05224e);box-shadow:0 12px 25px rgba(8,120,255,.2);font-size:2.5rem;font-weight:900;transform:rotate(-8deg);pointer-events:none}
.preview-screen-placeholder strong{font-size:1.7rem;font-weight:900}
.preview-screen-placeholder p{max-width:220px;margin:0;color:#c5d1df;font-size:.9rem;line-height:1.5}
.preview-screen-placeholder small{margin-top:1rem;color:#98adc5;font-size:.65rem}
.device-footer-mark{position:absolute;bottom:9px;left:40%;right:40%;height:3px;border-radius:3px;background:#3fa9ee;pointer-events:none}
.preview-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem;width:min(100%,480px)}
.preview-tabs button{min-height:43px;padding:.55rem .45rem;background:#13253a;border:1px solid #2a4360;border-radius:13px;color:#b5c6d7;font-size:.78rem;font-weight:800;cursor:pointer;white-space:nowrap}
.preview-tabs button[aria-selected="true"]{background:#0d74eb;border-color:#439ffe;color:#fff}
.preview-tabs button:hover{border-color:#7fc5ff}

.trust-short{padding:6rem 0}
.trust-short-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.3rem}
.trust-short-grid article{padding:1.6rem 0;border-top:2px solid #d4d7db}
.trust-short-grid h3{margin:0 0 .5rem;font-size:1.28rem;line-height:1.24;letter-spacing:-.025em}
.trust-short-grid p{margin:0;color:#5d6977;line-height:1.7;font-size:.95rem}
.trust-policy{display:inline-flex;gap:.5rem;margin-top:1.6rem;color:#065db6;text-decoration:none;font-weight:800;font-size:.91rem}
.trust-policy:hover{text-decoration:underline}

.faq-section{padding:6.6rem 0 7.4rem;background:#091728}
.faq-layout{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(2rem,6vw,7rem)}
.faq-intro{max-width:430px}
.faq-intro p{margin:1.25rem 0 0;max-width:350px;color:#c5d1df;font-size:1rem;line-height:1.7}
.faq-items{min-width:0;border-top:1px solid rgba(255,255,255,.19)}
.faq-items details{border-bottom:1px solid rgba(255,255,255,.19);padding:.3rem 0}
.faq-items summary{padding:1.15rem 2.6rem 1.15rem 0;position:relative;list-style:none;cursor:pointer;font-weight:800;font-size:1rem;line-height:1.45}
.faq-items summary::-webkit-details-marker{display:none}
.faq-items summary::after{content:"+";position:absolute;right:.25rem;top:50%;transform:translateY(-50%);color:#74bcff;font-size:1.5rem;font-weight:400}
.faq-items details[open] summary::after{content:"−"}
.faq-items details p{max-width:650px;margin:0 0 1.2rem;color:#c4d2df;font-size:.94rem;line-height:1.7}
.faq-items summary:focus-visible{outline:2px solid #7fb9ff;outline-offset:3px;border-radius:5px}
.faq-items summary:hover{color:#b4dcff}

@media(max-width:1050px){
  .preview-layout,.faq-layout{grid-template-columns:1fr}
  .preview-copy,.faq-intro{max-width:720px}
  .preview-interactive{margin-top:1rem}
}
@media(max-width:780px){
  .trust-short-grid{grid-template-columns:1fr}
  .trust-short-grid{gap:.3rem}
  .preview-section,.trust-short,.faq-section{padding:4.5rem 0}
  .preview-tabs{max-width:420px}
  .device-frame{max-width:310px}
}
@media(max-width:400px){
  .preview-tabs{gap:.3rem}
  .preview-tabs button{font-size:.69rem;padding:.48rem .15rem}
}

/* HERO PHONE BETA V10 — only one original Tynavel device, no lifestyle image */
.hero-editorial{padding:2.3rem 0 3.8rem}
.hero-layout{min-height:0;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.hero-copy{padding:2.3rem 0}
.hero-copy h1{font-size:clamp(3.2rem,5.8vw,5.7rem);line-height:.99;letter-spacing:-.048em}
.hero-copy .hero-kicker{color:#88c7ff;letter-spacing:.11em}
.hero-beta-note{max-width:530px;margin:1.05rem 0 0;color:#aebfd2;font-size:.88rem;line-height:1.6}
.hero-beta-note strong{color:#eef6ff;font-weight:800}
.hero-copy .hero-actions{margin-top:1.55rem}
.hero-copy .store-availability{margin-top:1.35rem}
.hero-phone-visual{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;width:100%;gap:.7rem;scroll-margin-top:95px}
.hero-phone-eyebrow{margin:0 0 .25rem;color:#83bfff;font-size:.69rem;letter-spacing:.13em;text-transform:uppercase;font-weight:900;text-align:center}
.hero-phone-visual .preview-interactive{width:100%;gap:1rem;display:grid;justify-items:center}
.hero-phone-visual .device-frame{
  width:min(100%,296px);padding:6px;
  border-radius:44px 39px 44px 39px;
  border:1px solid rgba(192,222,255,.28);
  background:linear-gradient(135deg,#8cabc8 0%,#293f5a 15%,#081421 52%,#56738e 85%,#a1b9d1 100%);
  box-shadow:0 33px 64px rgba(0,0,0,.45),0 0 38px rgba(33,111,224,.12);
}
.hero-phone-visual .device-ridge{right:-4px;top:30%;width:4px;height:57px;border-radius:4px;background:linear-gradient(#64daff,#077acf)}
.hero-phone-visual .device-screen{
  border:3px solid #05111f;
  border-radius:37px 32px 37px 32px;
  background:#f3f7fc;
}
.hero-phone-visual .preview-screen-panel{border-radius:34px 29px 34px 29px;background:#f3f7fc}
.hero-phone-visual .preview-screen-image{background:#f3f7fc}
.hero-phone-visual .preview-tabs{width:min(100%,460px);gap:.5rem}
@media(max-width:1100px){
  .hero-layout{grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:1.8rem}
  .hero-copy h1{font-size:clamp(3.1rem,5.6vw,5rem)}
  .hero-phone-visual .device-frame{width:min(100%,274px)}
}
@media(max-width:880px){
  .hero-layout{grid-template-columns:1fr;gap:2rem}
  .hero-copy{padding:1.5rem 0 0}
  .hero-phone-visual{margin:0 auto;max-width:540px;min-height:auto}
  .hero-phone-visual .device-frame{width:min(100%,298px)}
}
@media(max-width:680px){
  .hero-editorial{padding:1rem 0 3.4rem}
  .hero-copy{padding:1.5rem 0 0}
  .hero-copy h1{font-size:clamp(2.9rem,11.3vw,4.4rem);line-height:1.01}
  .hero-copy .hero-lead{margin-top:1.2rem}
  .hero-beta-note{font-size:.81rem}
  .hero-phone-visual{margin-inline:0;gap:.55rem}
  .hero-phone-visual .device-frame{width:min(100%,281px)}
  .hero-phone-visual .preview-tabs{max-width:390px}
}

/* Mobile-first product exploration: choose an app view before reaching the
   tall single-phone preview; desktop preserves the phone-first composition. */
@media(max-width:880px){
  .hero-phone-visual .preview-interactive{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.85rem;
  }
  .hero-phone-visual .preview-tabs{order:-1;width:100%;max-width:420px}
  .hero-phone-visual .preview-tabs button{min-height:46px}
}

/* Readable app preview selectors on narrow phones: avoid 11 px labels. */
@media(max-width:400px){
  .hero-phone-visual .preview-tabs button{
    font-size:.8125rem;
    min-height:48px;
    padding:.6rem .18rem;
  }
}
@media(max-width:375px){
  .hero-phone-visual .preview-tabs{
    grid-template-columns:repeat(2,minmax(0,1fr));
    max-width:300px;
    gap:.45rem;
  }
  .hero-phone-visual .preview-tabs button{
    font-size:.9rem;
    min-height:48px;
    padding:.62rem .5rem;
  }
}

/* Accessibility audit (2026-10-08): small-text contrast and focus clarity.
   Keep pale-blue accent on dark sections, but use dark blue on light paper. */
.light-section .section-kicker,
.launch-section .section-kicker{color:#075aa6}
.button-primary{background:#075fc6}
.preview-tabs button[aria-selected="true"]{background:#075fc6;border-color:#63b4ff}
.launch-action small{color:#566577;font-size:.8125rem}
.footer-bottom{color:#a0b3c8;font-size:.78rem}
.hero-phone-eyebrow{font-size:.8125rem}
@media(max-width:680px){
  .nav-cta{font-size:.8rem}
}
/* Visible keyboard target for FAQ disclosure and the four screenshot tabs. */
.preview-tabs button:focus-visible,.faq-items summary:focus-visible{
  outline:3px solid #81c8ff;
  outline-offset:3px;
}

/* Visible fictional cycling route over the GPS-masked beta screenshot.
   The blue line and map are illustrative SVG; no personal location data. */
.preview-route-demo{
  position:absolute;
  left:3.2%;
  top:9.4%;
  width:93.6%;
  height:21.8%;
  z-index:2;
  border-radius:13px;
  background:#e8f3e6 url('/assets/screenshots/tynavel-trajet-fictif.svg') center/100% 100% no-repeat;
  box-shadow:0 1px 5px rgba(10,42,68,.08);
  pointer-events:none;
}
.preview-route-demo[hidden]{display:none!important}

/* Premium contiguous sections (2026-10-09): dark navy → pale blue → navy. */
.home-page .hero-editorial{
  background:radial-gradient(ellipse 52% 58% at 74% 41%,rgba(32,114,217,.26),transparent 88%),
    radial-gradient(ellipse 44% 55% at 12% 80%,rgba(9,86,170,.13),transparent 90%),
    linear-gradient(140deg,#06111f,#0c2340 65%,#09192b)
}
.home-page .trust-short{background:linear-gradient(180deg,#e1edf9,#dce9f8)}
.home-page .trust-short-grid article{border-top-color:#adc5e1}
.home-page .faq-section{background:linear-gradient(170deg,#0e2744,#0b1d32 72%,#0e2740)}
.home-page .launch-section{background:linear-gradient(180deg,#0e2740,#0b1b2f);color:#f3f8ff}
.home-page .launch-shell{color:#f5faff;background:linear-gradient(125deg,rgba(28,72,118,.7),rgba(13,43,76,.82));border:1px solid rgba(146,196,240,.23);border-radius:25px}
.home-page .launch-action p{color:#d5e2f2}
.home-page .launch-action small{color:#aec6df}
.home-page .launch-section .section-kicker{color:#9bceff}
.home-page .site-footer{background:#081728}

/* The tabs belong to the phone's physical bezel; no separate exterior toolbar. */
.hero-phone-visual .preview-interactive{display:block;width:min(100%,342px);max-width:100%}
.hero-phone-visual .device-frame{width:100%;padding:7px 7px 10px}
.hero-phone-visual .device-screen{border-radius:36px 33px 28px 28px}
.hero-phone-visual .device-frame .preview-tabs{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  width:100%;max-width:100%;gap:3px;margin:7px 0 0;padding:4px;
  border:1px solid rgba(157,207,247,.24);border-radius:14px;background:rgba(0,13,26,.94)
}
.hero-phone-visual .device-frame .preview-tabs button{
  width:100%;min-width:0;min-height:43px;border:0;border-radius:10px;padding:7px 1px;
  color:#d3e2f3;background:transparent;font-size:.65rem;font-weight:750;white-space:normal;line-height:1.15
}
.hero-phone-visual .device-frame .preview-tabs button[aria-selected="true"]{
  color:#fff;background:#116dd4;box-shadow:0 2px 9px rgba(12,121,241,.22)
}
.hero-phone-visual .device-frame .preview-tabs button:focus-visible{outline:2px solid #a9dfff;outline-offset:-2px}
.hero-phone-visual .preview-interactive .preview-tabs{order:initial}

/* iPhone 18 Pro-inspired mockup: authentic Tynavel beta captures, native five-item dock. */
.hero-phone-visual .preview-interactive{width:min(100%,356px);margin-inline:auto}
.hero-phone-visual .device-frame.iphone18-pro{
  position:relative;
  isolation:isolate;
  width:100%;
  padding:8px;
  border-radius:54px;
  border:1px solid rgba(241,226,222,.7);
  background:linear-gradient(118deg,#ded5d0 0%,#675454 10%,#302c32 21%,#191b24 53%,#51444c 77%,#ded4d1 100%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.13),inset 0 0 0 5px rgba(0,0,0,.16),
    0 36px 68px rgba(0,0,0,.53),0 7px 20px rgba(1,8,20,.38);
}
.hero-phone-visual .device-frame.iphone18-pro::before{
  content:"";position:absolute;inset:3px;border-radius:52px;
  border:1px solid rgba(255,255,255,.23);pointer-events:none;z-index:1
}
.hero-phone-visual .device-frame.iphone18-pro .device-screen{
  position:relative;aspect-ratio:9/19.5;
  border:3px solid #07080d;border-radius:46px;overflow:hidden;
  background:#eef4fa
}
.iphone18-pro .device-ridge{display:none}
.iphone18-pro .iphone-side-button{
  position:absolute;z-index:-1;width:4px;border-radius:4px;
  background:linear-gradient(90deg,#7c6770,#241f28,#76616b);
  box-shadow:0 0 0 1px rgba(255,255,255,.18)
}
.iphone18-pro .iphone-side-left{left:-4px;top:19%;height:72px}
.iphone18-pro .iphone-side-right{right:-4px;top:29%;height:57px}
.hero-phone-visual .iphone18-pro .preview-screen-panel{
  position:absolute;inset:0;overflow:hidden;border-radius:43px;
  background:#f1f5fb
}
.iphone18-pro .preview-screen-scroll{
  position:absolute;inset:0;overflow:auto;overscroll-behavior:contain;
  scrollbar-width:none;background:#f1f5fb;
  -webkit-overflow-scrolling:touch
}
.iphone18-pro .preview-screen-scroll::-webkit-scrollbar{display:none}
.iphone18-pro .preview-screen-visual{position:relative;width:100%;line-height:0}
.hero-phone-visual .iphone18-pro .preview-screen-image{
  display:block;width:100%;height:auto;object-fit:initial;object-position:top;
  background:#f1f5fb;pointer-events:none;user-select:none;-webkit-user-drag:none
}
.iphone18-pro .preview-screen-unavailable{
  padding:120px 20px 20px;text-align:center;color:#1b2c40;font-size:14px;line-height:1.4
}
.iphone18-pro .preview-screen-unavailable[hidden],
.iphone18-pro .preview-start-notice[hidden]{display:none!important}
.iphone18-pro .preview-statusbar{
  position:absolute;top:15px;left:22px;right:21px;z-index:6;
  display:flex;justify-content:space-between;align-items:center;
  color:#fff;font-size:12px;font-weight:800;letter-spacing:-.02em;
  text-shadow:0 1px 3px rgba(0,0,0,.5);pointer-events:none
}
.iphone18-pro .preview-status-icons{display:flex;align-items:center;gap:5px}
.iphone18-pro .preview-battery{
  display:inline-block;width:19px;height:10px;border-radius:3px;
  background:#fff;border:1px solid #fff;box-shadow:2px 0 0 -1px #fff
}
.iphone18-pro .iphone-dynamic-island{
  position:absolute;top:9px;left:50%;transform:translateX(-50%);
  z-index:9;width:90px;height:23px;border-radius:999px;background:#030508;
  box-shadow:inset 0 1px 2px rgba(65,67,72,.6),0 1px 3px rgba(0,0,0,.17);
  pointer-events:none
}
.iphone18-pro .iphone-dynamic-island span{
  position:absolute;right:12px;top:9px;width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#223863,#030a12 70%)
}
.hero-phone-visual .iphone18-pro .preview-tabs{
  position:absolute;z-index:7;left:0;right:0;bottom:11px;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;
  width:100%;max-width:none;height:83px;
  gap:0;margin:0;padding:8px 2px 7px;
  border:0;border-top:1px solid rgba(197,209,222,.72);border-radius:0;
  background:linear-gradient(180deg,rgba(245,248,252,.91),rgba(243,247,251,.98) 40%,#f2f5fa 100%);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)
}
.hero-phone-visual .iphone18-pro .preview-tabs .preview-nav-item{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;
  width:100%;height:67px;min-width:0;min-height:0;margin:0;padding:0 0 3px;
  border:0;border-radius:0;
  color:#526781;background:transparent;box-shadow:none;
  font-size:10px;font-weight:800;line-height:1.15;white-space:nowrap;
  cursor:pointer;transition:color .15s ease
}
.hero-phone-visual .iphone18-pro .preview-tabs .preview-nav-item svg{
  width:24px;height:24px;flex-shrink:0;stroke-width:2.1
}
.hero-phone-visual .iphone18-pro .preview-tabs .preview-nav-item[aria-pressed="true"]{color:#066fff}
.hero-phone-visual .iphone18-pro .preview-tabs .preview-nav-item:hover{color:#075fc6}
.hero-phone-visual .iphone18-pro .preview-tabs .preview-nav-item:focus-visible{
  outline:2px solid #076cef;outline-offset:-3px;border-radius:10px
}
.hero-phone-visual .iphone18-pro .preview-tabs .preview-nav-start{
  overflow:visible;gap:0;color:#071c36;position:relative
}
.hero-phone-visual .iphone18-pro .preview-tabs .preview-nav-start svg{
  width:53px;height:53px;min-height:53px;padding:10px;
  margin-top:-18px;border-radius:50%;color:#fff;
  background:linear-gradient(135deg,#12d9fb,#096cf2);
  border:2px solid #83eafa;
  box-shadow:0 2px 0 #e7eef6,0 3px 14px rgba(0,103,220,.35)
}
.hero-phone-visual .iphone18-pro .preview-tabs .preview-nav-start span{
  font-size:10px;transform:translateY(-1px);color:#071b35;font-weight:900
}
.iphone18-pro .iphone-home-indicator{
  position:absolute;z-index:8;bottom:4px;left:50%;transform:translateX(-50%);
  width:32%;height:4px;border-radius:6px;background:#535960;pointer-events:none
}
.iphone18-pro .preview-start-notice{
  position:absolute;z-index:10;left:8%;right:8%;bottom:125px;
  padding:12px 14px;border-radius:15px;
  background:rgba(9,28,50,.95);color:#fff;text-align:center;
  box-shadow:0 12px 30px rgba(0,0,0,.26);font-size:12px;line-height:1.45
}
@media(max-width:430px){
  .hero-phone-visual .preview-interactive{width:min(100%,322px)}
  .hero-phone-visual .device-frame.iphone18-pro{border-radius:49px}
}
@media(prefers-reduced-motion:reduce){
  .hero-phone-visual .iphone18-pro .preview-tabs .preview-nav-item{transition:none}
}

.iphone18-pro .device-screen::after{content:"";position:absolute;bottom:0;left:0;right:0;height:11px;background:#f2f5fa;z-index:7;pointer-events:none}

.iphone18-pro .preview-statusbar{display:none}
.iphone18-pro[data-preview-screen="sorties"] .preview-statusbar,.iphone18-pro[data-preview-screen="profil"] .preview-statusbar{display:flex}

/* True Flutter screen UI: fixed status from the capture, original navigation. */
.iphone18-pro .preview-statusbar,.iphone18-pro .iphone-home-indicator{display:none!important}
.iphone18-pro .device-screen::after{display:none!important}
.iphone18-pro .preview-native-status{
  position:absolute;top:0;left:0;right:0;z-index:8;
  overflow:hidden;aspect-ratio:720/82;pointer-events:none
}
.iphone18-pro .preview-native-status img{
  display:block;width:100%;height:auto;max-width:none;pointer-events:none
}
.hero-phone-visual .iphone18-pro .preview-native-nav-image{
  position:absolute;bottom:0;left:0;width:100%;height:auto;z-index:7;
  pointer-events:none;user-select:none;-webkit-user-drag:none
}
.hero-phone-visual .iphone18-pro nav.preview-tabs{
  position:absolute;bottom:0;left:0;right:0;z-index:8;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  width:100%;height:auto;aspect-ratio:720/220;min-height:0;
  margin:0;padding:0;gap:0;border:0;border-radius:0;
  background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  align-items:stretch
}
.hero-phone-visual .iphone18-pro nav.preview-tabs .preview-nav-item{
  appearance:none;display:flex;align-items:stretch;justify-content:center;
  width:100%;height:100%;min-height:0;margin:0;padding:0;
  border:0;border-radius:0;color:transparent;background:transparent;
  box-shadow:none;cursor:pointer;transition:none
}
.hero-phone-visual .iphone18-pro nav.preview-tabs .preview-nav-item span{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap
}
.hero-phone-visual .iphone18-pro nav.preview-tabs .preview-nav-item:focus-visible{
  outline:2px solid #066fff;outline-offset:-4px;border-radius:12px
}
.hero-phone-visual .iphone18-pro nav.preview-tabs .preview-nav-start{
  color:transparent;overflow:visible
}
.iphone18-pro .preview-start-notice{bottom:105px}


/* Product narrative — genuine beta captures, no additional simulated phone. */
.feature-showcase{
  padding:5rem 0 5.7rem;
  background:linear-gradient(180deg,#e1edf9 0%,#f3f7fc 22%,#edf4fc 78%,#e1edf9 100%);
  color:#102237;
}
.feature-showcase-intro{max-width:780px;margin:0 auto 3.1rem;text-align:center}
.feature-showcase-intro .section-kicker{color:#075aa6}
.feature-showcase-intro h2{margin:0;font-size:clamp(2.4rem,4.65vw,4.4rem);line-height:1.1;letter-spacing:-.042em;font-weight:800;text-wrap:balance}
.feature-showcase-intro p{max-width:650px;margin:1.1rem auto 0;color:#50647b;font-size:1.05rem;line-height:1.7}
.feature-story{
  display:grid;grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);
  gap:clamp(2rem,7vw,7.5rem);align-items:center;
  padding:clamp(2.15rem,4.2vw,4.25rem) 0;
  border-top:1px solid #c8d8ea;
}
.feature-story:last-child{padding-bottom:0}
.feature-story--reverse .feature-story-media{order:-1}
.feature-story-copy{max-width:565px}
.feature-story-label{display:inline-block;margin-bottom:1rem;color:#056dc6;font-size:.82rem;letter-spacing:.115em;text-transform:uppercase;font-weight:800}
.feature-story-copy h3{margin:0;max-width:600px;font-size:clamp(2.05rem,3.5vw,3.5rem);line-height:1.12;letter-spacing:-.037em;font-weight:800;text-wrap:balance}
.feature-story-copy>p:not(.feature-story-note){margin:1.3rem 0 0;color:#4c6075;font-size:1.05rem;line-height:1.78}
.feature-story-points{margin:1.6rem 0 0;padding:0;list-style:none;display:grid;gap:.8rem}
.feature-story-points li{position:relative;padding-left:1.65rem;font-size:1rem;line-height:1.58;font-weight:650;color:#1b3653}
.feature-story-points li::before{content:"";position:absolute;left:0;top:.4rem;width:.75rem;height:.75rem;border:3px solid #087cff;border-radius:50%;background:#e6f3ff}
.feature-story-note{margin:1.45rem 0 0;color:#536b81;font-size:.87rem;line-height:1.65}
.feature-story-media{min-width:0;margin:0}
.feature-story-stage{
  position:relative;isolation:isolate;min-height:405px;
  display:flex;align-items:flex-end;justify-content:center;overflow:hidden;
  padding:30px 36px 0;border:1px solid #b8d0e9;border-radius:30px;
  background:radial-gradient(circle at 70% 20%,rgba(255,255,255,.86),transparent 46%),linear-gradient(155deg,#c4ddf8,#e8f3ff 80%);
  box-shadow:0 22px 55px rgba(31,77,119,.10);
}
.feature-story-stage--goals{background:radial-gradient(circle at 22% 12%,rgba(255,255,255,.9),transparent 40%),linear-gradient(150deg,#b5eaf2,#e8f6fb 80%)}
.feature-story-stage--stats{background:radial-gradient(circle at 75% 14%,rgba(255,255,255,.95),transparent 48%),linear-gradient(150deg,#c7dafa,#e8edf9 80%)}
.feature-story-stage::before{
  content:"";position:absolute;width:420px;height:420px;left:50%;top:42%;transform:translate(-50%,-50%);
  border:1px solid rgba(255,255,255,.6);border-radius:50%;pointer-events:none;z-index:-1;
}
.feature-story-stage img{
  display:block;width:min(100%,270px);height:375px;object-fit:cover;object-position:top center;
  border:1px solid #d6e1ed;border-bottom:0;border-radius:22px 22px 0 0;
  box-shadow:0 15px 34px rgba(8,39,80,.18);background:#f1f5fc;
}
.feature-story-tag{
  position:absolute;right:19px;bottom:20px;padding:.56rem .85rem;
  border:1px solid rgba(176,203,230,.9);border-radius:999px;
  background:rgba(255,255,255,.94);color:#095697;font-size:.85rem;font-weight:750;
  box-shadow:0 8px 24px rgba(40,78,116,.09);pointer-events:none;
}
@media(max-width:880px){
  .feature-showcase{padding:3.8rem 0 4.25rem}
  .feature-showcase-intro{margin-bottom:2.3rem}
  .feature-story{grid-template-columns:1fr;gap:1.55rem;padding:2.75rem 0}
  .feature-story--reverse .feature-story-media{order:initial}
  .feature-story-copy{max-width:720px}
  .feature-story-stage{min-height:380px}
  .feature-story-stage img{height:350px}
}
@media(max-width:480px){
  .feature-showcase-intro{text-align:left}
  .feature-showcase-intro p{margin-left:0}
  .feature-story-copy h3{font-size:clamp(1.85rem,9vw,2.65rem)}
  .feature-story-copy>p:not(.feature-story-note){font-size:1rem}
  .feature-story-stage{min-height:320px;padding:18px 16px 0;border-radius:22px}
  .feature-story-stage img{width:min(100%,250px);height:302px}
  .feature-story-tag{right:12px;bottom:12px;font-size:.78rem;padding:.4rem .65rem}
}

.launch-action #waitlist-fallback[hidden],.launch-action #waitlist-form[hidden]{display:none!important}
.waitlist-form{display:grid;gap:.9rem;width:min(100%,510px);margin:1.1rem 0 0}
.waitlist-form>label:first-child{display:block;font-size:.87rem;font-weight:800;color:#e9f4ff}
.waitlist-fields{display:flex;align-items:stretch;gap:.55rem}
.waitlist-fields input[type="email"]{flex:1;min-width:0;padding:.84rem 1.05rem;min-height:49px;border:1px solid #8198b1;border-radius:12px;background:#fff;color:#10233f;font:inherit;font-size:1rem}
.waitlist-fields input[type="email"]:focus-visible,.waitlist-consent input:focus-visible{outline:3px solid #58bfff;outline-offset:2px}
.waitlist-fields .button{white-space:nowrap;border-radius:12px;min-height:49px}
.waitlist-consent{display:flex;align-items:flex-start;gap:.65rem;max-width:540px;color:#e3effe;font-size:.85rem;line-height:1.5;cursor:pointer}
.waitlist-consent input{width:19px;height:19px;margin-top:.1rem;flex:none;accent-color:#169bf6}
.waitlist-form small{display:block;font-size:.77rem;line-height:1.5;color:#c3d6ed}
.waitlist-form small a{color:#eaf6ff;text-decoration:underline;text-underline-offset:3px}
.waitlist-honeypot{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.waitlist-feedback{margin:.6rem 0 0;max-width:560px;font-size:.89rem;font-weight:650;line-height:1.55;color:#d5f8e6}
.waitlist-feedback:empty{display:none}
.waitlist-feedback[data-error="true"]{color:#ffdbd8}
.waitlist-turnstile{min-height:0}
@media(max-width:580px){.waitlist-fields{flex-direction:column}.waitlist-fields .button{width:100%;justify-content:center}}

/* Bike Manager — compact premium product presentation, real Flutter screenshot. */
.bike-premium-section{padding:clamp(4rem,6vw,6rem) 0;background:linear-gradient(150deg,#09192b,#0e2a49 68%,#0a1c31);color:#f6faff}
.bike-premium-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);align-items:center;gap:clamp(2rem,5.8vw,6rem)}
.bike-premium-copy{max-width:610px}
.bike-premium-kicker{display:inline-block;margin-bottom:1.2rem;color:#99d2ff;letter-spacing:.095em;text-transform:uppercase;font-size:.82rem;font-weight:800}
.bike-premium-copy h2{margin:0;font-size:clamp(2.5rem,4.4vw,4.65rem);line-height:1.1;letter-spacing:-.04em;font-weight:800;text-wrap:balance}
.bike-premium-lead{max-width:560px;margin:1.3rem 0 0;color:#d1e0f0;font-size:1.06rem;line-height:1.72}
.bike-premium-benefits{display:grid;gap:.85rem;margin:1.55rem 0 1.65rem;padding:0;list-style:none}
.bike-premium-benefits li{position:relative;padding-left:1.6rem;color:#f1f6fd;line-height:1.55;font-size:.97rem;font-weight:600}
.bike-premium-benefits li::before{content:"";position:absolute;left:0;top:.42rem;width:.68rem;height:.68rem;border:2px solid #70ceff;border-radius:50%}
.bike-premium-exclusive{display:inline-flex;align-items:center;gap:.65rem;margin:0;padding:.65rem .9rem;border-radius:999px;border:1px solid #417db2;background:rgba(11,90,167,.29);color:#d0eaff;font-size:.86rem;line-height:1.35;font-weight:800}
.bike-premium-exclusive span{color:#64caff;font-size:.7rem}
.bike-premium-prices{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;margin:1.25rem 0 0;color:#d4e5f6;font-size:.95rem}
.bike-premium-prices span{display:block}
.bike-premium-prices strong{color:#fff;font-size:1.25rem;font-weight:800}
.bike-premium-fine{margin:1.05rem 0 0;max-width:550px;color:#b8cadf;font-size:.85rem;line-height:1.62}
.bike-premium-link{display:inline-flex;align-items:center;gap:.45rem;margin-top:1.2rem;color:#c0e4ff;text-decoration:underline;text-underline-offset:4px;font-weight:750;font-size:.95rem}
.bike-premium-link:hover{color:#fff}
.bike-premium-link:focus-visible{outline:3px solid #70e5f8;outline-offset:5px}
.bike-premium-media{margin:0;min-width:0}
.bike-premium-stage{display:flex;justify-content:center;align-items:flex-end;overflow:hidden;min-height:430px;padding:clamp(1rem,3vw,2rem) clamp(.8rem,2vw,1.5rem) 0;border:1px solid #6085aa;border-radius:28px;background:linear-gradient(152deg,#c6e1f7,#e9f3fc 64%,#c6dff5);box-shadow:0 20px 50px rgba(0,0,0,.18)}
.bike-premium-stage img{width:min(100%,450px);height:425px;object-fit:cover;object-position:top;border-radius:18px 18px 0 0;border:1px solid #b7d0e6;border-bottom:0;box-shadow:0 15px 35px rgba(14,47,81,.15)}
@media(max-width:880px){.bike-premium-layout{grid-template-columns:1fr;gap:2rem}.bike-premium-copy{max-width:720px}.bike-premium-stage{min-height:405px}.bike-premium-stage img{height:390px}}
@media(max-width:480px){.bike-premium-section{padding:3.7rem 0 4rem}.bike-premium-copy h2{font-size:clamp(2.2rem,10vw,3.1rem)}.bike-premium-stage{min-height:342px;border-radius:22px;padding:1rem .9rem 0}.bike-premium-stage img{height:330px}.bike-premium-prices{gap:.7rem 1.05rem}}

/* Single native navigation layer. The img underneath supplies the authentic
   navigation in the selected language; no duplicate CSS screenshot. */
.hero-phone-visual .iphone18-pro nav.preview-tabs{
  background:transparent;
  -webkit-transform:translateZ(0);transform:translateZ(0);
  -webkit-backface-visibility:hidden;backface-visibility:hidden
}
.feature-showcase-intro .section-kicker{font-size:.87rem;letter-spacing:.09em;font-weight:750;text-transform:none}
.bike-premium-stage{position:relative}
.bike-premium-preview-label{
  position:absolute;z-index:2;top:clamp(1.35rem,3vw,2.55rem);right:clamp(1.1rem,2.5vw,2rem);
  padding:.45rem .65rem;border-radius:999px;background:rgba(7,25,47,.9);
  color:#e7f3ff;font-size:.73rem;font-weight:750;line-height:1.2;pointer-events:none
}
@media(max-width:680px){
  .hero-editorial{padding-bottom:2.6rem}
  .hero-layout{gap:1.6rem}
  .hero-copy{padding-top:.7rem}
  .hero-copy h1{font-size:clamp(2.9rem,10.8vw,4.2rem)}
  .hero-lead{margin-top:1rem;line-height:1.55}
  .hero-actions{margin-top:1.25rem}
  .hero-actions .button-quiet{display:none}
  .store-availability{margin-top:1.1rem}
  .store-platform-links{grid-template-columns:repeat(2,minmax(0,1fr));max-width:100%;gap:.65rem}
  .hero-phone-visual .preview-interactive{margin-top:.35rem}
  .feature-showcase{padding-top:3.2rem}
  .feature-showcase-intro{margin-bottom:1.7rem}
  .feature-story{gap:1.25rem;padding:2.4rem 0}
  .feature-story-copy>p:not(.feature-story-note){margin-top:.8rem;line-height:1.65}
  .feature-story-points{margin-top:1.2rem;gap:.65rem}
  .bike-premium-layout{gap:1.4rem}
  .bike-premium-preview-label{right:1.35rem;top:1.35rem;font-size:.7rem}
}
@media(max-width:350px){.store-platform-links{grid-template-columns:1fr;max-width:242px}}

/* Final editorial polish: compact authentic store badges, clear contact, quiet tiers. */
.premium-access-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin:1.35rem 0 0;max-width:570px}
.premium-access-level{min-width:0;padding:1rem 1.05rem;border:1px solid rgba(157,190,222,.30);border-radius:16px;background:rgba(255,255,255,.035)}
.premium-access-level--paid{border-color:rgba(102,197,255,.65);background:rgba(14,106,189,.16)}
.premium-level-name{display:block;color:#a8c3dd;font-size:.81rem;letter-spacing:.03em;font-weight:800}
.premium-access-level--paid .premium-level-name{color:#8fd3ff}
.premium-access-level p{margin:.48rem 0 0;color:#ecf5ff;font-size:.88rem;line-height:1.48}
.premium-access-level--paid p{color:#fff}
.bike-premium-prices{margin-top:1rem}
.bike-premium-fine{font-size:.84rem;line-height:1.6}
.nav-cta:focus-visible,.button:focus-visible,.store-platform-link:focus-visible,.bike-premium-link:focus-visible{outline:3px solid #88d9ff;outline-offset:3px}
@media(max-width:680px){
  .hero-editorial{padding-top:.7rem}
  .hero-copy{padding-top:.35rem}
  .hero-copy .hero-lead{font-size:1rem;line-height:1.58}
  .hero-beta-note{margin-top:.78rem;line-height:1.54}
  .hero-actions{margin-top:.95rem}
  .hero-actions .button-primary{min-height:44px}
  .store-availability,.hero-copy .store-availability{margin-top:.85rem}
  .store-platform-links{max-width:312px;gap:.6rem}
  .store-platform-badge{filter:drop-shadow(0 3px 6px rgba(0,0,0,.18))}
  .hero-layout{gap:1.25rem}
  .hero-phone-visual{gap:.3rem}
  .hero-phone-eyebrow{font-size:.76rem;line-height:1.5}
  .feature-showcase-intro h2{font-size:clamp(2.1rem,8.1vw,3.15rem)}
  .faq-items summary{line-height:1.48}
}
@media(max-width:370px){
  .premium-access-comparison{grid-template-columns:1fr}
  .store-platform-links{grid-template-columns:repeat(2,minmax(0,1fr));max-width:100%;gap:.35rem}
}


/* Compact mobile navigation: closed until chosen, keyboard and screen-reader friendly. */
.mobile-site-nav{display:none}
.mobile-site-nav summary::-webkit-details-marker{display:none}
@media(max-width:680px){
  .nav{gap:.65rem}
  .mobile-site-nav{display:block;position:relative;margin-left:auto}
  .mobile-site-nav summary{display:flex;align-items:center;justify-content:center;gap:.48rem;min-height:44px;padding:.4rem .6rem;list-style:none;color:#dae9f8;cursor:pointer;font-size:.81rem;font-weight:750;white-space:nowrap;border-radius:10px}
  .mobile-site-nav summary::marker{content:""}
  .mobile-site-nav[open] summary{background:rgba(255,255,255,.1);color:#fff}
  .mobile-site-nav summary:focus-visible{outline:3px solid #70e5f8;outline-offset:2px}
  .mobile-site-nav-chevron{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
  .mobile-site-nav[open] .mobile-site-nav-chevron{transform:translateY(2px) rotate(225deg)}
  .mobile-site-nav-links{position:absolute;right:-.8rem;top:calc(100% + .7rem);z-index:120;width:min(270px,calc(100vw - 2rem));padding:.4rem;display:grid;gap:.12rem;background:#10263e;border:1px solid rgba(132,182,232,.38);border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.38)}
  .mobile-site-nav-links a{display:flex;align-items:center;min-height:44px;padding:.68rem .8rem;border-radius:11px;color:#e5f2ff;font-size:.87rem;font-weight:700;text-decoration:none}
  .mobile-site-nav-links a:hover,.mobile-site-nav-links a:focus-visible{color:#fff;background:#174775}
  .nav-cta{min-height:42px;padding:0 .8rem}
}
@media(max-width:360px){
  .brand{gap:.4rem;font-size:.91rem}
  .brand-mark{width:33px;height:33px}
  .mobile-site-nav summary{gap:.27rem;padding:.4rem .35rem;font-size:.76rem}
  .nav-cta{padding:0 .65rem;font-size:.76rem}
}
/* Touch visitors scroll the WEBSITE, never get stuck in a nested phone screenshot.
   Desktop can continue scrolling the preview with pointer/keyboard. */
@media(max-width:880px) and (pointer:coarse){
  .iphone18-pro .preview-screen-scroll{overflow:hidden;overscroll-behavior:auto;touch-action:pan-y;-webkit-overflow-scrolling:auto}
  .hero-phone-visual .iphone18-pro .preview-screen-panel{touch-action:pan-y}
}
/* Clear, tighter editorial stories while retaining all three benefits. */
@media(max-width:680px){
  .feature-showcase{padding:2.7rem 0 3rem}
  .feature-showcase-intro{margin-bottom:1.15rem}
  .feature-story{padding:1.65rem 0;gap:.9rem}
  .feature-story-label{margin-bottom:.4rem;font-size:.78rem}
  .feature-story-copy h3{line-height:1.13}
  .feature-story-copy>p:not(.feature-story-note){margin:.65rem 0 0;font-size:.99rem;line-height:1.5}
  .feature-story-points{display:flex;flex-wrap:wrap;gap:.38rem .75rem;margin:.8rem 0 0}
  .feature-story-points li{padding:0;color:#36516b;font-size:.82rem;font-weight:650;line-height:1.38}
  .feature-story-points li::before{display:none}
  .feature-story-points li:not(:last-child)::after{content:" ·";color:#087cff;font-weight:850}
  .feature-story-note{margin:.7rem 0 0;font-size:.79rem;line-height:1.4}
  .feature-story-stage{min-height:290px;padding:15px 12px 0}
  .feature-story-stage img{height:275px;width:min(100%,240px)}
  .feature-story-tag{right:10px;bottom:10px}
}
/* Bike Manager screenshot precedes the subscription detail on phones. */
.bike-premium-layout{grid-template-rows:auto auto}
.bike-premium-copy{grid-column:1;grid-row:1;align-self:end}
.bike-premium-commercial{grid-column:1;grid-row:2;align-self:start;max-width:610px}
.bike-premium-media{grid-column:2;grid-row:1 / span 2;align-self:center}
.bike-premium-benefits{margin-bottom:1.05rem}
.bike-premium-commercial .bike-premium-prices{margin-top:.5rem}
@media(max-width:880px){
  .bike-premium-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;gap:1.25rem}
  .bike-premium-copy{grid-column:1;grid-row:1}
  .bike-premium-media{grid-column:1;grid-row:2}
  .bike-premium-commercial{grid-column:1;grid-row:3}
}
@media(max-width:680px){
  .bike-premium-section{padding:2.6rem 0 3rem}
  .bike-premium-kicker{margin-bottom:.65rem}
  .bike-premium-copy h2{font-size:clamp(2.1rem,8.7vw,3rem);line-height:1.12}
  .bike-premium-lead{margin:.8rem 0 0;font-size:.99rem;line-height:1.53}
  .bike-premium-benefits{margin:.9rem 0 1rem;gap:.5rem}
  .bike-premium-benefits li{font-size:.88rem;line-height:1.4}
  .bike-premium-exclusive{font-size:.78rem;padding:.55rem .75rem}
  .bike-premium-layout{gap:1.1rem}
  .bike-premium-stage{min-height:294px;padding:12px 12px 0}
  .bike-premium-stage img{height:282px}
  .bike-premium-commercial .bike-premium-prices{margin:0}
  .premium-access-comparison{margin:.9rem 0 0}
  .bike-premium-fine{margin-top:.8rem}
  .bike-premium-link{margin-top:.85rem}
}
@media(prefers-reduced-motion:reduce){.mobile-site-nav-chevron{transition:none}}

/* Final detail polish: restrained premium dash markers, no hollow rings. */
.feature-story-points li::before{content:"";top:.76rem;left:0;width:.75rem;height:2px;border:0;border-radius:2px;background:#087cff}
.bike-premium-benefits li::before{content:"";top:.72rem;left:0;width:.68rem;height:2px;border:0;border-radius:2px;background:#70ceff}
.bike-premium-model{max-width:580px;margin:.85rem 0 0;color:#c7e2f5;font-size:.88rem;line-height:1.55}
.bike-premium-model strong{color:#f5fbff;font-weight:800}
.bike-premium-stage{min-height:0;padding:clamp(1rem,3vw,2rem) clamp(.8rem,2vw,1.5rem) 0}
.bike-premium-stage img{display:block;width:min(100%,365px);height:auto;object-fit:contain;object-position:top center;aspect-ratio:430 / 638}
.bike-premium-preview-label{top:1rem;right:1rem;font-size:.74rem}
@media(max-width:880px){
  .bike-premium-stage{min-height:0}
  .bike-premium-stage img{width:min(100%,400px);height:auto}
}
@media(max-width:680px){
  .feature-story-points li{position:relative;padding-left:.78rem}
  .feature-story-points li::before{display:block;width:.43rem;height:2px;left:0;top:.56rem;border:0;border-radius:2px}
  .feature-story-points li:not(:last-child)::after{content:none}
  .bike-premium-stage{min-height:0;padding:.8rem .7rem 0}
  .bike-premium-stage img{width:100%;max-width:430px;height:auto}
  .bike-premium-preview-label{font-size:.68rem;top:1rem;right:1rem}
  .bike-premium-model{margin:.65rem 0 0;font-size:.83rem;line-height:1.44}
}

/* Keep illustration disclosure visible without covering the real bicycle model. */
.bike-premium-stage{flex-direction:column;align-items:center;justify-content:flex-end}
.bike-premium-preview-label{position:static;order:-1;align-self:flex-end;margin:0 0 .55rem;max-width:100%;text-align:center}


/* Recognizable, fully filled official social tiles in Tynavel footer. */
.footer-social{margin-top:1.4rem}
.footer-social-label{display:block;font-size:.72rem;font-weight:750;color:#bfcee1;letter-spacing:.025em}
.footer-social-links{display:flex;align-items:center;flex-wrap:wrap;gap:.7rem;margin-top:.75rem}
.footer-social-link{
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 52px;width:52px;height:52px;
  border:0;border-radius:12px;overflow:hidden;padding:0;
  color:#fff;text-decoration:none;box-shadow:0 5px 16px rgba(0,0,0,.18);
  transition:filter .16s ease,transform .16s ease,box-shadow .16s ease
}
.footer-social-link--facebook{background:#0866ff}
.footer-social-link--instagram{background:linear-gradient(135deg,#6f45c8 0%,#b52d9d 31%,#e22c67 59%,#fa7950 81%,#ffb655 100%)}
.footer-social-link--tiktok{background:#0b0b12}
.footer-social-link:hover{color:#fff;filter:brightness(1.13);transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.25)}
.footer-social-link:focus-visible{outline:3px solid #82caff;outline-offset:3px}
.footer-social-link img{display:block;width:100%;height:100%;object-fit:cover;flex:0 0 auto}
@media(max-width:680px){.footer-social{margin-top:1.15rem}.footer-social-links{gap:.75rem}}
@media(prefers-reduced-motion:reduce){.footer-social-link{transition:none}.footer-social-link:hover{transform:none}}

/* Center the official coming-soon store badges on phones, keeping the desktop grid untouched. */
@media(max-width:680px){
  .hero-copy .store-platform-links{margin-inline:auto;justify-content:center}
}


/* Final mobile rhythm: reveal the approved interactive phone sooner without shrinking it. */
@media(max-width:680px){
  .hero-editorial{padding-top:.4rem}
  .hero-copy{padding-top:0}
  .hero-copy .hero-kicker{margin-bottom:.65rem}
  .hero-copy .hero-lead{margin-top:.65rem;line-height:1.5}
  .hero-beta-note{margin-top:.52rem;line-height:1.48}
  .hero-copy .hero-actions{margin-top:.65rem}
  .hero-copy .store-availability{margin-top:.55rem}
  .hero-layout{gap:.8rem}
  .hero-phone-visual .preview-interactive{margin-top:.15rem}
}
/* Footer: brand and social links first, then two compact navigation columns. */
@media(max-width:680px){
  .home-page .site-footer{padding:2.5rem 0 1.4rem}
  .home-page .footer-premium{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.35rem 1.1rem;padding-bottom:1.65rem}
  .home-page .footer-brand-block{grid-column:1 / -1}
  .home-page .footer-brand-block p{margin:.55rem 0 0;line-height:1.5}
  .home-page .footer-social{margin-top:.85rem}
  .home-page .footer-column{min-width:0;gap:.56rem}
  .home-page .footer-column strong{font-size:.79rem}
  .home-page .footer-column a{font-size:.77rem;line-height:1.45;overflow-wrap:break-word}
  .home-page .footer-column a:focus-visible{outline:2px solid #82caff;outline-offset:3px;border-radius:3px}
  .home-page .footer-bottom{padding-top:1rem}
}

/* Responsive secondary pages: a visible, keyboard accessible navigation target. */
@media(max-width:680px){
  body:not(.home-page) .nav-links{display:flex;align-items:center;justify-content:flex-end;margin-left:auto;gap:.4rem;min-width:0}
  body:not(.home-page) .nav-links a{display:none;min-height:44px;align-items:center;justify-content:center;border:1px solid rgba(145,187,226,.26);border-radius:11px;padding:.45rem .7rem;color:#d7ecff;font-size:.78rem;font-weight:750;white-space:nowrap;text-decoration:none}
  body:not(.home-page) .nav-links a:first-child{display:inline-flex}
  body:not(.home-page) .nav-links a[aria-current="page"]{display:none}
  body:not(.home-page) .nav-links a[aria-current="page"]+a{display:inline-flex}
  body:not(.home-page) .nav-links a:focus-visible{outline:3px solid #82caff;outline-offset:2px}
  body:not(.home-page) .page-hero{padding:3rem 0 1.4rem}
  body:not(.home-page) .page-hero h1{font-size:clamp(2rem,9.1vw,3.5rem);line-height:1.08;overflow-wrap:break-word}
  body:not(.home-page) .content{padding-bottom:3.6rem}
  body:not(.home-page) .site-footer{padding:2.4rem 0 1.5rem}
  body:not(.home-page) .footer-links a{min-height:32px;display:inline-flex;align-items:center}
}


/* Desktop-first 2026-10-10 UX: clear feature previews and restrained mobile layout.
   Leave the Simple et respectueux section unchanged. */
.home-page .nav-links-home{gap:.22rem;padding:.3rem;border:1px solid rgba(138,180,218,.22);border-radius:999px;background:rgba(255,255,255,.045)}
.home-page .nav-links-home a{display:inline-flex;align-items:center;min-height:38px;padding:.52rem 1rem;border-radius:999px;color:#dcecff;font-size:.85rem;font-weight:720;transition:background .18s,color .18s}
.home-page .nav-links-home a:hover,.home-page .nav-links-home a:focus-visible{color:#fff;background:rgba(92,166,234,.24)}
.home-page .nav-links-home a:focus-visible{outline:2px solid #83c8ff;outline-offset:2px}
.home-page .nav-cta{box-shadow:0 5px 18px rgba(0,0,0,.11)}
.home-page .feature-story-label{font-size:1.1rem;letter-spacing:.008em;text-transform:none;color:#0564af;font-weight:820;margin-bottom:.65rem}
.home-page .feature-story-copy h3{color:#13283e;font-size:clamp(2.25rem,3.65vw,3.55rem)}
.home-page .feature-story-copy>p:not(.feature-story-note){color:#30465e;font-size:1.1rem;line-height:1.68}
.home-page .feature-story-points li{color:#28425d;font-size:1.01rem}
.home-page .feature-story-stage{min-height:440px;padding:21px 21px 56px;display:flex;align-items:center;justify-content:center}
.home-page .feature-story-stage img{width:min(100%,485px);max-width:100%;height:355px;object-fit:cover;border:1px solid #cbdbea;border-radius:19px;box-shadow:0 17px 34px rgba(9,40,82,.20)}
.home-page .feature-story-stage--rides img{object-position:center 88%}
.home-page .feature-story-stage--goals img{object-position:center 88%}
.home-page .feature-story-stage--stats img{object-position:center 29%}
.home-page .feature-story-tag{right:auto;left:50%;bottom:13px;transform:translateX(-50%);max-width:calc(100% - 24px);white-space:nowrap;text-align:center;padding:.4rem .7rem;font-size:.77rem}
.home-page .feature-story-caption{margin:.7rem auto 0;color:#51657c;text-align:center;font-size:.81rem;line-height:1.5}
.home-page .bike-premium-kicker{font-size:.9rem;letter-spacing:.06em}
.home-page .bike-premium-copy h2{font-size:clamp(2.5rem,4.2vw,4.4rem)}
.home-page .bike-premium-benefits li{font-size:1rem;font-weight:600;line-height:1.6}
.home-page .bike-premium-stage{display:block;min-height:0;padding:17px;border-radius:25px;overflow:visible}
.home-page .bike-preview-layout{display:grid;grid-template-columns:minmax(0,.93fr) minmax(0,1.07fr);gap:14px;align-items:stretch}
.home-page .bike-preview-screenshot{position:relative;min-width:0;overflow:hidden;background:#f5f8fd;border:1px solid #d6e2ec;border-radius:16px;box-shadow:0 8px 24px rgba(15,42,71,.12)}
.home-page .bike-premium-stage .bike-preview-screenshot img{display:block;width:100%;height:360px;object-fit:cover;object-position:top;border:0;border-radius:0;box-shadow:none}
.home-page .bike-preview-badge{position:absolute;bottom:9px;left:9px;right:9px;text-align:center;padding:.48rem .6rem;border-radius:10px;background:#10375d;color:#fff;font-size:.75rem;font-weight:750;box-shadow:0 4px 10px rgba(0,0,0,.14)}
.home-page .bike-preview-functions{display:grid;align-content:center;gap:9px;min-width:0}
.home-page .bike-preview-eyebrow{font-size:.78rem;font-weight:800;color:#0f426c;line-height:1.35;margin-bottom:2px}
.home-page .bike-preview-function{display:flex;align-items:flex-start;gap:.6rem;padding:.82rem .72rem;background:#fff;border:1px solid #dce9f5;border-radius:14px;box-shadow:0 5px 18px rgba(19,65,106,.06);min-width:0}
.home-page .bike-preview-function-icon{flex:0 0 26px;height:26px;border-radius:8px;display:grid;place-items:center;background:#e7f4ff;color:#085a9d;font-size:.74rem;font-weight:850}
.home-page .bike-preview-function strong{display:block;font-size:.92rem;line-height:1.25;color:#102941;font-weight:850}
.home-page .bike-preview-function p{margin:.27rem 0 0;color:#496179;font-size:.78rem;line-height:1.42}
.home-page .bike-preview-caption{margin:.8rem 0 0;color:#b9d2e8;text-align:center;font-size:.79rem;line-height:1.55}
.home-page .faq-intro .section-kicker{font-size:.82rem;letter-spacing:.08em}
.home-page .faq-intro h2{font-size:clamp(2.4rem,4vw,4rem);line-height:1.08}
.home-page .faq-items summary{font-size:1.07rem;line-height:1.45}
.home-page .faq-items details p{font-size:.98rem}
@media(max-width:1100px) and (min-width:681px){
  .home-page .nav{gap:.7rem}
  .home-page .nav-links-home{gap:0;padding:.2rem}
  .home-page .nav-links-home a{padding:.48rem .65rem;font-size:.78rem}
}
@media(max-width:880px){
  .home-page .feature-story-stage{min-height:401px;padding:17px 17px 51px}
  .home-page .feature-story-stage img{height:327px}
  .home-page .bike-premium-stage{padding:15px}
}
@media(max-width:680px){
  .home-page .feature-story-label{font-size:1.02rem;letter-spacing:0;margin-bottom:.45rem}
  .home-page .feature-story-copy h3{font-size:clamp(2rem,8.6vw,2.7rem)}
  .home-page .feature-story-copy>p:not(.feature-story-note){font-size:1rem;line-height:1.6}
  .home-page .feature-story-stage{min-height:377px;padding:14px 14px 50px;border-radius:22px}
  .home-page .feature-story-stage img{height:308px;border-radius:14px}
  .home-page .feature-story-tag{bottom:11px;font-size:.71rem;padding:.35rem .55rem}
  .home-page .feature-story-caption{font-size:.76rem}
  .home-page .bike-preview-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px}
  .home-page .bike-premium-stage .bike-preview-screenshot img{height:338px}
  .home-page .bike-preview-function{padding:.6rem .5rem;gap:.36rem}
  .home-page .bike-preview-function-icon{flex-basis:23px;height:23px;font-size:.63rem}
  .home-page .bike-preview-function strong{font-size:.82rem}
  .home-page .bike-preview-function p{font-size:.7rem;line-height:1.38}
  .home-page .bike-preview-eyebrow{font-size:.7rem}
  .home-page .faq-items summary{font-size:1rem}
}
@media(max-width:360px){
  .home-page .bike-preview-layout{grid-template-columns:1fr}
  .home-page .bike-premium-stage .bike-preview-screenshot img{height:255px}
  .home-page .bike-preview-functions{grid-template-columns:1fr;gap:7px}
}
@media(prefers-reduced-motion:reduce){.home-page .nav-links-home a{transition:none}}

@media(max-width:680px){
.home-page .bike-preview-layout{grid-template-columns:1fr;gap:11px}
.home-page .bike-premium-stage .bike-preview-screenshot img{height:283px;object-fit:cover;object-position:top}
.home-page .bike-preview-functions{grid-template-columns:1fr;gap:8px}
.home-page .bike-preview-eyebrow{font-size:.81rem;margin:.15rem 0}
.home-page .bike-preview-function{display:flex;padding:.74rem .85rem;gap:.7rem}
.home-page .bike-preview-function-icon{flex:0 0 27px;height:27px;font-size:.72rem}
.home-page .bike-preview-function strong{font-size:.94rem}
.home-page .bike-preview-function p{font-size:.79rem;line-height:1.46}
}

/* October 10 visual refinements: readable full captures, honest monthly-challenge callout,
   accessible image enlargement, and elegant benefits markers. */
.home-page .feature-story-stage {
  min-height: 0;
  padding: clamp(16px, 2.3vw, 28px);
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.home-page .feature-story-image-link {
  position: relative;
  display: inline-flex;
  justify-content: center;
  max-width: 100%;
  border-radius: 19px;
  text-decoration: none;
  transition: transform .18s ease;
}
.home-page .feature-story-image-link:hover { transform: translateY(-3px); }
.home-page .feature-story-image-link:focus-visible {
  outline: 3px solid #006be2;
  outline-offset: 5px;
}
.home-page .feature-story-stage .feature-story-image-link img {
  display: block;
  width: auto;
  max-width: 100%;
  height: clamp(460px, 42vw, 610px);
  object-fit: contain;
  object-position: center;
  border: 1px solid #cbdbea;
  border-radius: 19px;
  box-shadow: 0 17px 34px rgba(9,40,82,.16);
}
.home-page .feature-image-expand {
  position: absolute;
  right: 10px;
  top: 10px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #0a4e86;
  background: rgba(255,255,255,.96);
  border: 1px solid #cbdcea;
  border-radius: 11px;
  font-size: 1.15rem;
  font-weight: 750;
  box-shadow: 0 4px 14px rgba(6,42,81,.12);
}
.home-page .feature-story-stage--goals { padding-bottom: 140px; }
.home-page .feature-goals-monthly {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  gap: .2rem;
  width: min(340px, calc(100% - 36px));
  padding: .85rem 1.2rem;
  border: 1px solid #a5dce8;
  border-radius: 16px;
  text-align: center;
  background: #fff;
  color: #173750;
  box-shadow: 0 9px 22px rgba(16,91,122,.11);
}
.home-page .feature-goals-monthly-kicker {
  color: #36758b;
  font-size: .73rem;
  font-weight: 780;
  letter-spacing: .025em;
}
.home-page .feature-goals-monthly strong {
  color: #0b3458;
  font-size: 1.12rem;
  line-height: 1.3;
}
.home-page .feature-goals-monthly > span:last-child {
  color: #4d6276;
  font-size: .82rem;
  line-height: 1.4;
}
.home-page .feature-story-stage--stats .feature-story-tag {
  bottom: 14px;
}
.home-page .feature-story-points {
  display: grid;
  gap: .8rem;
  margin-top: 1.45rem;
}
.home-page .feature-story-points li {
  position: relative;
  padding: 0 0 0 1.9rem;
  font-size: 1rem;
  font-weight: 640;
  line-height: 1.55;
}
.home-page .feature-story-points li::before {
  content: "✓";
  display: grid;
  place-items: center;
  position: absolute;
  left: 0;
  top: .13rem;
  width: 1.2rem;
  height: 1.2rem;
  border: 1px solid #b5ddf8;
  border-radius: 6px;
  color: #0064ad;
  background: #dcf0ff;
  font-size: .81rem;
  line-height: 1;
  font-weight: 900;
}
.home-page .feature-story-points li:not(:last-child)::after { content: none; }
.home-page .bike-premium-benefits li { padding-left: 1.9rem; }
.home-page .bike-premium-benefits li::before {
  content: "✓";
  display: grid;
  place-items: center;
  left: 0;
  top: .13rem;
  width: 1.17rem;
  height: 1.17rem;
  border: 1px solid rgba(122,209,250,.44);
  border-radius: 6px;
  background: rgba(80,170,222,.19);
  color: #a5eaff;
  font-size: .78rem;
  font-weight: 900;
}
@media (max-width: 880px) {
  .home-page .feature-story-stage .feature-story-image-link img { height: min(115vw, 560px); }
}
@media (max-width: 680px) {
  .home-page .feature-story-stage { padding: 16px; border-radius: 22px; }
  .home-page .feature-story-stage .feature-story-image-link img { height: min(123vw, 505px); border-radius: 15px; }
  .home-page .feature-story-stage--goals { padding-bottom: 136px; }
  .home-page .feature-goals-monthly { bottom: 14px; padding: .75rem .8rem; }
  .home-page .feature-story-points { display: grid; gap: .48rem; margin-top: .85rem; }
  .home-page .feature-story-points li { font-size: .91rem; line-height: 1.45; padding-left: 1.7rem; }
  .home-page .feature-story-points li::before { width: 1.1rem; height: 1.1rem; top: .1rem; }
  .home-page .feature-image-expand { width: 30px; height: 30px; right: 7px; top: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-page .feature-story-image-link { transition: none; }
}

/* Keep context labels outside the screenshots rather than covering application content. */
.home-page .feature-story-stage--rides,
.home-page .feature-story-stage--stats { padding-bottom: 65px; }
@media (max-width:680px) {
  .home-page .feature-story-stage--rides,
  .home-page .feature-story-stage--stats { padding-bottom: 58px; }
}

/* 2026-10-11: language switcher and authentic Bike Manager screenshots */
.language-switch{display:flex;align-items:center;gap:2px;border:1px solid rgba(153,195,231,.34);border-radius:999px;padding:3px;background:rgba(140,176,210,.12);flex-shrink:0;margin-left:auto}
.language-switch a{display:inline-grid;place-items:center;min-width:36px;min-height:34px;padding:.26rem .4rem;border-radius:999px;text-decoration:none;font-size:.77rem;font-weight:800;color:#c3d8e9}
.language-switch a[aria-current=page]{background:#eff7ff;color:#143451}
.language-switch a:hover,.language-switch a:focus-visible{background:#c8e9ff;color:#0b2949}
.language-switch a:focus-visible{outline:2px solid #4ac9fa;outline-offset:2px}
.home-page .nav-cta{margin-left:0}
.home-page .feature-story-stage--goals{padding:22px 22px 65px}
.home-page .feature-story-stage--goals img{object-fit:contain;object-position:center;width:auto;max-width:100%;height:clamp(450px,40vw,610px)}
.home-page .feature-story-stage img{cursor:default}
.home-page .feature-story-stage--goals .feature-story-tag{white-space:normal;width:max-content;max-width:calc(100% - 24px)}
.home-page .bike-preview-reality{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;align-items:start}
.home-page .bike-preview-real-card{margin:0;min-width:0;padding:9px 9px 12px;border:1px solid #c6dced;border-radius:19px;background:#f2f7fc;color:#132e48;box-shadow:0 13px 25px rgba(2,25,51,.16)}
.home-page .bike-premium-stage .bike-preview-real-card img{display:block;max-width:100%;width:100%;height:350px;object-fit:contain;object-position:top;border:0;box-shadow:none;border-radius:11px;background:#fff}
.home-page .bike-preview-real-card figcaption{padding-top:8px;text-align:center;font-size:.86rem;line-height:1.35;font-weight:800}
.en-preview-note{max-width:480px;margin:0 auto 1rem;color:#d1e3f8;font-size:.83rem;line-height:1.5;text-align:center}
.store-platform-badge-text{display:flex;align-items:center;justify-content:center;min-height:53px;text-align:center;border:1px solid #6e839c;border-radius:12px;color:#fff;background:#172435;font-size:.84rem;font-weight:750;padding:.5rem}
@media(max-width:880px){.home-page .feature-story-stage--goals img{height:460px}}
@media(max-width:680px){.language-switch{margin-left:auto}.language-switch a{min-width:32px;min-height:34px;font-size:.72rem}.home-page .feature-story-stage--goals{padding:12px 12px 56px}.home-page .feature-story-stage--goals img{height:min(124vw,490px);max-height:490px}.home-page .bike-preview-reality{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.home-page .bike-preview-real-card{padding:6px 6px 8px;border-radius:13px}.home-page .bike-premium-stage .bike-preview-real-card img{height:290px}.home-page .bike-preview-real-card figcaption{font-size:.74rem}}
@media(max-width:390px){.home-page .nav{gap:.32rem}.home-page .nav-cta{padding:0 .55rem}.language-switch a{min-width:30px}}

/* Final small-screen layout: readable Bike Manager forms and uncluttered header. */
@media(max-width:680px){
  .home-page .bike-preview-reality{grid-template-columns:minmax(0,1fr);gap:14px}
  .home-page .bike-preview-real-card{padding:10px;border-radius:17px}
  .home-page .bike-premium-stage .bike-preview-real-card img{width:100%;height:490px;object-fit:contain}
  .home-page .bike-preview-real-card figcaption{font-size:.9rem}
}
@media(max-width:355px){
  .site-header .brand span{display:none}
  .home-page .nav{gap:.5rem}
}


/* Keep the same native iPhone screenshot framing on FR and EN.
   Language switch remains in both site headers. */
.language-switch a{display:inline-flex;gap:5px;align-items:center;justify-content:center;padding:6px 8px;min-width:59px;line-height:1}
.language-switch .language-flag{display:inline-block;flex:0 0 22px;width:22px;height:15px;border-radius:2px;overflow:hidden;box-shadow:0 0 0 1px rgba(6,24,42,.12)}
@media(max-width:420px){.language-switch a{min-width:49px;padding:5px 6px;gap:3px}.language-switch .language-flag{width:19px;max-width:19px;flex-basis:19px}.home-page .nav-cta{padding:0 .55rem}}
@media(max-width:355px){.language-switch a{min-width:45px;padding:5px 4px}.site-header .brand span{display:none}}


/* Progress section: display more of the actual Flutter statistics screen.
   Shared FR/EN class keeps geometry identical; no edited photographs. */
.home-page .feature-story-stage--stats {
  padding: 20px 18px 53px;
}
.home-page .feature-story-stage--stats img {
  width: min(100%, 350px);
  max-width: 100%;
  height: 570px;
  object-fit: cover;
  object-position: center top;
}
@media (max-width: 880px) {
  .home-page .feature-story-stage--stats img {
    width: min(100%, 325px);
    height: 520px;
    object-position: center top;
  }
}
@media (max-width: 680px) {
  .home-page .feature-story-stage--stats {
    padding: 15px 12px 54px;
  }
  .home-page .feature-story-stage--stats img {
    width: min(100%, 310px);
    height: clamp(390px, 122vw, 500px);
    object-position: center top;
  }
}
@media (max-width: 355px) {
  .home-page .feature-story-stage--stats img {
    width: min(100%, 275px);
    height: 435px;
  }
}

/* Mobile: one deliberate row — Tynavel, visible FR/EN switch, hamburger.
   The full navigation and Contact remain inside the accessible disclosure. */
@media (max-width: 720px) {
  .home-page .site-header .nav {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    min-height: 64px;
    padding-block: 8px;
    gap: 8px;
  }
  .home-page .site-header .nav-links-home { display: none; }
  .home-page .site-header .brand {
    order: 0;
    display: inline-flex;
    flex: 0 0 auto;
    min-width: 0;
    gap: .43rem;
    margin-right: 0;
  }
  .home-page .site-header .brand span {
    display: inline;
    font-size: .9rem;
    white-space: nowrap;
  }
  .home-page .site-header .brand-mark { width: 33px; height: 33px; }
  .home-page .site-header .language-switch {
    order: 1;
    margin-left: auto;
    display: flex;
    flex: 0 0 auto;
    gap: 2px;
  }
  .home-page .site-header .language-switch a {
    display: inline-flex;
    gap: 4px;
    min-width: 45px;
    min-height: 38px;
    padding: 6px 5px;
  }
  .home-page .site-header .mobile-site-nav {
    order: 2;
    display: block;
    flex: 0 0 44px;
    margin-left: 0;
    position: relative;
  }
  .home-page .site-header .mobile-site-nav summary {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 12px;
    border: 1px solid rgba(153,195,231,.36);
    background: rgba(140,176,210,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .home-page .site-header .mobile-site-nav-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .home-page .site-header .mobile-site-nav-icon {
    display: flex;
    width: 19px;
    flex-direction: column;
    gap: 4px;
    align-items: stretch;
  }
  .home-page .site-header .mobile-site-nav-icon span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 99px;
    background: currentColor;
    transition: transform .16s ease, opacity .16s ease;
  }
  .home-page .site-header .mobile-site-nav[open] .mobile-site-nav-icon span:first-child {
    transform: translateY(6px) rotate(45deg);
  }
  .home-page .site-header .mobile-site-nav[open] .mobile-site-nav-icon span:nth-child(2) {
    opacity: 0;
  }
  .home-page .site-header .mobile-site-nav[open] .mobile-site-nav-icon span:last-child {
    transform: translateY(-6px) rotate(-45deg);
  }
  .home-page .site-header .mobile-site-nav-links {
    left: auto;
    right: 0;
    top: calc(100% + .7rem);
    width: min(270px, calc(100vw - 1.25rem));
  }
  .home-page .site-header .nav-cta { display: none; }
  html { scroll-padding-top: 80px; }
}
@media (max-width: 360px) {
  .home-page .site-header .nav { gap: 6px; }
  .home-page .site-header .brand-mark { width: 31px; height: 31px; }
  .home-page .site-header .brand span { font-size: .85rem; }
  .home-page .site-header .language-switch a {
    gap: 2px;
    min-width: 42px;
    padding-inline: 4px;
  }
  .home-page .site-header .language-flag {
    width: 16px;
    max-width: 16px;
    flex: 0 0 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-page .site-header .mobile-site-nav-icon span { transition: none; }
}


/* Desktop navigation centered on the true site midpoint, independently
   of brand width and the width of the language/contact controls. */
@media (min-width: 981px) {
  .home-page .site-header .nav { position: relative; }
  .home-page .site-header .nav-links-home {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
  }
}
/* Small tablets retain the single-line brand, visible languages and
   hamburger; avoid squeezing the full desktop menu into 721–980px. */
@media (min-width: 721px) and (max-width: 980px) {
  .home-page .site-header .nav-links-home { display: none; }
}
@media (max-width: 980px) {
  .home-page .site-header .nav { display:flex; align-items:center; flex-wrap:nowrap; }
  .home-page .site-header .mobile-site-nav { display:block; }
  .home-page .site-header .nav-links-home { display:none; }
  .home-page .site-header .nav-cta { display:none; }
  .home-page .site-header .brand { order:0; flex:0 0 auto; }
  .home-page .site-header .language-switch { order:1; margin-left:auto; }
  .home-page .site-header .mobile-site-nav { order:2; flex:0 0 44px; margin-left:0; }
}
/* Original in-app monthly statistics screenshot without OS clock / radio /
   battery. Its entire weekly chart fits without object-fit cropping. */
.home-page .feature-story-stage--stats {
  min-height:0;
  padding:22px 18px 56px;
}
.home-page .feature-story-stage--stats img {
  display:block;
  width:min(100%,350px);
  height:auto;
  max-height:none;
  object-fit:contain;
  object-position:center top;
}
@media(max-width:880px) {
  .home-page .feature-story-stage--stats { padding:18px 14px 54px; }
  .home-page .feature-story-stage--stats img {
    width:min(100%,330px);height:auto;max-height:none;
  }
}
@media(max-width:680px) {
  .home-page .feature-story-stage--stats { padding:14px 10px 52px; }
  .home-page .feature-story-stage--stats img {
    width:min(100%,310px);height:auto;max-height:none;
  }
}
@media(max-width:355px) {
  .home-page .feature-story-stage--stats img {
    width:min(100%,275px);height:auto;max-height:none;
  }
}


/* Targeted 2026-10-12 polish: keep native Bike Manager screenshots and allow
   full-size viewing IN the page, without navigation or opening new tabs. */
.home-page .bike-preview-real-card {
  overflow:visible;
}
.home-page .bike-preview-zoom {
  margin-top:.6rem;
  border-top:1px solid #cddfed;
  padding-top:.45rem;
}
.home-page .bike-preview-zoom summary {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.4rem;
  cursor:pointer;
  border-radius:10px;
  padding:.65rem .6rem;
  min-height:44px;
  font-size:.88rem;
  font-weight:750;
  color:#07558e;
  text-align:center;
}
.home-page .bike-preview-zoom summary:hover,
.home-page .bike-preview-zoom summary:focus-visible {
  background:#e6f3ff;
}
.home-page .bike-preview-zoom summary:focus-visible {
  outline:2px solid #087ff3;
  outline-offset:2px;
}
.home-page .bike-preview-zoom[open] { padding-bottom:.3rem; }
.home-page .bike-premium-stage .bike-preview-zoom img {
  width:100%;
  height:auto;
  max-height:none;
  aspect-ratio:auto;
  object-fit:contain;
  background:#fff;
  margin-top:.4rem;
  border:1px solid #dfebf3;
  border-radius:12px;
}
.home-page .bike-preview-zoom summary::marker { color:#0e6fc0; }
.home-page .feature-story-tag { font-size:max(.78rem,12.5px); }
.home-page .bike-preview-caption { font-size:.88rem; line-height:1.55; }
@media (min-width:981px) {
  .home-page .bike-premium-stage .bike-preview-real-card > img {
    height:405px;
  }
}
@media (max-width:680px) {
  .home-page .bike-premium-stage .bike-preview-real-card > img {
    height:490px;
  }
  .home-page .bike-preview-real-card figcaption { font-size:.94rem; }
  .home-page .bike-preview-zoom summary { font-size:.9rem; }
}

/* Only expand a Bike Manager form when explicitly requested. This preserves
   the compact two-card desktop overview and opens NO external tab. */
.home-page .bike-preview-reality:has(.bike-preview-zoom[open]) {
  align-items:stretch;
}
.home-page .bike-preview-real-card:has(.bike-preview-zoom[open]) {
  grid-column:1 / -1;
  width:100%;
  max-width:100%;
}
.home-page .bike-premium-stage .bike-preview-real-card:has(.bike-preview-zoom[open]) > img {
  max-height:220px;
  height:220px;
}
.home-page .bike-preview-real-card:has(.bike-preview-zoom[open]) .bike-preview-zoom > img {
  display:block;
  width:min(100%,690px);
  max-height:none;
  height:auto;
  margin-inline:auto;
}

/* When a form expands, show its single readable full-size capture rather than
   repeating the small overview screenshot above it. */
.home-page .bike-preview-real-card:has(.bike-preview-zoom[open]) > img {display:none}


/* 2026-10-12: phone status safe region and understated motion.
   Crop moving screenshot CONTENT at the height of the separate genuine
   native status strip (82 px of a 720 px-wide source). The bar itself stays
   fixed and visible during scrolling, in both languages and all tabs. */
.hero-phone-visual .iphone18-pro .device-screen {
  container-type:inline-size;
}
.hero-phone-visual .iphone18-pro .preview-screen-scroll {
  -webkit-clip-path:inset(11.389cqw 0 0 0);
  clip-path:inset(11.389cqw 0 0 0);
}
@supports not (clip-path: inset(1cqw 0 0 0)) {
  .hero-phone-visual .iphone18-pro .preview-screen-scroll {
    clip-path:inset(38px 0 0 0);
  }
}
/* Product depth without continuous movement or pointer interference. */
.home-page .hero-phone-visual::before {
  content:"";position:absolute;inset:10% 0 12%;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(32,125,245,.22),transparent 70%);
  filter:blur(18px);opacity:.65;pointer-events:none;
}
.home-page .hero-phone-visual .preview-interactive {
  position:relative;z-index:1;
}
@media (min-width:1024px) and (prefers-reduced-motion:no-preference) {
  .home-page .hero-phone-visual .device-frame.iphone18-pro {
    transform:rotate(-4deg);
    transform-origin:center center;
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.13),
      inset 0 0 0 5px rgba(0,0,0,.16),
      0 44px 78px rgba(0,0,0,.47),0 4px 32px rgba(28,120,239,.18);
  }
}
@media(max-width:1023px) {
  .home-page .hero-phone-visual .device-frame.iphone18-pro {
    transform:none;
  }
}
/* Motion is progressive enhancement: elements never disappear when JS is
   disabled, unsupported, or reduced motion has been requested. */
@media (prefers-reduced-motion:no-preference) {
  .motion-ready .motion-enter {
    opacity:0;
    transform:translate3d(0,12px,0);
    transition:opacity .46s ease,transform .46s cubic-bezier(.2,.75,.25,1);
  }
  .motion-ready .motion-enter.is-visible {
    opacity:1;
    transform:translate3d(0,0,0);
  }
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .home-page .bike-preview-real-card{
    transition:transform .24s ease,box-shadow .24s ease;
  }
  .home-page .bike-preview-real-card:hover{
    transform:translateY(-2px);
    box-shadow:0 16px 32px rgba(13,45,82,.15);
  }
}
.home-page .faq-items details[open] {
  border-bottom-color:rgba(113,190,255,.45);
}
@media(prefers-reduced-motion:reduce) {
  .home-page .hero-phone-visual::before {filter:none;opacity:.38}
  .motion-ready .motion-enter {opacity:1!important;transform:none!important;transition:none!important}
  .home-page .hero-phone-visual .device-frame.iphone18-pro {transform:none!important}
}


/* Fixed status strip contains ONLY authentic native glyphs, no frozen photo.
   A solid natural dark surface hides all scrolling hero fragments. */
.hero-phone-visual .iphone18-pro .preview-native-status {
  background:#172b3e;
  isolation:isolate;
}
.hero-phone-visual .iphone18-pro .preview-native-status img {
  display:block;
  width:100%;
  height:auto;
  image-rendering:auto;
}
/* Keep sharp native iPhone bezels: rotating the full composited screenshot
   produced subpixel/rainbow aliasing around the phone on real displays. */
@media(min-width:1024px) and (prefers-reduced-motion:no-preference) {
  .home-page .hero-phone-visual .device-frame.iphone18-pro {
    transform:none;
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.13),
      inset 0 0 0 5px rgba(0,0,0,.16),
      0 34px 64px rgba(0,0,0,.48),0 0 24px rgba(31,106,194,.07);
  }
}
.home-page .hero-phone-visual::before {
  background:radial-gradient(ellipse,rgba(32,125,245,.12),transparent 70%);
  filter:blur(15px);
  opacity:.5;
}
/* Clearly perceptible yet restrained editorial motion, once per section. */
@media(prefers-reduced-motion:no-preference) {
  .motion-ready .motion-enter {
    opacity:0;
    transform:translate3d(0,24px,0);
    transition:opacity .68s ease-out,
      transform .68s cubic-bezier(.18,.7,.22,1);
  }
  .motion-ready .motion-enter.is-visible {
    opacity:1;
    transform:translate3d(0,0,0);
  }
  .motion-ready .feature-story-media.motion-enter {
    transform:translate3d(0,32px,0);
    transition-delay:.12s;
  }
  .motion-ready .feature-story-media.motion-enter.is-visible {
    transform:translate3d(0,0,0);
  }
  .motion-ready .bike-preview-real-card.motion-enter:nth-child(2) {
    transition-delay:.12s;
  }
}
@media(prefers-reduced-motion:reduce) {
  .motion-ready .motion-enter {transition:none!important;opacity:1!important;transform:none!important;}
  .home-page .hero-phone-visual .device-frame.iphone18-pro {transform:none!important;}
}


/* 2026-10-12 — The genuine Home hero fills the phone all the way to the top.
   The independent opaque status appears ONLY after inner scrolling; its icon
   layer is never superimposed onto a full photo while the phone is at rest. */
.hero-phone-visual .iphone18-pro .preview-native-status {
  opacity:0;
  visibility:hidden;
  transition:opacity .12s ease,visibility 0s linear .12s;
}
.hero-phone-visual .iphone18-pro[data-status-scrolled="true"] .preview-native-status {
  opacity:1;
  visibility:visible;
  transition:opacity .12s ease;
}
.hero-phone-visual .iphone18-pro .preview-screen-scroll {
  -webkit-clip-path:none;
  clip-path:none;
}
.hero-phone-visual .iphone18-pro[data-status-scrolled="true"] .preview-screen-scroll {
  -webkit-clip-path:inset(11.389cqw 0 0 0);
  clip-path:inset(11.389cqw 0 0 0);
}
/* Free and Premium are informational comparisons, not radio buttons:
   do not give one tier a selected look before subscriptions open. */
.home-page .premium-access-comparison .premium-access-level,
.home-page .premium-access-comparison .premium-access-level--paid {
  background:rgba(255,255,255,.045);
  border:1px solid rgba(163,194,223,.33);
  box-shadow:none;
  transform:none;
}
.home-page .premium-access-comparison .premium-access-level--paid .premium-level-name {
  color:#c6e1f7;
}
@media(prefers-reduced-motion:reduce) {
  .hero-phone-visual .iphone18-pro .preview-native-status {transition:none}
}
