:root{
  --cyan:#00BEBE;
  --cyan-dark:#009C9C;
  --tint:#E8F7F7;
  --black:#000000;
  --white:#FFFFFF;
  --gray:#9B9B9B;
  --line:#EEEEEE;
  --red:#DA353B;
  --green:#1a9b6c;
  --container:1200px;
  --header-h:68px;
  --font:"Helvetica Neue",Helvetica,"PingFang SC","Microsoft YaHei",Palatino,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;font-family:var(--font);font-size:16px;line-height:30px;
  font-weight:400;color:var(--black);background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
a:hover{color:var(--cyan);}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px;}
.center{text-align:center;}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ---------- typography (measured) ---------- */
h1{font-size:48px;line-height:62px;font-weight:400;margin:0;letter-spacing:normal;}
h2{font-size:36px;line-height:45px;font-weight:100;margin:0 0 15px;text-align:center;}
h3{font-size:16px;line-height:20px;font-weight:400;margin:0;}
p{margin:0 0 20px;}
.lede{font-size:16px;line-height:30px;}
.muted{color:var(--gray);}
.small{font-size:14px;line-height:24px;}
.eyebrow{font-size:14px;letter-spacing:2px;text-transform:uppercase;color:var(--gray);}

/* ---------- header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;height:var(--header-h);
  background:var(--white);padding:10px;z-index:200;
}
.site-header .bar{
  max-width:var(--container);margin:0 auto;height:48px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.logo{display:flex;align-items:baseline;gap:9px;flex:0 0 auto;}
.logo .mark{
  font-size:23px;line-height:1;font-weight:700;letter-spacing:3px;color:var(--black);
}
.logo .sub{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gray);}

.main-nav{display:flex;align-items:center;gap:34px;margin-left:auto;}
.main-nav > li{list-style:none;position:relative;}
.main-nav{padding:0;margin:0 0 0 auto;}
.main-nav > li > a{
  font-size:14px;letter-spacing:2px;line-height:48px;display:block;
  color:var(--black);white-space:nowrap;
}
.main-nav > li.is-active > a{color:var(--cyan);}
.main-nav > li > a .caret{display:none;}

.submenu{
  position:absolute;top:48px;left:-20px;width:226px;background:var(--white);
  box-shadow:0 2px 14px rgba(0,0,0,.12);padding:8px 0;margin:0;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.main-nav > li:hover .submenu,.main-nav > li:focus-within .submenu{
  opacity:1;visibility:visible;transform:translateY(0);
}
.submenu li{list-style:none;}
.submenu a{display:block;font-size:14px;line-height:20px;padding:9px 20px;color:var(--black);}
.submenu a:hover{color:var(--cyan);background:var(--tint);}

.lang{display:flex;align-items:center;gap:0;flex:0 0 auto;}
.lang a{font-size:14px;line-height:1;padding:0 9px;border-left:1px solid var(--line);color:var(--gray);}
.lang a:first-child{border-left:0;}
.lang a.is-active{color:var(--black);}

.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer;}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--black);margin:4px 0;}

/* ---------- hero ---------- */
.hero{
  margin-top:var(--header-h);height:780px;margin-bottom:60px;
  position:relative;color:var(--white);overflow:hidden;
  background:#0b1417;
  display:flex;align-items:flex-end;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 78% 18%,rgba(0,190,190,.34) 0%,rgba(0,190,190,0) 58%),
    linear-gradient(196deg,#123037 0%,#0c1c21 46%,#07100f 100%);
}
/* Skyline standing in for NIO's full-bleed vehicle photograph. Swap the
   .hero background for a real property photo when one is on file. */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:52%;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 2px,rgba(255,255,255,0) 2px 78px),
    linear-gradient(0deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(0deg,#000 40%,transparent 100%);
}
.hero .container{position:relative;z-index:2;padding-bottom:88px;}
.hero .eyebrow{color:rgba(255,255,255,.72);}
.hero .hero-title{
  font-size:56px;line-height:66px;font-weight:100;margin:14px 0 18px;color:var(--white);
}
.hero .hero-sub{font-size:16px;line-height:30px;color:rgba(255,255,255,.82);max-width:620px;margin:0;}
.hero-stats{
  display:flex;gap:64px;margin-top:40px;flex-wrap:wrap;
}
.hero-stats .k{font-size:34px;line-height:40px;font-weight:100;color:var(--white);}
.hero-stats .l{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.62);}

/* interior pages get a short band instead of the 780px hero */
.page-head{margin-top:var(--header-h);padding:66px 0 10px;}
.page-head h1{text-align:center;}
.page-head .kicker{text-align:center;margin-top:12px;color:var(--gray);font-size:14px;letter-spacing:2px;text-transform:uppercase;}

/* ---------- sections ---------- */
.section{padding:0 0 60px;}
.section-title{margin-bottom:15px;}
.section .body{max-width:1000px;margin:0 auto;}
.divider{height:1px;background:var(--line);border:0;margin:0 0 60px;}

/* ---------- button ---------- */
.button{
  display:inline-block;background:var(--cyan);color:var(--white);
  border:2px solid var(--cyan);border-radius:23px;
  padding:10px 40px;font-size:16px;line-height:24px;
  letter-spacing:2px;text-transform:uppercase;cursor:pointer;
  transition:background .18s ease,color .18s ease;
}
.button:hover{background:var(--white);color:var(--cyan);}
.button.ghost{background:transparent;color:var(--cyan);}
.button.ghost:hover{background:var(--cyan);color:var(--white);}
.button-row{margin-top:30px;text-align:center;}

/* ---------- quote / metric widget (NIO "Stock Information") ---------- */
.ticker-tabs{display:flex;justify-content:center;gap:0;margin-bottom:26px;}
.ticker-tabs button{
  background:none;border:0;border-bottom:2px solid transparent;
  font-family:var(--font);font-size:14px;letter-spacing:2px;text-transform:uppercase;
  color:var(--gray);padding:8px 26px;cursor:pointer;
}
.ticker-tabs button.is-active{color:var(--black);border-bottom-color:var(--cyan);}
.quote-wrap{text-align:center;margin-bottom:30px;}
.quote-symbol{font-size:14px;letter-spacing:2px;text-transform:uppercase;margin-bottom:22px;}
.quote-grid{display:flex;justify-content:center;gap:0;flex-wrap:wrap;}
.quote-cell{padding:0 56px;border-left:1px solid var(--line);min-width:240px;}
.quote-cell:first-child{border-left:0;}
.quote-cell .l{font-size:14px;line-height:24px;color:var(--gray);}
.quote-cell .v{font-size:36px;line-height:48px;font-weight:100;}
.quote-cell .v.up{color:var(--green);}
.quote-cell .v.down{color:var(--red);}
.quote-asof{font-size:14px;line-height:24px;margin-top:20px;}
.quote-note{font-size:14px;line-height:24px;color:var(--gray);}

/* ---------- news / events lists ---------- */
.list{max-width:1000px;margin:0 auto;padding:0;list-style:none;}
.list li{border-bottom:1px solid var(--line);padding:22px 0;}
.list li:first-child{border-top:1px solid var(--line);}
.list .date{font-size:14px;line-height:24px;color:var(--gray);letter-spacing:1px;}
.list .title{font-size:16px;line-height:26px;margin-top:4px;}
.list .title a:hover{color:var(--cyan);}
.list.two-col li{display:flex;gap:40px;align-items:baseline;text-align:left;}
.list.two-col .date{flex:0 0 190px;}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;max-width:1000px;margin:0 auto 24px;}
table.fin{width:100%;border-collapse:collapse;font-size:15px;line-height:24px;}
table.fin caption{
  caption-side:top;text-align:left;font-size:14px;letter-spacing:2px;
  text-transform:uppercase;color:var(--gray);padding-bottom:12px;
}
table.fin th,table.fin td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:right;}
table.fin th:first-child,table.fin td:first-child{text-align:left;}
table.fin thead th{
  font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--gray);
  font-weight:400;border-bottom:1px solid var(--black);white-space:nowrap;
}
table.fin tbody tr:hover{background:var(--tint);}
table.fin tr.section td{
  font-weight:700;background:var(--white);border-bottom:1px solid var(--black);
  text-transform:uppercase;font-size:13px;letter-spacing:1px;padding-top:26px;
}
table.fin tr.total td{font-weight:700;border-top:1px solid var(--black);border-bottom:2px solid var(--black);}
table.fin tr.subtotal td{font-weight:700;}
table.fin td.indent{padding-left:34px;}
.table-note{max-width:1000px;margin:0 auto;font-size:14px;line-height:24px;color:var(--gray);}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;max-width:1000px;margin:0 auto;}
.cards.two{grid-template-columns:repeat(2,1fr);}
.card{border:1px solid var(--line);padding:30px;text-align:left;}
.card h3{font-size:20px;line-height:28px;font-weight:400;margin-bottom:10px;}
.card .k{font-size:32px;line-height:40px;font-weight:100;}
.card .l{font-size:14px;line-height:24px;color:var(--gray);}
.card p{font-size:15px;line-height:26px;color:#333;margin:0;}

/* ---------- shareholder tools ---------- */
.tools{display:flex;justify-content:center;gap:70px;flex-wrap:wrap;padding:0;margin:0;list-style:none;}
.tools li{text-align:center;}
.tools .ico{
  width:44px;height:44px;margin:0 auto 10px;border:1px solid var(--black);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
.tools a:hover .ico{border-color:var(--cyan);color:var(--cyan);}
.tools .lbl{font-size:14px;letter-spacing:2px;text-transform:uppercase;}

/* ---------- forms ---------- */
.form{max-width:620px;margin:0 auto;text-align:left;}
.form label{display:block;font-size:14px;letter-spacing:1px;text-transform:uppercase;color:var(--gray);margin:18px 0 6px;}
.form input,.form select,.form textarea{
  width:100%;font-family:var(--font);font-size:16px;line-height:28px;
  padding:10px 14px;border:1px solid var(--line);background:var(--white);color:var(--black);
}
.form input:focus,.form textarea:focus,.form select:focus{outline:0;border-color:var(--cyan);}
.form .button{margin-top:26px;}

/* ---------- faq ---------- */
.faq{max-width:1000px;margin:0 auto;text-align:left;}
.faq details{border-bottom:1px solid var(--line);padding:20px 0;}
.faq summary{font-size:16px;line-height:26px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--cyan);font-size:22px;line-height:26px;}
.faq details[open] summary::after{content:"\2212";}
.faq p{margin:14px 0 0;color:#333;font-size:15px;line-height:27px;}

/* ---------- notice ---------- */
.notice{
  max-width:1000px;margin:0 auto 40px;background:var(--tint);
  border-left:3px solid var(--cyan);padding:20px 26px;text-align:left;
  font-size:14px;line-height:26px;
}

/* ---------- footer ---------- */
.site-footer{background:var(--white);border-top:1px solid var(--line);font-size:14px;}
.site-footer .inner{
  max-width:var(--container);margin:0 auto;padding:20px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.site-footer .left{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.site-footer .copy{font-weight:700;}
.site-footer .fmenu{display:flex;gap:22px;padding:0;margin:0;list-style:none;}
.site-footer .fmenu a{letter-spacing:2px;text-transform:uppercase;font-size:13px;}
.site-footer .right{display:flex;gap:18px;}
.site-footer .right a{letter-spacing:2px;text-transform:uppercase;font-size:13px;color:var(--gray);}
.site-footer .right a:hover{color:var(--cyan);}
.disclaimer{
  max-width:var(--container);margin:0 auto;padding:0 20px 30px;
  font-size:12px;line-height:22px;color:var(--gray);
}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .main-nav{gap:20px;}
  .quote-cell{padding:0 30px;min-width:190px;}
  .hero-stats{gap:40px;}
}
@media (max-width:860px){
  .nav-toggle{display:block;order:3;}
  .main-nav{
    display:none;position:absolute;top:var(--header-h);left:0;right:0;
    background:var(--white);flex-direction:column;align-items:stretch;gap:0;
    padding:10px 20px 20px;box-shadow:0 12px 24px rgba(0,0,0,.10);
  }
  .main-nav.open{display:flex;}
  .main-nav > li > a{line-height:44px;border-bottom:1px solid var(--line);}
  .submenu{
    position:static;width:auto;opacity:1;visibility:visible;transform:none;
    box-shadow:none;padding:0 0 10px 14px;
  }
  .hero{height:560px;}
  .hero .hero-title{font-size:38px;line-height:48px;}
  h1{font-size:34px;line-height:44px;}
  h2{font-size:28px;line-height:38px;}
  .quote-grid{flex-direction:column;gap:26px;}
  .quote-cell{border-left:0;padding:0;}
  .cards,.cards.two{grid-template-columns:1fr;}
  .list.two-col li{flex-direction:column;gap:2px;}
  .tools{gap:36px;}
}