/* WEMU driver landing. Design tokens come straight from the Figma frame:
   ink #50506D, muted #8F8FAD, brand #4A44F3, soft #F5F6FE, dim #B9B9CB. */
:root{
  --ink:#50506D; --muted:#8F8FAD; --brand:#4A44F3; --onbrand:#E9EAEB;
  --soft:#F5F6FE; --dim:#B9B9CB; --line:rgba(52,52,71,.1); --page:#fff;
  --head:'Libre Franklin',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --pad:clamp(20px,4vw,64px);
  --wide:1400px;
  /* content is at most 1400 wide, centred, with a gutter on smaller screens */
  --box:min(var(--wide), 100% - var(--pad) * 2);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px;overflow-x:clip}
body{background:var(--page);color:var(--ink);font-family:var(--body);font-weight:500;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* shared type */
h1,h2{font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:-.01em;
  line-height:1.05;text-align:center}
h1{font-size:clamp(32px,4.5vw,64px)}
h2{font-size:clamp(28px,3.8vw,54px)}
h1 em,h2 em{font-style:normal;color:var(--brand)}
.nb{white-space:nowrap}
.lead{font-size:clamp(16px,1.5vw,20px);line-height:1.2;text-align:center;max-width:452px;margin-inline:auto}

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:12px;background:var(--brand);
  color:var(--onbrand);border-radius:12px;padding:clamp(20px,3vw,32px) clamp(24px,4vw,64px);
  font-family:var(--head);font-style:italic;font-weight:700;font-size:clamp(15px,1.6vw,20px);
  line-height:1.2;text-transform:uppercase;text-align:center;transition:transform .15s,filter .15s}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:scale(.985)}
.btn .i{width:28px;height:28px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.btn-sm{background:var(--brand);color:var(--onbrand);border-radius:8px;padding:12px 16px;
  font-size:14px;line-height:17px;white-space:nowrap;transition:filter .15s}
.btn-sm:hover{filter:brightness(1.08)}
.link{font-family:var(--head);font-style:italic;font-weight:700;font-size:clamp(15px,1.6vw,20px);
  text-transform:uppercase;text-decoration:underline;text-underline-offset:4px}
.link.brand{color:var(--brand)}

/* header */
.hdr{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:16px max(var(--pad), calc((100% - var(--wide)) / 2));
  background:rgba(255,255,255,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;transition:border-color .2s}
.hdr.stuck{border-bottom-color:var(--line)}
.logo{flex:0 0 auto}
.logo svg{width:clamp(132px,14vw,168px);height:auto}
.nav{display:flex;align-items:center;gap:24px;margin-inline:auto;font-size:16px}
.nav a{transition:color .15s}
.nav a:hover{color:var(--brand)}
.nav i{width:1px;height:21px;background:var(--line)}

/* hero */
.hero{display:flex;flex-direction:column;align-items:center;gap:29px;
  padding:clamp(56px,9vw,132px) 0 0;width:min(916px, 100% - var(--pad)*2);
  margin-inline:auto;text-align:center}
.hero-cta{display:flex;flex-direction:column;align-items:center;gap:32px;width:min(533px,100%)}
.hero-cta .btn{width:100%}

/* the road */
.road{position:relative;height:230px;margin:clamp(48px,7vw,96px) 0 clamp(40px,6vw,80px)}
.road .line{position:absolute;left:0;right:0;top:97px;border-top:2px solid var(--dim)}
.road .car{position:absolute;left:max(var(--pad), calc((100% - var(--wide)) / 2));top:34px;width:61px;height:56px;fill:var(--brand)}
.stops{position:absolute;inset:0;width:var(--box);margin-inline:auto}
.stop{position:absolute;left:var(--x);top:0;translate:-50% 0;display:flex;flex-direction:column;
  align-items:center}
/* positions live here, not in a style="" on the element: an inline custom
   property outranks the stylesheet, which silently killed the phone layout */
.stops .stop:nth-child(1){--x:18%}
.stops .stop:nth-child(2){--x:75%}
.stops .stop:nth-child(3){--x:88%}
.stop .mk{width:32px;height:109px;fill:currentColor}
.stop .time{display:flex;align-items:center;gap:8px;font-family:var(--head);font-style:italic;
  font-weight:700;font-size:20px;letter-spacing:-.01em;margin-top:14px;white-space:nowrap}
.stop .clock{width:20px;height:21px;flex:0 0 auto;fill:currentColor}
.stop .tag{margin-top:14px;border:1px solid currentColor;border-radius:31px;padding:10px 14px;
  font-size:14px;line-height:17px;white-space:nowrap;font-family:var(--body);font-style:normal}
.dim{color:var(--dim)}
.on{color:var(--brand)}
:root{--home:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2.5 10.5V21h7v-6h5v6h7V10.5z'/%3E%3C/svg%3E")}

/* chaos */
.chaos{width:var(--box);margin-inline:auto}
.chaos h2{max-width:741px;margin:0 auto clamp(40px,6vw,80px)}
.chaos-grid{display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto auto auto auto;
  gap:clamp(24px,3vw,48px) clamp(16px,3vw,40px);align-items:center;justify-items:center;
  max-width:1200px;margin-inline:auto}
.ch{display:flex;flex-direction:column;align-items:center;gap:20px;max-width:368px;text-align:center}
.ch svg{width:64px;height:64px;fill:currentColor}
.ch p{font-family:var(--head);font-weight:500;font-size:clamp(20px,2.6vw,36px);line-height:1.2}
.c1{grid-area:1/2}.c2{grid-area:2/1}.c3{grid-area:2/3}
.c4{grid-area:3/1}.c5{grid-area:3/3}.c6{grid-area:4/2}
.face{grid-area:2/2/4/3;width:clamp(160px,20vw,284px)}

/* so we made it */
.made{display:flex;flex-direction:column;align-items:center;gap:24px;
  padding:clamp(72px,11vw,160px) 0 clamp(40px,6vw,72px);width:var(--box);margin-inline:auto}
.made h2{max-width:444px}
.logo.lg svg{width:168px;height:auto}

/* bento. The Figma frame drops this block onto a gradient that darkens from
   the page colour down to near-black, so the section is full-bleed and the
   copy flips to off-white. Two departures from the frame, both because our
   scenes are live light-theme Telegram mockups where the frame had dark
   placeholder rectangles: the gradient reaches the deep blues sooner instead
   of sitting on electric violet behind the tiles, and each scene gets the
   frame's dark plate as a real inset border (see .shot). Flush against the
   raw gradient the light squares read as holes punched in the band. */
.bento{display:flex;flex-direction:column;align-items:center;
  padding:clamp(72px,11vw,160px) var(--pad) clamp(72px,11vw,128px);
  background:linear-gradient(180deg,#FBFBFB 0%,#4C46F3 24%,#2C2C7D 56%,#14142E 92%)}
.bbox{display:flex;flex-direction:column;gap:clamp(32px,5vw,64px);width:min(var(--wide),100%)}
.brow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px);width:min(910px,100%)}
.brow.off{margin-left:auto}
.tile{display:flex;flex-direction:column;gap:16px}
.tile h3{margin-top:clamp(0px,1vw,16px)}
.shot{background:rgba(21,21,46,.5);border:1px solid rgba(251,251,251,.18);
  border-radius:20px;padding:clamp(10px,1.4vw,18px);overflow:hidden;aspect-ratio:1;
  box-shadow:0 30px 70px -30px rgba(8,8,26,.9)}
.shot iframe{width:100%;height:100%;border:0;display:block;border-radius:12px}
.tile h3{font-family:var(--head);font-weight:600;font-size:clamp(22px,2.6vw,36px);line-height:1.05;
  color:rgba(251,251,251,.8)}
.tile p{font-size:clamp(15px,1.5vw,20px);line-height:1.2;color:rgba(251,251,251,.5)}
/* the band ends on #14142E and pricing opens on its own light band, so any gap
   between them would read as a seam */
.bento+.pricing{margin-top:0}

/* pricing. A full-bleed band, unlike every other section, because the Figma
   frame puts the whole block on a soft gradient. The tab state lives in the
   three radio inputs inside .plans; :has() reads it back out. */
.pricing{position:relative;display:flex;flex-direction:column;align-items:center;
  padding:clamp(64px,10vw,128px) var(--pad);margin-top:clamp(80px,12vw,180px);
  background:linear-gradient(180deg,rgba(74,68,243,.2) 0%,rgba(255,255,255,.2) 100%),var(--soft)}
.pbox{display:flex;flex-direction:column;align-items:center;gap:clamp(28px,4vw,46px);
  width:min(692px,100%)}
.phead{display:flex;flex-direction:column;align-items:center;gap:13px}
.phead p{font-size:clamp(15px,1.5vw,20px);line-height:1.2;text-align:center;
  color:var(--muted);max-width:348px}

/* one .pl per plan; the checked radio decides which one is on screen */
.pl{display:none;align-items:center;justify-content:center;gap:clamp(12px,2.4vw,24px)}
/* the monthly plan is the plain default, so a browser without :has() still
   shows a price instead of an empty gap */
.pl-1m{display:flex}
.pricing:has(#plan-3m:checked) .pl-1m,
.pricing:has(#plan-6m:checked) .pl-1m{display:none}
.pricing:has(#plan-3m:checked) .pl-3m,
.pricing:has(#plan-6m:checked) .pl-6m{display:flex}
.pl .num{font-family:var(--head);font-style:italic;font-weight:700;
  font-size:clamp(76px,13vw,180px);line-height:1;color:var(--brand)}
.per{display:flex;flex-direction:column;gap:4px}
/* .save is always in the box, empty on the monthly plan, so switching tabs
   does not shift the price up and down by its line height */
.per .save{font-family:var(--head);font-style:italic;font-weight:700;
  font-size:clamp(13px,1.3vw,16px);line-height:19px;min-height:19px;color:var(--muted)}
.per .unit{font-family:var(--head);font-style:italic;font-weight:700;
  font-size:clamp(26px,4vw,54px);line-height:1.2}
.per .note{font-family:var(--head);font-style:italic;font-weight:700;
  font-size:14px;line-height:17px;color:var(--muted)}

.plans{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:8px;
  background:#fff;border-radius:17px}
.plans input{position:absolute;width:1px;height:1px;opacity:0;margin:0;clip-path:inset(50%)}
.plans label{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;
  padding:clamp(16px,2.4vw,24px) clamp(6px,1.4vw,20px);border-radius:12px;
  font-size:clamp(15px,1.6vw,20px);line-height:1.2;text-align:center;cursor:pointer;
  transition:background .15s}
.plans label span{white-space:nowrap}
.plans label:hover:not(:has(:checked)){background:rgba(74,68,243,.035)}
.plans label:has(:checked){background:var(--soft)}
.plans label:has(:focus-visible){outline:2px solid var(--brand);outline-offset:2px}
.plans b{flex:0 0 auto;background:var(--brand);color:#fff;border-radius:8px;padding:4px 8px;
  font-family:var(--head);font-style:italic;font-weight:700;font-size:clamp(12px,1.1vw,14px);
  line-height:17px;white-space:nowrap}

.pcta{display:flex;flex-direction:column;align-items:center;gap:22px;width:100%}
.fine{font-size:clamp(15px,1.5vw,20px);line-height:1.2;text-align:center;color:var(--muted)}
.btn.wide{width:100%}

/* referral */
.ref{display:flex;align-items:stretch;gap:0;margin:clamp(72px,11vw,160px) auto 0;
  width:min(979px, 100% - var(--pad)*2)}
.ref-card{flex:1 1 638px;display:flex;flex-direction:column;justify-content:center;gap:42px;
  background:#fff;border-radius:32px;padding:clamp(28px,4vw,54px)}
.ref-card h3{font-family:var(--head);font-weight:600;font-size:clamp(24px,2.6vw,36px);line-height:1.22}
.ref-card p{font-size:clamp(15px,1.5vw,20px);line-height:1.5;color:var(--muted)}
.ref-card .btn{padding:clamp(20px,2.4vw,32px) 16px;font-size:clamp(14px,1.4vw,20px)}
.ref-art{flex:0 1 341px;display:grid}
.ref-art svg{width:100%;height:auto}

/* faq */
.faq{display:flex;flex-direction:column;align-items:center;gap:clamp(32px,5vw,54px);
  padding:clamp(80px,12vw,180px) 0 0;width:var(--box);margin-inline:auto}
.acc{width:min(980px,100%);display:flex;flex-direction:column;gap:12px}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{display:flex;align-items:center;gap:clamp(20px,5vw,54px);cursor:pointer;list-style:none;
  padding:clamp(20px,3vw,36px) clamp(0px,4vw,54px);color:var(--muted);transition:color .15s}
.acc summary::-webkit-details-marker{display:none}
.acc details[open] summary{color:var(--ink);padding-bottom:12px}
.acc summary:hover{color:var(--ink)}
.acc .n,.acc .q{font-family:var(--head);font-weight:600;font-size:clamp(20px,2.6vw,36px);line-height:1.22}
.acc .n{flex:0 0 auto}
.acc .q{flex:1}
.acc .s{position:relative;flex:0 0 auto;width:36px;height:36px}
.acc .s::before,.acc .s::after{content:"";position:absolute;left:20.8%;right:20.8%;top:calc(50% - 1.5px);
  height:3px;background:currentColor}
.acc .s::after{transition:transform .2s}
.acc details:not([open]) .s::after{transform:rotate(90deg)}
.acc .a{padding:0 clamp(0px,4vw,54px) clamp(20px,3vw,36px) calc(clamp(0px,4vw,54px) + clamp(20px,5vw,54px) + 50px);
  font-size:clamp(15px,1.5vw,20px);line-height:1.4;color:var(--muted)}

/* contact */
.contact{display:flex;flex-direction:column;align-items:center;gap:36px;
  padding:clamp(80px,12vw,180px) 0 clamp(60px,9vw,120px);width:var(--box);
  margin-inline:auto;text-align:center}
.contact h2{max-width:743px}

/* legal pages (/privacy, /terms). Long-form prose: the measure is capped and
   h2 drops the display caps, while h1 keeps them so the page still reads as
   part of the site. */
.doc{width:min(760px, 100% - var(--pad)*2);margin-inline:auto;
  padding:clamp(40px,7vw,88px) 0 clamp(56px,9vw,112px)}
.doc h1{font-size:clamp(28px,4vw,48px);text-align:left;margin-bottom:12px}
.doc .upd{font-size:14px;line-height:1.4;color:var(--muted);
  margin-bottom:clamp(24px,4vw,44px)}
.doc h2{font-family:var(--head);font-weight:700;font-size:clamp(19px,2.2vw,26px);
  line-height:1.25;text-align:left;text-transform:none;letter-spacing:0;
  margin:clamp(26px,4vw,42px) 0 12px}
.doc p,.doc li{font-size:clamp(15px,1.5vw,17px);line-height:1.6}
.doc p+p,.doc ul+p{margin-top:12px}
.doc ul{margin:12px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.doc a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.doc strong{font-weight:600}

/* footer */
.ftr{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:32px max(var(--pad), calc((100% - var(--wide)) / 2));
  border-top:1px solid var(--line);font-size:16px}
.ftr-legal{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.ftr a{transition:color .15s}
.ftr a:hover{color:var(--brand)}

/* ---------- mobile ---------- */
@media (max-width:900px){
  .hdr .nav{display:none}
  .road{height:230px}
  .road .car{display:none}
  .stop .tag{font-size:12px;padding:7px 10px}
  .stops .stop:nth-child(1){--x:15%}
  .stops .stop:nth-child(2){--x:50%}
  .stops .stop:nth-child(3){--x:86%}
  /* two pills side by side do not fit a phone, so the second one drops a row */
  .stops .stop:nth-child(3) .tag{margin-top:56px}
  .chaos-grid{grid-template-columns:1fr 1fr}
  .c1{grid-area:1/1}.c2{grid-area:1/2}.c3{grid-area:2/1}
  .c4{grid-area:2/2}.c5{grid-area:3/1}.c6{grid-area:3/2}
  .face{display:none}
  .brow{grid-template-columns:1fr;width:100%}
  .brow.off{margin-left:0}
  .ref{flex-direction:column;gap:16px}
  /* the column flips flex-basis onto the height, so the card must size to
     its content instead of stretching to 638px of empty white */
  .ref-card{flex:0 0 auto;gap:24px;padding:28px}
  /* The art is a fixed composition drawn for a tile beside the card — about a
     third of the section on desktop. At full phone width it renders close to
     1:1 and the two figures become giant cropped faces. Capped and centred, it
     reads as an illustration again. The aspect-ratio it had was dead weight:
     the SVG's own height always won. */
  .ref-art{aspect-ratio:auto;align-self:center;width:min(100%,260px);flex:0 0 auto}
  .acc summary{gap:16px;padding:20px 0}
  .acc .a{padding:0 0 20px 0}
  .ftr{justify-content:center;text-align:center}
  .ftr-legal{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}

/* ---------- phones ---------- */
@media (max-width:700px){
  h1{font-size:clamp(26px,7.4vw,40px)}
  h2{font-size:clamp(24px,6.4vw,36px)}
  .nb{white-space:normal}
  .wide-only{display:none}
  /* the hero label wraps to two lines at the desktop scale, and a two-line
     CTA next to a 28px icon reads as a mistake */
  .btn{padding:18px 12px;font-size:clamp(11.5px,3.5vw,14px);gap:10px}
  .btn .i{width:22px;height:22px}
  .btn-sm{font-size:13px;padding:10px 12px}
  .logo svg{width:118px}
  .hero{gap:20px}
  .road{height:230px;margin:40px 0 32px}
  .road .line{top:73px}
  .stop .mk{width:24px;height:82px}
  .stop .time{font-size:16px;margin-top:10px;gap:6px}
  .stop .clock{width:16px;height:17px}
  .stop .tag{margin-top:10px;font-size:11px;padding:6px 9px}
  .ch p{font-size:clamp(16px,4.4vw,22px)}
  .ch svg{width:44px;height:44px}
  .chaos-grid{gap:28px 12px}
  .plans{gap:4px;padding:6px;border-radius:14px}
  .plans label{flex-direction:column;gap:4px;padding:12px 6px;font-size:14px}
  .plans b{font-size:12px;padding:3px 6px}
  .acc .n,.acc .q{font-size:20px}
  .ftr{gap:16px;font-size:14px}
}

/* ---------- scroll reveal ---------- */
.rv{opacity:0;transform:translateY(28px)}
.rv.in{opacity:1;transform:none;
  transition:opacity .65s cubic-bezier(.22,.7,.3,1) var(--rvd,0s),
             transform .65s cubic-bezier(.22,.7,.3,1) var(--rvd,0s)}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none}
}