/* ==========================================================================
   Helios Labs replica — HOMEPAGE SECTIONS
   Measured at 1440 from source-cdp/pages/home.html + _shots/1440-home.png.
   Section padding: hero py-14/lg:py-20 · catalog 64px · hplcs 56px ·
   tools 36px · faq py-20/lg:py-28.
   ========================================================================== */

/* ==========================================================================
   1. HERO
   ========================================================================== */
.hl-hero__glow{right:-10%;top:50%;transform:translateY(-50%)}
.hl-hero__inner{
  display:grid;grid-template-columns:1fr;align-items:center;gap:40px;
  padding-top:56px;padding-bottom:56px;
}
@media (min-width:1024px){
  .hl-hero__inner{grid-template-columns:1.05fr .95fr;gap:64px;padding-top:80px;padding-bottom:80px}
}
.hl-hero__copy{order:2}
.hl-hero__railwrap{order:1;position:relative}
@media (min-width:1024px){.hl-hero__copy{order:1}.hl-hero__railwrap{order:2}}

.hl-hero__kicker{
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin:0;
  font-family:var(--hl-font-mono);font-size:.68rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--hl-bone-85);
}
@media (min-width:640px){.hl-hero__kicker{font-size:.72rem}}
.hl-hero__kicker .sep{color:var(--hl-glacier)}
.hl-hero__h1{margin-top:20px}
.hl-hero__lede{margin-top:24px;max-width:38ch;font-family:var(--hl-font-body);font-size:1rem;line-height:1.625;color:var(--hl-stone)}
@media (min-width:640px){.hl-hero__lede{font-size:1.125rem}}
.hl-hero__ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:32px}
.hl-hero__stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  max-width:32rem;margin:40px 0 0;padding-top:24px;
  border-top:1px solid var(--hl-hairline);
}
.hl-hero__stats dt{
  font-family:var(--hl-font-mono);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--hl-faint);
}
.hl-hero__stats dd{
  margin:6px 0 0;font-family:var(--hl-font-condensed);
  font-size:clamp(1.1rem,2.2vw,1.6rem);line-height:1;text-transform:uppercase;
  color:var(--hl-bone);font-variant-numeric:tabular-nums;
}

.hl-hero__plate{
  position:relative;margin:0 auto;aspect-ratio:1;width:100%;max-width:30rem;
  border:1px solid var(--hl-hairline);background:var(--hl-panel);
}
.hl-hero__counter{
  position:absolute;right:20px;top:16px;z-index:20;
  font-family:var(--hl-font-mono);font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--hl-faint);
}
.hl-hero__slide{
  position:absolute;inset:0;padding:40px;opacity:0;
  transition:opacity .7s ease-out;
}
@media (min-width:640px){.hl-hero__slide{padding:48px}}
.hl-hero__slide.is-active{opacity:1}
.hl-hero__slide img{position:absolute;inset:0;height:100%;width:100%;object-fit:contain;mix-blend-mode:screen}
.hl-hero__hit{position:absolute;inset:0;z-index:10}
.hl-hero__empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.hl-hero__empty img{opacity:.3;height:48px;width:48px}
.hl-hero__plate-bar{
  pointer-events:none;position:absolute;left:0;right:0;bottom:0;z-index:20;
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  border-top:1px solid var(--hl-hairline);background:rgba(5,5,4,.7);
  backdrop-filter:blur(4px);padding:14px 20px;
}
.hl-hero__plate-meta{min-width:0}
.hl-hero__plate-name{
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--hl-font-condensed);font-size:1.05rem;line-height:1;
  letter-spacing:.01em;text-transform:uppercase;color:var(--hl-bone);
}
.hl-hero__plate-spec{
  display:block;margin-top:6px;font-family:var(--hl-font-mono);font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--hl-stone);
}
.hl-hero__plate-arrow{flex-shrink:0;font-family:var(--hl-font-mono);font-size:.7rem;color:var(--hl-glacier)}
.hl-hero__dots{display:flex;justify-content:center;gap:6px;margin-top:16px}
.hl-hero__dots button{height:3px;width:32px;padding:0;cursor:pointer;background:rgba(255,255,255,.15);transition:background-color .2s}
.hl-hero__dots button:hover{background:rgba(255,255,255,.3)}
.hl-hero__dots button[aria-current="true"]{background:var(--hl-glacier)}

/* ==========================================================================
   2. THE CATALOG
   ========================================================================== */
.hl-catalog{padding-top:48px;padding-bottom:48px}
@media (min-width:1024px){.hl-catalog{padding-top:64px;padding-bottom:64px}}
.hl-catalog .hl-corner{
  pointer-events:none;position:absolute;z-index:0;user-select:none;opacity:.7;
  width:24vw;max-width:260px;
}
.hl-catalog .hl-corner--tl{left:0;top:0}
.hl-catalog .hl-corner--tr{right:0;top:0}
.hl-catalog .hl-corner--bl{left:0;bottom:0;width:26vw;max-width:300px}
.hl-catalog .hl-corner--br{right:0;bottom:0;width:26vw;max-width:300px}
.hl-catalog__inner{position:relative;z-index:10}
.hl-catalog__head{display:flex;flex-direction:column;gap:24px}
@media (min-width:1024px){.hl-catalog__head{flex-direction:row;align-items:flex-end;justify-content:space-between}}
.hl-catalog__h2{margin-top:12px}
.hl-catalog__aside{display:flex;align-items:center;justify-content:space-between;gap:32px}
@media (min-width:1024px){.hl-catalog__aside{justify-content:flex-start}}
.hl-catalog__sub{max-width:24rem}
.hl-catalog__arrows{flex-shrink:0;display:flex;align-items:center;gap:10px}
@media (min-width:1024px){.hl-catalog__arrows{gap:12px}}
.hl-round{
  display:inline-flex;align-items:center;justify-content:center;
  height:48px;width:48px;border-radius:9999px;cursor:pointer;
  border:1px solid rgba(140,134,124,.25);color:var(--hl-bone);
  font-size:1.25rem;transition:border-color .2s,color .2s,opacity .2s;
}
.hl-round:hover{border-color:var(--hl-glacier);color:var(--hl-glacier)}
.hl-round:disabled{opacity:.3;cursor:default}
@media (min-width:1024px){.hl-round{height:4.25rem;width:4.25rem;font-size:1.5rem}}

.hl-catalog__railwrap{position:relative;margin-top:32px}
.hl-catalog__rail{
  display:flex;align-items:stretch;gap:20px;
  margin:0 -4px;padding:20px 4px 24px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
}
.hl-catalog__rail::-webkit-scrollbar{display:none}
.hl-catalog__cell{display:flex;flex-shrink:0;scroll-snap-align:start;width:82vw;max-width:24rem}
@media (min-width:640px){.hl-catalog__cell{width:21rem}}
@media (min-width:1024px){.hl-catalog__cell{width:calc((100% - 3.75rem) / 4);max-width:none}}
.hl-catalog__empty{color:var(--hl-faint);font-size:.72rem;letter-spacing:.2em;padding:64px 0}


/* ==========================================================================
   3. THE HPLCS  (#standard)
   ========================================================================== */
.hl-arc{pointer-events:none;position:absolute;left:0;right:0;top:0;height:20px;width:100%}
.hl-hplc{padding-top:48px;padding-bottom:48px;scroll-margin-top:112px}
@media (min-width:1024px){.hl-hplc{padding-top:56px;padding-bottom:56px}}
.hl-hplc__inner{position:relative;z-index:10}
.hl-hplc__eyebrow{text-align:center}
.hl-hplc__h2{margin-top:10px;text-align:center}
.hl-hplc__sub{margin:12px auto 0;max-width:42rem;text-align:center}
.hl-hplc__grid{display:grid;grid-template-columns:1fr;align-items:stretch;gap:16px;margin-top:36px}
@media (min-width:640px){.hl-hplc__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
@media (min-width:1280px){.hl-hplc__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.hl-hplc__card{
  display:flex;flex-direction:column;height:100%;min-width:0;
  border:1px solid var(--hl-hairline);background:rgba(255,255,255,.02);padding:20px;
}
@media (min-width:640px){.hl-hplc__card{padding:24px}}
.hl-hplc__task{margin:0;font-family:var(--hl-font-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--hl-stone)}
.hl-hplc__task .dim{color:var(--hl-faint)}
.hl-hplc__name{
  margin:8px 0 0;min-height:2.4em;overflow-wrap:anywhere;
  font-family:var(--hl-font-condensed);font-weight:400;
  font-size:clamp(1.15rem,2vw,1.45rem);line-height:1.15;letter-spacing:.01em;
  text-transform:uppercase;color:var(--hl-bone);
}
.hl-hplc__headline{
  margin:12px 0 0;font-family:var(--hl-font-condensed);
  font-size:clamp(2rem,3.4vw,2.6rem);line-height:1;text-transform:uppercase;color:var(--hl-glacier);
}
.hl-hplc__headlabel{margin:4px 0 0;font-family:var(--hl-font-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--hl-faint)}
.hl-hplc__rows{margin:16px 0 0;border-top:1px solid rgba(42,39,35,.6)}
.hl-hplc__rows > div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-bottom:1px solid rgba(42,39,35,.6);padding:8px 0}
.hl-hplc__rows dt{flex-shrink:0;font-family:var(--hl-font-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--hl-stone)}
.hl-hplc__rows dd{margin:0;min-width:0;overflow-wrap:anywhere;text-align:right;font-family:var(--hl-font-mono);font-size:.82rem;letter-spacing:.04em;color:var(--hl-bone)}
.hl-hplc__foot{margin-top:auto;padding-top:20px}
.hl-hplc__keylabel{margin:0;font-family:var(--hl-font-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--hl-stone)}
.hl-hplc__key{margin:4px 0 0;overflow-wrap:anywhere;font-family:var(--hl-font-mono);font-size:.86rem;letter-spacing:.1em;color:var(--hl-bone)}
.hl-hplc__links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:12px;
  font-family:var(--hl-font-mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase}
.hl-hplc__links a{color:var(--hl-glacier);transition:color .2s}
.hl-hplc__links a:hover{color:var(--hl-glacier-hover)}
.hl-hplc__links a.muted{color:var(--hl-stone)}
.hl-hplc__links a.muted:hover{color:var(--hl-bone)}

.hl-hplc__verify{margin:40px auto 0;max-width:42rem}
.hl-hplc__verifylabel{display:block;font-family:var(--hl-font-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--hl-stone)}
.hl-hplc__verifysub{margin:8px 0 0;font-family:var(--hl-font-body);font-size:.9rem;color:var(--hl-faint)}
.hl-hplc__verifyform{margin-top:12px}
.hl-hplc__verifyform input{
  width:100%;background:transparent;border:1px solid var(--hl-hairline);padding:12px 16px;
  font-family:var(--hl-font-mono);font-size:.8rem;letter-spacing:.04em;color:var(--hl-bone);
}
.hl-hplc__verifyform input::placeholder{color:var(--hl-faint)}
.hl-hplc__verifyform input:focus{border-color:var(--hl-glacier);outline:none}
.hl-hplc__results{margin-top:8px}
.hl-hplc__results a{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  border:1px solid var(--hl-hairline);border-top:0;padding:10px 16px;
  font-family:var(--hl-font-mono);font-size:.74rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--hl-bone);transition:border-color .2s,color .2s;
}
.hl-hplc__results a:first-child{border-top:1px solid var(--hl-hairline)}
.hl-hplc__results a:hover{color:var(--hl-glacier);border-color:rgba(252,85,1,.4)}
.hl-hplc__results .k{color:var(--hl-faint)}
.hl-hplc__more{margin:32px 0 0;text-align:center}

/* ==========================================================================
   4. THE TOOLS  (#tools)
   ========================================================================== */
.hl-tools{padding-top:48px;padding-bottom:48px;scroll-margin-top:112px}
@media (min-width:1024px){.hl-tools{padding-top:36px;padding-bottom:36px}}
.hl-tools__inner{position:relative;z-index:10}
.hl-tools__h2{margin-top:10px}
.hl-tools__sub{margin-top:12px}
.hl-tools__grid{display:grid;gap:24px;margin-top:28px}
@media (min-width:1024px){.hl-tools__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hl-toolcard{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--hl-r-2xl);border:1px solid var(--hl-hairline);
  background:var(--hl-tool);padding:28px;
}
@media (min-width:640px){.hl-toolcard{padding:32px 36px}}
@media (min-width:1024px){.hl-toolcard{padding:36px 40px}}
.hl-toolcard__label{margin:0;font-family:var(--hl-font-mono);font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;color:var(--hl-bone)}
.hl-syringe{margin-top:20px;width:100%;color:var(--hl-stone)}
.hl-syringe .s25{color:rgba(140,134,124,.25)}
.hl-syringe .s35{color:rgba(140,134,124,.35)}
.hl-syringe .s45{color:rgba(140,134,124,.45)}
.hl-syringe .s50{color:rgba(140,134,124,.5)}
.hl-syringe .s55{color:rgba(140,134,124,.55)}
.hl-syringe .s65{color:rgba(140,134,124,.65)}
.hl-syringe .tick{font-family:var(--hl-font-mono);font-size:15px;fill:rgba(247,242,232,.7)}
.hl-toolcard__specs{
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:24px 0 0;
  font-family:var(--hl-font-mono);font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--hl-stone);
}
.hl-toolcard__specs > span{display:flex;align-items:center;gap:10px}
.hl-toolcard__specs .sep{color:var(--hl-glacier)}
.hl-toolcard__specs .v{color:var(--hl-bone-80)}
.hl-toolcard__draw{
  display:flex;align-items:baseline;gap:12px;margin:16px 0 0;padding-top:20px;
  border-top:1px solid var(--hl-hairline);
}
.hl-toolcard__draw .lbl{font-family:var(--hl-font-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--hl-stone)}
.hl-toolcard__draw .val{font-family:var(--hl-font-condensed);font-size:clamp(2rem,4vw,2.75rem);line-height:1;letter-spacing:.01em;text-transform:uppercase;color:var(--hl-glacier)}
.hl-toolcard__cta{margin-top:24px;align-self:flex-start}
.hl-toolcard__cta--bottom{margin-top:auto;padding-top:24px}

.hl-chat{margin-top:24px;display:flex;flex-direction:column;gap:16px}
.hl-chat__row{display:flex;align-items:flex-start;gap:14px}
.hl-chat__ava{display:flex;height:44px;width:44px;flex-shrink:0;align-items:center;justify-content:center}
.hl-chat__ava--user{border-radius:9999px;border:1px solid rgba(140,134,124,.4);color:var(--hl-stone)}
.hl-chat__ava--user .ic-6{height:24px;width:24px}
.hl-chat__ava--bot{overflow:hidden;border-radius:var(--hl-r-lg);border:1px solid rgba(252,85,1,.6);background:var(--hl-granite)}
.hl-chat__ava--bot img{height:28px;width:28px}
.hl-chat__bubble{
  min-width:0;flex:1;border-radius:var(--hl-r-2xl);
  border:1px solid rgba(140,134,124,.25);background:rgba(255,255,255,.02);padding:16px 20px;
}
.hl-chat__bubble--bot{border-color:rgba(252,85,1,.7);background:var(--hl-panel)}
.hl-chat__bubble p{margin:0;font-family:var(--hl-font-body);font-size:1.02rem;line-height:1.625;color:var(--hl-bone)}
.hl-chat__time{margin-top:6px!important;text-align:right;font-family:var(--hl-font-mono)!important;font-size:.68rem!important;letter-spacing:.1em;color:var(--hl-stone)!important}
.hl-toolcard__trained{display:flex;align-items:center;gap:12px;margin-top:24px}
.hl-toolcard__trained .ring{height:16px;width:16px;flex-shrink:0;border-radius:9999px;border:1px solid var(--hl-glacier)}
.hl-toolcard__trained span:last-child{font-family:var(--hl-font-mono);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--hl-bone-80)}

/* ==========================================================================
   SEO CONTENT ZONE — sits JUST BEFORE the FAQ (LOCKED standard #6)
   ========================================================================== */
.hl-seo{padding-top:56px;padding-bottom:56px}
@media (min-width:1024px){.hl-seo{padding-top:80px;padding-bottom:80px}}
.hl-seo__glow{left:-16rem;bottom:-20rem;opacity:.1}
.hl-seo__inner{position:relative;z-index:10}
.hl-seo .hl-prose{max-width:var(--hl-max-faq);margin:0 auto}

/* ==========================================================================
   5. FAQ  (#faq)
   ========================================================================== */
.hl-faq{scroll-margin-top:112px;color:var(--hl-bone)}
.hl-faq__inner{position:relative;z-index:10;padding-top:80px;padding-bottom:80px}
@media (min-width:1024px){.hl-faq__inner{padding-top:112px;padding-bottom:112px}}
.hl-faq__head{text-align:center}
.hl-faq__h2{margin-top:10px}
.hl-faq__sub{margin:20px auto 0;max-width:36rem}
.hl-faq__list{margin:48px auto 0;max-width:var(--hl-max-faq)}
.hl-faq__item{margin:0;border:0;border-bottom:1px solid var(--hl-hairline);background:none}
/* Source: closed rows are `border-b border-hairline` only (73px). The OPEN
   row alone becomes `my-2.5 border border-hairline bg-[#0b0a0a]`. Giving
   every row the box added 11px x 7 rows and made the section 83px tall. */
.hl-faq__item.is-open{margin:10px 0;border:1px solid var(--hl-hairline);background:var(--hl-panel)}
.hl-faq__item h3{margin:0}
.hl-faq__btn{
  display:flex;width:100%;align-items:center;justify-content:space-between;gap:20px;
  padding:20px;text-align:left;cursor:pointer;
}
@media (min-width:640px){.hl-faq__btn{padding:20px 24px}}
.hl-faq__q{
  font-family:var(--hl-font-condensed);font-size:1.05rem;line-height:1.4;
  letter-spacing:.01em;text-transform:uppercase;color:var(--hl-bone);
}
@media (min-width:640px){.hl-faq__q{font-size:1.2rem}}
.hl-faq__pm{
  display:flex;height:32px;width:32px;flex-shrink:0;align-items:center;justify-content:center;
  border-radius:9999px;border:1px solid var(--hl-hairline);color:var(--hl-stone);
  transition:border-color .2s,color .2s;
}
.hl-faq__pm svg{height:14px;width:14px}
.hl-faq__pm .v{transform-origin:center;transition:transform .3s}
.hl-faq__pm.is-open{border-color:var(--hl-glacier);color:var(--hl-glacier)}
.hl-faq__pm.is-open .v{transform:scaleY(0)}
.hl-faq__panel{padding:0 20px 20px}
@media (min-width:640px){.hl-faq__panel{padding:0 24px 24px}}
.hl-faq__a{
  max-width:62ch;font-family:var(--hl-font-body);font-size:.95rem;line-height:1.75;color:var(--hl-stone);
}
.hl-faq__a p{margin:0 0 12px}
.hl-faq__a p:last-child{margin-bottom:0}
.hl-faq__a a{color:var(--hl-glacier)}
.hl-faq__a a:hover{color:var(--hl-glacier-hover);text-decoration:underline;text-underline-offset:3px}
.hl-faq-links{list-style:none;margin:12px 0 0;padding:0}
.hl-faq-links li{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}
.hl-faq-links .dot{color:var(--hl-glacier)}