/* ============================================================================
   MINTMARBLES - "Studio" homepage skin. Light canvas, emerald accent,
   large light-weight display type, generous whitespace.
   ========================================================================== */
:root{
  /* brand v2 - primary blue + mint/teal
     primary brand: #0229BF */

  --v-l:#3E5CFE;
  --v:#0229BF;
  --v-d:#021A9C;
  --v-xd:#01157D;
  --v-rgb:2,41,191;

  /* secondary functional accent */
  --cy:#14C9A6;
  --cy-d:#0EA383;

  /* Etsy orange - retained only where it signals Etsy */
  --or:#F0723A;
  --or-d:#DD5A20;

  /* blue-tinted surfaces */
  --tint:#EEF1FF;
  --tint-2:#DDE3FF;

  /* light surfaces */
  --paper:#F7F7FA;
  --card:#FFFFFF;
  --card-2:#FAFAFC;

  /* typography */
  --ink:#0D0D16;
  --ink-2:#38374C;
  --mut:#6B6A7C;
  --faint:#9998A8;

  /* borders */
  --ln:#E7E7EE;
  --ln-2:#D8D8E2;

  /* dark surfaces */
  --nite:#001649;
  --nite-2:#101018;
  --nite-3:#17172A;

  --on-nite:#F3F2FA;
  --on-nite-mut:white;

  /* glass */
  --glass:rgba(255,255,255,.07);
  --glass-ln:rgba(255,255,255,.14);
  --glass-edge:rgba(255,255,255,.5);

  /* shadows */
  --sh-s:0 1px 2px rgba(13,13,22,.06);
  --sh-m:0 6px 20px rgba(13,13,22,.08);
  --sh-l:0 22px 60px rgba(13,13,22,.14);

  /* blue glow */
  --sh-glow:0 20px 60px rgba(2,41,191,.28);

  /* radii */
  --r:18px;
  --r-l:26px;
  --r-xl:34px;

  /* default accent */
  --a-l:#3E5CFE;
  --a:#0229BF;
  --a-d:#021A9C;
  --a-rgb:2,41,191;

  /* motion */
  --ez-out:cubic-bezier(.23,1,.32,1);
  --ez-in-out:cubic-bezier(.77,0,.175,1);
  --ez-spring:cubic-bezier(.34,1.56,.64,1);
}
body{background:var(--paper);color:var(--ink)}
main{overflow-x:clip}

/* ---------- flow lines: the site's connective motif, replaces grid marks ---------- */
.flow-lines{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible;
  -webkit-mask-image:radial-gradient(85% 75% at 50% 50%,#000,transparent 82%);
  mask-image:radial-gradient(85% 75% at 50% 50%,#000,transparent 82%)}
.flow-line{fill:none;stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linecap:round;
  stroke-dasharray:6 14;stroke-dashoffset:0;animation:flowDrift 26s linear infinite}
.flow-line--b{animation-duration:32s;animation-direction:reverse;stroke-width:1.3}
.flow-node{fill:var(--brand);opacity:.5}
.flow-lines--dark .flow-node{fill:#1DE5D7}
@keyframes flowDrift{to{stroke-dashoffset:-400}}
@media(prefers-reduced-motion:reduce){.flow-line{animation:none}}

/* ---------- shared ---------- */
.hs-wrap{width:100%;max-width:1180px;margin:0 auto;padding-inline:clamp(18px,4vw,36px);margin-top:20px;}
.hs-narrow{max-width:900px}
.hs-sec{padding-block:clamp(3.4rem,2rem + 5vw,6.5rem);position:relative}
.hs-eye{display:inline-block;font-family:var(--f-body,inherit);font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--a);margin-bottom:1.1rem}
.hs-eye--pill{padding:.42rem 1rem;border-radius:999px;background:var(--tint);border:1px solid var(--tint-2);letter-spacing:.1em}
.hs-h{font-family:"Hanken",var(--f-disp,sans-serif);font-weight:600;letter-spacing:-.035em;line-height:1.06;color:var(--ink)}
.hs-h1{font-size:clamp(2.9rem,1.8rem + 4.6vw,5.1rem)}
.hs-h2{font-size:clamp(2.1rem,1.4rem + 2.9vw,3.5rem)}
.hs-h3{font-size:clamp(1.5rem,1.1rem + 1.2vw,2rem);font-weight:400;letter-spacing:-.025em}
.hs-lead{color:var(--mut);font-size:clamp(1rem,.95rem + .25vw,1.12rem);line-height:1.65;max-width:100%}
.hs-lead b{color:var(--ink-2);font-weight:600}
.hs-center{text-align:center}.hs-center .hs-lead{margin-inline:auto}
.hs-g{color:var(--a)}

/* buttons */
.hs-btn{display:inline-flex;align-items:center;gap:.55rem;padding:.92rem 1.7rem;border-radius:999px;font-size:.94rem;
  font-weight:400;cursor:pointer;transition:transform .18s var(--ez-out,ease),box-shadow .25s,background .25s;text-decoration:none}
.hs-btn svg{width:17px;height:17px}
.hs-btn:active{transform:scale(.97)}
.hs-btn--p{background:var(--v-d);color:#fff;box-shadow:0 6px 18px rgba(51,42,160,.22)}
.hs-btn--w{background:#fff;color:var(--ink);border-color:var(--ln-2);box-shadow:var(--sh-s)}
.hs-btn--e{background:var(--or-d);color:#fff;box-shadow:0 6px 18px rgba(221,90,32,.25)}
@media (hover:hover) and (pointer:fine){
  .hs-btn--p:hover{background:var(--a);transform:translateY(-2px);box-shadow:0 12px 28px rgba(51,42,160,.28)}
  .hs-btn--w:hover{transform:translateY(-2px);box-shadow:var(--sh-m)}
  .hs-btn--e:hover{background:var(--or);transform:translateY(-2px)}
}
.hs-btns{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}

/* ---------- HERO ---------- */
.hs-hero{position:relative;isolation:isolate;padding-block:clamp(2.4rem,1rem + 4vw,4.2rem) clamp(3rem,2rem + 4vw,5rem);text-align:center;overflow:clip}
.hs-hero__glow{position:absolute;z-index:-2;left:50%;top:-90px;width:min(1100px,120vw);height:620px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(48% 52% at 50% 42%,rgba(124,107,255,.30),transparent 70%),
             radial-gradient(30% 34% at 32% 30%,rgba(91,75,255,.20),transparent 72%);filter:blur(6px)}
.hs-badge{display:inline-flex;align-items:center;gap:.55rem;padding:.34rem .34rem .34rem .5rem;border-radius:999px;background:#fff;
  border:1px solid var(--ln);box-shadow:var(--sh-s);font-size:.8rem;color:var(--ink-2);font-weight:400;margin-bottom:clamp(2rem,1rem + 3vw,3.4rem)}
.hs-badge b{background:var(--tint);color:var(--a);font-weight:600;padding:.26rem .6rem;border-radius:999px;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase}

/* avatar arc */
.hs-arc{position:relative;height:132px;margin-bottom:1.6rem}
.hs-arc__line{position:absolute;inset:0;top:14px;margin:auto;width:min(430px,86vw);height:190px;border-radius:50%;
  border:1px solid rgba(91,75,255,.16);border-bottom-color:transparent;border-left-color:rgba(91,75,255,.06);border-right-color:rgba(91,75,255,.06)}
.hs-arc__row{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:clamp(.5rem,1.4vw,1.1rem);height:100%}
.hs-av{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;color:#fff;border:4px solid #fff;
  box-shadow:0 8px 22px rgba(20,18,50,.14);flex:none;position:relative}
.hs-av svg{width:24px;height:24px}
.hs-av--1{transform:translateY(30px)}
.hs-av--2{transform:translateY(6px)}
.hs-av--3{width:86px;height:86px;transform:translateY(-14px);z-index:2}
.hs-av--3 svg{width:32px;height:32px}
.hs-av--4{transform:translateY(6px)}
.hs-av--5{transform:translateY(30px)}
.hs-hero .hs-h1{margin-bottom:1.1rem}
.hs-hero .hs-lead{margin:0 auto 1.9rem;max-width:52ch}
.hs-hero__cta{margin-bottom:1.6rem}
.hs-rate{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1.6rem;color:var(--faint);font-size:.8rem;font-weight:400}
.hs-rate .s{display:flex;align-items:center;gap:.45rem}
.hs-rate .s b{color:var(--ink-2);font-weight:600}
.hs-rate svg{width:14px;height:14px;color:#E8A33D}

/* ---------- TRUST STRIP ---------- */
.hs-trust{padding-block:clamp(1.6rem,1rem + 2vw,3rem);text-align:center}
.hs-trust__lab{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-weight:600;margin-bottom:1.6rem}
.hs-trust__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(1.4rem,3vw,3.4rem)}
.hs-trust__row span{display:inline-flex;align-items:center;gap:.5rem;color:#9AA29B;font-size:.9rem;font-weight:400;letter-spacing:-.01em;
  transition:color .25s}
.hs-trust__row span:hover{color:var(--a)}
.hs-trust__row svg{width:19px;height:19px}

/* ---------- STATS ---------- */
.hs-stats{position:relative}
.hs-stats__top,.hs-stats__bot{display:grid;grid-template-columns:1fr auto auto;gap:clamp(14px,1.6vw,22px);align-items:end}
.hs-stats__bot{margin-top:clamp(14px,1.6vw,22px);grid-template-columns:1fr auto auto}
.hs-stats__side{padding-bottom:.4rem}
.hs-stats__side .k{font-size:65px;font-weight:600;color:var(--ink-2);line-height:normal;}
.hs-stats__say{font-family:"Montserrat", sans-serif;font-weight:400;font-size:clamp(1.35rem,1rem + 1.5vw,1.8rem);letter-spacing:-.03em;
  line-height:1.28;color:var(--faint);max-width:26ch}
.hs-stats__say b{color:var(--ink);font-weight:400}
.hs-stat{width:clamp(160px,19vw,215px);min-height:clamp(150px,17vw,190px);border-radius:var(--r-l);padding:1.3rem 1.4rem;
  display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--ln);background:var(--card);box-shadow:var(--sh-s);
  transition:transform .3s,box-shadow .3s}
.hs-stat:hover{transform:translateY(-5px);box-shadow:var(--sh-m)}
.hs-stat__n{font-family:"Montserrat", sans-serif;font-weight:600;font-size:clamp(2.6rem,1.8rem + 2.6vw,3.9rem);letter-spacing:-.05em;line-height:1;
  color:var(--ink)}
.hs-stat__n .suf{font-size:.62em}
.hs-stat__l{font-size:.85rem;color:var(--mut);line-height:1.4;font-weight:400}
.hs-stat--g{background:linear-gradient(165deg,var(--v-l),var(--a));border-color:transparent;box-shadow:0 14px 34px rgba(91,75,255,.22)}
.hs-stat--g .hs-stat__n{color:#fff}
.hs-stat--g .hs-stat__l{color:rgba(255,255,255,.86)}
.hs-stat--t{background:var(--tint);border-color:var(--tint-2)}
.hs-stat--t .hs-stat__n{color:var(--a)}

/* connector line that draws downward */
.hs-conn{position:relative;height:clamp(70px,8vw,120px);display:grid;place-items:start center;pointer-events:none}
.hs-conn__l{width:1px;height:100%;background:linear-gradient(rgba(91,75,255,.05),rgba(91,75,255,.5));
  transform:scaleY(0);transform-origin:top;transition:transform 1s cubic-bezier(.22,1,.36,1)}
.hs-conn.in .hs-conn__l{transform:scaleY(1)}
.hs-conn__d{position:absolute;bottom:-5px;width:11px;height:11px;border-radius:50%;background:var(--a);
  box-shadow:0 0 0 5px rgba(91,75,255,.14);opacity:0;transform:scale(.4);transition:opacity .4s .85s,transform .5s .85s cubic-bezier(.34,1.56,.64,1)}
.hs-conn.in .hs-conn__d{opacity:1;transform:scale(1)}

/* ---------- BIG ROUNDED PANEL + BENTO ---------- */
.hs-panel{background:var(--card-2);border:1px solid var(--ln);border-radius:var(--r-xl);
  padding:clamp(2rem,1.2rem + 3vw,3.6rem) clamp(1.1rem,.6rem + 2.4vw,2.6rem) clamp(1.4rem,1rem + 2vw,2.6rem)}
.hs-panel__head{text-align:center;max-width:640px;margin:0 auto clamp(2rem,1.2rem + 2.4vw,3rem)}
.hs-bento{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.2vw,18px)}
.hs-card{background:var(--card);border:1px solid var(--ln);border-radius:var(--r-l);padding:1.4rem;box-shadow:var(--sh-s);
  display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s;overflow:hidden;position:relative}
.hs-card:hover{transform:translateY(-4px);box-shadow:var(--sh-m)}
.hs-card:active{transform:scale(.985)}
.hs-card--tall{grid-row:span 2}
.hs-card--wide{grid-column:span 2}
.hs-card--wide .hs-card__top{display:grid;grid-template-columns:auto 1fr;gap:0 1rem;align-items:start}
.hs-card--wide .hs-card__ic{margin-bottom:0}
.hs-card--wide .hs-card__t{grid-column:2}
.hs-card--wide .hs-card__p{grid-column:2}
.hs-card__t{font-family:"Montserrat", sans-serif;font-weight:600;font-size:1.16rem;letter-spacing:-.02em;margin-bottom:.4rem}
.hs-card__p{font-size:.88rem;color:var(--mut);line-height:1.55}
.hs-card--g{background:linear-gradient(160deg,var(--a),var(--v-d));border-color:transparent;color:#fff;justify-content:space-between}
.hs-card--g .hs-card__t{color:#fff;font-size:1.5rem;font-weight:400;line-height:1.2}
.hs-card--g .hs-card__p{color:rgba(255,255,255,.78)}
.hs-card__top{margin-bottom:1.1rem}
.hs-card__foot{margin-top:auto;padding-top:1.2rem}

/* mini mockups */
.hs-mock{background:var(--card-2);border:1px solid var(--ln);border-radius:14px;padding:.85rem;font-size:.74rem}
.hs-mock__h{display:flex;align-items:center;justify-content:space-between;margin-bottom:.7rem;font-weight:600;color:var(--ink-2);font-size:.78rem}
.hs-mock__h .p{background:var(--tint);color:var(--a);border-radius:999px;padding:.2rem .55rem;font-size:.66rem;font-weight:600}
.hs-row{display:flex;align-items:center;gap:.55rem;padding:.5rem;border-radius:9px;background:#fff;border:1px solid var(--ln);margin-bottom:.4rem}
.hs-row .ic{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;color:#fff;flex:none;background:var(--a)}
.hs-row .ic svg{width:12px;height:12px}
.hs-row .tx{flex:1;min-width:0;color:var(--ink-2);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-row .amt{color:var(--ink);font-weight:600}
.hs-row .tick{width:16px;height:16px;border-radius:50%;background:var(--tint);color:var(--a);display:grid;place-items:center;flex:none}
.hs-row .tick svg{width:10px;height:10px}
.hs-bars{display:flex;align-items:flex-end;gap:.34rem;height:74px;padding:.4rem .1rem 0}
.hs-bars i{flex:1;border-radius:5px 5px 0 0;background:var(--tint-2)}
.hs-bars i.on{background:linear-gradient(var(--v-l),var(--a))}
.hs-bars i:nth-child(1){height:44%}.hs-bars i:nth-child(2){height:62%}.hs-bars i:nth-child(3){height:38%}
.hs-bars i:nth-child(4){height:80%}.hs-bars i:nth-child(5){height:56%}.hs-bars i:nth-child(6){height:100%}
/* progress ring */
.hs-ring{position:relative;width:100%;height:100%;margin:0 auto}
.hs-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.hs-ring circle{fill:none;stroke-width:7;stroke-linecap:round}
.hs-ring .bg{stroke:rgba(255,255,255,.18)}
.hs-ring .fg{stroke:#fff;stroke-dasharray:314;stroke-dashoffset:314;transition:stroke-dashoffset 1.5s cubic-bezier(.22,1,.36,1) .2s}
.hs-card--g.in .hs-ring .fg{stroke-dashoffset:0}
.hs-ring__v{position:absolute;inset:0;display:grid;place-items:center;font-family:"Montserrat", sans-serif;font-weight:500;font-size:36px;color:#fff}

/* ---------- FLOW STAGE (icons riding the current - never clipped) ---------- */
.hs-dome{position:relative;text-align:center;padding-top:clamp(2rem,1rem + 3vw,3.4rem)}
.hs-dome__stage{position:relative;height:clamp(190px,19vw,250px);margin-bottom:clamp(1.8rem,1.2rem + 1.4vw,2.4rem)}
.hs-dome__glow{position:absolute;left:50%;top:50%;width:min(680px,94vw);height:min(680px,94vw);
  transform:translate(-50%,-50%);z-index:-1;
background: radial-gradient(
  46% 46% at 50% 50%,
  rgba(30, 64, 175, 0.28),
  transparent 72%
);filter:blur(4px)}
.hs-chip{position:absolute;width:46px;height:46px;border-radius:14px;background:#fff;border:1px solid var(--ln);
  display:grid;place-items:center;color:var(--a);box-shadow:var(--sh-m);animation:hsfloat 6s ease-in-out infinite;
  transform:translate(-50%,-50%)}
.hs-chip svg{width:20px;height:20px}
.hs-chip:nth-child(odd){animation-direction:reverse}
@keyframes hsfloat{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 9px))}}

/* ---------- PERSONAS ---------- */
.hs-people{display:grid;grid-template-columns:.85fr 1.5fr .85fr .85fr;gap:clamp(10px,1.1vw,16px);align-items:stretch}
.hs-person{position:relative;border-radius:var(--r-l);overflow:hidden;min-height:clamp(220px,26vw,320px);
  background:linear-gradient(160deg,#EDEDEA,#DFE2DE);display:flex;align-items:flex-end;padding:1.1rem;
  transition:transform .3s,box-shadow .3s;border:1px solid var(--ln)}
.hs-person:hover{transform:translateY(-4px);box-shadow:var(--sh-m)}
.hs-person:active{transform:scale(.98)}
.hs-person__ic{position:absolute;inset:0;display:grid;place-items:center;color:rgba(30,50,40,.16)}
.hs-person__ic svg{width:74px;height:74px}
.hs-person__tag{position:relative;background:rgba(255,255,255,.94);border-radius:999px;padding:.42rem .9rem;font-size:.8rem;
  font-weight:600;color:var(--ink);box-shadow:var(--sh-s)}
.hs-person--q{background:linear-gradient(160deg,var(--a),var(--v-d));border-color:transparent;color:#fff;
  align-items:flex-start;flex-direction:column;justify-content:center;padding:clamp(1.2rem,1rem + 1.2vw,2rem)}
.hs-person--q p{font-size:clamp(.92rem,.85rem + .35vw,1.06rem);line-height:1.6;color:rgba(255,255,255,.94);margin-bottom:1.1rem}
.hs-person--q .who{display:flex;align-items:center;gap:.6rem;font-size:.8rem}
.hs-person--q .who b{display:block;color:#fff;font-weight:600}
.hs-person--q .who span{color:rgba(255,255,255,1)}
.hs-person--q .av{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;
  font-weight:600;font-size:.78rem;flex:none}
.hs-plabel{margin-top:.7rem;font-size:.88rem;font-weight:600;color:var(--ink)}
.hs-plabel span{display:block;font-weight:400;font-size:.8rem;color:var(--mut);margin-top:.15rem;line-height:1.45}

/* ---------- PLATFORM SCATTER ---------- */
.hs-scatter{position:relative;padding-block:clamp(2.6rem,2rem + 4vw,5rem);text-align:center;isolation:isolate}
.hs-tile{position:absolute;display:flex;align-items:center;gap:.5rem;padding:.6rem .9rem;border-radius:14px;background:#fff;
  border:1px solid var(--ln);box-shadow:var(--sh-m);font-size:.82rem;font-weight:600;color:var(--ink-2);
  animation:hsfloat 7s ease-in-out infinite}
.hs-tile svg{width:17px;height:17px;color:var(--a)}
.hs-tile:nth-child(even){animation-direction:reverse}
.hs-t1{top:8%;left:2%}.hs-t2{top:16%;right:2%}.hs-t3{top:46%;left:-1%}
.hs-t4{bottom:14%;left:6%}.hs-t5{bottom:10%;right:5%}.hs-t6{top:50%;right:-1%}
.hs-t7{top:2%;right:20%}.hs-t8{bottom:2%;left:22%}

/* ---------- PRODUCT EXPLORER ---------- */
.hs-split{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(1.2rem,1rem + 2vw,2.6rem);align-items:start}
.hs-list{display:flex;flex-direction:column;gap:.55rem}
.hs-item{display:flex;align-items:center;gap:.8rem;padding:1rem 1.1rem;border-radius:16px;background:var(--card);
  border:1px solid var(--ln);text-decoration:none;color:var(--ink);box-shadow:var(--sh-s);
  transition:transform .25s,box-shadow .25s,border-color .25s,background .25s}
.hs-item:hover{transform:translateX(4px);box-shadow:var(--sh-m);border-color:var(--tint-2)}
.hs-item:active{transform:scale(.985)}
.hs-item__ic{width:34px;height:34px;border-radius:10px;background:var(--tint);color:var(--a);display:grid;place-items:center;flex:none}
.hs-item__ic svg{width:17px;height:17px}
.hs-item__b{flex:1;min-width:0}
.hs-item__n{display:block;font-weight:600;font-size:.96rem;letter-spacing:-.01em}
.hs-item__d{display:block;font-size:.8rem;color:var(--mut);margin-top:.15rem;line-height:1.4}
.hs-item__pr{font-family:"Montserrat", sans-serif;font-weight:600;color:var(--a);font-size:1rem}
.hs-item .ar{color:var(--faint);display:grid;place-items:center}
.hs-item .ar svg{width:16px;height:16px}
.hs-showcase{border:1px solid var(--tint-2);background:linear-gradient(170deg,var(--tint),#fff 60%);border-radius:var(--r-xl);
  padding:clamp(1rem,.6rem + 1.4vw,1.7rem);box-shadow:var(--sh-m)}
.hs-showcase .app{box-shadow:var(--sh-l);border-radius:16px}

/* ---------- CLOUD CTA ---------- */
.hs-cloud{position:relative;isolation:isolate;text-align:center;padding-block:clamp(4rem,2.5rem + 6vw,8rem);overflow:clip}
.hs-cloud__bg{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 62% at 50% 100%,rgba(124,107,255,.42),transparent 72%),
             radial-gradient(38% 44% at 22% 96%,rgba(91,75,255,.30),transparent 74%),
             radial-gradient(36% 42% at 80% 92%,rgba(124,107,255,.26),transparent 74%)}
.hs-cloud .hs-h2{margin-bottom:.9rem}
.hs-cloud .hs-lead{margin:0 auto 2rem}

/* ---------- REVEAL (full spec + reduced-motion further down) ---------- */
@media(prefers-reduced-motion:reduce){
  [data-hs]{opacity:1;transform:none;transition:none}
  .hs-chip,.hs-tile{animation:none}
  .hs-conn__l{transform:scaleY(1)}.hs-conn__d{opacity:1;transform:none}
  .hs-ring .fg{transition:none;stroke-dashoffset:0}
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1000px){
  .hs-people{grid-template-columns:1fr 1fr}
  .hs-split{grid-template-columns:1fr}
  .hs-stats__top,.hs-stats__bot{grid-template-columns:1fr 1fr;gap:14px}
  .hs-stats__side{grid-column:1/-1}
  .hs-stat{width:100%}
}
@media(max-width:820px){
  .hs-bento{grid-template-columns:1fr 1fr}
  .hs-card--tall{grid-row:auto}
}
@media(max-width:620px){
  .hs-bento{grid-template-columns:1fr}
  .hs-card--wide .hs-card__top{display:block}
  .hs-card--wide .hs-card__ic{margin-bottom:.9rem}
  .hs-people{grid-template-columns:1fr}
  .hs-av{width:48px;height:48px}.hs-av--3{width:64px;height:64px}
  .hs-av svg{width:19px;height:19px}.hs-av--3 svg{width:25px;height:25px}
  .hs-arc{height:104px;margin-bottom:2.2rem}
  .hs-tile{display:none}
  .hs-t1,.hs-t5{display:flex;position:relative;top:auto;left:auto;right:auto;bottom:auto;margin:.4rem auto;width:max-content}
  .hs-btns .hs-btn{width:100%;justify-content:center}
}

/* ==========================================================================
   HEADER - a transparent pill riding on the hero at rest; on scroll it
   unfurls into a full-width, fixed, blurred glass bar. Position stays
   `fixed` throughout so the shape change (pill -> bar) can animate smoothly -
   a spacer element (added by main.js) reserves its layout height so it
   never covers content, on any page, at any scroll position.
   ========================================================================== */
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:100;
  width:min(1120px,calc(100% - 32px));display:flex;align-items:center;height:var(--nav-h);
  border-radius:999px;background:rgba(255,255,255,.5);border:1px solid rgba(20,18,43,.08);
  box-shadow:0 1px 1px rgba(20,18,43,.03),0 16px 40px -22px rgba(20,18,43,.35);
  -webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);
  transition:top .5s var(--ease-out,cubic-bezier(.16,1,.3,1)),width .5s var(--ease-out,cubic-bezier(.16,1,.3,1)),
    border-radius .5s var(--ease-out,cubic-bezier(.16,1,.3,1)),background .35s,border-color .35s,box-shadow .35s}
.nav--dark:not(.is-stuck){background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
.nav.is-stuck{top:0;left:0;transform:none;width:100%;border-radius:0;
  background:rgba(255,255,255,.8);border-color:transparent;border-bottom:1px solid rgba(20,18,43,.08);
  box-shadow:0 1px 0 rgba(20,18,43,.02),0 24px 48px -28px rgba(20,18,43,.28);
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%)}
/* dark variant only holds while the header is still riding over a dark hero;
   the moment that hero scrolls past, it settles into the same light glass as
   every other page - never a low-opacity box fighting with light content. */
.nav--dark.is-stuck.nav--on-hero{background:rgba(9,8,22,.62);border-bottom-color:rgba(255,255,255,.09);
  box-shadow:0 1px 0 rgba(0,0,0,.2),0 24px 48px -28px rgba(0,0,0,.5)}
.nav .wrap{max-width:1180px;width:100%;padding-block:0;}
.nav.is-stuck .wrap{padding-inline:clamp(18px,4vw,36px)}
/* the pill rides on top of the hero by design; every first section still
   gets enough clearance so its own heading never starts underneath it */
main>section:first-of-type,.pdx{padding-top:calc(var(--nav-h) + 32px)}
/* wordmark: one weight, one color - the logomark carries the brand color,
   the type stays quiet and confident rather than two-tone/gradient */
.brand{display:flex;align-items:center;gap:.6rem;font-family:"Montserrat", sans-serif;font-weight:400;font-size:1.04rem;
  letter-spacing:-.02em;color:var(--ink);transition:opacity .2s}
.brand:hover{opacity:.75}
.brand em{color:inherit;font-style:normal}
.brand__logo{transition:transform .4s var(--ease-spring,cubic-bezier(.34,1.56,.64,1))}
.brand:hover .brand__logo{transform:rotate(-8deg) scale(1.08)}
.nav--dark:not(.is-stuck) .brand,.nav--dark.is-stuck.nav--on-hero .brand{color:#fff}
.nav__links{gap:8px;margin:auto;}
.nav__links a{position:relative;padding:.5rem .8rem;font-size:.87rem;font-weight:400;
  letter-spacing:-.005em;color:var(--ink-2);transition:color .2s}

.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{transform:scaleX(1);opacity:.5}
.nav__links a.is-active{color:var(--a);font-weight:600}
.nav__links a.is-active::after{transform:scaleX(1);}
.nav__ghost{color:var(--mut);font-size:.85rem;font-weight:400;gap:.4rem;padding:.5rem .3rem}
.nav__ghost:hover{color:var(--a)}
.nav__ghost svg{width:14px;height:14px;color:white!important;}
.nav .btn{border-radius:999px}
.nav .btn-primary{background:var(--ink);box-shadow:0 1px 1px rgba(20,18,43,.05);
  border:0;font-weight:600;font-size:.86rem;padding:.6rem 1.1rem;min-height:auto;letter-spacing:-.005em}
.nav .btn-primary:hover{background:var(--v-d);box-shadow:0 8px 20px -8px rgba(59,50,184,.5)}
.nav--dark:not(.is-stuck) .btn-primary,.nav--dark.is-stuck.nav--on-hero .btn-primary{background:#fff;color:var(--ink)}
.nav--dark:not(.is-stuck) .btn-primary:hover,.nav--dark.is-stuck.nav--on-hero .btn-primary:hover{background:var(--cy);color:#08111A}
.nav__toggle{border-radius:12px;border-color:var(--ln);background:#fff;color:var(--ink)}
.nav__drawer .pad{background:rgba(243,243,241,.98);border-top:1px solid var(--ln)}
.nav__drawer a{color:var(--ink-2)}
.nav__drawer a svg{width:18px;height:18px;flex:none}

/* ==========================================================================
   FOOTER - light and calm
   ========================================================================== */
.hsfoot{background:var(--card-2);border-top:1px solid var(--ln);padding-block:clamp(3rem,2rem + 4vw,5rem) 0;position:relative}
.hsfoot__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(1.6rem,1rem + 3vw,3.4rem);
  padding-bottom:clamp(2.2rem,1.4rem + 2.6vw,3.4rem)}
.hsfoot__brand p{color:var(--mut);font-size:.92rem;line-height:1.65;margin:1rem 0 1.4rem;max-width:38ch}
.hsfoot__col h4{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:600;margin-bottom:1rem}
.hsfoot__col a{display:block;color:var(--ink-2);font-size:.92rem;text-decoration:none;padding:.32rem 0;transition:color .2s,transform .2s}
.hsfoot__col a:hover{color:var(--a);transform:translateX(3px)}
.hsfoot__cta{background:linear-gradient(150deg,var(--a),var(--v-d));border-radius:var(--r-l);padding:1.5rem 1.6rem;color:#fff;
  box-shadow:0 14px 34px rgba(59,50,184,.2)}
.hsfoot__cta h4{font-family:"Montserrat", sans-serif;font-weight:600;font-size:1.16rem;margin-bottom:.35rem;color:#fff}
.hsfoot__cta p{color:rgba(255,255,255,.8);font-size:.86rem;line-height:1.55;margin-bottom:1.1rem}
.hsfoot__cta .hs-btn{background:#fff;color:var(--v-d);padding:.72rem 1.3rem;font-size:.88rem}
.hsfoot__cta .hs-btn:hover{transform:translateY(-2px)}
.hsfoot__bar{border-top:1px solid var(--ln);padding-block:1.4rem;display:flex;flex-wrap:wrap;gap:.7rem 1.6rem;
  align-items:center;justify-content:space-between;color:var(--faint);font-size:.83rem}
.hsfoot__bar a{color:var(--faint);text-decoration:none}
.hsfoot__bar a:hover{color:var(--a)}
.hsfoot__legal{display:flex;flex-wrap:wrap;gap:1.2rem}
@media(max-width:900px){.hsfoot__top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.hsfoot__top{grid-template-columns:1fr;gap:2rem}}

/* ==========================================================================
   PAGE HEAD (inner pages)
   ========================================================================== */
.hs-pagehead{position:relative;isolation:isolate;text-align:center;overflow:clip;
  padding-block:clamp(2.6rem,1.6rem + 4vw,4.6rem) clamp(1.6rem,1rem + 2vw,2.6rem)}
.hs-pagehead__glow{position:absolute;z-index:-1;left:50%;top:-160px;width:min(900px,120vw);height:460px;transform:translateX(-50%);
  background:radial-gradient(50% 55% at 50% 50%,rgba(124,107,255,.22),transparent 70%);pointer-events:none}
.hs-pagehead .hs-lead{margin-inline:auto}
.hs-crumbs{display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.84rem;color:var(--faint);margin-bottom:1.1rem}
.hs-crumbs a{color:var(--mut);text-decoration:none}.hs-crumbs a:hover{color:var(--a)}

/* filter pills */
.hs-filters{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:clamp(1.8rem,1rem + 2vw,2.8rem)}
.hs-filters .btn,.hs-filters button{padding:.6rem 1.15rem;border-radius:999px;border:1px solid var(--ln);background:#fff;
  color:var(--ink-2);font-size:.88rem;font-weight:600;cursor:pointer;box-shadow:var(--sh-s);
  transition:background .22s,color .22s,border-color .22s,transform .22s}
.hs-filters button:hover{transform:translateY(-2px);border-color:var(--tint-2);color:var(--a)}
.hs-filters button.is-active{background:var(--v-d);border-color:var(--v-d);color:#fff}

/* ==========================================================================
   PRODUCT CARDS
   ========================================================================== */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:clamp(14px,1.4vw,20px)}
.product-card{background:var(--card);border:1px solid var(--ln);border-radius:var(--r-l);box-shadow:var(--sh-s);overflow:hidden}
.product-card:hover{transform:translateY(-5px);box-shadow:var(--sh-m);border-color:var(--tint-2)}
.product-card:active{transform:scale(.98)}
.product-card__media{background:linear-gradient(165deg,var(--tint),#fff);border-bottom:1px solid var(--ln);padding:1rem 1rem 0}
.product-card__body{padding:1.3rem 1.4rem 1.4rem}
.product-card__meta{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:600}
.product-card__title{font-family:"Montserrat", sans-serif;font-weight:600;font-size:1.22rem;letter-spacing:-.02em;color:var(--ink);margin:.45rem 0 .4rem}
.product-card__desc{color:var(--mut);font-size:.9rem;line-height:1.55}
.product-card__foot{border-top:1px solid var(--ln);margin-top:1.1rem;padding-top:1rem}
.product-card .price,.product-card__foot .price{font-family:"Montserrat", sans-serif;font-weight:600;color:var(--ink);font-size:1.15rem}
.product-card .price-sale{color:var(--a)}
.product-card .link-arrow{color:var(--a);font-weight:600;font-size:.88rem}
.badge{border-radius:999px;font-size:.68rem;font-weight:600;letter-spacing:.02em}
.badge-new{background:var(--tint);color:var(--a);border:1px solid var(--tint-2)}

/* ==========================================================================
   PRODUCT DETAIL
   ========================================================================== */
.hs-pd{padding-block:clamp(1.6rem,1rem + 2vw,2.6rem) clamp(2.4rem,1.6rem + 3vw,4rem);position:relative;isolation:isolate;overflow:clip}
.hs-pd__glow{position:absolute;z-index:-1;left:50%;top:-200px;width:min(1000px,120vw);height:520px;transform:translateX(-50%);
  background:radial-gradient(48% 52% at 50% 50%,rgba(124,107,255,.20),transparent 72%);pointer-events:none}
.hs-pd__grid{display:grid;grid-template-columns:1fr 1.06fr;gap:clamp(1.8rem,1rem + 3.4vw,3.6rem);align-items:center}
.hs-pd__badges{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.1rem}
.hs-pd__badges span{padding:.34rem .8rem;border-radius:999px;background:#fff;border:1px solid var(--ln);
  font-size:.75rem;font-weight:600;color:var(--ink-2)}
.hs-pd__badges span.new{background:var(--tint);border-color:var(--tint-2);color:var(--a)}
.hs-pd h1{font-family:"Montserrat", sans-serif;font-weight:600;letter-spacing:-.035em;line-height:1.06;
  font-size:clamp(2.3rem,1.6rem + 2.6vw,3.5rem);margin-bottom:1rem;color:var(--ink)}
.hs-pd__lead{color:var(--mut);font-size:1.02rem;line-height:1.68;margin-bottom:1.5rem;max-width:54ch}
.hs-hl{display:grid;gap:.5rem;margin-bottom:1.7rem}
.hs-hl span{display:flex;gap:.6rem;align-items:flex-start;font-size:.93rem;color:var(--ink-2);font-weight:400}
.hs-hl svg{width:18px;height:18px;color:var(--a);flex:none;margin-top:2px}
.hs-buy{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem;padding:1.2rem 1.4rem;background:#fff;border:1px solid var(--ln);
  border-radius:var(--r-l);box-shadow:var(--sh-s);margin-bottom:1.3rem}
.hs-buy__p{font-family:"Montserrat", sans-serif;font-weight:400;font-size:2.1rem;letter-spacing:-.04em;color:var(--ink);line-height:1}
.hs-buy__p s{font-size:1rem;color:var(--faint);font-weight:400;margin-right:.5rem}
.hs-buy__p b{color:var(--a);font-weight:400}
.hs-buy__p small{display:block;font-size:.76rem;color:var(--faint);font-weight:400;margin-top:.3rem;letter-spacing:0}
.hs-buy__a{display:flex;flex-wrap:wrap;gap:.6rem;margin-left:auto}
.hs-pd__trust{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;color:var(--mut);font-size:.86rem;font-weight:400}
.hs-pd__trust span{display:flex;align-items:center;gap:.45rem}
.hs-pd__trust svg{width:17px;height:17px;color:var(--a)}
@media(max-width:900px){.hs-pd__grid{grid-template-columns:1fr}.hs-buy__a{margin-left:0}}

/* capability + spec blocks */
.hs-feat3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.2vw,18px)}
.hs-feat3 .f{background:var(--card);border:1px solid var(--ln);border-radius:var(--r);padding:1.4rem;box-shadow:var(--sh-s);
  transition:transform .28s,box-shadow .28s,border-color .28s}
.hs-feat3 .f:hover{transform:translateY(-4px);box-shadow:var(--sh-m);border-color:var(--tint-2)}
.hs-feat3 h4{font-family:"Montserrat", sans-serif;font-weight:600;font-size:1.05rem;letter-spacing:-.015em;margin-bottom:.45rem;color:var(--ink)}
.hs-feat3 p{color:var(--mut);font-size:.88rem;line-height:1.58}
.hs-cols3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:clamp(1.4rem,1rem + 2.4vw,3rem)}
.hs-cols3 h3{font-family:"Montserrat", sans-serif;font-weight:600;font-size:1.2rem;letter-spacing:-.02em;margin-bottom:1.1rem;color:var(--ink)}
.hs-ticks{display:grid;gap:.6rem}
.hs-ticks li{display:flex;gap:.6rem;align-items:flex-start;color:var(--ink-2);font-size:.92rem;line-height:1.5}
.hs-ticks li::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;margin-top:2px;background:var(--tint);
  border:1px solid var(--tint-2)}
.hs-specs{background:var(--card);border:1px solid var(--ln);border-radius:var(--r);box-shadow:var(--sh-s);padding:.3rem 1.2rem}
.hs-specs .row{display:flex;justify-content:space-between;gap:1rem;padding:.78rem 0;border-bottom:1px solid var(--ln);font-size:.88rem}
.hs-specs .row:last-child{border-bottom:0}
.hs-specs .k{color:var(--faint);text-transform:capitalize}
.hs-specs .v{color:var(--ink);font-weight:600;text-align:right}
.hs-docs{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.1vw,16px)}
.hs-doc{display:flex;align-items:center;gap:.75rem;background:var(--card);border:1px solid var(--ln);border-radius:var(--r);
  padding:1rem 1.1rem;box-shadow:var(--sh-s);text-decoration:none;transition:transform .25s,box-shadow .25s,border-color .25s}
.hs-doc:hover{transform:translateY(-3px);box-shadow:var(--sh-m);border-color:var(--tint-2)}
.hs-doc:active{transform:scale(.97)}
.hs-doc .ic{width:34px;height:34px;border-radius:10px;background:var(--tint);color:var(--a);display:grid;place-items:center;flex:none}
.hs-doc .ic svg{width:17px;height:17px}
.hs-doc b{display:block;font-size:.92rem;color:var(--ink);font-weight:600}
.hs-doc span{display:block;font-size:.78rem;color:var(--mut);margin-top:.1rem}
@media(max-width:900px){.hs-feat3,.hs-cols3{grid-template-columns:1fr 1fr}.hs-docs{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.hs-feat3,.hs-cols3,.hs-docs{grid-template-columns:1fr}}

/* sticky buy bar */
.buybar{position:fixed;left:50%;bottom:18px;transform:translate(-50%,140%);z-index:60;width:min(680px,calc(100% - 28px));
  opacity:0;transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .3s;pointer-events:none}
.buybar.is-in{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.buybar__inner{display:flex;align-items:center;gap:1rem;background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid var(--ln);
  border-radius:999px;padding:.6rem .7rem .6rem 1.5rem;box-shadow:var(--sh-l)}
.buybar__meta{display:flex;align-items:baseline;gap:.7rem;min-width:0}
.buybar__meta b{font-size:.95rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buybar__meta .price{font-family:"Montserrat", sans-serif;color:var(--a);font-weight:600;font-size:1.05rem}
.buybar .hs-btn{margin-left:auto;white-space:nowrap}
@media(max-width:560px){.buybar__inner{padding-left:1.1rem}.buybar__meta b{display:none}}

/* fixes */
.hsfoot__cta .hs-btn{white-space:nowrap}
.hsfoot__cta{display:flex;flex-direction:column;align-items:flex-start}
.hs-cloud{padding-block:clamp(3rem,2rem + 4vw,5.5rem)}
.product-card__media svg{border-radius:12px 12px 0 0}

/* let the app mockup shrink inside narrow panels instead of clipping */
.app__body{grid-template-columns:172px minmax(0,1fr)}
.app__kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
.app__kpis .kpi{min-width:0;overflow:hidden}
.app__kpis .kpi .v{font-size:1.02rem;white-space:nowrap}
.hs-showcase .app__body{grid-template-columns:150px minmax(0,1fr);min-height:320px}
.hs-showcase .app__main{padding:.95rem 1rem}
@media(max-width:520px){.app__body,.hs-showcase .app__body{grid-template-columns:minmax(0,1fr)}.app__side{display:none}}

/* checklist ticks get an actual checkmark */
.hs-ticks li::before{content:"✓";display:grid;place-items:center;font-size:.68rem;font-weight:700;color:var(--a);line-height:1}

/* footer proportions */
.hsfoot__top{grid-template-columns:1.4fr 1fr 1fr 1.25fr}
@media(max-width:900px){.hsfoot__top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.hsfoot__top{grid-template-columns:1fr}}

/* mockup table: let cells truncate instead of colliding */
.trow{grid-template-columns:1.1fr 2fr 1.3fr .9fr}
.trow > *{min-width:0}
.trow .cli,.trow span{overflow:hidden;text-overflow:ellipsis}
.trow .cli{display:flex;align-items:center;gap:.4rem;white-space:nowrap}
@media(max-width:560px){
  .trow{grid-template-columns:1fr 2fr 1.1fr}
  .trow > *:nth-child(3){display:none}
}

/* ==========================================================================
   REAL IMAGE SLOTS
   ========================================================================== */
.hs-shot{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--ln);background:#fff;
  box-shadow:var(--sh-m)}
.hs-figure{position:relative;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--ln);background:#fff;
  box-shadow:var(--sh-s);transition:transform .3s,box-shadow .3s}
.hs-figure:hover{transform:translateY(-4px);box-shadow:var(--sh-m)}
.hs-figure img{display:block;width:100%;height:100%;object-fit:cover}
.hs-figure .hs-shot{border:0;border-radius:0;box-shadow:none}
.hs-figure figcaption{position:absolute;left:.8rem;bottom:.8rem;background:rgba(255,255,255,.94);border-radius:999px;
  padding:.4rem .9rem;font-size:.78rem;font-weight:600;color:var(--ink);box-shadow:var(--sh-s)}

/* gallery */
.hs-gallery{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(10px,1.1vw,16px)}
.hs-gallery__side{display:grid;gap:clamp(10px,1.1vw,16px)}
.hs-gallery .hs-figure{min-height:0}
.hs-gallery__main .hs-figure{height:100%}
@media(max-width:820px){.hs-gallery{grid-template-columns:1fr}}

/* product stat strip */
.hs-pstats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.2vw,18px)}
@media(max-width:820px){.hs-pstats{grid-template-columns:1fr 1fr}}

/* feature rows with image */
.hs-frow{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(1.4rem,1rem + 3vw,3.4rem);align-items:center;
  margin-bottom:clamp(2rem,1.4rem + 3vw,4rem)}
.hs-frow:last-child{margin-bottom:0}
.hs-frow--rev .hs-frow__media{order:-1}
.hs-frow h3{font-family:"Montserrat", sans-serif;font-weight:600;letter-spacing:-.03em;line-height:1.12;
  font-size:clamp(1.7rem,1.2rem + 1.7vw,2.5rem);margin-bottom:.9rem;color:var(--ink)}
.hs-frow p{color:var(--mut);font-size:1rem;line-height:1.68;margin-bottom:1.2rem;max-width:48ch}
@media(max-width:820px){.hs-frow{grid-template-columns:1fr}.hs-frow--rev .hs-frow__media{order:0}}
.product-card__media{position:relative;padding:0;overflow:hidden}
.product-card__img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.product-card__media svg{display:block;width:100%;height:auto;padding:1rem 1rem 0}
.product-card__flags{position:absolute;top:.7rem;left:.7rem;display:flex;gap:.35rem;z-index:2}
/* consistent image proportions */
.hs-frow__media .hs-figure img{aspect-ratio:16/10}
.hs-gallery__main .hs-figure img{aspect-ratio:4/3;height:100%}
.hs-gallery__side .hs-figure img{aspect-ratio:16/9}
.hs-showcase .hs-shot{aspect-ratio:16/10;object-fit:cover}
/* real logo */
.brand__logo{display:block;width:auto;height:30px;flex:none}
.hsfoot .brand__logo{height:28px}

/* ---- real screenshots: show them whole, never chop ---- */
.product-card__img{aspect-ratio:2/1;object-fit:cover;object-position:center}
.hs-showcase .hs-shot{aspect-ratio:auto;object-fit:contain;border-radius:12px}
.hs-figure img,
.hs-frow__media .hs-figure img,
.hs-gallery__main .hs-figure img,
.hs-gallery__side .hs-figure img{aspect-ratio:16/10;object-fit:contain;background:var(--card-2);padding:.5rem}
.hs-gallery__main .hs-figure img{aspect-ratio:4/3;height:100%}
.hs-card .hs-shot{aspect-ratio:16/10;object-fit:contain;background:var(--card-2);padding:.4rem}

/* ==========================================================================
   AURORA - dark hero, glassmorphism, layered type, richer motion
   ========================================================================== */

/* ---------- scroll progress ---------- */
.hs-prog{position:fixed;top:0;left:0;height:2px;width:100%;z-index:200;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--cy),var(--v),var(--or));pointer-events:none}

/* ---------- dark aurora stage ---------- */
.nite{position:relative;isolation:isolate;background:var(--nite);color:var(--on-nite);overflow:clip}
.nite::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1px);background-size:3px 3px;
  mix-blend-mode:overlay}
.nite > *{position:relative;z-index:1}
.aurora{position:absolute;inset:-20% -10% auto;height:150%;z-index:0;pointer-events:none;filter:blur(70px);opacity:.85}
.aurora i{position:absolute;display:block;border-radius:50%;mix-blend-mode:screen;animation:drift 22s ease-in-out infinite}
.aurora i:nth-child(1){width:46vw;height:46vw;left:2%;top:4%;background:radial-gradient(circle,rgba(79,63,232,.85),transparent 62%)}
.aurora i:nth-child(2){width:38vw;height:38vw;right:4%;top:0%;background:radial-gradient(circle,rgba(20,201,166,.5),transparent 62%);animation-delay:-6s}
.aurora i:nth-child(3){width:34vw;height:34vw;left:32%;top:38%;background:radial-gradient(circle,rgba(110,93,240,.4),transparent 62%);animation-delay:-12s}
.aurora i:nth-child(4){width:30vw;height:30vw;right:22%;top:44%;background:radial-gradient(circle,rgba(110,93,240,.55),transparent 62%);animation-delay:-3s}
@keyframes drift{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(4%,-6%,0) scale(1.12)}
  66%{transform:translate3d(-5%,5%,0) scale(.94)}
}
/* organic streams instead of a grid - same spot every dark hero already reserves */
.nite-grid{position:absolute;inset:-6% -4%;z-index:0;pointer-events:none;opacity:.55;background-repeat:no-repeat;
  background-size:130% auto;background-position:50% 20%;animation:niteDrift 40s ease-in-out infinite;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 640'%3E%3Cdefs%3E%3ClinearGradient id='g1' x1='0' y1='0' x2='1' y2='.2'%3E%3Cstop offset='0%25' stop-color='%231DE5D7' stop-opacity='0'/%3E%3Cstop offset='45%25' stop-color='%231DE5D7' stop-opacity='.5'/%3E%3Cstop offset='100%25' stop-color='%237C6BFF' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='g2' x1='0' y1='0' x2='1' y2='.15'%3E%3Cstop offset='0%25' stop-color='%237C6BFF' stop-opacity='0'/%3E%3Cstop offset='55%25' stop-color='%23B9AEFF' stop-opacity='.4'/%3E%3Cstop offset='100%25' stop-color='%23FF8B4C' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M-60,190 C220,70 380,340 660,250 S1080,90 1300,190' fill='none' stroke='url(%23g1)' stroke-width='1.8'/%3E%3Cpath d='M-60,420 C260,500 500,270 800,370 S1160,480 1300,340' fill='none' stroke='url(%23g2)' stroke-width='1.4'/%3E%3Ccircle cx='660' cy='250' r='4.5' fill='%231DE5D7' opacity='.7'/%3E%3Ccircle cx='800' cy='370' r='4.5' fill='%23B9AEFF' opacity='.6'/%3E%3C/svg%3E");
  -webkit-mask-image:radial-gradient(72% 62% at 50% 32%,#000,transparent 76%);mask-image:radial-gradient(72% 62% at 50% 32%,#000,transparent 76%)}
@keyframes niteDrift{0%,100%{background-position:50% 20%}50%{background-position:47% 24%}}
@media(prefers-reduced-motion:reduce){.nite-grid{animation:none}}

/* ---------- glass ---------- */
.glass{background:var(--glass);border:1px solid var(--glass-ln);-webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);border-radius:var(--r-l);
  box-shadow:0 20px 60px rgba(0,0,0,.34), inset 0 1px 0 var(--glass-edge)}
/* real materials, not just fades: less transparency support -> frostier, no blur reliance */
@media (prefers-reduced-transparency:reduce){
  .glass,.glass-pill,.nav.is-stuck,.nav--dark.is-stuck{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .glass{background:rgba(20,18,30,.92)}
  .glass-pill{background:rgba(20,18,30,.92)}
  .nav.is-stuck{background:rgba(255,255,255,.98)!important}
  .nav--dark.is-stuck{background:rgba(9,8,22,.97)!important}
}
.glass-pill{display:inline-flex;align-items:center;gap:.6rem;padding:.42rem .5rem .42rem .55rem;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  font-size:.82rem;color:var(--on-nite);font-weight:400}
.glass-pill b{background:linear-gradient(120deg,var(--cy),var(--v-l));color:#08111A;font-weight:600;padding:.24rem .62rem;
  border-radius:999px;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase}
.glass-pill .dotp{width:6px;height:6px;border-radius:50%;background:var(--cy);box-shadow:0 0 0 4px rgba(29,229,215,.22);
  animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}

/* ---------- layered display type ---------- */
.layer{position:relative;display:block}
.layer__ghost{position:absolute;left:50%;top:50%;transform:translate(-50%,-54%);z-index:-1;white-space:nowrap;
  font-family:"Montserrat", sans-serif;font-weight:600;letter-spacing:-.06em;line-height:1;
  font-size:clamp(5rem,4rem + 12vw,15rem);color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.07);
  pointer-events:none;user-select:none}
.layer__ghost--ink{-webkit-text-stroke-color:rgba(14,13,27,.06)}
.hs-h1--xl{font-size:clamp(3.1rem,1.9rem + 5.4vw,6rem);font-weight:600;letter-spacing:-.045em;line-height:1.02}
.shine{background:linear-gradient(100deg,var(--cy) 0%,#8FDFCB 22%,var(--v-l) 55%,#B3A8FF 78%,var(--cy) 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 8s linear infinite;font-weight:600}
@keyframes shimmer{to{background-position:-220% 0}}
.on-nite-lead{color:var(--on-nite-mut);font-size:clamp(1rem,.95rem + .3vw,1.0rem);line-height:1.66;max-width:56ch;margin-inline:auto}
.on-nite-lead b{color:#fff;font-weight:600}

/* ---------- buttons (glass + gradient) ---------- */
.hs-btn--g{position:relative;background:linear-gradient(120deg,var(--v-l),var(--v) 55%,var(--v-d));color:#fff;overflow:hidden}
.hs-btn--g::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.4),transparent 80%);
  transform:translateX(-120%);transition:transform .7s var(--ease,cubic-bezier(.22,1,.36,1))}
.hs-btn--ghost{background:rgba(255,255,255,.08);color:var(--on-nite);border-color:rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
@media (hover:hover) and (pointer:fine){
  .hs-btn--g:hover::after{transform:translateX(120%)}
  .hs-btn--g:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(var(--v-rgb),.52)}
  .hs-btn--ghost:hover{background:rgba(255,255,255,.15);transform:translateY(-2px)}
}

/* ---------- hero stage: screenshot in glass with glow ---------- */
.stage{position:relative;margin-top:clamp(2.2rem,1.4rem + 3vw,3.6rem);perspective:1600px}
.stage__glow{position:absolute;left:50%;top:6%;width:78%;height:80%;transform:translateX(-50%);z-index:0;
  background:radial-gradient(50% 50% at 50% 50%,rgba(var(--v-rgb),.75),transparent 70%);filter:blur(60px)}
.stage__frame{position:relative;z-index:1;border-radius:var(--r-xl);padding:.55rem;
  background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.05) 40%,rgba(255,255,255,.14));
  border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 40px 100px rgba(0,0,0,.55);transform:rotateX(7deg) scale(.99);transform-origin:50% 0;
  transition:transform .9s cubic-bezier(.22,1,.36,1)}
.stage.in .stage__frame{transform:rotateX(0) scale(1)}
.stage__frame img{display:block;width:100%;border-radius:calc(var(--r-xl) - 10px)}
.stage__chip{position:absolute;z-index:2;display:flex;align-items:center;gap:.6rem;padding:.7rem .95rem;border-radius:16px;
  background:rgba(18,16,42,.62);border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  color:#fff;font-size:.82rem;font-weight:600;box-shadow:0 14px 40px rgba(0,0,0,.4);animation:hsfloat 6s ease-in-out infinite}
.stage__chip span{display:block;font-weight:400;font-size:.72rem;color:var(--on-nite-mut);margin-top:.1rem}
.stage__chip .ic{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;flex:none;color:#fff}
.stage__chip .ic svg{width:15px;height:15px}
.stage__chip--l{left:-26px;bottom:16%}
.stage__chip--r{right:-22px;top:14%;animation-direction:reverse}
@media(max-width:820px){.stage__chip{display:none}}

/* marquee on dark */
.nite .hs-trust__row span{color:rgba(255,255,255,.55)}
.nite .hs-trust__row span:hover{color:var(--cy)}
.nite .hs-trust__lab{color:rgba(255,255,255,1)}

/* ---------- spotlight cards (mouse-follow glow) ---------- */
.spot{position:relative;overflow:hidden}
.spot::before{content:"";position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .35s;pointer-events:none;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(var(--a-rgb),.16),transparent 62%)}
.spot:hover::before{opacity:1}
.spot > *{position:relative;z-index:1}

/* ---------- accent-aware pieces ---------- */
.hs-eye{color:var(--a)}
.hs-eye--pill{background:rgba(var(--a-rgb),.10);border-color:rgba(var(--a-rgb),.22)}
.hs-btn--p{background:linear-gradient(120deg,var(--a-l),var(--a));box-shadow:0 10px 28px rgba(var(--a-rgb),.34)}
.hs-btn--p:hover{background:linear-gradient(120deg,var(--a),var(--a-d))}
.hs-stat--g{background:linear-gradient(155deg,var(--a-l),var(--a) 60%,var(--a-d));box-shadow:0 18px 44px rgba(var(--a-rgb),.30)}
.hs-stat--t{background:rgba(var(--a-rgb),.08);border-color:rgba(var(--a-rgb),.2)}
.hs-stat--t .hs-stat__n{color:var(--a)}
.hs-card--g{background:linear-gradient(155deg,var(--a-l),var(--a-d))}
.hs-card__ic,.hs-item__ic,.hs-doc .ic{background:rgba(var(--a-rgb),.1);color:var(--a)}
.hs-row .ic{background:linear-gradient(135deg,var(--a-l),var(--a))}
.hs-row .tick{background:rgba(var(--a-rgb),.12);color:var(--a)}
.hs-mock__h .p{background:rgba(var(--a-rgb),.12);color:var(--a)}
.hs-bars i{background:rgba(var(--a-rgb),.18)}
.hs-bars i.on{background:linear-gradient(var(--a-l),var(--a))}
.hs-showcase{border-color:rgba(var(--a-rgb),.18);background:linear-gradient(170deg,rgba(var(--a-rgb),.09),#fff 62%)}
.hs-ticks li::before{background:rgba(var(--a-rgb),.12);border-color:rgba(var(--a-rgb),.22);color:var(--a)}
.hs-item:hover{border-color:rgba(var(--a-rgb),.3)}
.hs-item__pr{color:var(--a)}
.hs-figure:hover{border-color:rgba(var(--a-rgb),.3)}
.product-card:hover{border-color:rgba(var(--a-rgb),.3)}
.product-card__media{background:linear-gradient(165deg,rgba(var(--a-rgb),.10),#fff)}
.product-card .price-sale,.product-card .link-arrow{color:var(--a)}
.badge-new{background:rgba(var(--a-rgb),.12);color:var(--a);border-color:rgba(var(--a-rgb),.24)}
.hs-conn__l{background:linear-gradient(rgba(var(--a-rgb),.04),rgba(var(--a-rgb),.55))}
.hs-conn__d{background:var(--a);box-shadow:0 0 0 5px rgba(var(--a-rgb),.16)}
.hs-chip{color:var(--a)}
.hs-cloud__bg{background:
  radial-gradient(56% 60% at 50% 100%,rgba(var(--a-rgb),.36),transparent 72%),
  radial-gradient(36% 42% at 20% 96%,rgba(29,229,215,.24),transparent 74%),
  radial-gradient(34% 40% at 82% 94%,rgba(244,81,30,.20),transparent 74%)}
.hs-pagehead__glow{background:radial-gradient(50% 55% at 50% 50%,rgba(var(--a-rgb),.22),transparent 70%)}

/* header / footer on the new palette */
.nav__ghost:hover{color:var(--or-d)}
.hsfoot{background:linear-gradient(180deg,#fff,var(--card-2))}
.hsfoot__col a:hover{color:var(--v)}
.hsfoot__cta{background:linear-gradient(150deg,var(--v-l),var(--v-d));box-shadow:0 18px 44px rgba(91,75,255,.24)}
.hsfoot__cta .hs-btn{color:var(--v-d)}
.hsfoot__bar a:hover{color:var(--v)}
.hs-rate svg{color:var(--or)}

/* ---------- reveal: a quiet rise, nothing that reads as "still loading" ---------- */
[data-hs]{opacity:0;transform:translateY(16px);
  transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1)}
[data-hs].in{opacity:1;transform:none}
[data-hs-d="1"]{transition-delay:.06s}[data-hs-d="2"]{transition-delay:.12s}[data-hs-d="3"]{transition-delay:.18s}
[data-hs-d="4"]{transition-delay:.24s}[data-hs-d="5"]{transition-delay:.3s}
@media(prefers-reduced-motion:reduce){
  [data-hs]{opacity:1;transform:none;filter:none;transition:none}
  .aurora i,.shine,.glass-pill .dotp,.stage__chip{animation:none}
  .stage__frame{transform:none}
  .hs-prog{display:none}
}
@media(max-width:640px){
  .layer__ghost{display:none}
  .stage__frame{transform:none;padding:.35rem}
}

/* nav over a dark hero (light text) - whether resting transparent or riding
   the hero in its scrolled/glass state, the light-on-dark styling is the same */
.nav--dark:not(.is-stuck){background:transparent;border-bottom-color:rgba(255,255,255,.08)}
.nav--dark:not(.is-stuck) .nav__links a,
.nav--dark.is-stuck.nav--on-hero .nav__links a{color:rgba(255,255,255,1)}
.nav--dark:not(.is-stuck) .nav__links a:hover,
.nav--dark.is-stuck.nav--on-hero .nav__links a:hover{color:black}
.nav--dark:not(.is-stuck) .nav__links a.is-active,
.nav--dark.is-stuck.nav--on-hero .nav__links a.is-active{color:black}
.nav--dark:not(.is-stuck) .nav__ghost,
.nav--dark.is-stuck.nav--on-hero .nav__ghost{color:rgba(255,255,255,1)}
.nav--dark:not(.is-stuck) .nav__ghost:hover,
.nav--dark.is-stuck.nav--on-hero .nav__ghost:hover{color:var(--cy)}
.nav--dark:not(.is-stuck) .nav__toggle,
.nav--dark.is-stuck.nav--on-hero .nav__toggle{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff}

/* personas now carry real screenshots */
.hs-people{grid-template-columns:repeat(4,1fr)}
.hs-person{display:block;position:relative;padding:0;border-radius:var(--r-l);overflow:hidden;text-decoration:none;
  background:linear-gradient(160deg,rgba(var(--a-rgb),.14),var(--card-2));border:1px solid var(--ln);
  min-height:clamp(210px,24vw,290px)}
.hs-person img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top;
  transition:transform .6s cubic-bezier(.22,1,.36,1)}
.hs-person:hover img{transform:scale(1.06)}
.hs-person::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(10,9,24,.55));z-index:1}
.hs-person__tag{position:absolute;left:.9rem;bottom:.9rem;z-index:2;background:rgba(255,255,255,.94);border-radius:999px;
  padding:.4rem .9rem;font-size:.78rem;font-weight:600;color:var(--ink);box-shadow:var(--sh-s)}
.hs-person--q{background:linear-gradient(155deg,var(--v-l),var(--v-d));border-color:transparent;color:#fff;
  display:flex;flex-direction:column;justify-content:center;padding:clamp(1.2rem,1rem + 1.2vw,1.8rem)}
.hs-person--q::after{display:none}
@media(max-width:1000px){.hs-people{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.hs-people{grid-template-columns:1fr}}
/* persona cards: show the screenshot, not a sliver */
.hs-person{min-height:clamp(170px,19vw,230px)}
.hs-person img{object-position:center top;object-fit:cover}
.hs-person--q{min-height:clamp(170px,19vw,230px)}
/* platform tiles pulled inside the viewport */
.hs-t1{top:6%;left:18%}.hs-t2{top: 31%;
    right: 22%;}.hs-t3{top:44%;left:12%}
.hs-t4{bottom:12%;left:28%}.hs-t5{    bottom: 12%;
    right: 9%;}.hs-t6{top:46%;right:2%}
.hs-t7{    top: 9%;
    right: 8%;}.hs-t8{bottom:54%;left:27%}
.hs-scatter{overflow:clip}
/* drawer unfolds directly beneath the full-width bar - edge to edge, no floating/boxed feel */
.nav__drawer{background:rgba(255,255,255,.98);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--ln)}
.nav:not(.is-stuck) .nav__drawer{border-radius:0 0 26px 26px;border-bottom:0;overflow:hidden}
.nav__drawer .pad{    background: white;
    border: 0;
    border-radius: 20px;
    margin: 12px;}
.nav--dark .nav__drawer{background:rgba(10,9,24,.96);border-bottom-color:rgba(255,255,255,.1)}
.nav--dark .nav__drawer a{color:black;font-size:14px;}

/* heading never clips its descenders */
.hs-h,.hs-h1,.hs-h2,.hs-h3{padding-bottom:.08em}
.hs-dome{padding-top:clamp(1rem,.6rem + 1.5vw,2rem)}
.hs-dome__stage{margin-bottom:clamp(2rem,1.4rem + 2.5vw,3.4rem)}

/* ==========================================================================
   STORY / TIMELINE (about)
   ========================================================================== */
.story{max-width:66ch;margin:0 auto}
.story p{color:var(--ink-2);font-size:clamp(1.02rem,.98rem + .3vw,1.15rem);line-height:1.78;margin-bottom:1.5rem}
.story__lead{font-family:"Montserrat", sans-serif;font-weight:400;letter-spacing:-.02em;
  font-size:clamp(1.35rem,1.1rem + 1.1vw,1.85rem) !important;line-height:1.4 !important;color:var(--ink) !important;
  margin-bottom:2rem !important}
.story__q{margin:2.2rem 0;padding:1.5rem 1.7rem;border-radius:var(--r-l);position:relative;
  background:linear-gradient(150deg,rgba(var(--a-rgb),.09),var(--card-2));border:1px solid rgba(var(--a-rgb),.18);
  font-family:"Montserrat", sans-serif;font-weight:400;font-size:clamp(1.1rem,1rem + .6vw,1.4rem);line-height:1.5;
  letter-spacing:-.02em;color:var(--ink)}
.story__q::before{content:"";position:absolute;left:0;top:14%;bottom:14%;width:3px;border-radius:3px;
  background:linear-gradient(var(--a-l),var(--a))}

/* Timeline: the line and each dot are derived from the SAME two variables
   (column width + gap), so the dot always lands exactly centered on the
   line - on every breakpoint, not just the one it happened to be tuned for. */
.tl{--tl-col:clamp(96px,14vw,168px);--tl-gap:clamp(1.6rem,1rem + 2.5vw,3rem);--tl-dot:11px;--tl-mobile-line:6px;
  max-width:820px;margin:0 auto;position:relative}
.tl::before{content:"";position:absolute;left:calc(var(--tl-col) + (var(--tl-gap) / 2));top:8px;bottom:8px;width:1px;
  background:linear-gradient(rgba(var(--a-rgb),.5),rgba(var(--a-rgb),.06))}
.tl__row{display:grid;grid-template-columns:var(--tl-col) 1fr;gap:var(--tl-gap);
  padding-bottom:clamp(1.8rem,1.2rem + 2vw,2.8rem);padding-right:1.5rem;position:relative}
.tl__row:last-child{padding-bottom:0}
.tl__k{text-align:right;font-size:.82rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--faint);padding-top:.35rem}
.tl__v{position:relative}
.tl__v::before{content:"";position:absolute;
  left:calc(-1 * (var(--tl-gap) / 2) - (var(--tl-dot) / 2));top:.6rem;
  width:var(--tl-dot);height:var(--tl-dot);border-radius:50%;background:var(--a);
  box-shadow:0 0 0 5px rgba(var(--a-rgb),.14)}
.tl__v h3{font-family:"Montserrat", sans-serif;font-weight:600;font-size:clamp(1.12rem,1rem + .5vw,1.35rem);
  letter-spacing:-.02em;margin-bottom:.4rem;color:var(--ink)}
.tl__v p{color:var(--mut);font-size:.95rem;line-height:1.65}
@media(max-width:620px){
  .tl::before{left:var(--tl-mobile-line)}
  .tl__row{grid-template-columns:1fr;gap:.35rem;padding-left:1.6rem;padding-right:0}
  .tl__k{text-align:left}
  .tl__v::before{left:calc(var(--tl-mobile-line) - 1.6rem)}
}

/* FAQ groups + support steps */
.faq-group{display:grid;grid-template-columns:clamp(140px,18vw,210px) 1fr;gap:clamp(1.2rem,1rem + 2vw,2.6rem);
  padding-bottom:clamp(1.8rem,1.2rem + 2vw,2.8rem);margin-bottom:clamp(1.8rem,1.2rem + 2vw,2.8rem);
  border-bottom:1px solid var(--ln)}
.faq-group:last-of-type{border-bottom:0}
.faq-group__k{position:sticky;top:calc(var(--nav-h) + 26px);align-self:start}
.faq-group__k .n{display:block;font-family:"Montserrat", sans-serif;font-weight:600;font-size:2.2rem;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(var(--a-rgb),.35);margin-bottom:.35rem}
.faq-group__k h2{font-family:"Montserrat", sans-serif;font-weight:600;font-size:1.2rem;letter-spacing:-.02em;color:var(--ink)}
.hs-help{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem;justify-content:space-between;
  padding:1.5rem 1.7rem;border-radius:var(--r-l);background:linear-gradient(150deg,rgba(var(--a-rgb),.09),var(--card-2));
  border:1px solid rgba(var(--a-rgb),.18)}
.hs-help h3{font-family:"Montserrat", sans-serif;font-weight:600;font-size:1.15rem;margin-bottom:.3rem;color:var(--ink)}
.hs-help p{color:var(--mut);font-size:.92rem}
.hs-help p a{color:var(--a);font-weight:600}
.hs-steps{display:grid;gap:1rem}
.hs-step{display:flex;gap:1.1rem;align-items:flex-start;padding:1.2rem 1.3rem;border-radius:var(--r);
  background:var(--card);border:1px solid var(--ln);box-shadow:var(--sh-s)}
.hs-step__n{font-family:"Montserrat", sans-serif;font-weight:600;font-size:1.6rem;line-height:1;color:transparent;
  -webkit-text-stroke:1px rgba(var(--a-rgb),.45);flex:none}
.hs-step h3{font-family:"Montserrat", sans-serif;font-weight:600;font-size:1.08rem;margin-bottom:.3rem;color:var(--ink)}
.hs-step p{color:var(--mut);font-size:.92rem;line-height:1.6}
.hs-step b{color:var(--ink-2)}
@media(max-width:760px){.faq-group{grid-template-columns:1fr;gap:.9rem}.faq-group__k{position:static}
  .faq-group__k .n{display:inline-block;margin-right:.5rem;font-size:1.4rem}}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ftr{position:relative;isolation:isolate;padding-top:clamp(3rem,2rem + 4vw,5rem);}
.ftr__call{display:grid;grid-template-columns:1.2fr auto;gap:clamp(1.4rem,1rem + 3vw,3rem);align-items:center;
  padding-bottom:clamp(2.4rem,1.6rem + 3vw,3.6rem);border-bottom:1px solid rgba(255,255,255,.1)}
.ftr__call h2{font-family:"Montserrat", sans-serif;font-weight:600;letter-spacing:-.04em;line-height:1.08;color:#fff;
  font-size:clamp(1.9rem,1.3rem + 2.6vw,3.2rem);margin-bottom:.7rem}
.ftr__call p{color:var(--on-nite-mut);font-size:1rem;line-height:1.6;max-width:44ch}
.ftr__grid{display:grid;grid-template-columns:1.6fr 1.2fr 1fr 1fr;gap:clamp(1.6rem,1rem + 3vw,3.4rem);
  padding-block:clamp(2.2rem,1.6rem + 2.6vw,3.4rem)}
.ftr__brand .brand{color:#fff;margin-bottom:1rem}
.ftr__brand .brand em{color:var(--cy)}
.ftr__brand p{color:var(--on-nite-mut);font-size:.92rem;line-height:1.65;max-width:36ch;margin-bottom:1.2rem}
.ftr__marks{display:flex;flex-wrap:wrap;gap:.5rem}
.ftr__marks span{display:inline-flex;align-items:center;gap:.4rem;padding:.36rem .75rem;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);color:rgba(255,255,255,.82);
  font-size:.78rem;font-weight:600}
.ftr__marks svg{width:14px;height:14px;color:var(--cy)}
.ftr__col h4{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,1);
  font-weight:600;margin-bottom:1rem}
.ftr__col a{display:block;color:rgba(255,255,255,1);font-size:.93rem;text-decoration:none;padding:.34rem 0;
  transition:color .2s,transform .2s}
.ftr__col a:hover{color:var(--cy);transform:translateX(3px)}
.ftr__bar{border-top:1px solid rgba(255,255,255,.1);padding-block:1.4rem;display:flex;flex-wrap:wrap;
  gap:.6rem 1.6rem;justify-content:space-between;color:rgba(255,255,255,.8);font-size:.83rem}
@media(max-width:900px){.ftr__call{grid-template-columns:1fr}.ftr__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ftr__grid{grid-template-columns:1fr;gap:1.8rem}}

/* ==========================================================================
   PRODUCT PAGE (distinct from the homepage)
   ========================================================================== */
.pdx{position:relative;isolation:isolate;overflow:clip;
  padding-block:clamp(1.4rem,1rem + 2.5vw,3rem) clamp(2.6rem,1.8rem + 3vw,4.4rem)}
.pdx__grid{display:grid;grid-template-columns:1.02fr 1.18fr;gap:clamp(1.8rem,1.2rem + 3.4vw,4rem);align-items:center;
  margin-top:clamp(1rem,.6rem + 1.5vw,1.8rem)}
.pdx__title{font-family:"Montserrat", sans-serif;font-weight:600;letter-spacing:-.045em;line-height:1.03;color:#fff;
  font-size:clamp(2.5rem,1.7rem + 3.4vw,4.4rem);margin:1.1rem 0 1rem;padding-bottom:.08em}
.pdx__title .layer__ghost{left:0;transform:translate(-6%,-52%);font-size:clamp(4.5rem,3rem + 9vw,11rem)}
.pdx__hl{display:grid;gap:.62rem;margin:1.6rem 0 1.8rem}
.pdx__hl li{display:flex;gap:.65rem;align-items:flex-start;color:rgba(255,255,255,.86);font-size:.96rem;line-height:1.5}
.pdx__hl svg{width:18px;height:18px;color:var(--cy);flex:none;margin-top:2px}
.pdx__buy{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;justify-content:space-between;
  padding:1.1rem 1.2rem;border-radius:var(--r-l)}
.pdx__price{line-height:1.1}
.pdx__price b{font-family:"Montserrat", sans-serif;font-weight:400;font-size:2.1rem;letter-spacing:-.04em;color:#fff}
.pdx__price s{color:rgba(255,255,255,.42);font-size:1rem;margin-right:.5rem}
.pdx__price span{display:block;font-size:.78rem;color:var(--on-nite-mut);margin-top:.25rem}
.pdx__trust{display:flex;flex-wrap:wrap;gap:.6rem 1.3rem;margin-top:1.2rem;color:var(--on-nite-mut);font-size:.86rem}
.pdx__trust span{display:flex;align-items:center;gap:.45rem}
.pdx__trust svg{width:16px;height:16px;color:var(--cy)}
@media(max-width:940px){.pdx__grid{grid-template-columns:1fr}.pdx__media{order:-1}}

/* sticky in-page nav */
.pdnav{position:sticky;top:calc(var(--nav-h) + 20px);z-index:40;margin-block:0 clamp(1rem,.6rem + 1.5vw,2rem);margin-top:20px;}
.pdnav .wrap,.pdnav .hs-wrap{display:flex;align-items:center;gap:1rem;
  background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border:1px solid var(--ln);border-radius:999px;padding:.5rem .5rem .5rem 1.2rem;box-shadow:var(--sh-m);
  max-width:1160px}
.pdnav__name{font-weight:600;font-size:.92rem;color:var(--ink);white-space:nowrap}
.pdnav__links{display:flex;gap:.2rem;margin-left:auto}
.pdnav__links a{padding:.5rem .9rem;border-radius:999px;font-size:.88rem;font-weight:400;color:var(--mut);
  text-decoration:none;transition:color .2s,background .2s}
.pdnav__links a:hover,.pdnav__links a.is-on{color:var(--a);background:rgba(var(--a-rgb),.1)}
.hs-btn--sm{padding:.6rem 1.1rem;font-size:.85rem}
@media(max-width:820px){.pdnav__name{display:none}.pdnav__links{margin-left:0;overflow-x:auto}}
@media(max-width:560px){.pdnav{display:none}}

/* feature tabs */
.tabs{display:grid;grid-template-columns:.92fr 1.28fr;gap:clamp(1.2rem,1rem + 2.4vw,2.6rem);align-items:start}
.tabs__list{display:grid;gap:.5rem;position:sticky;top:calc(var(--nav-h) + 96px)}
.tabs__t{display:flex;gap:.9rem;align-items:flex-start;text-align:left;width:100%;cursor:pointer;
  padding:1rem 1.1rem;border-radius:16px;border:1px solid var(--ln);background:var(--card);box-shadow:var(--sh-s);
  transition:border-color .25s,background .25s,transform .25s}
.tabs__t:hover{transform:translateX(3px);border-color:rgba(var(--a-rgb),.28)}
.tabs__t .n{font-family:"Montserrat", sans-serif;font-weight:600;font-size:1.2rem;line-height:1.2;color:transparent;
  -webkit-text-stroke:1px rgba(var(--a-rgb),.45);flex:none}
.tabs__t .b{font-weight:600;font-size:.98rem;color:var(--ink);letter-spacing:-.01em}
.tabs__t .b span{display:block;font-weight:400;font-size:.85rem;color:var(--mut);margin-top:.25rem;line-height:1.5;
  max-height:0;overflow:hidden;opacity:0;transition:max-height .4s ease,opacity .3s ease,margin .3s}
.tabs__t.is-on{background:linear-gradient(150deg,rgba(var(--a-rgb),.1),var(--card));border-color:rgba(var(--a-rgb),.3)}
.tabs__t.is-on .n{-webkit-text-stroke-color:var(--a);color:transparent}
.tabs__t.is-on .b span{max-height:8rem;opacity:1}
.tabs__panes{position:relative;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--ln);
  background:linear-gradient(160deg,rgba(var(--a-rgb),.10),var(--card-2));box-shadow:var(--sh-m);padding:clamp(.6rem,.4rem + 1vw,1.1rem)}
.tabs__p{position:absolute;inset:clamp(.6rem,.4rem + 1vw,1.1rem);opacity:0;transform:scale(.985);
  transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1);pointer-events:none;margin:0}
.tabs__p.is-on{position:relative;inset:auto;opacity:1;transform:none;pointer-events:auto}
.tabs__p img{display:block;width:100%;aspect-ratio:16/10;object-fit:contain;background:var(--card);
  border-radius:16px;border:1px solid var(--ln)}
.tabs__p figcaption{margin-top:.7rem;font-size:.85rem;font-weight:600;color:var(--ink-2);text-align:center}
@media(max-width:940px){.tabs{grid-template-columns:1fr}.tabs__list{position:static}}

/* screens strip */
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(12px,1.2vw,18px)}
.shots .hs-figure img{aspect-ratio:16/10;object-fit:contain;background:var(--card-2);padding:.5rem}
/* legal / prose pages on the new palette */
.callout,.callout.tip{background:linear-gradient(150deg,rgba(var(--a-rgb),.09),var(--card-2));
  border:1px solid rgba(var(--a-rgb),.2);border-radius:var(--r);color:var(--ink-2)}
.callout strong{color:var(--ink)}
.doc-nav a{color:var(--mut);border-radius:10px;padding:.45rem .7rem;text-decoration:none;display:block;transition:.2s}
.doc-nav a:hover{color:var(--a);background:rgba(var(--a-rgb),.08)}
.doc-shell .prose h2{font-family:"Montserrat", sans-serif;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.doc-shell .prose p,.doc-shell .prose li{color:var(--ink-2);line-height:1.75}
.doc-shell .prose a{color:var(--a)}
.doc-nav{top:calc(var(--nav-h) + 40px)}