:root{
  /* Doob palette */
  --primary:#138ac4;
  --tertiary:#09aeb6;
  --pink:#E33FA1;
  --secondary:#FB5343;
  --gradient:linear-gradient(95deg,var(--primary) 0%,var(--tertiary) 100%);
  --gradient-soft:linear-gradient(95deg,rgba(5,157,255,.08) 15%,rgba(101,73,213,.08) 45%,rgba(227,63,161,.08) 75%,rgba(251,83,67,.08) 100%);
  --fontInter: "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* Ink and ground */
  --ink:#0f0f11;
  --body:#65676b;
  --line:#e9ecf2;
  --ground:#ffffff;
  --ground-alt:#f9f9ff;
  --ground-alt1:rgb(19 138 196 / 2%);
  --ground-alt2:rgb(19 138 196 / 5%);
  --ground-alt3:rgb(19 138 196 / 10%);

  /* Doob scale */
  --h1:56px; --h2:46px; --h3:32px; --h4:24px; --h5:18px;
  --b1:18px; --b2:16px;
  --radius-sm:6px; --radius:10px; --radius-lg:16px;
  --shadow:0 10px 50px 0 rgb(124 124 205 / 10%);
  --shadow-lift:0 18px 60px 0 rgb(124 124 205 / 10%);
  --t:.3s cubic-bezier(.23,1,.32,1);
  --wrap:1200px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html, body{height: auto;min-height: 100%;}
body{
  margin:0;background:var(--ground);color:var(--body);
  font-family:var(--fontInter); font-size:var(--b1);line-height:1.7;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5{color:var(--ink);margin:0 0 16px;line-height:1.24;font-weight:700;letter-spacing:-.02em;font-family:var(--fontInter);  text-wrap:balance}
h1{font-size:var(--h1);font-weight:800;letter-spacing:-.03em}
h2{font-size:var(--h2);font-weight:800;letter-spacing:-.03em}
h3{font-size:var(--h3)}
h4{font-size:var(--h4)}
h5{font-size:var(--h5)}
p{margin:0 0 18px; font-size: 16px; font-family:var(--fontInter);line-height: 1.55;}
a{color:var(--primary);text-decoration:none;transition:color var(--t)}
a:hover{color:var(--tertiary);text-decoration: none;}
img{max-width:100%;height:auto;display:block}
ul{margin:0 0 18px;padding-left:0;list-style:none}
strong{color:var(--ink);font-weight:600}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.sec{padding:80px 0}
.sec--alt{background:var(--ground-alt)}
.sec--tight{padding:70px 0}
.mt-1{margin-top: 10px;}
.mt-2{margin-top: 20px;}
.mt-3{margin-top: 30px;}
.mt-4{margin-top: 40px;}
.mt-5{margin-top: 50px;}

/* Gradient text - the Doob signature */
.grad{
  background:var(--gradient);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* Eyebrow */
.eyebrow{
  display:inline-block;font-size:14px;font-weight:600;letter-spacing:.5px;
  text-transform:uppercase;margin-bottom:14px;
  background:var(--gradient);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.head{max-width:800px;margin:0 auto 64px;text-align:center}
.head p{font-size:var(--b1);margin:0}
.head--left{margin-left:0;text-align:left}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:0 20px;height:50px;border-radius:var(--radius);
  font-size:var(--b2);font-weight:600;letter-spacing:.3px;
  border:0;cursor:pointer;transition:transform var(--t),box-shadow var(--t),background var(--t),color var(--t);
  white-space:nowrap;position:relative;overflow:hidden;
}
.btn svg{fill: #fff;}
.btn--primary{background:var(--gradient);color:#fff;background-size:200% auto}
.btn--primary:hover, .btn--primary:focus{color:#fff;background-position:right center;transform:translateY(-3px);box-shadow:0 12px 30px rgba(101,73,213,.32)}
.btn--ghost{background:transparent;color:var(--primary);box-shadow:inset 0 0 0 2px var(--primary)}
.btn--ghost svg{fill: var(--primary);}
.btn--ghost:hover, .btn--ghost:focus{color:var(--primary);transform:translateY(-3px);box-shadow:inset 0 0 0 2px var(--primary)}
.btn--white{background:#fff;color:var(--ink)}
.btn--white:hover, .btn--white:focus{color:var(--ink);transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.btn--sm{height:46px;padding:0 22px;font-size:15px}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}

/* Header */
.oi_header{opacity: 0; height:0; transform: translateY(-100%); top:0;z-index:60;background:rgba(255,255,255,.88);backdrop-filter:blur(14px);transition:0.3s ease}
.oi_header.is-stuck{box-shadow:0 4px 24px rgba(15,15,17,.07);position:sticky;opacity: 1;transform: translateY(0); height: auto;}
.oi_header__in{display:flex;align-items:center;justify-content: space-between; gap:28px;height:60px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:20px;color:var(--ink);letter-spacing:-.02em}
.brand:hover{color:var(--ink)}
.brand__mark{
  width:36px;height:36px;border-radius:10px;background:var(--gradient);
  display:grid;place-items:center;color:#fff;font-size:14px;font-weight:800;letter-spacing:-.02em;
}
.oi_header .nav{display:flex;gap:28px;}
.oi_header .nav a{font-size:var(--b2);font-weight:500;color:var(--ink);position:relative;padding:6px 0}
.oi_header .nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--gradient);transition:width var(--t)}
.oi_header .nav a.active::after,
.oi_header .nav a:hover::after{width:100%}
.oi_header .btn{margin-left:8px}
.burger{display:none;width:24px;height:44px;border:0;background:transparent;cursor:pointer;padding:0}
.burger span{display:block;height:2px;width:22px;margin:5px auto;background:var(--ink);transition:var(--t)}

/* Hero */
.hero{position:relative;padding:80px 0;overflow:hidden;background:var(--ground)}
.hero::before{
  content:"";position:absolute;inset:0;height:100%;z-index:0;pointer-events: none;
  background:
    radial-gradient(48% 55% at 0% 0%,rgba(9, 174, 182,0.3),transparent 100%),
    radial-gradient(42% 52% at 78% 40%,rgba(39, 141, 196, 0.3),transparent 70%);
  filter:blur(6px);
}
.hero__in{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;gap:60px;align-items:center}
.badge{
  display:inline-flex;align-items:center;gap:9px;padding:8px 18px;border-radius:100px;
  background:#fff;box-shadow:var(--shadow);font-size:14px;font-weight:600;color:var(--ink);margin-bottom:24px;
}
.badge__dot{width:8px;height:8px;border-radius:50%;background:var(--gradient)}
.hero h1{margin-bottom:22px;line-height: 1.2;}
.hero__lead{font-size:16px;line-height:1.65;margin-bottom:32px;max-width:560px}
.hero__note{margin:10px 0 0;font-size:15px;color:var(--body)}

/* Browser frame for screenshots */
.frame{border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow);overflow:hidden;border:1px solid var(--line)}
.frame_inner{padding: 15px; background-color: var(--b1);}
.frame__bar{display:flex;align-items:center;gap:7px;padding:13px 16px;background:#fbfcfe;border-bottom:1px solid var(--line)}
.frame__bar i{width:11px;height:11px;border-radius:50%;background:#e2e6ee;display:block}
.frame__bar i:first-child{background:#ff5f57}
.frame__bar i:nth-child(2){background:#febc2e}
.frame__bar i:nth-child(3){background:#28c840}
.frame__url{
  margin-left:10px;flex:1;height:24px;border-radius:100px;background:#eef1f6;
  font-size:11px;color:#6f737a;display:flex;align-items:center;padding:0 12px;
}
.frame img{display:block;width:100%;border-radius: 10px;}

/* Trust strip */
/* .strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--ground-alt)} */
.strip{margin-top: 60px;}
.strip__in{display:grid;grid-template-columns: repeat(5, 1fr);justify-content:center;gap:20px;padding: 20px;background: #fff;border-radius: 20px;border: var(--line) 1px solid;box-shadow: var(--shadow);position: relative;}
.chip{
  display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--ink);line-height: 1.2;
}
.chip__icon{flex:0 0 50px;background-color: var(--ground-alt);display: flex;align-items: center;justify-content: center;height: 50px;width: 50px;border-radius: 10px;border: var(--line) 1px solid}
.chip__icon svg{max-width: 25px;max-height: 25px;}

/* Cards */
.grid{display:grid;gap:20px}
.gx-0{gap:0}
.gx-1{gap:1px}
.gx-3{gap:30px}
.gx-4{gap:50px}
.gx-5{gap:70px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.card{
  background:#fff;border-radius:var(--radius-lg);padding:25px;
  box-shadow:var(--shadow);transition:transform var(--t),box-shadow var(--t);
  position:relative;overflow:hidden;border: var(--ground-alt2) 1px solid;
}
.card::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--gradient);opacity:0;transition:opacity var(--t)}
.card:hover{transform:translateY(-7px);box-shadow:var(--shadow-lift)}
.card:hover::after{opacity:1}
.card h3,.card h4{margin-bottom:12px}
.card p:last-child{margin-bottom:0}
.card--flat{box-shadow:none;border:1px solid var(--line)}
.card--flat:hover{box-shadow:var(--shadow)}
.ico{
  flex:0 0 56px;width:56px;height:56px;border-radius:14px;display:grid;place-items:center;margin-bottom:22px;
  background:var(--gradient-soft);color:var(--primary);
}
.ico svg{width:26px;height:26px}
.text-center .ico{margin-inline: auto;}
.num{
  font-size:15px;font-weight:800;letter-spacing:1px;margin-bottom:16px;display:block;
  background:var(--gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.row-reverse { direction: rtl;}
.row-reverse * { direction: ltr;}
.problem{text-align: center;}
.problem .ico{margin-inline: auto;}
.note{display: flex;background-color: var(--ground-alt2);gap:20px; align-items: center;padding: 15px;border-radius: 10px;margin-top: 30px;border: var(--ground-alt3) 1px solid;}
.note__icon{width:60px; flex: 0 0 60px; height: 60px; display: flex;background-color: var(--ground-alt3);align-items: center;justify-content: center;border-radius: 50%;}
.note__icon svg{width: 25px;fill: var(--primary);}
.note p {margin-bottom: 0;color: var(--ink);}
.note p strong{color: var(--primary);}

.feature_block{display: flex;flex-direction: column;gap:20px}
.feature_block .card{border: var(--line) 1px solid;display: flex;gap:15px;position: relative;}
.feature_block .card .ico{display: flex;gap:15px;align-items: center;justify-content: center;width: 40px;flex: 0 0 40px;height: 40px;border-radius: 50%;}
.feature_block .card .ico svg{max-height: 20px;}
.feature_block .card .card__body h5{margin-bottom:5px;}
.feature_block .card .num{position: absolute;bottom: 0;right: 15px;font-size: 60px;opacity: 0.15;line-height: 1;pointer-events: none;}
.features__options{margin-top: 80px;}
.features__options .card > img{border-radius: 10px;}
.features__options .grid{align-items: center;}
/* Checklist */
.ticks li{position:relative;padding-left:32px;margin-bottom:12px;font-size:var(--b2)}
.ticks li::before {content: "";position: absolute;left: 0;top: 8px;width: 18px;height: 18px;border-radius: 50%;background: var(--ground-alt2);border: var(--ground-alt3) 1px solid}
.ticks li::after { content: ""; position: absolute; left: 10px; top: 7px; width: 7px; height: 14px; border: solid var(--primary); border-width: 0 2px 2px 0; transform: rotate(45deg);}

/* Tabs (Pro explorer) */
.tabs{display:grid;grid-template-columns:400px 1fr;gap:44px;align-items:start}
.tabs__list{display:flex;flex-direction:column;gap:10px}
.tab{
  text-align:left;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;cursor:pointer;transition:var(--t);font-family:inherit;position:relative;overflow: hidden;
}
.tab strong{display:block;font-size:16px;color:var(--ink);font-weight:600}
.tab:hover{border-color:#cfd7e6}
.tab[aria-selected="true"]{box-shadow:var(--shadow-lift)}
.tab[aria-selected="true"] .chip__icon{background-color: var(--ground-alt3);}
.tab[aria-selected="true"]::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:3px;background:var(--gradient);
}
.tab[aria-selected="true"] strong{background:var(--gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.tab .chip__text p{margin-bottom: 0;font-weight: 400;color: var(--body);}
.tab[aria-selected="true"] .chip__text p{color: var(--ink);}
.panel[hidden]{display:none}
.panel{margin: 0;border: 0;box-shadow: none;}
.panel__body{margin-top:24px}
.panel__body h4{margin-bottom:10px}


.limited{text-align: center;gap:40px}
.limited__inner h4{font-size: 22px;position: relative;}
.cloud_outer{position: relative;z-index: 0;}
.cloud {position: absolute;inset: 0;z-index: -1;opacity: .6;filter: blur(12px)}
.cloud:after,.cloud:before {
    content: "";position: absolute;bottom: auto;width: 260px;height: 160px;background: radial-gradient(circle at 30% 70%,hsla(53,59%,81%,.4) 0 45%,transparent 40%),radial-gradient(circle at 65% 50%,hsla(53,59%,81%,.2) 0 40%,transparent 58%);background-repeat: no-repeat;}
.cloud:before {top: -30px;left: -30px;transform: rotate(-8deg)}
.cloud:after {right: 0;bottom: 0px;transform: scale(.9) rotate(10deg);opacity: .7}
.cloud_outer:nth-child(2) .cloud:after,.cloud_outer:nth-child(2) .cloud:before {
    background: radial-gradient(circle at 30% 70%,rgba(167,206,255,.2) 0 10%,transparent 40%),radial-gradient(circle at 65% 50%,rgba(167,206,255,.2) 0 40%,transparent 58%)
}
.cloud_outer:nth-child(3) .cloud:after,.cloud_outer:nth-child(3) .cloud:before {
    background: radial-gradient(circle at 30% 70%,rgba(255,59,59,.1) 0 10%,transparent 40%),radial-gradient(circle at 65% 50%,rgba(255,59,59,.15) 0 40%,transparent 58%)
}
.cloud_outer:nth-child(4) .cloud:after,.cloud_outer:nth-child(4) .cloud:before {
    background: radial-gradient(circle at 30% 70%,rgba(0,255,55,.2) 0 10%,transparent 40%),radial-gradient(circle at 65% 50%,rgba(0,255,55,.2) 0 40%,transparent 58%)
}

.how_it_work{align-items: center;}
.how_it_work .head{padding-right: 50px;}
.who{background-color: var(--ground-alt2);display: flex;gap:2px;border-radius: var(--radius-lg);overflow: hidden;border:var(--line) 1px solid}
.who .who__card{background-color: var(--ground);padding: 30px;}
.who_inner{display: flex;align-items: center;gap: 20px;margin-bottom: 20px;}
.who_inner h4,.who_inner .ico{margin-bottom: 0;}
/* Comparison table */
/* No overflow here on desktop: an overflow container becomes the scroll root
   for position:sticky, which would stop the table header sticking to the
   viewport. Horizontal scrolling is only needed on narrow screens, so it is
   switched on there instead (see the 860px query). */
.tablewrap{border-radius:var(--radius-lg);box-shadow:var(--shadow);background:#fff}
.tablewrap table{border-radius:inherit}
thead th:first-child{border-top-left-radius:var(--radius-lg)}
thead th:last-child{border-top-right-radius:var(--radius-lg)}
tbody tr td{border:var(--line) 1px solid}
tbody tr:last-child td:first-child{border-bottom-left-radius:var(--radius-lg)}
tbody tr:last-child td:last-child{border-bottom-right-radius:var(--radius-lg)}
tbody tr td:last-child{border-bottom:0;background-color: var(--ground-alt1);}
table{border-collapse:collapse;width:100%;min-width:560px}
th,td{padding:10px 20px;text-align:left;border-bottom:1px solid var(--line);font-size:var(--b2);color: var(--ink);}
thead th{
  background:var(--ink);color:#fff;font-weight:600;font-size:15px;letter-spacing:.2px;
  /* Stick below the site header, not under it - the header is 80px and z-index 60. */
  position:sticky;top:60px;z-index:5;
}
thead th:nth-child(2),thead th:nth-child(3){text-align:center;width:130px}
td:nth-child(2),td:nth-child(3){text-align:center}
/* tbody tr:hover{background:var(--ground-alt)} */
.rowhead td{background:var(--ground-alt2) !important;font-weight:700;color:var(--ink);font-size:var(--b2);text-transform:uppercase;letter-spacing:.8px}
.yes{color:#12b76a;font-weight:700;font-size:18px}
.no{color:#c9cfda;font-weight:600}

/* Pricing */
.price{
  background:#fff;border-radius:var(--radius-lg);padding:44px 36px;box-shadow:var(--shadow);border: var(--line) 1px solid;
  display:flex;flex-direction:column;align-items: center; transition:transform var(--t),box-shadow var(--t);position:relative;
}
.price:hover{transform:translateY(-7px);box-shadow:var(--shadow-lift)}
.price h3 {    background: var(--gradient-soft);    color: var(--primary);    display: inline-block;    text-align: center;    border-radius: 10px;    padding: 10px 40px;    font-size: 24px;
    box-shadow: rgba(0,0,0,0.1) 0px 2px 1px;}
.price p{width: 100%;}
.price--best{box-shadow:var(--shadow-lift);border:2px solid transparent;background:
  linear-gradient(#fff,#fff) padding-box,var(--gradient) border-box;}
.price__tag{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--gradient);color:#fff;font-size:12px;font-weight:700;letter-spacing:.8px;
  text-transform:uppercase;padding:7px 18px;border-radius:100px;white-space:nowrap;
}
.price__amt{font-size:38px;font-weight:700;color:var(--ink);letter-spacing:-.03em;line-height:1.1}
.price__amt small{font-size:16px;font-weight:500;color:var(--body);letter-spacing:0}
.price__seats{
  display:inline-block;font-size:13px;font-weight:600;padding:5px 14px;border-radius:100px;
  background:var(--gradient-soft);color:var(--tertiary);margin:14px 0 18px;
}
.price ul{flex:1;margin-bottom:26px}
.price .btn{width:100%}
.price__off_badge {    position: absolute;    top: -2px;    left: -9px;    transform: rotate(-45deg);}
.price__off_badge svg {    width: 120px;    position: relative;    left: -19px;    top: -10px;}
.price__off_badge span {    position: absolute;    top: -4px;   left: 0;    white-space: nowrap;    color: var(--ground);    font-size: 11px;    font-weight: 700;    text-align: center;    width: 82px;    letter-spacing: 0;}
.price__amount {    text-align: center;}
.price__amount .price__sale span{ color: var(--pink);}
.price__sale {    display: flex;    gap: 15px;    font-size: 16px;}


/* Accordion */
.acc{max-width:100%;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.acc__item{background:#fff;border-radius:var(--radius);border: var(--line) 1px solid;overflow:hidden}
.acc__q{
  width:100%;text-align:left;background:none;border:0;cursor:pointer;font-family:inherit;
  padding:24px 60px 24px 28px;font-size:17px;font-weight:600;color:var(--ink);position:relative;line-height:1.5;
}
.acc__q::after{
  content:"";position:absolute;right:26px;top:31px;width:9px;height:9px;
  border:solid var(--body);border-width:0 2px 2px 0;transform:rotate(45deg);transition:var(--t);
}
.acc__item.is-open{box-shadow: var(--shadow-lift);}
.acc__item.is-open .acc__q::after{transform:rotate(-135deg);border-color:var(--primary)}
.acc__item.is-open .acc__q{color:var(--primary)}
.acc__a{padding:0 28px 26px;font-size:var(--b2)}
.acc__a p:last-child{margin-bottom:0}
.acc__a[hidden]{display:none}

/* CTA band */
.band{background:var(--ink);border-radius:var(--radius-lg);padding:72px 60px;position:relative;overflow:hidden;text-align:center}
.band::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 90% at 20% 30%,rgba(5,157,255,.30),transparent 65%),
             radial-gradient(55% 85% at 82% 85%,rgba(227,63,161,.26),transparent 65%);
}
.band>*{position:relative}
.band h2{color:#fff}
.band p{color:rgba(255,255,255,.72);max-width:620px;margin:0 auto 32px;font-size:var(--b1)}
.band .btn-row{justify-content:center}

/* Support */
.sup{background:var(--ink);color:rgba(255,255,255,.7)}
.sup h2,.sup h4{color:#fff}
.sup .card{background:rgba(255,255,255,.05);box-shadow:none;border:1px solid rgba(255,255,255,.1)}
.sup .card:hover{background:rgba(255,255,255,.08);transform:translateY(-7px)}
.sup .card p{color:rgba(255,255,255,.68)}
.sup .card a{color:#fff;font-weight:600;border-bottom:2px solid transparent;background:var(--gradient);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* Footer */
.ftr{background:#0a0a0c;color:var(--line);padding:50px 0 30px;font-size:var(--b2)}
.ftr__top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px;margin-bottom:52px}
.ftr h5{color:var(--ground);font-size:18px;margin-bottom:18px;letter-spacing:.2px}
.ftr a{color:var(--line);display:block;margin-bottom:8px}
.ftr .brand{display:inline-flex;margin-bottom:16px}
.ftr a:hover{color:#fff; text-decoration: underline;}
.ftr .brand{color:#fff}
.ftr .brand:hover{color:#fff}
.ftr__legal{border-top:1px solid rgba(255,255,255,.1);padding-top:28px;display: flex;justify-content: space-between;}
.ftr__legal p{font-size:12px;line-height:1.7;margin: 0;}
.ftr_disclaimer{width: 100%;max-width: 600px;}

/* Reveal on scroll */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s var(--t),transform .7s var(--t)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .btn:hover,.card:hover,.price:hover{transform:none}
}
section#pro {padding-top: 0;}

.burger span {position: relative;top: 0;transition: ease 0.3s;}
.burger[aria-expanded="true"] span:nth-child(2) {opacity: 0;}
.burger[aria-expanded="true"] span:nth-child(1) {transform: rotate(45deg);top: 7px;}
.burger[aria-expanded="true"] span:nth-child(3) {transform: rotate(-45deg);top: -7px;}

.grid-lg-2, .grid-lg-3, .grid-lg-4{grid-template-columns:1fr}
.grid-md-2, .grid-md-3, .grid-md-4{grid-template-columns:1fr}
.grid-sm-2, .grid-sm-3, .grid-sm-4{grid-template-columns:1fr}
/* Responsive */
@media (min-width:1080px){
  .grid-lg-2{grid-template-columns:repeat(2,1fr)}
  .grid-lg-3{grid-template-columns:repeat(3,1fr)}
  .grid-lg-4{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:860px){
  .grid-md-2{grid-template-columns:repeat(2,1fr)}
  .grid-md-3{grid-template-columns:repeat(3,1fr)}
  .grid-md-4{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:767px){
  .grid-sm-2{grid-template-columns:repeat(2,1fr)}
  .grid-sm-3{grid-template-columns:repeat(3,1fr)}
  .grid-sm-4{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:1080px){
  :root{--h1:44px;--h2:36px;--h3:27px}
  .hero__in{grid-template-columns:1fr;gap:48px}
  .tabs{grid-template-columns:1fr;gap:28px}
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .ftr__top{grid-template-columns:1fr 1fr 1fr;gap:34px;margin-bottom: 25px;}
  .ftr__top > div:first-child{grid-column: span 4;}
  .hero__in .frame{display: none;}
  .brand {gap: 7px;font-size: 15px;}
  .oi_header .nav {gap: 20px;}
  .hero{padding: 60px 0;}
  .head{margin-bottom: 35px;}
  .chip__icon {flex: 0 0 40px;height: 40px;width: 40px;}
  .chip__icon svg {max-width: 20px;max-height: 20px;}
  .strip {margin-top: 30px;}
  .strip__in .chip {flex-direction: column;text-align: center;font-size: 14px;}
  .sec {padding: 60px 0;}
  .tabs__list {flex-direction: row;overflow: hidden;overflow-x: auto;}
  .tab {width: 100%;max-width: 30%;flex: 0 0 30%;}
  .tab .chip{flex-direction: column;align-items: flex-start;height: 100%;}
  .price{padding: 40px 25px 25px;}
  .ftr_disclaimer {max-width: 400px;}
}
@media (max-width:860px){
  .oi_header .nav{
    position:fixed;inset:100% 0 auto;flex-direction:column;gap:0;background:#fff;
    padding:0 24px;box-shadow:0 18px 40px rgba(15,15,17,.12);display:none;
  }
  .oi_header .nav.is-open{display:flex}
  .oi_header .nav a{padding:14px 0;border-bottom:1px solid var(--line)}
  .oi_header .btn{margin-left: auto;width: auto;}
  .burger{display:block}
  .grid--3,.grid--2{grid-template-columns:1fr}
  .band{padding:56px 26px}
  /* Narrow screens: let the table scroll sideways. Sticky is dropped here
     because an overflow container would capture it anyway. */
  .tablewrap{overflow-x:auto}
  thead th{position:static}
  .head p {font-size: var(--b2);}
  .who_inner h4 {font-size: 18px;}
  .strip__in{flex-wrap: wrap; display: flex; justify-content: flex-start;}
  .strip__in .chip {flex-direction: row;text-align: left;width: 100%;max-width: calc(50% - 10px);}
  .strip__in .chip br {display: none;}
  .how_it_work .head {padding-right: 0;}
}
@media (max-width:767px){
  .tab {max-width: 60%;flex: 0 0 60%;}
  .ftr__legal{flex-direction: column;gap:15px}
  .ftr_disclaimer {max-width: 100%;}
  .ftr__top p{max-width: 100% !important;}
  .head--left{text-align: center;}
}
@media (max-width:575px){
  :root{--h1:34px;--h2:29px;--h3:23px;--h4:20px;--b1:17px}
  .ftr{--b2: 15px;}
  p, .head p, .ticks li, th, td, .rowhead td, .hero__lead, .hero__note{--b1: 15px; font-size: 15px;line-height: 1.5;}
  .grid--4{grid-template-columns:1fr}
  .card{padding:25px}
  .price{padding:36px 28px}
  .btn{width:100%}
  .wrap{padding:0 18px}
  .hero:before{background: radial-gradient(48% 55% at 0% 0%,rgba(9, 174, 182,0.2),transparent 100%),
    radial-gradient(82% 42% at 100% 40%,rgba(39, 141, 196, 0.2),transparent 70%);}
  .strip__in .chip{max-width: 100%;}
  span.brand__text {display: none;}
  .oi_header .btn {font-size: 15px;height: 40px;padding-inline: 15px;}
  .ftr__top > div:first-child {grid-column: span 3;}
  .note__icon{display: none;}
  .tab {max-width: 80%;flex: 0 0 80%;}
  .ticks li::before,.ticks li::after{top: 4px;}
  .price ul{width: 100%;}
  .who .who__card {padding: 20px;}
  .acc__a, .acc__q{padding-inline: 18px;}
  .ftr__top {grid-template-columns: 1fr 1fr;}
  .ftr__top > div:first-child {grid-column: span 2;}
  .sec, .hero {padding: 40px 0;}
  .btn{font-size: 15px;}
  .btn--sm {width: auto !important;}
}