/* ============================================================
   HIVE CI — shared identity layer
   Reference: Hive Homepage.html · Hive Industries.html · Hive About.html
   Loaded LAST on every subpage so it settles ties.
   Type stays: SF Pro Display for headlines, Figtree for everything else.
   ============================================================ */

/* ---------- 1. ground: white white, hard cuts between bands ---------- */
html{--parchment:#FFFFFF}
html,body{background:#FFFFFF!important}
body,.section,main#main>section:not(.cibreak),.teamband,.logomq{background-color:#FFFFFF}
.section:not(.cibreak){padding-top:clamp(88px,9.4vw,148px)!important;padding-bottom:clamp(52px,5.6vw,92px)!important}
.lhead{margin-bottom:clamp(32px,3.8vw,56px)!important}

/* ---------- 2. type: one display, one body ---------- */
body,button,input,textarea,select{font-family:var(--f-ui)!important}
h1,h2,h3,h4,.lsec,.sec,.hero h1,.pghero h1,.cta-band h2,.tlabel,.seccard h3,.newscard h3,.xtile h3,.scard h3,.cap-head h3{font-family:var(--f-display)!important}
.lsec,.pghero h1,.hero h1,.cta-band h2,.teamhead h2,.introduo h2{font-weight:460!important;letter-spacing:-.015em!important}
.lsec span{font-weight:400!important;color:var(--stone-6)!important}
.pghero h1{font-size:clamp(38px,4.6vw,64px)!important;line-height:1.05!important}
.pghero p{font-size:clamp(16px,1.3vw,19px)!important;line-height:1.6!important}

/* ---------- 3. the header: an uneven sky, one palette per page ---------- */
.pghero.skyhero{
  --sk-glow1:rgba(226,238,250,.9); --sk-glow2:rgba(246,226,214,.7); --sk-low:rgba(178,206,236,.9);
  --sk-a:#2A5490; --sk-b:#39679F; --sk-c:#4B79B0; --sk-d:#6390C2; --sk-e:#A4C1E2; --sk-f:#BCD3EC;
  --sk-wisp1:rgba(255,255,255,.6); --sk-wisp2:rgba(246,226,214,.55); --sk-cap:rgba(14,28,52,.72);
  position:relative;isolation:isolate;overflow:hidden;text-align:center;
  min-height:min(84vh,720px);display:flex;flex-direction:column;justify-content:center;
  padding:clamp(256px,30vh,400px) 0 clamp(150px,15vw,240px)!important;
  background:
    radial-gradient(80rem 40rem at 82% 8%,var(--sk-glow1),transparent 62%),
    radial-gradient(64rem 34rem at 12% 26%,var(--sk-glow2),transparent 58%),
    radial-gradient(70rem 30rem at 38% 78%,rgba(255,255,255,.5),transparent 62%),
    radial-gradient(90rem 46rem at 60% 120%,var(--sk-low),transparent 66%),
    linear-gradient(158deg,var(--sk-a) 0%,var(--sk-b) 22%,var(--sk-c) 42%,var(--sk-d) 62%,var(--sk-e) 86%,var(--sk-f) 100%)!important;
}
.pghero.skyhero>.wrap{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center}
.pghero.skyhero .kicker{color:rgba(255,255,255,.8)!important;text-shadow:0 1px 12px rgba(14,26,46,.3);margin-bottom:16px}
.pghero.skyhero h1{color:#FFFFFF!important;max-width:22ch;margin:0 auto 18px!important;text-shadow:0 2px 26px rgba(14,26,46,.34)}
.pghero.skyhero p{color:rgba(255,255,255,.92)!important;max-width:54ch;margin:0 auto!important;text-shadow:0 1px 16px rgba(14,26,46,.36)}
.pghero.skyhero .btn,.pghero.skyhero .ctapill,.pghero.skyhero .ctaline{position:relative;z-index:3}
.pghero.skyhero .btn.primary{background:#FFFFFF!important;color:#141a2e!important;border-color:#FFFFFF!important}
.pghero.skyhero .btn.secondary,.pghero.skyhero .btn:not(.primary){background:rgba(255,255,255,.12)!important;color:#FFFFFF!important;border:1px solid rgba(255,255,255,.5)!important}
.pghero.skyhero .prwrap,.pghero.skyhero .headblock{position:relative;z-index:3}

.skymist{position:absolute;inset:-12% -6%;z-index:0;overflow:hidden;pointer-events:none}
.skymist i{position:absolute;left:-30%;width:170%;border-radius:46% 54% 42% 58%;filter:blur(clamp(40px,5vw,86px));will-change:transform;animation:skydrift 52s ease-in-out infinite alternate}
.skymist i:nth-child(1){top:8%;left:-36%;width:150%;height:40%;transform:rotate(-13deg);opacity:.5;background:linear-gradient(96deg,rgba(255,255,255,0) 0%,var(--sk-wisp1) 26%,rgba(255,255,255,.8) 48%,var(--sk-wisp1) 72%,rgba(255,255,255,0) 100%)}
.skymist i:nth-child(2){top:36%;left:-20%;width:132%;height:26%;transform:rotate(6deg);opacity:.55;background:linear-gradient(94deg,rgba(255,255,255,0) 0%,var(--sk-wisp2) 28%,var(--sk-wisp2) 62%,rgba(255,255,255,0) 100%);animation-duration:42s;animation-direction:alternate-reverse}
.skymist i:nth-child(3){top:58%;left:-40%;width:160%;height:36%;transform:rotate(-9deg);opacity:.45;background:linear-gradient(92deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.6) 24%,var(--sk-wisp1) 48%,rgba(255,255,255,.5) 72%,rgba(255,255,255,0) 100%);animation-duration:58s}
.skymist i:nth-child(4){top:-16%;left:-24%;width:150%;height:32%;transform:rotate(-16deg);opacity:.7;background:linear-gradient(98deg,var(--sk-cap) 0%,var(--sk-cap) 42%,var(--sk-cap) 70%,rgba(255,255,255,0) 100%);animation-duration:48s;animation-direction:alternate-reverse}
.skymist::after{content:"";position:absolute;inset:0;background:radial-gradient(56rem 24rem at 50% 36%,rgba(18,32,56,.4),transparent 68%),linear-gradient(172deg,rgba(20,36,62,.3) 0%,rgba(20,36,62,.1) 40%,rgba(20,36,62,0) 72%)}
@keyframes skydrift{from{transform:translate3d(-3%,0,0) rotate(-6deg)}to{transform:translate3d(4%,2%,0) rotate(-2deg)}}
@media(prefers-reduced-motion:reduce){.skymist i{animation:none}}
.pghero.skyhero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");background-size:200px 200px;opacity:.28;mix-blend-mode:overlay}
.pghero.skyhero::before{display:none!important}
@media(max-width:700px){.pghero.skyhero{padding-top:clamp(168px,34vw,230px)!important;padding-bottom:clamp(96px,17vw,150px)!important}}

.pghero.skyhero .pq-triad>div,.pghero.skyhero .peb-grid>div{border-top-color:rgba(255,255,255,.34)!important}
.pghero.skyhero .pq-triad .t,.pghero.skyhero .peb-grid b,.pghero.skyhero .pq-k,.pghero.skyhero .t{color:rgba(255,255,255,.82)!important}
.pghero.skyhero .pq-triad p,.pghero.skyhero .peb-grid span,.pghero.skyhero .lede,.pghero.skyhero li{color:rgba(255,255,255,.94)!important;text-shadow:0 1px 14px rgba(14,26,46,.42)}
.pghero.skyhero h2,.pghero.skyhero h3{color:#FFFFFF!important}

/* small caps on light grounds keep a readable grey (dark bands keep their own) */
.section:not(.cibreak) .kicker,.sec-kick,.cibreak .kicker{color:rgba(27,27,27,.58)}
.pghero.skyhero .kicker{color:rgba(255,255,255,.82)!important}
#waitlist .band-kicker,footer .fh,footer .fmeta{color:rgba(247,245,242,.55)!important}
/* dark grounds anywhere: keep the small caps light */
.pe-band .kicker,.pe-band .pq-k,.flowband .kicker,.ab-band .kicker,[class*="dk"] .kicker{color:rgba(247,245,242,.6)!important}

/* ---------- 4. dark divider band ---------- */
main#main>section.cibreak,.cibreak{position:relative;isolation:isolate;overflow:hidden;background:#FFFFFF!important;padding:clamp(96px,11vw,168px) var(--gut,32px);text-align:center;margin:clamp(40px,5vw,88px) 0}
.cibreak .cb-in{position:relative;z-index:2;max-width:56ch;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.cibreak .kicker{color:var(--stone-5,rgba(27,27,27,.5))!important;margin-bottom:16px}
.cibreak h2{margin:0;font-family:var(--f-display);font-weight:460;font-size:clamp(28px,3.4vw,50px);line-height:1.1;letter-spacing:-.015em;color:var(--ink,#1B1B1B)}
.cibreak p{margin:18px 0 0;font-family:var(--f-ui);font-size:clamp(15.5px,1.2vw,18px);line-height:1.65;color:var(--stone-6,rgba(27,27,27,.62));max-width:52ch}
.cibreak .cb-flow{display:none!important;position:absolute;inset:0;z-index:0;overflow:hidden;contain:paint}
.cibreak .cb-flow::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.74) 55%,rgba(255,255,255,.86) 100%)}
.cibreak .cb-flow i{position:absolute;left:-25%;width:150%;height:42%;border-radius:50%;opacity:.6}
.cibreak .cb-flow i:nth-child(1){top:-14%;height:54%;background:radial-gradient(closest-side,rgba(159,183,240,.5),transparent 84%);opacity:.8}
.cibreak .cb-flow i:nth-child(2){top:30%;background:radial-gradient(closest-side,rgba(207,224,245,.7),transparent 82%);opacity:.6}
.cibreak .cb-flow i:nth-child(3){top:66%;height:48%;background:radial-gradient(closest-side,rgba(255,255,255,.95),transparent 86%);opacity:.9}

/* ---------- 5. surfaces: fewer tiles, more air ---------- */
.seccard,.newscard,.xtile,.scard,.pcard,.plan,.faqcard,.jobcard{box-shadow:none!important}
.seccard,.newscard,.xtile,.pcard,.plan{border-radius:22px!important}
.card,.seccard{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* ---------- 6. the CTA: hairline field on the dark tail ---------- */
#waitlist{position:relative;isolation:isolate;overflow:hidden;padding-top:0!important;padding-bottom:0!important;margin:0!important;max-width:none!important}
#waitlist::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(70rem 26rem at 50% -8%,rgba(111,143,216,.5),transparent 66%),radial-gradient(46rem 22rem at 12% 18%,rgba(77,110,156,.34),transparent 68%),radial-gradient(52rem 24rem at 88% 8%,rgba(159,183,240,.2),transparent 68%),linear-gradient(180deg,#141822 0%,#161a24 42%,#1B1B1B 100%)}
#waitlist .cta-band{position:relative;z-index:1;background:transparent!important;background-image:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;text-align:center;padding:clamp(96px,11vw,170px) clamp(20px,4vw,72px)!important;margin:0 auto;max-width:1360px}
#waitlist .band-kicker{display:block;font-family:var(--f-mono,var(--f-ui));font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(247,245,242,.58)!important;margin:0 0 18px}
#waitlist .cta-band h2{color:#F7F5F2!important;font-size:clamp(30px,3.4vw,48px)!important;line-height:1.1;margin:0 auto;max-width:26ch}
#waitlist .cta-band .wl,#waitlist .wl{display:flex;align-items:baseline;gap:18px;max-width:620px;margin:clamp(30px,3.4vw,44px) auto 0!important;padding:6px 0 0!important;border:0!important;border-bottom:1px solid rgba(247,245,242,.3)!important;background:none!important;border-radius:0!important;box-shadow:none!important}
#waitlist .cta-band .wl input,#waitlist .wl input{flex:1;min-width:0;background:transparent!important;border:0!important;outline:0;color:#F7F5F2!important;font-family:var(--f-display)!important;font-size:18px!important;padding:0 0 15px!important;box-shadow:none!important}
#waitlist .wl input::placeholder{color:rgba(247,245,242,.45)}
#waitlist .cta-band .wl button,#waitlist .cta-band .wl .btn,#waitlist .wl button,#waitlist .wl .btn{background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;min-height:0!important;padding:0 0 15px!important;color:#F7F5F2!important;font-family:var(--f-ui)!important;font-size:14.5px!important;font-weight:500;display:inline-flex;align-items:baseline;gap:9px;white-space:nowrap;cursor:pointer}
#waitlist .wl button::after,#waitlist .wl .btn::after{content:"\2192";transition:transform .2s}
#waitlist .wl button:hover::after{transform:translateX(4px)}
#waitlist .band-note{margin:16px auto 0;font-size:13px;color:rgba(247,245,242,.58)!important;max-width:44ch}
#waitlist .cta-row,#waitlist .band-row{justify-content:center}

/* ---------- 7. the footer: links, signature, hairline, meta ---------- */
footer{background:#1B1B1B!important;color:#F7F5F2;margin-top:0!important;border-radius:0!important;padding:clamp(56px,6vw,92px) var(--gut,32px) clamp(26px,3vw,40px)!important;overflow:hidden}
footer .fwrap{display:flex!important;flex-direction:column;max-width:1360px;margin:0 auto}
footer .fgrid{order:1;margin-top:0!important;border-top:0!important;padding-top:0!important}
footer .fsignoff{order:2;display:block!important;margin:clamp(56px,6vw,92px) 0 0!important}
footer .fbase{order:3;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:clamp(40px,4.6vw,68px)!important;padding-top:22px;border-top:1px solid rgba(247,245,242,.14)}
footer .fsignoff .typeline{text-align:center!important;margin:0 auto!important;font-family:var(--f-display)!important;font-size:clamp(20px,2.4vw,34px)!important;font-weight:330;letter-spacing:-.02em;line-height:1.2;color:#F7F5F2}
footer .fcta{display:none!important}
footer .fsec{display:none!important}
footer .ftag{color:rgba(247,245,242,.4)!important}
footer .fmeta{margin:0!important;padding:0!important;justify-content:flex-start!important}
footer a{color:rgba(247,245,242,.86)}
footer a:hover{color:#FFFFFF}

/* ---------- 7b. nav reads light while it sits on the sky hero ---------- */
nav.topnav:not(.scrolled):not(:hover):not(:focus-within) .tn-logo{filter:invert(1)}
nav.topnav:not(.scrolled):not(:hover):not(:focus-within) .tn-links a,
nav.topnav:not(.scrolled):not(:hover):not(:focus-within) .tn-links .ndl,
nav.topnav:not(.scrolled):not(:hover):not(:focus-within) .mnav-btn{color:#F7F5F2!important}
nav.topnav:not(.scrolled):not(:hover):not(:focus-within) .tn-ghost{color:#F7F5F2!important;background:rgba(247,245,242,.13)!important}
nav.topnav:not(.scrolled):not(:hover):not(:focus-within) .tn-cta{background:#F7F5F2!important;color:#0B0C10!important}

/* ---------- 8. links ---------- */
a{color:inherit}
main a.textlink,main .seclink,main .solgo,main .morelink{color:var(--ink)}
main a.textlink:hover,main .seclink:hover{opacity:.62}

/* ============================================================
   9. FORMATTING RUN — one type scale, one rhythm, everywhere
   (product mockups keep their own small type; only editorial
    heads, copy, eyebrows, buttons and section rhythm are set)
   ============================================================ */

/* eyebrows */
.kicker,.pq-k,.sec-kick,.band-kicker,.pl-n,.rd-when,.cr-tag,.nw-card .k,.dp-card .n,.pq-roles em{
  font-family:var(--f-mono,var(--f-ui))!important;font-size:11px!important;font-weight:500!important;
  letter-spacing:.2em!important;text-transform:uppercase!important;line-height:1.5!important;
}
.lhead .kicker,.pq-head .pq-k,.cr-band .kicker,.cibreak .kicker{margin:0 0 16px!important}

/* section headlines */
.lsec,.sec,.pq-h,.cr-band h2,#mission h2,.lhead h2,.teamhead h2,.introduo h2,.nw-head h2{
  font-family:var(--f-display)!important;font-weight:460!important;
  font-size:clamp(30px,3.4vw,48px)!important;line-height:1.1!important;letter-spacing:-.015em!important;
  margin:0!important;text-wrap:pretty;
}
/* subheads under a headline */
.pq-sub,.lsub,.sec-sub,.lhead>p,.pq-head>p,.cr-band p,#mission p,.nw-head p{
  font-family:var(--f-ui)!important;font-size:clamp(16px,1.25vw,19px)!important;font-weight:400!important;
  line-height:1.62!important;letter-spacing:normal!important;color:var(--stone-6)!important;
  max-width:62ch;margin:18px 0 0!important;text-wrap:pretty;
}

/* row and card headings */
.pq-plist h3,.rdrow h3,.cr-card h3,.cr-open h3,.seccard h3,.newscard h3,.nw-card h3,.xtile h3,
.scard h3,.faqcard h3,.jobcard h3,.dp-card b,.pq-roles .t,.pq-stage h3,.seclist h3,.ig-card h3{
  font-family:var(--f-display)!important;font-weight:460!important;
  font-size:clamp(20px,1.85vw,27px)!important;line-height:1.2!important;letter-spacing:-.015em!important;
  color:var(--ink)!important;
}
/* row and card copy */
.pq-plist p,.rdrow p,.cr-card p,.cr-open p,.seccard p,.newscard p,.nw-card p,.xtile p,
.scard p,.faqcard p,.jobcard p,.dp-card p,.pq-roles p,.pq-stage p,.seclist p,.ig-card p{
  font-family:var(--f-ui)!important;font-size:15.5px!important;font-weight:400!important;
  line-height:1.65!important;color:var(--stone-6)!important;max-width:56ch;text-wrap:pretty;
}

/* buttons: one size everywhere */
.btn,.btn.primary,.btn.secondary{
  font-family:var(--f-ui)!important;font-size:14.5px!important;font-weight:500!important;
  letter-spacing:0!important;border-radius:999px!important;min-height:44px;
  padding:12px 24px!important;display:inline-flex;align-items:center;justify-content:center;gap:10px;
}

/* section rhythm */
.section:not(.cibreak),.pq-sec,.cr-band,#mission{padding-top:clamp(88px,9.4vw,148px)!important;padding-bottom:clamp(64px,6.6vw,108px)!important}
.lhead,.pq-head,.nw-head{margin-bottom:clamp(32px,3.8vw,56px)!important}
#waitlist,footer{padding-top:0!important}
footer{padding-top:clamp(56px,6vw,92px)!important}

/* grid gaps */
.seclist,.solgrid,.secgrid,.newsgrid,.nw-grid,.tilegrid,.cr-tiles,.dp-grid,.packgrid,.ig-specs,.stgrid,.ind-grid2{gap:clamp(20px,2.2vw,32px)!important}

/* the eyebrow, headline and subhead of a section share one left edge */
.lhead,.pq-head,.nw-head{max-width:1360px}
.lhead.center,.pq-head.center{margin-left:auto;margin-right:auto}


/* ---------- segmented option rows: one design everywhere (reference: About · Mission/Vision/Why now) ---------- */
.uc-filters,.vtabs{display:inline-flex!important;flex-wrap:nowrap;gap:4px!important;background:rgba(27,27,27,.05)!important;border:1px solid rgba(27,27,27,.06)!important;border-radius:999px!important;padding:5px!important;max-width:100%;overflow-x:auto;scrollbar-width:none}
.uc-filters::-webkit-scrollbar,.vtabs::-webkit-scrollbar{display:none}
.uc-filters .uc-chip,.vtabs button{flex:0 0 auto;border:0!important;background:transparent!important;padding:10px 22px!important;border-radius:999px!important;font-family:var(--f-ui);font-size:14px!important;font-weight:500!important;color:var(--stone-6)!important;box-shadow:none!important;white-space:nowrap;transition:background .2s,color .2s,box-shadow .2s}
.uc-filters .uc-chip:hover,.vtabs button:hover{color:var(--ink)!important}
.uc-filters .uc-chip.on,.vtabs button.on,.vtabs button[aria-selected="true"]{background:#fff!important;color:var(--ink)!important;box-shadow:0 2px 10px rgba(27,27,27,.09)!important}

.ab-tabs{flex-wrap:nowrap!important;max-width:100%;overflow-x:auto;scrollbar-width:none}
.ab-tabs::-webkit-scrollbar{display:none}
.ab-tabs button{flex:0 0 auto;white-space:nowrap}

/* segmented rows sit centred above the interactive element they drive */
.vtabs,.uc-filters,.ab-tabs{margin-left:auto!important;margin-right:auto!important;justify-content:center}
.uc-filters,.vtabs{display:flex!important;width:fit-content}

/* Explore Hive: head always left-aligned, on every page */
#explore .lhead,section[data-screen-label="Explore Hive"] .lhead{text-align:left!important;margin-left:0!important;margin-right:auto!important}
#explore .lhead .lsec,#explore .lhead .kicker,section[data-screen-label="Explore Hive"] .lhead .lsec,section[data-screen-label="Explore Hive"] .lhead .kicker{margin-left:0!important;text-align:left!important}

/* use-case filter row: left-aligned under its head */
.uc-filters{margin-left:0!important;margin-right:auto!important;justify-content:flex-start}

/* plus toggles: bare crosses, never circled */
.uc-card .chev,.sv-plus,.bw-plus,.st-plus,.ub-plus,.mc-plus,.cp-plus,.mb-plus,.capsx .mb-plus,.capsx .cp-plus{border:0!important;background:none!important;border-radius:0!important;box-shadow:none!important}
.uc-card .chev{width:auto!important;height:auto!important;font-size:20px!important;line-height:1!important;font-weight:300;color:var(--ink)!important}
.uc-card.open .chev{color:#4D86C2!important}
.sv-plus::before,.sv-plus::after,.bw-plus::before,.bw-plus::after{width:14px!important;height:1.5px!important}
.sv-plus{color:var(--ink)!important}
.sv-tab.on .sv-plus,.sv-tab[aria-selected="true"] .sv-plus{background:none!important;color:#4D86C2!important}
.st-plus{background:none!important}

/* desktop 1025–1400: long tab rows wrap instead of running off-screen */
@media (min-width:1025px) and (max-width:1400px){
.vtabs{flex-wrap:wrap!important;overflow:visible!important;row-gap:8px!important;justify-content:flex-start}
}

/* footer-fluid-v1: footer content scales with the viewport, no fixed cap */
@media(min-width:1025px){
footer .fwrap{max-width:min(2200px,calc(100vw - 2 * clamp(28px,4vw,120px)))!important;margin-left:auto!important;margin-right:auto!important;padding-left:0!important;padding-right:0!important}
footer .ftop{max-width:none!important}
footer .fgrid{gap:clamp(40px,5vw,120px)!important}
}

/* use-case section heads: even two-line break */
.pe-uses-l h2{text-wrap:balance;max-width:20ch}
