/* Grande - home page feature tabs (js/home-tabs.js): a list of features on the left, its picture on the right. */
.htabs{position:relative;padding:70px 28px 110px;overflow-x:clip}
.ht-anc{position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none}
.ht-in{max-width:1360px;margin:0 auto}
.ht-head{text-align:center;margin:0 auto 54px;max-width:920px}
.ht-head h2{margin:0 0 12px;font-size:clamp(32px,4.2vw,54px);line-height:1.05;letter-spacing:-1.8px;font-weight:800}
.ht-head .script{line-height:1}
.ht-head p{margin:0;color:var(--muted);font-size:clamp(16px,1.5vw,20px);line-height:1.5}
.ht-body{display:grid;grid-template-columns:420px minmax(0,1fr);gap:40px;align-items:center}
.ht-tabs{display:flex;flex-direction:column;gap:6px}
.ht-tab{display:flex;align-items:flex-start;gap:14px;width:100%;padding:18px 22px;border:1px solid transparent;border-radius:18px;background:transparent;color:#d4d4d4;font:inherit;text-align:left;cursor:pointer;
  transition:background-color .35s ease,border-color .35s ease,color .35s ease}
.ht-tab:hover{background:#0d0d0d}
.ht-tab:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.ht-tab.on{background:#121212;border-color:#262626;color:#fff;cursor:default}
.ht-ic{flex:none;width:24px;height:24px;margin-top:1px;display:grid;place-items:center;color:var(--blue)}
.ht-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ht-tx{display:block;min-width:0}
.ht-tx b{display:block;font-size:19px;font-weight:700;line-height:1.25;letter-spacing:-.2px}
.ht-dw{display:block}
.ht-d{display:block;margin-top:7px;white-space:nowrap;color:#7d7d7d;font-size:15.5px;line-height:1.5;transition:color .35s ease}
.ht-tab.on .ht-d{color:#c4c4c4}
/* the picture sits inside a big rounded frame */
.ht-stage{position:relative;aspect-ratio:1520/800;padding:0;border:1px solid #262626;border-radius:38px;background:#0a0a0a;overflow:hidden}
.ht-stage::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);z-index:2}
.ht-img{position:absolute;left:3.4%;top:5.6%;width:93.2%;height:auto;aspect-ratio:1520/800;opacity:0;transform:translateY(10px) scale(.992);transition:opacity .55s ease,transform .7s cubic-bezier(.2,.8,.2,1);pointer-events:none;user-select:none}
.ht-img.on{opacity:1;transform:none}
@media(max-width:1000px){
  .htabs{padding:40px 20px 80px}
  .ht-head{margin-bottom:30px}
  .ht-body{grid-template-columns:1fr;gap:22px}
  .ht-tab{padding:15px 16px}
  .ht-tx b{font-size:18px}
  .ht-stage{border-radius:24px}
}
@media(max-width:560px){.ht-d{white-space:normal}}
@media(prefers-reduced-motion:reduce){.ht-tab,.ht-d,.ht-img{transition:none}}