:root{ --hero:#0a5bd3; --deep:#062a63; --ink:#1d2530; --dim:#5c6a7d; }
body{ font-family:'Poppins',-apple-system,BlinkMacSystemFont,system-ui,sans-serif; color:var(--ink); }
h1,h2,h3,h4,h5{ font-family:'Poppins',sans-serif; }
.hero-text h1, .hero-text h2, .section-title h2, .step h4, .safe h4, .shotcard h5,
.single_about h4, .faq_desc .question, .faq_desc .ans,
.download_icon h2{ text-transform:none !important; }
@media (min-width:992px){ .single_about h4{ min-height:52px; } }
.single_about h4{ margin-bottom:12px; }
.single_about p{ font-size:14.5px; line-height:1.7; }
.home_bg{ background:linear-gradient(140deg,#04143a 0%,#062a63 45%,#0a5bd3 100%) !important; }
.home_bg:before{ background:transparent !important; }
.hero-text h1, .hero-text h2{ font-size:40px; line-height:1.15; font-weight:700; letter-spacing:-.5px; margin:0; color:#fff; }
.hero-text p{ font-size:18px; opacity:.86; max-width:32em; }
.hero-lede{ margin-bottom:26px !important; }
.hero-text .hero-tag{ font-family:'Poppins',sans-serif; font-size:14px; font-weight:300; letter-spacing:.06em;
  text-transform:uppercase; color:#fff; opacity:.82; margin:12px 0 0 !important; max-width:none !important; line-height:1.3;
  white-space:nowrap; }
@media (max-width:1199px){ .hero-text .hero-tag{ font-size:14px; } }
@media (max-width:767px){ .hero-text .hero-tag{ font-size:13px; letter-spacing:.06em; white-space:normal; } }
.hero-head{ display:flex; align-items:center; gap:28px; margin-bottom:22px; }
.hero-logo{ width:150px; height:auto; flex:0 0 150px; margin:0; filter:drop-shadow(0 10px 24px rgba(0,0,0,.35)); }
img[width][height]{ height:auto; }
/* The picture runs past its column on the right: the section clips it, and the phone in it is what should be large. */
.hero-text-img img{ max-width:none !important; width:114%; margin-left:-3%; height:auto; filter:drop-shadow(0 24px 40px rgba(0,0,0,.45)); }
/* Only to the right, never into the words beside it. */
@media (min-width:1400px){ .hero-text-img img{ width:118%; margin-left:0; } }
.home_bg{ overflow:hidden; }
@media (max-width:991px){ .hero-text-img img{ width:100%; margin-left:0; max-width:100%; } }
#globe{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;
  opacity:.95; transition:opacity 1.8s ease; }
#globe.loading{ opacity:0; }
/* Drawn at double scale from its top-left corner, so the sphere's centre sits
   at left + width of the page: 73% across, behind the picture. */
#globe-map{ position:absolute; top:0; left:-12%; width:85%; height:50%;
  transform:scale(2); transform-origin:0 0; filter:saturate(.85) brightness(.95);
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 7%);
          mask-image:linear-gradient(to right, transparent 0, #000 7%); }
#globe-map .mapboxgl-ctrl, #globe-map .mapboxgl-ctrl-logo, #globe-map .mapboxgl-ctrl-attrib{ display:none !important; }
@media (max-width:991px){
  #globe{ opacity:.8;
    -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 66%, #000 40%, rgba(0,0,0,.5) 62%, transparent 82%);
            mask-image:radial-gradient(ellipse 70% 60% at 50% 66%, #000 40%, rgba(0,0,0,.5) 62%, transparent 82%); }
}
.home_bg .container{ position:relative; z-index:2; }
.home_bg{ height:auto !important; min-height:720px; padding:150px 0 80px; }
.hero-text h1, .hero-text h2{ padding-top:0 !important; }
.hero-text{ padding-bottom:10px; }
@media (min-width:992px){
  .home_bg .row{ display:flex; align-items:center; }
  .home_bg .row > [class*="col-"]{ float:none; }
}
@media (min-width:992px){
  .hero-text{ padding-right:24px; }
}
@media (min-width:1600px){
  .home_bg .container{ width:1360px; }
  .hero-text h1, .hero-text h2{ font-size:42px; }
}
/* Three lines, as written — never a fourth with "to." alone on it. The
   column beside the logo is about 500px wide on a big screen, and 46px
   Poppins did not fit "You don't have to." on one line. */
@media (min-width:992px){ .hero-text h1{ white-space:nowrap; } }
@media (min-width:992px) and (max-width:1199px){
  .hero-text h1, .hero-text h2{ font-size:33px; }
  .hero-logo{ width:110px; flex:0 0 110px; }
  .hero-head{ gap:18px; }
}
@media (max-width:991px){
  .home_bg{ min-height:0; padding:120px 0 50px; text-align:center; }
  .hero-head{ flex-direction:column; gap:18px; margin-bottom:20px; }
  .hero-logo{ width:120px; flex-basis:auto; margin-left:auto; margin-right:auto; }
  .hero-text p{ margin-left:auto; margin-right:auto; }
  .hero-text-img{ padding-top:0 !important; margin-top:28px; }
  .hero-text-img img{ max-width:92%; }
  .hero-text{ padding-top:0 !important; }
}
@media (min-width:992px){ .hero-text-img{ padding-top:0 !important; } }
.hero-note{ display:block; margin-top:18px; font-size:13px;
  color:rgba(255,255,255,.72) !important; }
.app-btn{ border-radius:40px !important; }
.section-title h2{ font-weight:700; letter-spacing:-.3px; }
.section-title p{ color:var(--dim); max-width:42em; margin:0 auto; }
.single_about i{ color:var(--hero); }
.single_about h4{ font-weight:600; }
.ft8-ill{ width:96px; height:96px; margin:0 auto 14px; display:block; }
.shotgrid{ display:flex; flex-wrap:wrap; gap:34px; justify-content:center; }
.shotcard{ width:246px; }
.shotcard img{ width:100%; border-radius:22px; display:block;
  border:6px solid #0d1117; box-shadow:0 18px 44px rgba(6,42,99,.28); }
.shotcard h5{ margin:18px 0 4px; font-weight:600; font-size:15px; }
.shotcard p{ color:var(--dim); font-size:13px; line-height:1.55; margin:0; }
.steps{ counter-reset:step; max-width:840px; margin:0 auto; }
.step{ position:relative; padding:0 0 30px 74px; }
.step:before{ counter-increment:step; content:counter(step);
  position:absolute; left:0; top:-4px; width:48px; height:48px; border-radius:50%;
  background:var(--hero); color:#fff; font-weight:700; font-size:19px;
  display:flex; align-items:center; justify-content:center; }
.step:after{ content:''; position:absolute; left:23px; top:52px; bottom:6px; width:2px;
  background:linear-gradient(#dbe6f5,rgba(219,230,245,0)); }
.step:last-child:after{ display:none; }
.step h4{ margin:6px 0 8px; font-weight:600; font-size:19px; }
.step p{ color:var(--dim); margin:0 0 8px; line-height:1.7; }
.step code{ background:#eef3fb; color:var(--deep); padding:2px 7px; border-radius:5px;
  font-size:13px; }
.safety{ background:#f5f8fd; }
.safe{ background:#fff; border:1px solid #e3ebf6; border-left:4px solid var(--hero);
  border-radius:10px; padding:24px 26px; height:100%; margin-bottom:30px; }
.safe h4{ font-weight:600; font-size:17px; margin:0 0 10px; }
.safe p{ color:var(--dim); margin:0; font-size:14.5px; line-height:1.7; }
.safe i{ color:var(--hero); margin-right:9px; }
.download{ background:linear-gradient(140deg,#062a63,#0a5bd3) !important; }
.dl-btn{ display:inline-block; margin:8px 8px 0; padding:15px 34px; border-radius:40px;
  background:#fff; color:var(--deep) !important; font-weight:600; font-size:15px; }
.dl-btn.ghost{ background:transparent; border:2px solid rgba(255,255,255,.55); color:#fff !important; }
.download_icon p.dl-note{ display:block; width:auto; margin:22px auto 0; font-size:13px; opacity:.8; border:0; }
.download_icon p.dl-sister{ margin-top:12px; max-width:560px; opacity:.9; line-height:1.55; }
.download_icon p.dl-sister a{ color:inherit; text-decoration:underline; font-weight:600; }
.faq_desc .question{ font-weight:600; }
section.section-padding,
section.feature-one,
section.template_faq{ padding:96px 0 !important; }
.section-title{ margin-bottom:52px !important; }
.section-title p{ margin-top:14px; }
#what{ background:#fff; }
#screenshots{ background:#f5f8fd !important; }
.feature-one{ background:#fff; }
#how{ background:#f5f8fd !important; }
#safety{ background:#fff !important; }
#faq{ background:#f5f8fd !important; }
.single_about{ background:transparent !important; display:block !important;
  padding:0 14px !important; box-shadow:none !important; }
.faq_desc{ padding:26px 28px !important; margin-bottom:24px !important;
  display:block !important; border:1px solid #e3ebf6; border-radius:10px;
  box-shadow:none !important; }
.faq_desc .question{ margin-bottom:10px; font-size:15.5px; }
.faq_desc .ans{ color:var(--dim); font-size:14.5px; line-height:1.7; margin:0; }
/* The template flipped a card purple on hover and left the answer in grey
   on purple: unreadable at the moment somebody is reading it. No flip. A
   card that is being read simply lifts a little. */
.faq_desc:before{ display:none !important; }
.faq_desc:hover, .faq_desc:focus, .faq_desc:active{ color:inherit; box-shadow:0 10px 34px rgba(4,20,58,.14) !important; }
.faq_desc:hover .question, .faq_desc:hover span{ color:inherit; }
.faq_desc:hover .ans span, .faq_desc .ans span{ color:#4843d2; }
.faq_desc{ transition:box-shadow .2s ease !important; }
#what .row, #safety .row, #faq .row{ display:flex; flex-wrap:wrap; }
#what .row > [class*="col-"],
#safety .row > [class*="col-"],
#faq .row > [class*="col-"]{ display:flex; float:none; }
#what .single_about, #safety .safe, #faq .faq_desc{ width:100%; }
.feature-one p{ margin-bottom:18px; line-height:1.75; }
.feature-one p:last-child{ margin-bottom:0; }
.feature-one .section-title{ margin-bottom:28px !important; }
.feature-one img{ max-width:340px !important; }
.feature-one .row{ display:flex; flex-wrap:wrap; align-items:center; }
.feature-one .row > [class*="col-"]{ float:none; }
@media (max-width:991px){
  .feature-one .row{ display:block; }
  .feature-one img{ margin-top:34px; max-width:240px !important; }
}
@media (max-width:767px){
  section.section-padding, section.feature-one, section.template_faq{ padding:60px 0 !important; }
  .section-title{ margin-bottom:36px !important; }
  .single_about{ margin-bottom:46px; }
  .single_about:last-child{ margin-bottom:0; }
  .ft8-ill{ width:84px; height:84px; }
}
section[id]{ scroll-margin-top:92px; }
@media (max-width:767px){
  .hero-text h1, .hero-text h2{ font-size:31px; }
  .hero-logo{ width:100px; }
  .step{ padding-left:60px; }
  .step:before{ width:40px; height:40px; font-size:16px; }
  .step:after{ left:19px; top:44px; }
}
.engines{display:flex;flex-wrap:wrap}
.engines .engine{background:#f7f9fc;border:1px solid #e4ebf3;border-radius:10px;padding:24px 22px;height:100%}
.engines .col-md-4{display:flex;margin-bottom:24px}
.engines h4{font-size:19px;margin:0 0 10px;color:#1b2b41}
.engines p{color:#5c6a7d;line-height:1.75;margin:0;font-size:15px}
.engines .tick{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:#1a9e5c;margin-top:4px}
.engines .tick.soon{color:#b07d1a}
@media (max-width:767px){.engines .col-md-4{display:block}}

/* ── not screen sharing ──────────────────────────────────────────────── */
#notss{ background:#fff; }
.cmp{ border-radius:14px; padding:26px 28px; height:100%; }
.cmp.them{ background:#f3f5f9; border:1px solid #e2e9f1; }
.cmp.us{ background:linear-gradient(160deg,#062a63 0%,#0a5bd3 100%); color:#fff; box-shadow:0 18px 40px rgba(4,20,58,.18); }
.cmp h4{ font-family:'Poppins',sans-serif; font-size:18px; margin:0 0 14px; }
.cmp.them h4{ color:#5c6a7d; }
/* The site's heading colour is dark; on the blue card the title must be white, and said with !important because the global h4 rule outranks this one. */
.cmp.us h4{ color:#fff !important; }
.cmp ul{ margin:0; padding-left:20px; line-height:1.65; font-size:15px; }
.cmp li{ margin:0 0 8px; }
.cmp.them li{ color:#5c6a7d; }
.cmp.us li{ color:#eaf1fc; }
#notss .row{ display:flex; flex-wrap:wrap; }
#notss .row > [class*="col-"]{ float:none; display:flex; margin-bottom:22px; }
#notss .row > [class*="col-"] > .cmp{ width:100%; }
.cmp-foot{ max-width:760px; margin:8px auto 0; color:#42536b; font-size:16px; line-height:1.7; }