*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Source Sans 3","Trebuchet MS",sans-serif;color:#2c2c2c;background:#fff;-webkit-font-smoothing:antialiased;font-size:18px;line-height:27px}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,video{display:block;max-width:100%}
.ul{text-decoration:underline}
.nowrap{white-space:nowrap}

/* ---------- global nav ---------- */
.gnav{position:sticky;top:0;z-index:50;background:#fff}
.gnav-bar{height:64px;background:#f8f8f8;border-bottom:1px solid #e1e1e1;display:flex;align-items:center;padding:0 45px 0 45px}
.gnav-burger{display:none}
.gnav-logo{display:flex;align-items:center;gap:7px;font-weight:800;color:#3b63fb;margin-right:12px}
.gnav-logo svg{display:block}
.gnav-logo span{font-size:16px;font-weight:800;letter-spacing:.3px}
.gnav-item{font-size:14px;line-height:20px;color:#2c2c2c;padding:0 20px;height:64px;display:flex;align-items:center;gap:6px;position:relative;white-space:nowrap}
.gnav-cd{border-left:1px solid #e1e1e1;margin-left:3px}
.gnav-sub{display:flex;border-left:1px solid #e1e1e1;margin-left:0}
.gnav-item.active{font-weight:700}
.gnav-item.active:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#2c2c2c}
.gnav-right{margin-left:auto;display:flex;align-items:center;gap:20px}
.gnav-apps{display:flex;align-items:center;justify-content:center;width:28px;height:28px}
.gnav-signin{font-size:14px;font-weight:600;line-height:20px;border:1px solid #909090;border-radius:16px;padding:5px 15px;background:#fff}
.crumbs{height:33px;border-bottom:1px solid #eaeaea;display:flex;align-items:center;padding:0 48px;font-size:12px;line-height:16px;color:#4b4b4b;background:#fff;white-space:nowrap;overflow:hidden}
.crumbs i{font-style:normal;margin:0 13px}
.crumbs span{color:#2c2c2c}

/* ---------- buttons ---------- */
.btns{display:flex;gap:24px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;height:49px;padding:0 24px;border-radius:25px;font-size:19px;font-weight:700;line-height:24px;border:2px solid transparent;white-space:nowrap;transition:background .15s,border-color .15s}
.btn.blue{background:#3b63fb;color:#fff;border-color:#3b63fb;min-width:121px}
.btn.blue:hover{background:#274dea;border-color:#274dea}
.btn.outline{border-color:#2c2c2c;color:#2c2c2c;min-width:123px}
.btn.outline:hover{background:#2c2c2c;color:#fff}
.btn.outline-w{border-color:#fff;color:#fff}
.btn.outline-w:hover{background:#fff;color:#2c2c2c}
.btn.small{height:32px;font-size:14px;padding:0 14px;border-width:1px;border-radius:16px;min-width:0}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:calc(50% - 7px) 1fr;min-height:700px;height:700px;overflow:hidden}
.hero-text{padding:97px 0 0 max(24px,calc((var(--vw,100vw) - 1200px)/2));max-width:none;padding-right:92px}
.hero-text>*{max-width:500px}
.hero-brand{display:flex;align-items:center;gap:8px;font-size:22px;font-weight:700;line-height:33px}
.hero-brand+h1{margin-top:19px}
.hero h1{font-size:44px;line-height:55px;font-weight:800;margin-bottom:16px}
.hero .lead{font-size:22px;line-height:33px;margin-bottom:15px}
.hero .lead s{margin:0 2px}
.hero .btns{gap:24px;margin-bottom:20px}
.browse{font-size:22px;line-height:33px;margin-top:20px}
.browse a{text-decoration:underline;font-weight:700}
.hero-media{background:#0d1230;height:700px}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover}

/* ---------- story sections ---------- */
.story{height:700px}
.story-in{max-width:1200px;margin:0 auto;height:100%;display:grid;grid-template-columns:500px 1fr;gap:100px;padding-top:100px}
.story.rev .story-in{grid-template-columns:1fr 500px}
.story.rev .story-media{order:2}
.story-media{position:relative;width:500px;height:500px;background:#fff;overflow:hidden}
.story-media video,.story-media img{width:100%;height:100%;object-fit:cover}
.pp{position:absolute;left:12px;bottom:12px;width:40px;height:40px;border-radius:50%;background:#222}
.pp:before{content:"";position:absolute;left:14px;top:12px;width:4px;height:16px;background:#fff;box-shadow:8px 0 0 #fff}
.pp.play:before{width:0;height:0;box-shadow:none;background:none;border-left:12px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;left:16px;top:12px}
.story-text{width:600px;padding-top:123px}
.story-text .eyebrow{font-size:18px;line-height:27px;margin-bottom:4px}
.story-text h2{font-size:36px;line-height:45px;font-weight:800;margin-bottom:12px}
.story-text p{font-size:18px;line-height:27px}
.story.dark{color:#fff}
.story.dark .pp{background:#222}

/* ---------- features ---------- */
.features{padding:100px 0 100px;max-width:1200px;margin:0 auto;text-align:left;height:1153px;position:relative}
.features h2{font-size:36px;line-height:45px;font-weight:800;text-align:center;margin-bottom:56px}
.fgrid{display:grid;grid-template-columns:repeat(3,378px);column-gap:33px;row-gap:55px;justify-content:space-between;margin-bottom:48px}
.fgrid img{width:378px;height:213px;border-radius:8px;object-fit:cover;margin-bottom:24px}
.fgrid h3{font-size:24px;line-height:30px;font-weight:800;margin-bottom:12px}
.fgrid p{font-size:16px;line-height:24px}
.features>.btn{display:flex;width:max-content;margin:0 auto;position:absolute;left:50%;transform:translateX(-50%);bottom:56px}

/* ---------- plans ---------- */
.plans{height:1332px;background:#ff9a00;text-align:center;padding-top:123px;position:relative}
.plans h2{font-size:36px;line-height:45px;font-weight:800;margin-bottom:20px}
.plans-sub{font-size:18px;line-height:27px;max-width:700px;margin:0 auto 32px}
.tabs{display:inline-flex;background:#eaeaea;border-radius:12px;padding:4px;margin-bottom:32px}
.tabs button{height:40px;padding:0 24px;font-size:14px;font-weight:700;border-radius:8px;color:#2c2c2c}
.tabs button.on{background:#1b1340;color:#fff}
.pcards{display:grid;grid-template-columns:484px 484px;gap:32px;justify-content:center;text-align:left;margin-bottom:48px}
.pcard{background:#fff;border-radius:16px;padding:32px;box-shadow:0 1px 4px rgba(0,0,0,.16);display:flex;flex-direction:column}
.pcard-head{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.pcard-head h3{font-size:24px;line-height:30px;font-weight:800}
.badge{background:#e8f5ee;color:#0d5a30;border:1px solid #0d5a30;font-size:12px;font-weight:700;line-height:16px;border-radius:4px;padding:2px 8px;margin-left:4px}
.price{font-size:14px;line-height:20px}
.price small{display:block;font-size:12px;line-height:16px;color:#4b4b4b;margin-top:6px}
.price s{display:block;font-size:14px;font-weight:700;color:#4b4b4b}
.price b{font-size:24px;line-height:30px;font-weight:800}
.price em{font-style:normal;font-size:12px;margin-left:4px}
.annual{font-size:14px;line-height:20px;margin:8px 0 20px}
.disc{font-size:14px;font-weight:700;margin-bottom:12px}
.pcard ul{list-style:none;margin-bottom:16px}
.pcard li{font-size:14px;line-height:21px;padding-left:24px;position:relative;margin-bottom:10px}
.pcard li:before{content:"✓";position:absolute;left:0;font-size:14px}
.fine{font-size:12px;line-height:18px;color:#4b4b4b;margin-bottom:12px}
.pcard .btns{margin-top:auto;padding-top:16px;gap:12px}
.pcard .btn{height:40px;font-size:16px}
.plans>.btn.small{margin:0 auto}

/* ---------- faq ---------- */
.faq{padding:104px 0 100px;height:908px}
.faq h2{font-size:36px;line-height:45px;font-weight:800;text-align:center;margin-bottom:40px}
.faq-list{max-width:800px;margin:0 auto;border-top:1px solid #d5d5d5}
.faq details{border-bottom:1px solid #d5d5d5}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;font-size:18px;line-height:27px;font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"";flex:none;width:10px;height:10px;border-right:2px solid #2c2c2c;border-bottom:2px solid #2c2c2c;transform:rotate(45deg);margin:-4px 6px 0 0;transition:transform .2s}
.faq details[open] summary:after{transform:rotate(-135deg);margin-top:6px}
.faq details p{padding:0 40px 24px 0;font-size:16px;line-height:24px}

/* ---------- cta ---------- */
.cta{background:#222;color:#fff;height:426px;text-align:center;padding-top:60px}
.cta-in{max-width:800px;margin:0 auto}
.cta-brand{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:18px;margin-bottom:8px}
.cta h2{font-size:36px;line-height:45px;font-weight:800;margin-bottom:8px}
.cta .lead{font-size:18px;line-height:27px;margin-bottom:12px}
.cta-price{font-size:14px;line-height:21px;margin-bottom:20px;color:#e6e6e6}
.cta .btns{justify-content:center}

/* ---------- beta ---------- */
.beta{height:441px;padding-top:100px}
.beta-in{max-width:1200px;margin:0 auto}
.beta h2{font-size:36px;line-height:45px;font-weight:800;margin-bottom:16px}
.beta ol{margin:0 0 24px 22px;font-size:18px;line-height:27px}
.beta li{padding-left:4px}

/* ---------- footer ---------- */
.gfoot{background:#f8f8f8;border-top:1px solid #e1e1e1;min-height:539px;font-size:12px;line-height:18px;color:#4b4b4b}
.gfoot-in{max-width:1200px;margin:0 auto;padding:64px 0 40px;min-height:539px;display:flex;flex-direction:column}
.gcols{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-bottom:auto;padding-bottom:48px}
.gcols h4{font-size:14px;line-height:20px;font-weight:700;color:#2c2c2c;margin-bottom:12px}
.gcols a{display:block;font-size:14px;line-height:20px;padding:6px 0}
.gcols a:hover,.gl a:hover{text-decoration:underline}
.gbottom{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;border-top:1px solid #e1e1e1;padding-top:24px}
.gl{display:flex;gap:16px;flex-wrap:wrap}

/* ---------- tablet ---------- */
@media (max-width:1200px){
  .hero-text{padding-left:24px}
  .story-in{padding-left:24px;padding-right:24px;gap:48px;grid-template-columns:420px 1fr}
  .story.rev .story-in{grid-template-columns:1fr 420px}
  .story-media{width:420px;height:420px}
  .story-text{width:auto}
  .features,.beta-in{padding-left:24px;padding-right:24px}
  .fgrid{grid-template-columns:repeat(3,1fr);gap:55px 24px}
  .fgrid img{width:100%;height:auto;aspect-ratio:378/213}
  .pcards{grid-template-columns:1fr 1fr;padding:0 24px}
  .faq-list{margin:0 24px}
  .gfoot-in{padding-left:24px;padding-right:24px}
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;height:auto}
  .hero-text{padding:48px 24px 32px}
  .hero-text>*{max-width:none}
  .hero-media{height:420px}
  .story{height:auto;padding:0}
  .story-in,.story.rev .story-in{grid-template-columns:1fr;padding:48px 24px;gap:32px;height:auto}
  .story.rev .story-media{order:0}
  .story-media{width:100%;height:auto;aspect-ratio:1/1;max-width:500px}
  .story-text{padding-top:0}
  .features{height:auto;padding:64px 24px 120px}
  .fgrid{grid-template-columns:1fr 1fr}
  .plans{height:auto;padding:64px 0 80px}
  .pcards{grid-template-columns:1fr}
  .gcols{grid-template-columns:1fr 1fr;margin-bottom:48px}
}
/* ---------- mobile ---------- */
@media (max-width:600px){
  body{font-size:16px;line-height:24px}
  .gnav-bar{padding:0 16px;height:48px}
  .gnav-burger{display:block;margin-right:14px}
  .gnav-logo{margin-right:0}
  .gnav-cd,.gnav-sub{display:none}
  .gnav-item{height:48px}
  .gnav-signin{font-size:13px;padding:3px 12px}
  .gnav-apps{display:none}
  .crumbs{padding:0 16px;height:36px}
  .hero-text{padding:32px 16px 24px}
  .hero h1{font-size:32px;line-height:40px}
  .hero .lead,.browse{font-size:18px;line-height:27px}
  .btn{font-size:17px}
  .hero .btns{gap:12px}
  .hero-media{height:380px}
  .story-in,.story.rev .story-in{padding:40px 16px 48px}
  .story-text h2,.features h2,.plans h2,.faq h2,.cta h2,.beta h2{font-size:28px;line-height:35px}
  .story-text p{font-size:16px;line-height:24px}
  .features{padding:48px 16px 112px}
  .features h2{margin-bottom:32px}
  .fgrid{grid-template-columns:1fr;gap:40px}
  .plans{padding:48px 0 64px}
  .plans h2,.plans-sub{padding:0 16px}
  .tabs{max-width:calc(100% - 32px);overflow-x:auto}
  .tabs button{padding:0 14px;white-space:nowrap}
  .pcards{padding:0 16px}
  .pcard{padding:24px}
  .faq{height:auto;padding:56px 0 64px}
  .faq-list{margin:0 16px}
  .faq summary{font-size:16px;line-height:24px;padding:18px 0}
  .cta{height:auto;padding:56px 16px}
  .cta .btns{gap:12px}
  .beta{height:auto;padding:56px 0}
  .beta-in{padding:0 16px}
  .gcols{grid-template-columns:1fr 1fr;margin-bottom:32px}
  .gfoot-in{padding:40px 16px 32px}
}
.gregion{display:flex;align-items:center;gap:8px;font-size:14px;color:#2c2c2c;margin-bottom:24px}.gregion span{color:#4b4b4b}.gregion a{text-decoration:underline}.gbottom{font-size:12px}.gcopy{order:2;flex:1 0 100%;margin-top:4px}