/* ============================================================
   HIVE FLUID — large-screen scaling layer.
   Loaded LAST on every page, after hive-ci / hive-nav / hive-type.

   How it works
   ------------
   One set of unitless scale factors derived from the real viewport
   width. Below 1440px every factor is exactly 1, and the whole layer
   is gated to desktop widths (>=1025px), so the existing mobile,
   tablet and laptop layouts are untouched. Above 1440px the factors
   grow continuously with the window — no jump when the user drags the
   browser edge — and stop at a ceiling, so nothing becomes comically
   large on a 4K display.

   Every rule below is the page's own value with its CEILING multiplied
   by a factor. Lower bounds and vw terms are left alone, so the curve
   is continuous through 1440px in both directions.

   --k   editorial type, controls              ceiling  x1.30
   --kn  navigation + menu type (chrome)                x1.12
   --kh  display-scale hero type                        x1.22
   --ks  spacing: gutters, section rhythm, gaps         x1.45
   --kc  content column widths                          x1.45
   --kz  card / tile interiors (zoom)                   x1.22
   --kx  product mock-ups + diagrams (zoom)             x1.40

   Note: the site renders under html{zoom:.94}, so every ceiling lands
   about 6% smaller on screen than its nominal value.
   ============================================================ */

:root{--k:1;--kn:1;--kh:1;--ks:1;--kc:1;--kz:1;--kx:1}

/* length -> number, so a px ceiling can be multiplied by the viewport.
   Browsers without trig functions keep every factor at 1 (today's site). */
@supports (width: calc(tan(atan2(100vw,1px)) * 1px)){
  :root{
    --vwn: tan(atan2(100vw, 1px));
    --k:  clamp(1, calc(var(--vwn) / 1440), 1.30);
    --kn: clamp(1, calc(var(--vwn) / 1440), 1.12);
    --kh: clamp(1, calc(var(--vwn) / 1440), 1.22);
    --ks: clamp(1, calc(var(--vwn) / 1440), 1.45);
    --kc: clamp(1, calc(var(--vwn) / 1440), 1.45);
    --kz: clamp(1, calc(var(--vwn) / 1440), 1.22);
    --kx: clamp(1, calc(var(--vwn) / 1440), 1.40);
  }
}

@media (min-width:1025px){

/* ---------- 1 · layout tokens ---------- */
html{
  --gut:clamp(20px,4vw,calc(56px * var(--ks)))!important;
  --sec:clamp(84px,8.6vw,calc(136px * var(--ks)))!important;
  --sec-half:clamp(42px,4.3vw,calc(68px * var(--ks)))!important;
  /* the page column: grows with the window, always keeps an outer margin,
     and never resolves below its current width on narrower screens */
  --page-max:min(calc(1360px * var(--kc)), max(1360px, calc(100vw - 2 * clamp(20px,2vw,72px))));
  --page-max-wide:min(calc(1520px * var(--kc)), max(1520px, calc(100vw - 2 * clamp(14px,1.2vw,44px))));
  --page-max-xl:min(calc(1660px * var(--kc)), max(1660px, calc(100vw - 2 * clamp(14px,1.2vw,44px))));
}

/* ---------- 2 · content columns ---------- */
html body .wrap{max-width:var(--page-max)!important}
html body .wrap.wide{max-width:var(--page-max-wide)!important}
/* full-bleed exceptions keep their own behaviour */
html body .capsx .wrap.wide{max-width:none!important;width:100%!important}
html body .lhead,html body .pq-head,html body .nw-head{max-width:var(--page-max)!important}
html body .capsx .lhead{max-width:min(calc(1380px * var(--kc)), max(1380px, calc(100vw - 2 * clamp(20px,2vw,72px))))!important}
html body .tdy,html body .dfz{max-width:min(calc(1300px * var(--kc)), max(1300px, calc(100vw - 2 * clamp(20px,2vw,72px))))!important}
html body #product.wrap{max-width:var(--page-max-xl)!important}
html body #explore .wrap.wide{max-width:var(--page-max-wide)!important}
html body #solution .ss-head,html body #solution .ss-head .lhead{max-width:var(--page-max-wide)!important}
html body .ss-stack{width:min(calc(1360px * var(--kc)), calc(100% - 2 * var(--gut)))}
html body .sechead{max-width:calc(900px * var(--kc))!important}

/* long-form article column: the measure and its type scale together, so the
   line length in characters stays exactly as designed */
html body .art{max-width:calc(720px * var(--k))!important}
html body .art p,html body .art ol,html body .art ul{font-size:calc(17px * var(--k))!important}
html body .art p.lede{font-size:clamp(18px,1.5vw,calc(21px * var(--k)))!important}
html body .art h2{font-size:clamp(22px,2vw,calc(30px * var(--k)))!important}
html body .art blockquote{font-size:clamp(21px,1.9vw,calc(27px * var(--k)))!important}
html body .art .byline{font-size:calc(13.5px * var(--k))!important}
html body .art .endnote{font-size:calc(14.5px * var(--k))!important}

/* ---------- 3 · the sky hero grows with the screen it sits on ---------- */
html body .pghero.skyhero{
  min-height:min(84vh, calc(720px * var(--ks)))!important;
  padding-top:clamp(256px,30vh,calc(400px * var(--ks)))!important;
  padding-bottom:clamp(150px,15vw,calc(240px * var(--ks)))!important;
}

/* ---------- 4 · grid gaps ---------- */
html body .seclist,html body .solgrid,html body .secgrid,html body .newsgrid,html body .nw-grid,
html body .tilegrid,html body .cr-tiles,html body .dp-grid,html body .packgrid,html body .ig-specs,
html body .stgrid,html body .ind-grid2{
  gap:clamp(20px,2.2vw,calc(32px * var(--ks)))!important;
}
html body .logogrid{gap:clamp(20px,2.4vw,calc(40px * var(--ks)))!important}
html body .lhead,html body .pq-head,html body .nw-head{margin-bottom:clamp(32px,3.8vw,calc(56px * var(--ks)))!important}

/* ---------- 5 · page headline + lede ---------- */
html body .pghero h1,html body header.hero h1,html body .prhero h1,html body .flowhero h1{
  font-size:clamp(34px,3.95vw,calc(56px * var(--k)))!important;
}
/* the homepage opener: its effective scale is the 86px display step */
html body .opener header.hero h1,html body .opener .hero h1{font-size:clamp(44px,5.4vw,calc(86px * var(--kh)))!important}
html body .opener .hero .sub,html body .opener .hero p.reveal{font-size:clamp(17px,1.3vw,calc(23px * var(--k)))!important}
html body .pghero p,html body header.hero p.lede,html body .hero p.lede,html body .flowhero p,
html body .lsub,html body .sec-sub,html body .pq-sub,html body .lhead>p,html body .pq-head>p,
html body .nw-head>p,html body .cibreak p,html body #mission p,html body .cr-band p,
html body .flowband p,html body .ab-band p,html body .pe-band .pq-sub{
  font-size:clamp(15.5px,1.15vw,calc(17.5px * var(--k)))!important;
}

/* ---------- 6 · section headline ---------- */
html body main .lsec,html body main .sec,html body main .pq-h,html body main .lhead h2,
html body main .nw-head h2,html body main .cr-band h2,html body main #mission h2,
html body main .teamhead h2,html body main .introduo h2,html body main .sechome h2,
html body main .pe-band h2,html body main .solband h2,html body main .ab-band h2,html body main .flowband h2{
  font-size:clamp(27px,2.95vw,calc(42px * var(--k)))!important;
}
html body main .cibreak h2,html body main .mline,html body main .qline,html body main .quote h2{
  font-size:clamp(29px,3.5vw,calc(50px * var(--k)))!important;
}
html body main .introduo .tdy h2{font-size:clamp(30px,4.2vw,calc(62px * var(--kh)))!important}
html body main .introduo .dfz h2{font-size:clamp(27px,3.5vw,calc(52px * var(--k)))!important}

/* ---------- 7 · eyebrows and inherited copy ---------- */
html body .kicker,html body .pq-k,html body .sec-kick,html body .band-kicker,html body .pl-n,
html body .rd-when,html body .cr-tag,html body .tlabel,html body .ex-n,html body .st-k,
html body .tdy-kick,html body .dfz-kick{
  font-size:calc(11px * var(--k))!important;
}
html body{font-size:calc(15.5px * var(--k))}

/* ---------- 8 · controls ---------- */
html body .btn,html body .btn.primary,html body .btn.secondary{
  font-size:calc(14.5px * var(--k))!important;
  min-height:calc(44px * var(--k))!important;
  padding:calc(12px * var(--k)) calc(24px * var(--k))!important;
  gap:calc(10px * var(--k))!important;
}
html body .hero .btn.primary,html body .hero .btn.secondary{
  height:calc(44px * var(--k))!important;min-height:calc(44px * var(--k))!important;
  padding:0 calc(26px * var(--k))!important;font-size:calc(14.5px * var(--k))!important;
}
html body input,html body textarea,html body select{font-size:calc(15.5px * var(--k))}
/* fields inside product mock-ups keep the mock-up's own type */
html body #hwApp input,html body #hwApp textarea,html body #hwApp select,
html body .wzframe input,html body .wzframe textarea,html body .lp-scene input{font-size:inherit}
html body #waitlist .wl input{font-size:calc(18px * var(--k))!important}
html body #waitlist .wl button,html body #waitlist .wl .btn{font-size:calc(14.5px * var(--k))!important}

/* segmented rows, filters, tabs */
html body .uc-filters .uc-chip,html body .vtabs button,html body .ab-tabs button,html body .dtabs button{
  font-size:calc(14px * var(--k))!important;
  padding:calc(10px * var(--k)) calc(22px * var(--k))!important;
}
html body .uc-filters,html body .vtabs{padding:calc(5px * var(--k))!important;gap:calc(4px * var(--k))!important}
/* slider affordances */
html body .hslide,html body .capnav .capbar{width:min(calc(330px * var(--ks)),62%)!important}
html body .hslide-nav .hsl-a{width:calc(26px * var(--k))!important;height:calc(26px * var(--k))!important}
html body .hslide-nav .hsl-a svg{width:calc(20px * var(--k))!important;height:calc(20px * var(--k))!important}

/* ---------- 9 · navigation (chrome scales gently, on --kn) ---------- */
html body nav.topnav{
  padding-top:calc(14px * var(--kn))!important;padding-bottom:calc(13px * var(--kn))!important;
  padding-left:clamp(20px,3.2vw,calc(48px * var(--ks)))!important;
  padding-right:clamp(20px,3.2vw,calc(48px * var(--ks)))!important;
  gap:clamp(18px,2.6vw,calc(40px * var(--ks)))!important;
}
html body nav.topnav .tn-links a,html body nav.topnav .tn-links .ndl{font-size:calc(15px * var(--kn))!important}
html body nav.topnav .tn-cta,html body nav.topnav .tn-ghost{
  font-size:calc(14px * var(--kn))!important;
  padding:calc(8px * var(--kn)) calc(18px * var(--kn))!important;
}
html body nav.topnav .tn-brand{font-size:calc(17.5px * var(--kn))!important}
html body nav.topnav .tn-brand img.tn-logo{height:calc(23px * var(--kn))!important}
html body nav.topnav .tn-brand svg{width:calc(24px * var(--kn))!important;height:calc(24px * var(--kn))!important}
/* mega menu keeps pace with the bar */
html body .ndpanel b,html body .ndpanel .ndpromo b{font-size:calc(15.5px * var(--kn))!important}
html body .ndpanel span:not(.ndthumb),html body .ndpanel .ndpromo span:not(.ndthumb){font-size:calc(13.5px * var(--kn))!important}
html body .ndpanel .fh,html body .ndpanel .ndhead{font-size:calc(10px * var(--kn))!important}
html body .ndpanel .ndpromo .ndthumb{height:clamp(124px,10.5vw,calc(158px * var(--kn)))!important}

/* ---------- 10 · the CTA tail ---------- */
html body #waitlist .cta-band{
  max-width:var(--page-max)!important;
  margin-left:auto!important;margin-right:auto!important;
  padding-left:clamp(20px,4vw,calc(72px * var(--ks)))!important;
  padding-right:clamp(20px,4vw,calc(72px * var(--ks)))!important;
}
html body main #waitlist .cta-band h2{font-size:clamp(27px,2.95vw,calc(42px * var(--k)))!important}
html body #waitlist .band-kicker{font-size:calc(11px * var(--k))!important}
html body #waitlist .ctaline{font-size:calc(16px * var(--k))!important;margin-top:clamp(34px,3.8vw,calc(52px * var(--ks)))!important}

/* ---------- 11 · the footer ---------- */
html body footer{
  padding-top:clamp(56px,6vw,calc(92px * var(--ks)))!important;
  padding-bottom:clamp(26px,3vw,calc(40px * var(--ks)))!important;
}
html body footer .fwrap,html body footer .ftop,html body footer .fsec,
html body footer .typeline,html body footer .fmeta{max-width:var(--page-max)!important}
html body footer .fgrid{gap:clamp(40px,5vw,calc(96px * var(--ks)))!important}
html body footer .fsignoff .typeline,html body footer .typeline{font-size:clamp(20px,2.4vw,calc(34px * var(--k)))!important}
html body footer .fcols a{font-size:calc(14.5px * var(--k))!important}
html body footer .ftag{font-size:calc(15px * var(--k))!important}
html body footer .fcols .fh,html body footer .fcols h6{font-size:calc(10px * var(--k))!important}
html body footer .flegal a{font-size:calc(14px * var(--k))!important}
html body footer .fbrand .brow svg{width:calc(44px * var(--k))!important;height:calc(44px * var(--k))!important}

/* ---------- 12 · imagery stays inside its column ---------- */
html body main img,html body main video,html body main canvas{max-width:100%}

}/* end min-width:1025px */

/* ---------- 13 · section rhythm, large screens only ---------- */
@media (min-width:1441px){
  html body .section:not(.cibreak),html body main .section:not(.cibreak),
  html body .pq-sec,html body .cr-band,html body #mission{
    padding-top:clamp(88px,9.4vw,calc(148px * var(--ks)))!important;
    padding-bottom:clamp(64px,6.6vw,calc(108px * var(--ks)))!important;
  }
  html body main#main>section.cibreak,html body .section.cibreak,html body .cibreak{
    padding-top:clamp(96px,11vw,calc(168px * var(--ks)))!important;
    padding-bottom:clamp(96px,11vw,calc(168px * var(--ks)))!important;
    margin-top:clamp(40px,5vw,calc(88px * var(--ks)))!important;
    margin-bottom:clamp(40px,5vw,calc(88px * var(--ks)))!important;
  }
  /* sections that deliberately end flush stay flush */
  html body main section.section[style*="padding-bottom:0"]{padding-bottom:0!important}
  html body main section.section[style*="padding-top:0"]{padding-top:0!important}
  html body #waitlist,html body main #waitlist{padding-top:0!important;padding-bottom:0!important}
  /* tighter component grids keep their own gap, scaled */
  html body .editions,html body .deploy,html body .agl-grid,html body .dep-grid,
  html body .capmosaic,html body .caps,html body .deeprow{gap:calc(14px * var(--ks))!important}

/* ---------- 14 · cards, tiles and mock-ups scale as whole objects ----------
   Their internals (padding, radii, icon sizes, hairlines, small labels) are
   hand-tuned in px, so each component is scaled as a unit rather than having
   every value restated. The outer box is still sized by its grid or flex
   track, so nothing can overflow — only the inside grows. --k / --ks are
   reset to 1 inside, so type inside them is never scaled twice.          */
  html body .seccard,html body .newscard,html body .nw-card,html body .xtile,html body .scard,
  html body .stcard,html body .faqcard,html body .jobcard,html body .ig-card,html body .dp-card,
  html body .cr-card,html body .cr-open,html body .plan,html body .pcard,html body .ed,
  html body .dep,html body .agl-card,html body .teamcard,html body .ab-card,html body .uc-card,
  html body .cap-card,html body .cap-tile,html body .cap-wide,html body .capsx .stk,
  html body .solcard,html body .pq-stage,html body .rdrow{
    zoom:var(--kz);--k:1;--ks:1;--kc:1;--kh:1;
  }
  /* product mock-ups and workflow diagrams: designed at laptop scale, so they
     get the larger factor and read at the same weight as the copy beside them */
  html body #hwApp,html body .lp-scene,html body .lp-cycle2,
  html body .wzframe,html body .dj-cmp,html body .depx{
    zoom:var(--kx);--k:1;--ks:1;--kc:1;--kh:1;
  }
}


/* ---------- 15 · link treatment: arrows, never underlines ----------
   CTA links across the site read as label + arrow: no hairline under the
   label, no text-decoration, hover dims instead. Body-copy links inside
   articles (.art a) and the mobile menu's row dividers keep their own rules. */
html body .ctaline,html body .ab-ctaline,html body .seclink,html body .solgo,
html body .morelink,html body .textlink,html body .pe-tlink,html body .fcta,
html body .xgo,html body .ex-go,html body .ld-go,html body .vc-go,html body .st-go,
html body .pq-go,html body .fd-go,html body .ss-go,html body .sv-go,html body .solgo,
html body .cr-go,html body .nw-go,html body .ig-go,html body .dp-go,html body .go,
html body main a.arrowlink{
  border-bottom:0!important;border-bottom-width:0!important;
  text-decoration:none!important;padding-bottom:0!important;
}
html body .ctaline:hover,html body .ab-ctaline:hover,html body .seclink:hover,
html body .solgo:hover,html body .morelink:hover,html body .textlink:hover,
html body .pe-tlink:hover,html body .fcta:hover,html body .ss-go:hover,html body .sv-go:hover,
html body .cr-go:hover,html body .go:hover{opacity:.62;border-bottom:0!important}


/* ---------- 16 · hero tail: every sky hero dissolves into the white ground ----------
   Same treatment as the homepage: a long eased ramp inside the hero's own bottom
   padding, so there is no visible line where the coloured header meets the page. */
html body .pghero.skyhero{position:relative;overflow:hidden}
html body .pghero.skyhero::before{
  content:"";display:block!important;position:absolute;left:0;right:0;bottom:-1px;z-index:2;
  height:clamp(140px,20vh,320px);pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.02) 10%,
    rgba(255,255,255,.06) 20%,
    rgba(255,255,255,.13) 30%,
    rgba(255,255,255,.23) 40%,
    rgba(255,255,255,.35) 50%,
    rgba(255,255,255,.49) 60%,
    rgba(255,255,255,.63) 70%,
    rgba(255,255,255,.77) 80%,
    rgba(255,255,255,.88) 88%,
    rgba(255,255,255,.95) 94%,
    #FFFFFF 100%);
}
/* the noise grain stops before the fade, so it never speckles the white */
html body .pghero.skyhero::after{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 94%);mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 94%)}
/* the private-equity hero runs into a dark band and keeps its own seam */
html body .pehero.skyhero::before{display:none!important}


/* ---------- 17 · the tail is black on every page ---------- */
html body #waitlist,html body #waitlist .cta-band,html body footer,html body footer .fwrap{
  background-color:#0B0B0C!important;background-image:none!important;
}
html body #waitlist::after{display:none!important}


/* ---------- 18 · dark hero tails and stray band tints ---------- */
/* the About page's near-black hero gets the same dissolve as the sky heroes */
html body .pghero.flowhero{position:relative;overflow:hidden}
html body .pghero.flowhero::before{
  content:"";display:block!important;position:absolute;left:0;right:0;bottom:-1px;z-index:2;
  height:clamp(140px,20vh,320px);pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.02) 10%,
    rgba(255,255,255,.06) 20%,
    rgba(255,255,255,.13) 30%,
    rgba(255,255,255,.23) 40%,
    rgba(255,255,255,.35) 50%,
    rgba(255,255,255,.49) 60%,
    rgba(255,255,255,.63) 70%,
    rgba(255,255,255,.77) 80%,
    rgba(255,255,255,.88) 88%,
    rgba(255,255,255,.95) 94%,
    #FFFFFF 100%);
}
/* a band that was repainted white must not keep its old tint overlay: that
   overlay's top edge is what reads as a line under the hero (Careers) */
html body .cr-band::after{display:none!important}


/* ---------- 19 · map, CTA and footer are fully black ----------
   Doubled ids so page-level #reach / .section#waitlist rules can't win. */
html body #reach#reach,
html body #reach#reach>*,
html body [data-screen-label="Map"],
html body #waitlist#waitlist,
html body #waitlist#waitlist .cta-band,
html body footer,html body footer .fwrap,html body footer .ftop{
  background-color:#0B0B0C!important;background-image:none!important;
}
html body #reach#reach::before,html body #reach#reach::after{display:none!important}


/* ---------- 20 · the floating sales pill matches the nav CTA height ---------- */
html body .motion-try{padding:3px 4px!important;gap:2px!important}
html body .motion-try .mt-cta{
  font-size:calc(14px * var(--kn))!important;font-weight:500!important;
  padding:calc(6px * var(--kn)) calc(16px * var(--kn))!important;line-height:1.3!important;
}
html body .motion-try .mt-hive{padding:0 2px 0 8px!important}
html body .motion-try .mt-hive svg{width:calc(17px * var(--kn))!important;height:calc(17px * var(--kn))!important}


/* ---------- 21 · the hero CTA matches the nav button's size ---------- */
html body .ind-cta .btn,html body .ind-cta .btn.primary,
html body .pehero .pe-cta .btn,html body .pehero .pe-cta .btn.primary{
  font-size:calc(14px * var(--kn))!important;font-weight:500!important;
  padding:calc(8px * var(--kn)) calc(20px * var(--kn))!important;
  min-height:0!important;height:auto!important;line-height:1.3!important;
}


/* ---------- 22 · industries menu is a 3 x 3 grid, not 2 x 5 ---------- */
@media(min-width:1025px){
  html body .ndd:has(>.ndl[href*="ndustries"]) .ndpanel .ndcol,
  html body .ndd:has(>.ndl[href*="ndustries"]) .ndpanel .ndcol.two{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    max-width:min(1100px,100%)!important;gap:clamp(16px,1.6vw,26px) clamp(24px,2.6vw,44px)!important;
  }
}