/* ==========================================================================
   Helios Labs replica — DESIGN SYSTEM
   Every value here is measured from helioslabs.is:
     source-cdp/measured-tokens.json, source-cdp/design-report.json,
     source-cdp/css/2xfcfky4p5p22.css (compiled Tailwind @theme block)
   Do not invent a colour. Do not add a token that is not in the source.
   ========================================================================== */

/* ---------- self-hosted fonts (all three are Google Fonts) ---------------- */
/* latin subsets are the four woff2 the source preloads in the home response  */

@font-face{font-family:Anton;font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/9e9f04e3c37952ab-s.p.0pan85mumqyf3.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Anton;font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/daf789e4474d0d90-s.07wt1b-68kohk.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Anton;font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/0e7b7e0b829e3eb9-s.2j75_l12byk_u.woff2) format("woff2");
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Anton Fallback";src:local(Arial);ascent-override:129.7%;descent-override:36.29%;line-gap-override:0%;size-adjust:90.69%}

@font-face{font-family:Archivo;font-style:normal;font-weight:100 900;font-stretch:100%;font-display:swap;
  src:url(../fonts/75affa71d1e2f6a7-s.p.17-aodiw50953.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Archivo;font-style:normal;font-weight:100 900;font-stretch:100%;font-display:swap;
  src:url(../fonts/651aaf1801011892-s.357dd_6abeqge.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Archivo;font-style:normal;font-weight:100 900;font-stretch:100%;font-display:swap;
  src:url(../fonts/a2947afc6a06879b-s.1gyfqm5yhhzs7.woff2) format("woff2");
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Archivo Fallback";src:local(Arial);ascent-override:88.96%;descent-override:21.28%;line-gap-override:0%;size-adjust:98.7%}

@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/99e609270109b47d-s.p.40sczeszzbjw1.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/2fe89d53234c61d4-s.1u30mmyq6lnsd.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/effe91970fc4db64-s.p.0oace-s_gkfks.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/68757d6cddeff913-s.1i-sca43-qwng.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono Fallback";src:local(Arial);ascent-override:76.16%;descent-override:20.43%;line-gap-override:0%;size-adjust:134.59%}

/* ---------- tokens -------------------------------------------------------- */
:root{
  /* colour — measured rgb() in the comment is the getComputedStyle readback */
  --hl-granite:#050504;          /* rgb(5,5,4)       page background       */
  --hl-deep:#030302;             /* deepest layer                          */
  --hl-layer:#100e0c;            /* raised layer (mega panel, promo tiles)  */
  --hl-bone:#f7f2e8;             /* rgb(247,242,232) body text             */
  --hl-stone:#8c867c;            /* rgb(140,134,124) muted text            */
  --hl-faint:#857f75;            /* rgb(133,127,117) tertiary / label      */
  --hl-hairline:#2a2723;         /* rgb(42,39,35)    EVERY 1px border      */
  --hl-glacier:#fc5501;          /* rgb(252,85,1)    THE accent            */
  --hl-glacier-hover:#ff6a1f;    /* primary button hover                   */
  --hl-card:#0c0c0c;             /* product card surface                   */
  --hl-panel:#0b0a0a;            /* hero plate / faq item / tile inner     */
  --hl-tool:#080707;             /* tools card surface                     */
  --hl-footer:#050403;           /* footer + announcement strip surface    */
  --hl-halo:#e7a438;             /* footer ring hairline                   */

  /* alpha text ramps measured off real elements */
  --hl-bone-90:rgba(247,242,232,.9);
  --hl-bone-85:rgba(247,242,232,.85);
  --hl-bone-80:rgba(247,242,232,.8);
  --hl-bone-75:rgba(247,242,232,.75);

  /* type */
  --hl-font-condensed:Anton,"Anton Fallback",Impact,sans-serif;
  --hl-font-body:Archivo,"Archivo Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --hl-font-mono:"IBM Plex Mono","IBM Plex Mono Fallback",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* spacing — Tailwind --spacing:.25rem; four container widths measured     */
  --hl-pad-x:24px;               /* px-6                                    */
  --hl-max-header:1792px;
  --hl-max-tools:1600px;
  --hl-max-hplc:1400px;
  --hl-max-faq:820px;

  /* radius — the UI is mostly square; only the product card is 2xl         */
  --hl-r-sm:4px;
  --hl-r-md:6px;
  --hl-r-lg:8px;
  --hl-r-xl:12px;
  --hl-r-2xl:16px;

  /* shadow */
  --hl-shadow-panel:0 36px 70px -28px rgba(0,0,0,.85);
  --hl-shadow-toast:0 20px 40px -16px rgba(0,0,0,.7);

  /* the chamfer default */
  --cham:12px;
}
@media (min-width:640px){:root{--hl-pad-x:40px}}   /* sm:px-10 */
@media (min-width:1024px){:root{--hl-pad-x:56px}}  /* lg:px-14 */

/* ==========================================================================
   THE CHAMFER — the single most identity-defining detail in this design.
   ONE helper, reused everywhere. Top-right + bottom-left cut at 45deg.
   Source helpers are ctaChamfer(N) / ctaOutline(N) in js/02i97734cug4k.js.
   Set --cham per element (measured: 6 · 7 · 11 · 12 · 13 · 14 · 16).
   ========================================================================== */
.hl-cham{
  clip-path:polygon(
    0 0,
    calc(100% - var(--cham)) 0,
    100% var(--cham),
    100% 100%,
    var(--cham) 100%,
    0 calc(100% - var(--cham))
  );
}
.hl-cham-6{--cham:6px}.hl-cham-7{--cham:7px}.hl-cham-11{--cham:11px}
.hl-cham-12{--cham:12px}.hl-cham-13{--cham:13px}.hl-cham-14{--cham:14px}
.hl-cham-15{--cham:15px}.hl-cham-16{--cham:16px}
/* the "outline" variant: a 1px-padded outer chamfer with an inner chamfer at
   N-1 filled with the page colour — a faked chamfered border. */
.hl-cham-outline{display:inline-block;padding:1px;background:rgba(252,85,1,.7);transition:background-color .2s}
.hl-cham-outline:hover{background:var(--hl-glacier)}
.hl-cham-inner{display:block;background:var(--hl-granite);transition:background-color .2s,color .2s}
.hl-cham-outline:hover .hl-cham-inner{background:transparent;color:#000}

/* ==========================================================================
   BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100vh;
  background:var(--hl-granite);
  color:var(--hl-bone);
  font-family:var(--hl-font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;border:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0}
:focus-visible{outline:2px solid var(--hl-glacier);outline-offset:2px}
.hl-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hl-skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--hl-glacier);color:#000;padding:10px 16px;font-family:var(--hl-font-mono)}
.hl-skip:focus{left:8px;top:8px}
.hl-app{overflow-x:clip;background:var(--hl-granite)}

/* ---------- type primitives (measured at 1440) ---------------------------- */
.hl-h1{
  font-family:var(--hl-font-condensed);font-weight:400;
  font-size:clamp(2.9rem,7.4vw,6.5rem);line-height:.9;letter-spacing:.01em;
  text-transform:uppercase;color:var(--hl-glacier);margin:0;
}
.hl-h2{
  font-family:var(--hl-font-condensed);font-weight:400;
  font-size:clamp(2.5rem,5.2vw,5.25rem);line-height:.9;letter-spacing:.01em;
  text-transform:uppercase;color:var(--hl-glacier);margin:0;
}
.hl-h2-sm{font-size:clamp(2.25rem,5vw,4.5rem)}      /* HPLCs · Tools · FAQ */
.hl-eyebrow{
  font-family:var(--hl-font-mono);font-weight:400;font-size:.72rem;
  line-height:1.5;letter-spacing:.24em;text-transform:uppercase;
  color:var(--hl-bone-85);margin:0;
}
.hl-eyebrow--stone{color:var(--hl-stone)}
/* the catalog eyebrow uses the source's own .mono-label rule:
   font-mono / uppercase / .16em / .72rem / line-height 1.5 */
.hl-eyebrow--label{letter-spacing:.16em;line-height:1.5}
.hl-eyebrow .sep{color:var(--hl-glacier)}
.hl-lede{
  font-family:var(--hl-font-body);font-size:1rem;line-height:1.625;
  color:var(--hl-stone);margin:0;
}
@media (min-width:640px){.hl-lede{font-size:1.125rem}}
.hl-mono{font-family:var(--hl-font-mono);text-transform:uppercase;letter-spacing:.16em}
.hl-tnum{font-variant-numeric:tabular-nums}

/* ---------- button primitives -------------------------------------------- */
.hl-btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--hl-font-condensed);font-weight:400;text-transform:uppercase;
  line-height:1;letter-spacing:.04em;border:0;cursor:pointer;
  transition:background-color .2s,color .2s;
}
.hl-btn-primary{background:var(--hl-glacier);color:#000}
.hl-btn-primary:hover{background:var(--hl-glacier-hover)}
.hl-btn-lg{padding:14px 32px;font-size:1.25rem}
@media (min-width:640px){.hl-btn-lg{font-size:1.5rem}}
.hl-btn-md{padding:12px 24px;font-size:1.125rem}
.hl-btn-block{width:100%}
.hl-btn-outline-inner{
  padding:14px 32px;
  font-family:var(--hl-font-condensed);font-size:1.25rem;text-transform:uppercase;
  line-height:1;letter-spacing:.02em;color:var(--hl-glacier);
}
@media (min-width:640px){.hl-btn-outline-inner{font-size:1.5rem}}
.hl-link-arrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--hl-font-mono);font-size:.92rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--hl-glacier);transition:color .2s;
}
.hl-link-arrow:hover{color:var(--hl-glacier-hover)}
.hl-link-arrow .arw{display:inline-block;transition:transform .2s}
.hl-link-arrow:hover .arw{transform:translateX(2px)}

/* ---------- badge / chip primitives --------------------------------------- */
.hl-badge{
  display:inline-block;background:var(--hl-glacier);color:#000;
  font-family:var(--hl-font-mono);font-weight:700;text-transform:uppercase;
  font-size:.66rem;letter-spacing:.12em;line-height:1;padding:3px 6px;
  border-radius:var(--hl-r-sm);
}
.hl-badge-cham{border-radius:0;padding:3px 8px;font-size:.6rem;--cham:6px}
.hl-chip{
  display:inline-block;
  border:1px solid var(--hl-hairline);border-radius:var(--hl-r-md);
  background:transparent;color:var(--hl-stone);
  font-family:var(--hl-font-mono);font-weight:700;text-transform:uppercase;
  font-size:.68rem;letter-spacing:.08em;padding:6px 10px;cursor:pointer;
  transition:border-color .2s,color .2s,background-color .2s;
}
.hl-chip:hover{border-color:rgba(252,85,1,.5);color:var(--hl-bone)}
.hl-chip[aria-pressed="true"]{border-color:var(--hl-glacier);background:rgba(252,85,1,.1);color:var(--hl-glacier)}
.hl-chip-sm{font-size:.64rem;letter-spacing:.06em;padding:4px 8px}

/* ---------- surfaces / layout -------------------------------------------- */
.hl-wrap{margin:0 auto;width:100%;padding-left:var(--hl-pad-x);padding-right:var(--hl-pad-x)}
.hl-wrap-header{max-width:var(--hl-max-header)}
.hl-wrap-tools{max-width:var(--hl-max-tools)}
.hl-wrap-hplc{max-width:var(--hl-max-hplc)}
.hl-section{position:relative;isolation:isolate;overflow:hidden;background:var(--hl-granite)}
.hl-section--top{border-top:1px solid var(--hl-hairline)}
.hl-section--bottom{border-bottom:1px solid var(--hl-hairline)}

/* the ambient orange glow that makes the page read "warm black", not flat  */
.hl-glow{
  pointer-events:none;position:absolute;z-index:-10;
  height:46rem;width:46rem;border-radius:9999px;
  opacity:.16;filter:blur(120px);
  background:radial-gradient(circle,#fc5501 0%,transparent 70%);
}

/* corner brackets — reused by the hero plate, product card and tools cards  */
.hl-brackets{pointer-events:none;position:absolute;inset:0}
.hl-brackets span{position:absolute;height:2rem;width:2rem;border-color:rgba(140,134,124,.4);border-style:solid;border-width:0}
.hl-brackets span:nth-child(1){left:0;top:0;border-left-width:1px;border-top-width:1px}
.hl-brackets span:nth-child(2){right:0;top:0;border-right-width:1px;border-top-width:1px}
.hl-brackets span:nth-child(3){left:0;bottom:0;border-left-width:1px;border-bottom-width:1px}
.hl-brackets span:nth-child(4){right:0;bottom:0;border-right-width:1px;border-bottom-width:1px}
.hl-brackets--card span{height:1.5rem;width:1.5rem;border-color:rgba(140,134,124,.25)}
.hl-brackets--card span:nth-child(1){border-left-width:2px;border-top-width:2px}
.hl-brackets--card span:nth-child(2){border-right-width:2px;border-top-width:2px}
.hl-brackets--card span:nth-child(3){border-left-width:2px;border-bottom-width:2px}
.hl-brackets--card span:nth-child(4){border-right-width:2px;border-bottom-width:2px}
.hl-brackets--tool span{height:1rem;width:1rem;border-color:rgba(140,134,124,.45)}
.hl-brackets--tool span:nth-child(1){left:12px;top:12px;border-left-width:2px;border-top-width:2px}
.hl-brackets--tool span:nth-child(2){right:12px;top:12px;border-right-width:2px;border-top-width:2px}
.hl-brackets--tool span:nth-child(3){left:12px;bottom:12px;border-left-width:2px;border-bottom-width:2px}
.hl-brackets--tool span:nth-child(4){right:12px;bottom:12px;border-right-width:2px;border-bottom-width:2px}

/* ---------- the ONE product card ------------------------------------------ */
.hl-card{
  position:relative;display:flex;flex-direction:column;
  height:100%;width:100%;min-width:0;
  border-radius:var(--hl-r-2xl);background:var(--hl-card);
  border:1px solid var(--hl-hairline);
  padding:14px;transition:border-color .3s;
}
.hl-card:hover{border-color:rgba(252,85,1,.4)}
@media (min-width:640px){.hl-card{padding:20px}}
@media (min-width:1024px){.hl-card{padding:24px}}
.hl-card--popular{border:2px solid var(--hl-glacier)}
.hl-card--popular:hover{border-color:var(--hl-glacier)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}