/* the about hero dissolves like the homepage: a long tonal ramp through
   cool near-whites rather than a short white wash over black */
html body .pghero.flowhero{padding-bottom:clamp(230px,26vh,400px)!important}
html body .pghero.flowhero::before{
  height:clamp(340px,46vh,700px)!important;
  background:linear-gradient(180deg,
    rgba(11,11,12,0) 0%,
    rgba(11,11,12,.05) 12%,
    rgba(11,11,12,.11) 22%,
    rgba(11,11,12,.19) 32%,
    rgba(11,11,12,.29) 42%,
    rgba(11,11,12,.40) 52%,
    rgba(11,11,12,.52) 62%,
    rgba(11,11,12,.65) 72%,
    rgba(11,11,12,.78) 81%,
    rgba(11,11,12,.89) 89%,
    rgba(11,11,12,.96) 95%,
    #0B0B0C 100%)!important;
}


html{--parchment:#0B0B0C}
html body,html body .section,html body main#main>section{background-color:#0B0B0C!important}
html body #waitlist .cta-band{background:#0B0B0C!important}
html body .flowhero,html body .flowband{background:#0A0A0B!important}
.ctapill{background:#F7F5F2!important;color:#0B0B0C!important}
.ctapill:hover{background:#FFFFFF!important}
/* ==== the About page is one ink field, like the PE page ==== */
html,body,main#main{background:#0B0B0C!important}
main#main>section,main#main>header.pghero,.flowband,
main#main>section[data-screen-label="Why Hive exists"],
main#main>section[data-screen-label="Who is building it"],
main#main>section[data-screen-label="How we think about deployment"],
main#main>section[data-screen-label="Roadmap"],
main#main>section[data-screen-label="Founding partners"],
main#main>section[data-screen-label="Statement"],
main#main>section[data-screen-label="Map"],
main#main>#waitlist,footer{background:#0B0B0C!important;background-image:none!important;background-attachment:scroll!important;box-shadow:none!important;border:0!important}
main .lsec,main .lsec span,main h2,main h3,main .ab-lt{color:#F7F5F2!important}
main .kicker,main .sec-kick{color:rgba(247,245,242,.5)!important}
main p,main li,main .ab-who,main .ab-ld,main .lsub{color:rgba(247,245,242,.62)!important}
.ab-lines,.ab-line,.ab-lines-panel .ab-line:last-child,.ab-road,.rdrow{border-color:rgba(247,245,242,.14)!important}
main#main>section[data-screen-label="Roadmap"] .lhead h2{color:#F7F5F2!important}
main#main>section[data-screen-label="Roadmap"] .lhead .kicker{color:rgba(247,245,242,.5)!important}
main#main>section[data-screen-label="Roadmap"]>.wrap{border-top-color:rgba(247,245,242,.14)!important}
.ab-band,.ab-panel,.ab-lines-panel{background:none!important;border-color:rgba(247,245,242,.14)!important}
.ab-tabs{background:rgba(247,245,242,.06)!important;border-color:rgba(247,245,242,.12)!important}
.ab-tabs button{color:rgba(247,245,242,.6)!important}
.ab-tabs button.on{background:rgba(247,245,242,.12)!important;color:#F7F5F2!important;box-shadow:none!important}
.ab-chip{background:rgba(247,245,242,.06)!important;border-color:rgba(247,245,242,.16)!important;color:rgba(247,245,242,.8)!important}
/* hero dissolves into the ink */
.pghero.flowhero::after{content:none;position:absolute;left:0;right:0;bottom:-1px;height:clamp(200px,26vw,360px);z-index:3;pointer-events:none;
  background:linear-gradient(to bottom,rgba(11,11,12,0) 0%,rgba(11,11,12,.02) 12%,rgba(11,11,12,.07) 24%,rgba(11,11,12,.15) 36%,rgba(11,11,12,.26) 47%,rgba(11,11,12,.4) 58%,rgba(11,11,12,.55) 68%,rgba(11,11,12,.7) 77%,rgba(11,11,12,.84) 86%,rgba(11,11,12,.94) 93%,rgba(11,11,12,1) 100%)}
.pghero.flowhero>.wrap,.pghero.flowhero>.fh-in{position:relative;z-index:4}

/* ==== who is building it: PE foundation tiles, expanding on hover ==== */
.ab-team{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:clamp(24px,2.6vw,40px)!important}
.ab-role{position:relative!important;appearance:none;-webkit-appearance:none;text-align:left;cursor:pointer;font:inherit;
  background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;
  display:flex!important;flex-direction:column!important;justify-content:flex-start!important;
  padding:clamp(22px,2.2vw,32px) 0 clamp(20px,2vw,28px) clamp(24px,2.4vw,36px)!important;
  min-height:clamp(150px,13vw,190px)!important;transition:min-height .42s cubic-bezier(.2,.7,.2,1),transform .3s ease!important}
.ab-role::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.08));transition:background .3s}
.ab-role::after{content:"";position:absolute;left:1px;top:0;bottom:0;width:120px;
  background:linear-gradient(90deg,rgba(255,255,255,.035),transparent);pointer-events:none;transition:opacity .3s}
.ab-role:hover::before,.ab-role[aria-expanded="true"]::before{background:linear-gradient(180deg,rgba(150,185,235,.95),rgba(150,185,235,.2))}
.ab-role-top{display:flex!important;align-items:flex-start;justify-content:space-between;gap:14px;width:100%}
.ab-role .ab-ln{font-family:var(--f-display)!important;font-weight:400!important;font-size:clamp(17px,1.4vw,22px)!important;letter-spacing:-.015em!important;text-transform:none!important;line-height:1.25;color:#F7F5F2!important;margin-top:clamp(40px,4.4vw,64px)}
.ab-role .ab-plus{position:relative;width:13px;height:13px;flex:0 0 auto;margin-top:clamp(44px,4.6vw,68px);opacity:.55;transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .3s}
.ab-role .ab-plus::before,.ab-role .ab-plus::after{content:"";position:absolute;background:#F7F5F2}
.ab-role .ab-plus::before{left:0;right:0;top:6px;height:1px}
.ab-role .ab-plus::after{top:0;bottom:0;left:6px;width:1px;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.ab-role:hover .ab-plus,.ab-role[aria-expanded="true"] .ab-plus{opacity:1}
.ab-role:hover .ab-plus::after,.ab-role[aria-expanded="true"] .ab-plus::after{transform:scaleY(0)}
.ab-role-body{display:block;overflow:hidden;max-height:0;opacity:0;
  transition:max-height .45s cubic-bezier(.2,.7,.2,1),opacity .3s ease,margin-top .45s cubic-bezier(.2,.7,.2,1);margin-top:0}
main .ab-role-body p{font-family:var(--f-ui)!important;font-size:14.5px!important;line-height:1.55!important;color:rgba(247,245,242,.62)!important;margin:0!important;max-width:34ch}
.ab-role:hover .ab-role-body,.ab-role:focus-visible .ab-role-body,.ab-role[aria-expanded="true"] .ab-role-body{max-height:320px;opacity:1;margin-top:clamp(14px,1.4vw,20px)}
.ab-role:hover,.ab-role[aria-expanded="true"]{min-height:clamp(230px,20vw,290px)!important}
@media(max-width:1024px){.ab-team{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:640px){.ab-team{grid-template-columns:1fr!important}.ab-role{min-height:0!important}.ab-role .ab-ln,.ab-role .ab-plus{margin-top:24px}}


/* the ink pass, at the specificity of the light-ground rules it replaces */
.flowband h2,.ab-band h2,main#main>section[data-screen-label="Statement"] h2,
main#main>section[data-screen-label="Founding partners"] h2{color:#F7F5F2!important}
.ab-band .kicker,.flowband .kicker,
main#main>section[data-screen-label="Founding partners"] .kicker,
main#main>section[data-screen-label="How we think about deployment"] .kicker,
main#main>section[data-screen-label="Why Hive exists"] .kicker,
main#main>section[data-screen-label="Who is building it"] .kicker,
main#main>section[data-screen-label="Roadmap"] .kicker{color:rgba(247,245,242,.5)!important}
.ab-band p,.flowband p,main#main>section[data-screen-label="Founding partners"] p{color:rgba(247,245,242,.64)!important}
.ctaline.ab-ctaline,.ab-ctaline,main#main>section[data-screen-label="Founding partners"] .ctaline{color:#F7F5F2!important}
html body .ctapill,html body a.ctapill,html body .flowband .ctapill,html body main .ctapill{background:#FFFFFF!important;background-image:none!important;color:#0B0B0C!important;border:0!important;box-shadow:none!important}
html body .ctapill:hover,html body a.ctapill:hover{background:#F2F2F0!important;color:#0B0B0C!important}
.ab-chip{color:rgba(247,245,242,.78)!important;background:rgba(247,245,242,.07)!important;border-color:rgba(247,245,242,.18)!important}
.rdrow h3,main#main>section[data-screen-label="Roadmap"] .rdrow h3{color:#F7F5F2!important}
.rdrow p,main#main>section[data-screen-label="Roadmap"] .rdrow p{color:rgba(247,245,242,.62)!important}
.rd-when,main#main>section[data-screen-label="Roadmap"] .rd-when{color:rgba(247,245,242,.5)!important}
main#main>section[data-screen-label="How we think about deployment"] .ab-ln,
main#main>section[data-screen-label="Why Hive exists"] .ab-ln{color:rgba(247,245,242,.5)!important}
main#main>section[data-screen-label="How we think about deployment"] .ab-lt,
main#main>section[data-screen-label="Why Hive exists"] .ab-lt{color:#F7F5F2!important}
main#main>section[data-screen-label="How we think about deployment"] .ab-line p,
main#main>section[data-screen-label="Why Hive exists"] .ab-line p{color:rgba(247,245,242,.62)!important}
/* the team tiles keep their own label colour */
.ab-role .ab-ln{color:#F7F5F2!important}
/* map city labels read on ink */
svg#map text{fill:#F7F5F2!important;stroke:none!important}


/* founding-partner chips sit straight on the ink, no grey plate */
.ab-chip,.ab-chip.more{background:transparent!important;border:0!important;box-shadow:none!important;padding:0 clamp(10px,1vw,16px) 0 0!important}
.ab-chip span{color:rgba(247,245,242,.8)!important}
.ab-chip.more{color:rgba(247,245,242,.45)!important}
/* statement CTA: white pill, ink type */
.ctapill,a.ctapill{background:#FFFFFF!important;color:#0B0B0C!important;border:0!important}
.ctapill:hover,a.ctapill:hover{background:#F2F2F0!important;color:#0B0B0C!important}


/* the closing line holds one line */
.ab-close{max-width:none!important;white-space:nowrap}
@media(max-width:900px){.ab-close{white-space:normal}}
/* the expand mark is a plain + that becomes a − when open */
.ab-role .ab-plus{width:15px!important;height:15px!important;background:none!important;border:0!important;border-radius:0!important;transform:none!important}
.ab-role .ab-plus::before,.ab-role .ab-plus::after{content:""!important;position:absolute!important;background:#F7F5F2!important;border-radius:1px}
.ab-role .ab-plus::before{left:0!important;right:0!important;top:7px!important;height:1.5px!important;width:auto!important;transform:none!important}
.ab-role .ab-plus::after{top:0!important;bottom:0!important;left:6.75px!important;width:1.5px!important;height:auto!important;right:auto!important;transform:scaleY(1)!important;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.ab-role:hover .ab-plus::after,.ab-role[aria-expanded="true"] .ab-plus::after{transform:scaleY(0)!important}