/* about hero: black -> parchment instead of blue -> parchment */
.pghero::before{display:none!important}
.pghero .kicker{color:rgba(247,245,242,.62)!important}
.pghero h1{color:#F7F5F2!important}
.pghero p{color:rgba(247,245,242,.74)!important}
/* nav reads light while it sits on the dark 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:#1B1B1B!important}
/* the fade keeps running into the next section */
.pghero+.section{background:transparent}


/* CTA + footer as one continuous dark block, parchment dissolving into black */
#waitlist{margin:0!important;padding:0!important;max-width:none!important;width:100%!important}
#waitlist::before{display:none!important}
#waitlist .cta-band{background:linear-gradient(180deg,var(--parchment) 0%,#efece7 6%,#d9d5cf 14%,#b4b0a9 23%,#847f79 33%,#565350 42%,#333230 50%,#1f1f1e 58%,#161616 68%,#131313 100%)!important;background-image:linear-gradient(180deg,var(--parchment) 0%,#efece7 6%,#d9d5cf 14%,#b4b0a9 23%,#847f79 33%,#565350 42%,#333230 50%,#1f1f1e 58%,#161616 68%,#131313 100%)!important;text-align:center;padding:clamp(200px,22vw,340px) clamp(24px,4vw,72px) clamp(80px,9vw,130px)!important;border-radius:0!important;overflow:visible!important}
#waitlist .cta-band::after{display:none!important}
#waitlist .cta-band .band-kicker{color:rgba(247,245,242,.55)!important;display:block;margin-bottom:18px}
#waitlist .cta-band h2{color:#F7F5F2!important;max-width:24ch!important;margin:0 auto!important}
.ctapill{display:inline-flex;align-items:center;justify-content:center;margin-top:clamp(30px,3.4vw,46px);padding:15px 32px;border-radius:999px;background:#F7F5F2;color:#131313!important;font-family:var(--f-ui);font-size:15px;font-weight:520;text-decoration:none;transition:transform .2s,background .2s}.ctapill:hover{background:#fff;color:#131313!important;transform:translateY(-1px)}
/* footer picks the black up seamlessly */
footer{border-radius:0!important;margin-top:0!important;background:#131313!important;padding-top:clamp(40px,4.6vw,70px)!important}
footer .fsignoff{margin-bottom:clamp(20px,2.4vw,36px)}


/* ---------- about, redesign: black bands, flowing light-blue mist, light sections ---------- */
main#main{display:flex;flex-direction:column}
header.pghero{order:1}
main#main>section[data-screen-label="Why Hive exists"]{order:2}
main#main>section[data-screen-label="Who is building it"]{order:3}
main#main>section[data-screen-label="How we think about deployment"]{order:4}
main#main>section[data-screen-label="Statement"]{order:5}
main#main>section[data-screen-label="Roadmap"]{order:6}
main#main>section[data-screen-label="Founding partners"]{order:7}
main#main>section[data-screen-label="Map"]{order:8}
main#main>#waitlist{order:9}

/* dark statement band, mist flowing through it */
.flowband{position:relative;overflow:hidden;isolation:isolate;background:#0A0A0B;padding:clamp(120px,14vw,210px) var(--gut);text-align:center;margin:clamp(40px,5vw,90px) 0}
.flowband .fb-in{position:relative;z-index:2;max-width:60ch;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.flowband .kicker{color:rgba(247,245,242,.55)!important;margin-bottom:16px}
.flowband h2{font-family:var(--f-display);font-weight:460;font-size:clamp(30px,3.6vw,52px);line-height:1.08;letter-spacing:-.015em;color:#F7F5F2;margin:0}
.flowband p{margin:18px 0 0;font-family:var(--f-ui);font-size:clamp(15.5px,1.2vw,18px);line-height:1.6;color:rgba(247,245,242,.68);max-width:54ch}
.flowband::before,.flowband::after{display:none}

/* hero band */
.pghero::before{display:none!important}
.flowhero{position:relative;overflow:hidden;isolation:isolate;background:#0A0A0B!important;min-height:min(84vh,720px);display:grid;place-items:center;text-align:center;padding:clamp(256px,30vh,400px) 0 clamp(150px,15vw,240px)!important}
.flowhero .fh-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.flowhero .kicker{color:rgba(247,245,242,.55)!important}
.flowhero h1{color:#F7F5F2!important;max-width:20ch;margin:0 auto 18px!important}
.flowhero p{color:rgba(247,245,242,.7)!important;max-width:58ch;margin:0 auto!important}
.flowhero .ctapill{margin-top:clamp(28px,3.2vw,44px)}
.flowhero::after{display:none}

/* flowing mist field */
.flow{position:absolute;inset:0;overflow:hidden;z-index:0;contain:paint}
/* mist stays behind a light scrim; hive blue reads through */
.flow::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,14,.3) 0%,rgba(10,11,14,.42) 55%,rgba(10,11,14,.6) 100%)}
.flow i{position:absolute;left:-25%;width:150%;height:38%;border-radius:50%;opacity:.6;animation:flowdrift 46s ease-in-out infinite alternate;will-change:transform}
.flow i:nth-child(1){top:-10%;height:52%;background:radial-gradient(closest-side,rgba(77,110,156,.95),rgba(77,110,156,.4) 58%,transparent 84%);opacity:.9}
.flow i:nth-child(2){top:14%;height:46%;background:radial-gradient(closest-side,rgba(111,143,216,.8),rgba(111,143,216,.28) 56%,transparent 82%);opacity:.6;animation-duration:38s;animation-direction:alternate-reverse}
.flow i:nth-child(3){top:38%;background:radial-gradient(closest-side,rgba(159,183,240,.5),rgba(159,183,240,.16) 55%,transparent 82%);opacity:.34;animation-duration:54s}
.flow i:nth-child(4){top:66%;height:46%;background:radial-gradient(closest-side,rgba(12,15,22,.98),rgba(12,15,22,.55) 55%,transparent 86%);opacity:.95;animation-duration:44s;animation-direction:alternate-reverse}
@keyframes flowdrift{from{transform:translate3d(-4%,0,0) rotate(-4deg) scaleY(1)}to{transform:translate3d(5%,3%,0) rotate(3deg) scaleY(1.25)}}
@media(prefers-reduced-motion:reduce){.flow i{animation:none}}
/* the statement band's mist is static, so only one field ever animates */
.flowband .flow i{animation:none!important}

/* light sections: centred heads */
main#main>section[data-screen-label="Why Hive exists"] .lhead,
main#main>section[data-screen-label="Roadmap"] .lhead,
main#main>section[data-screen-label="Map"] .lhead{text-align:center;margin-left:auto;margin-right:auto}
main#main>section[data-screen-label="Why Hive exists"] .ab-who{margin-left:auto;margin-right:auto;max-width:60ch}
.ab-tabs{display:inline-flex!important;gap:4px;background:rgba(27,27,27,.05);border:1px solid rgba(27,27,27,.06);border-radius:999px;padding:5px;margin:0 auto clamp(28px,3vw,44px)!important;justify-content:center}
section[data-screen-label="Why Hive exists"] .wrap{display:flex;flex-direction:column;align-items:center}
section[data-screen-label="Why Hive exists"] .ab-panel{width:100%}
.ab-tabs button{border:0!important;background:transparent!important;padding:10px 22px!important;border-radius:999px!important;font-family:var(--f-ui);font-size:14px;font-weight:500;color:var(--stone-6);cursor:pointer;transition:.2s}
.ab-tabs button.on{background:#fff!important;color:var(--ink)!important;box-shadow:0 2px 10px rgba(27,27,27,.09)}
.ab-stat{background:linear-gradient(160deg,#eef2fb,#dbe6f7)!important}

/* founding partners: dark flowing band */
.ab-band{background:radial-gradient(58rem 20rem at 18% 8%,rgba(111,143,216,.3),transparent 62%),radial-gradient(52rem 20rem at 88% 86%,rgba(159,183,240,.18),transparent 64%),linear-gradient(160deg,#0C0D10 0%,#14171e 52%,#1a2130 100%)!important;border-radius:32px!important}
.ab-band::after{background:radial-gradient(44rem 22rem at 70% -10%,rgba(159,183,240,.14),transparent 62%)!important}
.ab-chip{background:rgba(247,245,242,.06)!important;border-color:rgba(247,245,242,.16)!important;white-space:nowrap}
.ab-chip.more{flex:0 0 100%;justify-content:flex-start;white-space:normal;margin-top:4px}
main#main>section[data-screen-label="Roadmap"]{padding-top:clamp(56px,6vw,96px)!important}
/* pure white ground, hard cuts between bands */
html{--parchment:#FFFFFF}
body,.section,main#main>section{background-color:#FFFFFF}
.flowhero,.flowband{margin:0!important}
.ctapill{background:#FFFFFF}
.ctapill:hover{background:#FFFFFF}
#waitlist .cta-band{background:#1B1B1B!important;background-image:none!important;padding-top:clamp(96px,11vw,170px)!important}
footer{background:#1B1B1B!important}
.flowhero,.flowband{background:#0A0B0E!important}
/* footer blurb matches the meta grey */
footer .ftag{color:rgba(247,245,242,.4)!important}


/* hairline CTA link with arrow */
.ctaline{display:inline-flex;align-items:baseline;gap:12px;margin-top:clamp(28px,3vw,42px);padding:0 0 11px;border-bottom:1px solid rgba(247,245,242,.3);color:#F7F5F2!important;font-family:var(--f-ui);font-size:15px;font-weight:500;letter-spacing:0;text-decoration:none;transition:border-color .2s}
.ctaline i{font-style:normal;transition:transform .2s}
.ctaline:hover{border-bottom-color:#F7F5F2;color:#F7F5F2!important}
.ctaline:hover i{transform:translateX(5px)}
/* footer: identical to the homepage */
footer .fgrid{margin-top:0!important;border-top:0!important;padding-top:0!important}
footer .fsignoff{display:block!important;margin:clamp(56px,6vw,92px) 0 0!important}
footer .typeline{text-align:center!important}
footer .fcta{display:none!important}
footer .fsignoff .typeline{text-align:center!important;margin:0 auto!important}
footer .fsignoff{margin:clamp(56px,6vw,92px) 0 0!important}
/* last element: hive-blue light bleeding into the CTA band */
#waitlist{position:relative;isolation:isolate;overflow:hidden}
#waitlist .cta-band{position:relative;z-index:1;background:transparent!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%)}

/* roadmap: hairline rows, no tiles */
.ab-road{display:block!important;margin-top:clamp(40px,4.6vw,70px);border-top:1px solid rgba(27,27,27,.1)}
.rdrow{display:grid;grid-template-columns:minmax(120px,.9fr) minmax(0,1.5fr) minmax(0,1.6fr);gap:clamp(20px,3vw,56px);align-items:start;padding:clamp(30px,3.4vw,50px) 0;border-bottom:1px solid rgba(27,27,27,.1)}
.rdrow .rd-when{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone-5);padding-top:6px}
.rdrow.now .rd-when{color:#4D6E9C}
.rdrow h3{margin:0;font-family:var(--f-display);font-weight:460;font-size:clamp(21px,2.1vw,30px);line-height:1.2;letter-spacing:-.015em;color:var(--ink)}
.rdrow p{margin:0;font-family:var(--f-ui);font-size:14.5px;line-height:1.7;color:var(--stone-6);max-width:52ch}
@media(max-width:900px){
  .rdrow{grid-template-columns:minmax(0,1fr);gap:12px;padding:26px 0}
  .rdrow .rd-when{padding-top:0}
}

/* map card sits on parchment, centred */
main#main>section[data-screen-label="Map"] .map-card{margin:0 auto}