/* Pricing and enterprise pages. Layered on home.css. Values come from the
   Final Website frames of the Vorflux + Hex Figma file: pricing 1657:27846,
   enterprise 1696:41235. */
/* ---------- shared ---------- */
.light--flat::before { display: none; }
.light--flat .label { color: var(--k-48); }
.cta--plain .cta__box { padding-top: 63px; }
.cta--plain .cta__box h2 { margin-top: 0; }
.cta--plain .cta__box p { max-width: 466px; }
.cta--plain .cta__box .actions { margin-top: 12px; }

/* ---------- pricing: head ---------- */
.page-head { display: flex; flex-direction: column; align-items: center; padding-top: 96px; text-align: center; }
.page-head .display { max-width: 393px; margin-top: 32px; }
.page-head p { max-width: 432px; margin-top: 32px; font-weight: 500; color: var(--w-72); }

/* ---------- pricing: ways to cover tokens ---------- */
.plans { display: grid; grid-template-columns: minmax(0, 205fr) repeat(3, minmax(0, 337fr)); margin-top: 48px; }
.plans__labels { display: grid; align-content: end; font: 400 13px/20px var(--mono); text-transform: uppercase; color: var(--w-48); }
.plans__labels span { height: 80px; padding-top: 20px; border-top: 1px solid var(--w-12); }
.plans__labels span:last-child { height: 84px; }
.plan { display: flex; flex-direction: column; border: 1px solid transparent; }
.plan--featured { border-color: var(--w-24); }
.plan__head { flex: 1; padding: 24px 24px 32px; }
.plan__icon { width: 20px; height: 20px; color: #fff; }
.plan__head .h4 { margin-top: 56px; }
.plan__head p { margin-top: 12px; font-weight: 500; color: var(--w-64); }
.plan dt { display: none; }
.plan dl > div { height: 80px; padding: 20px 24px 0; border-top: 1px solid var(--w-12); }
.plan dl > div:last-child { height: 82px; }
.plan dd { margin: 0; font-weight: 500; }
.plans__actions { justify-content: center; margin-top: 64px; }

/* ---------- pricing: machines ---------- */
.mach-wrap { margin-top: 144px; }
.mach { display: grid; grid-template-columns: minmax(0, 616fr) minmax(0, 600fr); padding-block: 35px 76px; }
.mach__copy .h2 { max-width: 498px; margin-top: 24px; }
.mach__copy p { max-width: 395px; margin-top: 24px; font-weight: 500; color: var(--w-72); }
.mach__side { padding-top: 40px; }
.mach__table { min-width: 0; margin: 0; padding: 0; border: 0; }
.mach__head, .mach__row { display: grid; grid-template-columns: 189px minmax(0, 1fr) auto; align-items: center; }
.mach__head { grid-template-columns: 205px minmax(0, 1fr) auto; padding: 0 0 12px; font: 400 13px/20px var(--mono); text-transform: uppercase; color: var(--w-48); }
.mach__head span:last-child { text-align: right; }
.mach__row { position: relative; grid-template-columns: 28px 161px minmax(0, 1fr) auto; height: 52px; padding-inline: 16px; border: 1px solid transparent; border-bottom-color: var(--w-12); cursor: pointer; transition: background-color .15s ease; }
.mach__row:hover { background: var(--w-06); }
.mach__row:has(input:checked) { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .32); }
.mach__row input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mach__tick { width: 12px; height: 12px; background: var(--w-16); }
.mach__row input:checked + .mach__tick { background: #fff; }
.mach__row input:focus-visible + .mach__tick { outline: 2px solid var(--mint); outline-offset: 2px; }
.mach__name { font: 500 14px/20px var(--sans); }
.mach__spec { font: 400 13px/20px var(--sans); color: var(--w-56); }
.mach__price { font: 500 13px/20px var(--sans); }
.calc__hours { display: block; margin-top: 69px; }
.calc__hours input { display: block; width: 100%; height: 12px; margin: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.calc__hours input::-webkit-slider-runnable-track { height: 8px; background: var(--w-12); }
.calc__hours input::-moz-range-track { height: 8px; background: var(--w-12); }
.calc__hours input::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -2px; background: #fff; border: 0; border-radius: 0; -webkit-appearance: none; appearance: none; }
.calc__hours input::-moz-range-thumb { width: 12px; height: 12px; background: #fff; border: 0; border-radius: 0; }
.calc__hours input:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }
.calc__line { display: flex; justify-content: space-between; margin-top: 12px; font-weight: 500; color: var(--w-72); }
.calc__line output { color: #fff; }
.calc__total { display: flex; align-items: baseline; gap: 12px; margin-top: 48px; }
.calc__total output { font: 500 40px/40px var(--sans); letter-spacing: -.02em; }
.calc__total span { font: 500 14px/16px var(--sans); color: var(--w-48); }
.calc__note { margin-top: 48px; font-weight: 500; color: var(--w-56); }
.rail--end { margin-bottom: 4px; }

/* ---------- pricing: tokens ---------- */
.tokens { padding-block: 64px 96px; border-inline: 1px solid var(--k-08); }
.tokens .h2 { margin-top: 24px; }
.ttabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 56px; }
.ttab { height: 32px; padding-inline: 16px; font: 500 14px/20px var(--sans); color: var(--k-64); transition: color .15s ease, background-color .15s ease; }
.ttab:hover { color: #000; }
.ttab[aria-selected="true"] { background: #000; color: #fff; }
.js .ttab-panel:not(.is-active) { display: none; }
.ttab-panel { margin-top: 16px; padding: 16px 0 12px 24px; border: 1px solid var(--k-08); }
.pr-trow { display: grid; grid-template-columns: minmax(0, 387fr) minmax(0, 205fr) minmax(0, 205fr) minmax(0, 206fr) minmax(0, 189fr); align-items: center; height: 52px; font: 500 14px/20px var(--sans); border-bottom: 1px solid rgba(0, 0, 0, .12); }
.pr-trow:last-child { border-bottom: 0; }
.pr-thead { height: 32px; padding-bottom: 12px; font: 400 13px/20px var(--mono); text-transform: uppercase; color: var(--k-48); border-bottom: 0; }
.pr-soft { color: var(--k-48); }
.tokens__note { max-width: 395px; margin-top: 16px; font-weight: 500; color: var(--k-72); }

/* ---------- pricing: white glove ---------- */
.glove .h2 { max-width: 498px; }
.glove__lede { max-width: 395px; margin-top: 24px; font-weight: 500; color: var(--w-72); }
.glove__points { display: grid; gap: 4px; margin-top: auto; padding-top: 40px; font-weight: 500; }
.glove__points li { display: flex; align-items: center; gap: 8px; height: 38px; }
.glove__points li::before { content: ''; width: 4px; height: 4px; background: #fff; }
.glove .actions { margin-top: 32px; }
.glove { padding-bottom: 92px; }
.rule + .cta { margin-top: 147px; }

/* ---------- enterprise: hero ---------- */
.ent-hero { display: grid; grid-template-columns: minmax(0, 648fr) minmax(0, 632fr); padding-top: 12px; }
.ent-hero__copy { padding-top: 154px; }
.ent-hero__copy .display { max-width: 484px; }
.ent-hero__copy p { max-width: 432px; margin-top: 24px; font-weight: 500; color: var(--w-72); }
.ent-hero__copy .actions { margin-top: 32px; }
.ent-hero + .wrap .logos { margin-top: 32px; }

/* org adoption mock */
.m-orgwin { left: 64px; top: 64px; width: 568px; height: 576px; display: flex; background: #121212; border-radius: 0; box-shadow: none; }
.m-rail--full { --r: 1; border-right: 1px solid #1e1e1e; background: #0a0a0a; }
.m .m-rail--full .m-rail__theme { top: 494px; left: 22px; }
.m-rail--full .m-rail__me { top: 534px; }
.m-org { flex: 1; min-width: 0; }
.m-org__head { display: flex; justify-content: space-between; align-items: flex-start; height: 71px; padding: 16px 32px 0; font: 500 16px/20px var(--sans); border-bottom: 1px solid #242424; }
.m-org__head small { display: block; margin-top: 4px; font: 500 12px/16px var(--sans); color: #878787; }
.m-org__stats { display: grid; grid-template-columns: repeat(3, 141px); gap: 8px; padding: 16px 32px; }
.m-org__stats > div { height: 90px; padding: 13px; border: 1px solid #242424; }
.m-org__stats span { display: block; font: 400 12px/16px var(--mono); color: var(--w-48); }
.m-org__stats b { display: block; margin-top: 28px; font: 500 20px/20px var(--sans); }
.m-org__row { display: grid; grid-template-columns: 112px 168px 1fr; align-items: center; height: 63px; padding-inline: 32px; font-size: 13px; line-height: 18px; border-bottom: 1px solid #1e1e1e; }
.m-org__row b { display: block; font-weight: 500; }
.m-org__row small { display: block; margin-top: 2px; font-size: 12px; line-height: 16px; color: #878787; }
.m-org__row.is-head { height: 34px; background: #161616; font: 400 12px/16px var(--mono); color: #878787; border-block: 1px solid #242424; }
.m-org__row.is-on { background: #151320; border-bottom: 0; }
.m-org__st { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding-inline: 6px; border-radius: 2px; background: rgba(61, 91, 255, .18); color: #ac91f0; font-size: 12px; line-height: 16px; }
.m-org__st::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.m-org__st.is-live { background: rgba(54, 214, 126, .14); color: var(--green); }

/* ---------- enterprise: adoption gap ---------- */
.gap-wrap { margin-top: 100px; }
.gap { padding-block: 99px 151px; }
.gap .h2 { max-width: 529px; margin-top: 24px; }
.gap__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 64px; }
.gap__cols article { position: relative; min-height: 165px; padding-top: 61px; border-top: 1px solid var(--w-12); }
.gap__cols article::before { content: ''; position: absolute; left: 0; top: 25px; width: 4px; height: 4px; background: #fff; }
.gap__cols p { margin-top: 16px; font-weight: 500; color: var(--w-64); }

/* ---------- enterprise: stages ---------- */
.intent--stages { padding-top: 147px; }
.stages__head { display: grid; grid-template-columns: minmax(0, 751fr) minmax(0, 529fr); }
.stages__head p { max-width: 395px; font-weight: 500; color: var(--w-72); }
.tabs--six { margin-top: 51px; }
.tabs--six .tabs__list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tabs--six .tabs__body p { margin-top: 16px; }

/* ---------- enterprise: roll it out ---------- */
.intent--stages + .light { margin-top: 96px; }
.roll { padding-block: 96px 104px; border-inline: 1px solid var(--k-08); }
.roll__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 64px; border: 1px solid var(--k-08); }
.roll__card { min-height: 479px; padding: 32px; border-right: 1px solid var(--k-08); border-bottom: 1px solid var(--k-08); }
.roll__card:nth-child(2n) { border-right: 0; }
.roll__card:nth-last-child(-n + 2) { border-bottom: 0; }
.roll__num { display: block; font: 400 14px/16px var(--mono); color: var(--k-48); }
.roll__card h3 { margin-top: 24px; font: 500 24px/32px var(--sans); letter-spacing: -.02em; }
.roll__card > p { max-width: 337px; margin-top: 8px; font-weight: 500; color: var(--k-64); }
.roll__art { display: flex; justify-content: center; margin-top: 8px; font-family: var(--sans); }
.roll .l-memory { width: 400px; max-width: 100%; margin-top: 29px; }
.roll .l-harness { width: 400px; max-width: 100%; margin-top: 27px; }
.roll .l-harness__row { grid-template-columns: 96px minmax(0, 1fr); }
.l-select--icon { justify-content: flex-start; gap: 8px; }
.l-select--icon > span { flex: 1; min-width: 0; white-space: nowrap; }
.l-select--icon .icon:first-child { width: 14px; height: 14px; }
.roll .l-stack { position: relative; grid-template-columns: minmax(0, 1fr); width: 384px; max-width: 100%; margin-top: 31px; }
.roll .l-int { width: 360px; max-width: 100%; }
.roll .l-int:nth-child(2) { transform: translateX(24px); }
.l-prefs { width: 400px; max-width: 100%; height: 221px; margin-top: 23px; padding: 14px 15px; }
.l-pref { display: flex; align-items: center; gap: 12px; height: 57px; border-top: 1px solid var(--k-08); font-size: 13px; line-height: 18px; }
.l-prefs .l-harness__head + .l-pref { margin-top: 10px; }
.l-pref > div { flex: 1; min-width: 0; }
.l-pref small { display: block; font-size: 12px; line-height: 16px; color: var(--k-48); }
.l-pref__logo { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--k-08); }
.l-pref.is-off { color: var(--k-48); }
.l-pref.is-off .m-toggle { background: #a99fc4; }

/* ---------- enterprise: governance ---------- */
.gov-wrap { margin-top: 64px; }
.gov { display: grid; grid-template-columns: minmax(0, 513fr) minmax(0, 703fr); padding-block: 31px 100px; }
.gov-wrap .rail { margin-bottom: 4px; }
.gov__title .h2 { max-width: 396px; margin-top: 24px; }
.gov__h { font: 500 28px/32px var(--sans); letter-spacing: -.02em; }
.gov__lede { max-width: 395px; margin-top: 16px; font-weight: 500; color: var(--w-72); }
.plane { display: grid; grid-template-columns: minmax(0, 292fr) minmax(0, 118fr) minmax(0, 292fr); margin-top: 42px; }
.plane__box { display: flex; flex-direction: column; min-height: 256px; padding: 24px; border: 1px solid var(--w-12); }
.plane__box > span { font: 400 13px/16px var(--mono); text-transform: uppercase; color: var(--w-48); }
.plane__box strong { margin-top: 8px; font: 500 16px/20px var(--sans); }
.plane__box ul { margin-top: auto; }
.plane__box li { display: flex; align-items: center; gap: 8px; height: 31px; font-weight: 500; color: var(--w-64); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.plane__box li:last-child { border-bottom: 0; }
.plane__box li::before { content: ''; width: 4px; height: 4px; background: var(--w-64); }
.plane__link { display: flex; align-items: center; justify-content: center; gap: 4px; background: #181a21; border-block: 1px solid rgba(174, 240, 217, .24); font: 400 14px/16px var(--mono); text-transform: uppercase; color: var(--mint); }
.plane__link .icon { width: 12px; height: 12px; }
.gov__foot { margin-top: 16px; font-weight: 500; color: var(--w-64); }
.gov__rule { margin: 98px 0 97px; border: 0; border-top: 1px solid var(--w-12); }
.gbox { position: relative; min-height: 228px; padding: 16px; border: 1px solid var(--w-12); }
.gbox > span:not(.corners) { font: 400 13px/16px var(--mono); text-transform: uppercase; color: var(--w-48); }
.gbox .corners { top: 16px; bottom: 16px; left: 16px; right: 16px; }
.gbox .corners i:first-child { display: none; }
.gbox--text { display: flex; flex-direction: column; min-height: 214px; margin-top: 56px; }
.gbox--text p { max-width: 441px; margin: 54px auto 0; font: 500 20px/24px var(--sans); letter-spacing: -.02em; text-align: center; }
.gov__h + .gbox--text { margin-top: 56px; }
.gbox-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 64px; border: 1px solid var(--w-12); }
.gbox-pair .gbox { border: 0; min-height: 228px; }
.gbox-pair .gbox + .gbox { border-left: 1px solid var(--w-12); }
.gbox__badge { position: absolute; left: 50%; top: 66px; width: 96px; height: 96px; transform: translateX(-50%); fill: #fff; opacity: .64; }
.gov__note { max-width: 360px; margin-top: 16px; font-weight: 500; color: var(--w-64); }
.gov__note + .gbox--text { margin-top: 68px; }

/* ---------- enterprise: customer story ---------- */
.story--stat .story__big { max-width: 450px; font: 500 28px/28px var(--sans); letter-spacing: -.02em; }
.story__stat { margin-top: auto; margin-bottom: 50px; padding-top: 32px; }
.story__stat strong { display: block; font: 500 64px/64px var(--sans); letter-spacing: -.03em; }
.story__stat span { display: block; margin-top: 8px; font: 500 14px/16px var(--sans); }
.story--stat .story__points { margin-top: 0; padding-block: 21px 12px; border-top: 1px solid var(--k-08); }
.story--stat + .wrap .rail { margin-top: 4px; }
.story__quote--wide blockquote { max-width: 524px; }

/* ---------- enterprise: pilot ---------- */
.pilot { display: grid; grid-template-columns: minmax(0, 584fr) minmax(0, 632fr); padding-block: 100px 84px; }
.pilot__copy p { max-width: 414px; margin-top: 24px; font-weight: 500; color: var(--w-72); }
.pilot__copy .h2 { max-width: 497px; }
.pilot__steps { position: relative; min-height: 516px; padding: 32px; }
.pilot__steps .corners { top: 0; bottom: 0; left: 0; right: 0; }
.steps { position: relative; display: grid; gap: 48px; }
.steps::before { content: ''; position: absolute; left: 11.5px; top: 24px; bottom: 24px; width: 1px; background: var(--w-12); }
.steps::after { content: ''; position: absolute; left: 8px; top: 95px; width: 8px; height: 8px; background: var(--mint); }
.steps .is-on::after { content: ''; position: absolute; left: 11.5px; top: 24px; height: 71px; border-left: 1px dotted var(--mint); }
.steps li { position: relative; display: grid; grid-template-columns: 24px minmax(0, 310px); gap: 32px; font: 500 20px/24px var(--sans); letter-spacing: -.02em; }
.steps li:first-child { margin-bottom: 48px; }
.steps span { display: grid; place-items: center; width: 24px; height: 24px; background: rgba(174, 240, 217, .24); font: 400 14px/16px var(--mono); letter-spacing: 0; color: var(--w-24); }
.steps p { opacity: .6; }
.steps .is-on span { background: var(--mint); color: #000; }
.steps .is-on p { opacity: 1; }

.cta--ent .cta__box h2 { margin-top: 32px; }
.cta--ent .cta__box p { max-width: 396px; }
.cta--ent .cta__box .actions { margin-top: 12px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .plans { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .plans__labels { display: none; }
  .plan { border-color: var(--w-12); }
  .plan--featured { border-color: var(--w-24); }
  .plan__head .h4 { margin-top: 24px; }
  .plan dt { display: block; font: 400 13px/20px var(--mono); text-transform: uppercase; color: var(--w-48); }
  .plan dd { margin-top: 4px; }
  .plan dl > div, .plan dl > div:last-child { height: auto; padding-block: 12px; }
  .mach-wrap { margin-top: 96px; }
  .mach { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 40px 56px; }
  .mach__side { padding-top: 0; }
  .ent-hero { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 40px; }
  .ent-hero__copy { padding-top: 0; }
  .gap { padding-block: 56px; }
  .intent--stages { padding-top: 96px; }
  .stages__head { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .roll { border-inline: 0; }
  .roll__grid { grid-template-columns: minmax(0, 1fr); }
  .roll__card, .roll__card:nth-child(2n), .roll__card:nth-last-child(-n + 2) { min-height: 0; border-right: 0; border-bottom: 1px solid var(--k-08); }
  .roll__card:last-child { border-bottom: 0; }
  .gov { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-bottom: 72px; }
  .pilot { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-block: 56px; }
  .pilot__steps { min-height: 0; }
}

@media (max-width: 720px) {
  .page-head { padding-top: 56px; }
  .page-head .display, .page-head p { margin-top: 20px; }
  .mach__row { grid-template-columns: 22px 62px minmax(0, 1fr) auto; padding-inline: 10px; }
  .mach__head { grid-template-columns: 84px minmax(0, 1fr) auto; padding-inline: 10px; }
  .mach__spec { font-size: 12px; }
  .mach__price { font-size: 12px; }
  .calc__hours { margin-top: 40px; }
  .calc__total, .calc__note { margin-top: 24px; }
  .ttabs { margin-top: 32px; }
  .ttab-panel { padding: 8px 16px; }
  .pr-thead { display: none; }
  .pr-trow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; height: auto; padding-block: 14px; }
  .pr-tname { grid-column: 1 / -1; }
  .pr-num { font-size: 13px; }
  .pr-num::before { display: block; font: 400 11px/16px var(--mono); text-transform: uppercase; color: var(--k-48); }
  .pr-trow .pr-num:nth-child(2)::before { content: 'Input'; }
  .pr-trow .pr-num:nth-child(3)::before { content: 'Output'; }
  .pr-trow .pr-num:nth-child(4)::before { content: 'Cached input'; }
  .pr-trow .pr-num:nth-child(5)::before { content: 'Cache write'; }
  .glove { padding-bottom: 40px; }
  .glove__points { margin-top: 16px; padding-top: 0; }
  .cta--plain .cta__box { padding-top: 32px; }
  .gap__cols { grid-template-columns: minmax(0, 1fr); margin-top: 32px; gap: 0; }
  .gap__cols article { padding-block: 40px 24px; }
  .gap__cols article::before { top: 18px; }
  .tabs--six .tabs__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tabs--six .tabs__tab { border-top: 1px solid var(--w-12); }
  .tabs--six .tabs__tab:nth-child(-n + 3) { border-top: 0; }
  .tabs--six .tabs__tab:nth-child(3n + 1) { border-left: 0; }
  .roll { padding-block: 64px; }
  .roll__grid { margin-top: 40px; }
  .roll__card, .roll__card:nth-child(2n), .roll__card:nth-last-child(-n + 2) { padding: 20px; }
  .roll__art > * { margin-top: 16px; }
  .roll .l-stack { width: 100%; }
  .roll .l-int:nth-child(2) { transform: none; }
  .roll .l-harness__row { grid-template-columns: 56px minmax(0, 1fr); }
  .plane { grid-template-columns: minmax(0, 1fr); }
  .plane__box { min-height: 0; gap: 16px; }
  .plane__link { height: 48px; border-block: 0; border-inline: 1px solid rgba(174, 240, 217, .24); }
  .gov__rule { margin-block: 48px; }
  .gbox--text { min-height: 0; margin-top: 32px; padding-bottom: 40px; }
  .gbox--text p { margin-top: 24px; font-size: 18px; }
  .gov__h + .gbox--text { margin-top: 32px; }
  .gbox-pair { margin-top: 32px; }
  .story--stat .story__big { font-size: 24px; line-height: 26px; }
  .story__stat { padding-top: 32px; }
  .pilot__steps { padding: 20px; }
  .steps { gap: 32px; }
  .steps li { grid-template-columns: 24px minmax(0, 1fr); gap: 16px; font-size: 18px; }
  .steps li:first-child { margin-bottom: 24px; }
  .steps::after { top: 72px; }
  .steps .is-on::after { height: 48px; }
}