/* union-system.css — union.ai design system for Webflow-handoff prototypes. Tokens extracted from the live Webflow CSS bundle (Sept 2026). Every class below already exists in the union.ai Webflow project — prototypes reuse these names so the dev maps elements 1:1. */ @font-face { font-family: "Yellix"; src: url(https://cdn.prod.website-files.com/690e38b4066a3319f4dad995/690e3bdd21a73f26db81f180_Yellix-Regular.otf) format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Yellix"; src: url(https://cdn.prod.website-files.com/690e38b4066a3319f4dad995/690e3bddb82800e2bea44362_Yellix-Medium.otf) format("opentype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Yellix"; src: url(https://cdn.prod.website-files.com/690e38b4066a3319f4dad995/690e3bdd3bb86c06d050b493_Yellix-SemiBold.otf) format("opentype"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url(https://cdn.prod.website-files.com/690e38b4066a3319f4dad995/691d182fe284c14edec412ca_IBMPlexMono-Regular.ttf) format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url(https://cdn.prod.website-files.com/690e38b4066a3319f4dad995/691d182f3766cd21fbc11742_IBMPlexMono-Bold.ttf) format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } /* ═══ _shared/union-system.css ═══ */ /* union-system.css — union.ai design system for Webflow-handoff prototypes. Tokens extracted from the live Webflow CSS bundle (Sept 2026). Every class below already exists in the union.ai Webflow project — prototypes reuse these names so the dev maps elements 1:1. */ @font-face { font-family: "Yellix"; src: url(https://cdn.prod.website-files.com/690e38b4066a3319f4dad995/690e3bdd21a73f26db81f180_Yellix-Regular.otf) format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Yellix"; src: url(https://cdn.prod.website-files.com/690e38b4066a3319f4dad995/690e3bddb82800e2bea44362_Yellix-Medium.otf) format("opentype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Yellix"; src: url(https://cdn.prod.website-files.com/690e38b4066a3319f4dad995/690e3bdd3bb86c06d050b493_Yellix-SemiBold.otf) format("opentype"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url(https://cdn.prod.website-files.com/690e38b4066a3319f4dad995/691d182fe284c14edec412ca_IBMPlexMono-Regular.ttf) format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url(https://cdn.prod.website-files.com/690e38b4066a3319f4dad995/691d182f3766cd21fbc11742_IBMPlexMono-Bold.ttf) format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } #union-pricing { /* brand */ --brand-dark: #18191a; --brand-gray-100: #f2f3f3; --brand-gray-300: #cccfd1; --brand-gray-350: #81858b; --brand-gray-400: #72757a; --brand-yellow-500: #fcb51f; --brand-purple: #6f2aef; --brand-red: #cd3234; --brand-green: #78b856; --brand-orange: #e8883a; --brand-blue: #3378f5; --brand-pink: #ad3abb; --brand-brown: #a65a17; --brand-blue-dark: #1648b8; --brand-green-dark: #008013; --brand-red-dark: #980202; --white-12: #ffffff1f; /* theme roles */ --theme-background: #000000; --theme-heading: #ffffff; --theme-body: var(--brand-gray-300); --theme-accent: var(--brand-yellow-500); --theme-border: var(--white-12); --theme-card: var(--brand-dark); /* type */ --font-body: "Yellix", Arial, sans-serif; --font-heading: "Yellix", Arial, sans-serif; --font-code: "IBM Plex Mono", Tahoma, sans-serif; --heading-weight: 600; --heading-line-height: 1.05; /* ui — note: tighter radii than flyte.org */ --radius-small: .5rem; --radius-medium: 1rem; --radius-large: 1.5rem; --border-width: 1px; } #union-pricing *, #union-pricing *::before, #union-pricing *::after { box-sizing: border-box; } #union-pricing { margin: 0; background-color: var(--theme-background); color: var(--theme-body); font-family: var(--font-body); font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; } #union-pricing h1, #union-pricing h2, #union-pricing h3, #union-pricing h4, #union-pricing h5, #union-pricing h6 { margin: 0; color: var(--theme-heading); font-family: var(--font-heading); font-weight: var(--heading-weight); line-height: var(--heading-line-height); } #union-pricing p { margin: 0; } #union-pricing a { color: inherit; } #union-pricing img { max-width: 100%; display: block; } #union-pricing code, #union-pricing pre { font-family: var(--font-code); } /* ---- Client-First structure ---- */ #union-pricing .padding-global { padding-left: 5%; padding-right: 5%; } #union-pricing .container-large { width: 100%; max-width: 80rem; margin-left: auto; margin-right: auto; } #union-pricing .container-medium { width: 100%; max-width: 64rem; margin-left: auto; margin-right: auto; } #union-pricing .container-small { width: 100%; max-width: 48rem; margin-left: auto; margin-right: auto; } #union-pricing .padding-section-large { padding-top: 7rem; padding-bottom: 7rem; } #union-pricing .padding-section-medium { padding-top: 5rem; padding-bottom: 5rem; } #union-pricing .padding-section-small { padding-top: 3rem; padding-bottom: 3rem; } /* Client-First directional modifiers — pair with a padding-section-* class to keep the padding on one side only (e.g. `padding-section-large padding-top`). */ #union-pricing .padding-top { padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; } #union-pricing .padding-bottom { padding-top: 0 !important; padding-right: 0 !important; padding-left: 0 !important; } /* ---- headings ---- */ #union-pricing .heading-style-h1 { font-size: 3.5rem; line-height: 1.2; font-weight: 700; } #union-pricing .heading-style-h2 { font-size: 3rem; line-height: var(--heading-line-height); font-weight: 700; } #union-pricing .heading-style-h3 { font-size: 2.5rem; line-height: 1.1; font-weight: var(--heading-weight); } #union-pricing .heading-style-h4 { font-size: 2rem; line-height: 1.2; font-weight: var(--heading-weight); } #union-pricing .heading-style-h5 { font-size: 1.5rem; line-height: 1.3; font-weight: var(--heading-weight); } #union-pricing .heading-style-h6 { font-size: 1.25rem; line-height: 1.4; font-weight: var(--heading-weight); } /* ---- text utilities ---- */ #union-pricing .text-size-large { font-size: 1.25rem; } #union-pricing .text-size-medium { font-size: 1.125rem; } #union-pricing .text-size-regular { font-size: 1rem; } #union-pricing .text-size-small { font-size: .875rem; } #union-pricing .text-weight-normal { font-weight: 400; } #union-pricing .text-weight-medium { font-weight: 500; } #union-pricing .text-weight-semibold { font-weight: 600; } #union-pricing .text-align-center { text-align: center; } #union-pricing .max-width-small { max-width: 30rem; } #union-pricing .max-width-medium { max-width: 42rem; } #union-pricing .max-width-large { max-width: 56rem; } #union-pricing .align-center { margin-left: auto; margin-right: auto; } #union-pricing .hide { display: none; } /* tagline = bordered pill chip (unlike flyte.org's bare text tagline) */ #union-pricing .text-style-tagline { display: inline-block; border: 1px solid var(--theme-border); border-radius: var(--radius-large); background-color: var(--theme-border); padding: .5rem 1rem; margin-bottom: 1rem; font-size: .875rem; font-weight: 600; color: var(--theme-heading); text-decoration: none; } /* ---- spacers (empty divs, height only) ---- */ #union-pricing .spacer-tiny { height: .25rem; } #union-pricing .spacer-xxsmall { height: .5rem; } #union-pricing .spacer-xsmall { height: .75rem; } #union-pricing .spacer-small { height: 1rem; } #union-pricing .spacer-medium { height: 1.5rem; } #union-pricing .spacer-large { height: 2.5rem; } #union-pricing .spacer-xlarge { height: 3.5rem; } #union-pricing .spacer-xxlarge { height: 5rem; } /* ---- buttons ---- */ #union-pricing .button { display: flex; justify-content: center; align-items: center; column-gap: .375rem; row-gap: .375rem; border: 1px solid var(--theme-accent); border-radius: var(--radius-large); background-color: var(--theme-accent); color: #000000; text-align: center; padding: .5rem 1.25rem; font-weight: 600; text-decoration: none; cursor: pointer; } #union-pricing .button.is-secondary { border-color: var(--theme-border); background-color: transparent; color: var(--theme-accent); } #union-pricing .button-group { display: flex; flex-wrap: wrap; align-items: center; column-gap: 1rem; row-gap: 1rem; } /* ---- dark card — the site's signature surface ---- */ #union-pricing .card { background-color: var(--theme-card); border: 1px solid var(--theme-border); border-radius: var(--radius-medium); } @media (max-width: 991px) { #union-pricing .heading-style-h1 { font-size: 3.25rem; } #union-pricing .heading-style-h2 { font-size: 2.75rem; } #union-pricing .heading-style-h3 { font-size: 2.25rem; } #union-pricing .padding-section-large { padding-top: 6rem; padding-bottom: 6rem; } } @media (max-width: 767px) { #union-pricing .heading-style-h1 { font-size: 2.5rem; } #union-pricing .heading-style-h2 { font-size: 2.25rem; } #union-pricing .heading-style-h3 { font-size: 2rem; } #union-pricing .heading-style-h4 { font-size: 1.75rem; } #union-pricing .padding-section-large { padding-top: 4rem; padding-bottom: 4rem; } #union-pricing .padding-section-medium { padding-top: 3rem; padding-bottom: 3rem; } } /* ── prototype deviation: body-text legibility ── The values above are extracted from the live Webflow bundle. These four utilities carry almost all the non-heading prose on the three platform pages, and at the extracted sizes they read small on the dark ground, so each is bumped 1px. Headings are untouched. If the Webflow project adopts this, fold the values in above and delete this block. */ #union-pricing .text-size-large { font-size: 1.3125rem; } /* was 1.25rem / 20px → 21px */ #union-pricing .text-size-medium { font-size: 1.1875rem; } /* was 1.125rem / 18px → 19px */ #union-pricing .text-size-regular { font-size: 1.0625rem; } /* was 1rem / 16px → 17px */ #union-pricing .text-size-small { font-size: .9375rem; } /* was .875rem / 14px → 15px *//* ── prototype deviation: scrollbars ── The default light scrollbars sit badly on the dark code panels and console recreations — they are the first thing you notice in a snippet that scrolls sideways. Thin, low-contrast, brighter on hover. Firefox takes the standard properties; WebKit the pseudo-elements. Same treatment as ../home/. */ #union-pricing * { scrollbar-width: thin; scrollbar-color: rgba(236,234,228,.18) transparent; } #union-pricing ::-webkit-scrollbar { width: 10px; height: 10px; } #union-pricing ::-webkit-scrollbar-track { background: transparent; } #union-pricing ::-webkit-scrollbar-thumb { background: rgba(236,234,228,.16); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; } #union-pricing ::-webkit-scrollbar-thumb:hover { background: rgba(236,234,228,.30); background-clip: content-box; } #union-pricing ::-webkit-scrollbar-corner { background: transparent; } /* ── prototype deviation: in-page anchor behaviour ── The hero's secondary CTA and the proof rows link to sections on the same page. Without these two rules the browser jumps instantly and lands with the heading underneath the sticky navbar. Smooth scroll is disabled for visitors who asked for reduced motion. */ #union-pricing { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { #union-pricing { scroll-behavior: auto; } } #union-pricing [id] { scroll-margin-top: 6rem; } /* some anchors target widgets, not sections *//* ═══ pricing/style.css ═══ *//* pricing/style.css — union.ai/pricing. Everything ABOVE the "WEBFLOW: paste into an Embed" banner is Designer-expressible: plain per-class rules the dev can rebuild in the Designer. Everything BELOW it is custom code (tables, pseudo-elements, :hover / :focus-visible, the accordion state, the responsive block) — paste that into an HTML Embed or the page . *//* Eyebrows are yellow mono caps, not chips — the union-system default is a bordered pill. Identical override to ../sovereign-ai/, ../model-factory/ and ../advanced-scheduling/; keep the four in step. */ #union-pricing .text-style-tagline { border-style: none; background-color: transparent; padding: 0; color: var(--brand-yellow-500); font-family: var(--font-code); font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; } /* ---------------------------------------------------------------- nav/footer placeholders */ #union-pricing .nav-placeholder_logo { color: var(--theme-heading); font-weight: 600; font-size: 1.125rem; } #union-pricing .footer-placeholder { border-top: 1px solid var(--theme-border); } #union-pricing .footer-placeholder_row { display: flex; align-items: center; justify-content: space-between; padding-top: 2rem; padding-bottom: 2rem; } #union-pricing .footer-placeholder_note { color: var(--brand-gray-400); } /* ---------------------------------------------------------------- shared page bits */ #union-pricing .pricing-strong { color: var(--theme-heading); font-weight: 600; } #union-pricing .pricing-link { color: var(--theme-accent); text-decoration: none; font-weight: 600; } #union-pricing .cta-stack { display: flex; flex-direction: column; align-items: center; row-gap: .4375rem; } #union-pricing .cta-note { font-size: .875rem; color: var(--brand-gray-350); } /* ---------------------------------------------------------------- hero *//* The hero is short on purpose: the tier cards are the first thing worth reading, so the section carries no bottom padding of its own — the tiers section supplies it. */ #union-pricing .section_pricing-hero { padding-bottom: 0; } #union-pricing .pricing-hero_content { display: block; } #union-pricing .pricing-trial { display: flex; flex-direction: column; align-items: center; } #union-pricing .pricing-trial_kicker { display: inline-block; background-color: var(--theme-accent); color: #000000; border-radius: var(--radius-large); padding: .4375rem 1rem; font-family: var(--font-code); font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } #union-pricing .pricing-trial_head { color: var(--theme-heading); font-size: 1.75rem; font-weight: 600; line-height: 1.2; } #union-pricing .pricing-trial_sub { color: var(--brand-gray-300); } /* ---------------------------------------------------------------- tiers */ #union-pricing .section_pricing-tiers { padding-top: 3.5rem; padding-bottom: 3.5rem; } #union-pricing .pricing-tiers_grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; row-gap: 1.5rem; } #union-pricing .pricing-tier { display: flex; flex-direction: column; row-gap: 1.25rem; padding: 2rem; } #union-pricing .pricing-tier_name { color: var(--theme-heading); font-size: 2.5rem; font-weight: 600; line-height: 1; letter-spacing: -.01em; } #union-pricing .pricing-tier_pricing { display: block; } #union-pricing .pricing-tier_price { color: var(--theme-heading); font-size: 1.375rem; font-weight: 600; line-height: 1.2; } #union-pricing .pricing-tier_unit { color: var(--brand-gray-300); font-size: 1rem; font-weight: 400; margin-left: .25rem; } #union-pricing .pricing-tier_note { color: var(--brand-gray-350); font-size: .875rem; margin-top: .375rem; } #union-pricing .pricing-tier_pitch { color: var(--brand-gray-300); } #union-pricing .pricing-tier_list { list-style-type: none; margin: 0; padding-top: 1.25rem; padding-left: 0; display: grid; row-gap: .625rem; border-top: 1px solid var(--theme-border); } #union-pricing .pricing-tier_item { color: var(--brand-gray-300); font-size: .9375rem; padding-left: 1.75rem; } #union-pricing .pricing-tier_cta { margin-top: auto; display: flex; flex-direction: column; row-gap: .75rem; } #union-pricing .pricing-tier_button { width: 100%; } /* ---------------------------------------------------------------- quote */ #union-pricing .pricing-quote { display: block; } #union-pricing .pricing-quote_text { color: var(--theme-heading); font-size: 1.375rem; font-weight: 500; line-height: 1.45; max-width: 52rem; margin-left: auto; margin-right: auto; } #union-pricing .pricing-quote_cite { color: var(--brand-gray-350); } /* ---------------------------------------------------------------- rate card */ #union-pricing .pricing-rates_head { display: block; } #union-pricing .pricing-rates_note { border-left: 2px solid var(--theme-accent); background-color: rgba(255,255,255,.03); border-radius: 0 var(--radius-small) var(--radius-small) 0; padding: .75rem 1rem; color: var(--brand-gray-300); } #union-pricing .pricing-rates_notelink { color: var(--theme-accent); text-decoration: none; font-weight: 600; white-space: nowrap; } /* `1fr` carries an implicit auto min-size, so a wide row inside a ladder card pushed the track past the viewport on a phone (measured 586px at vw=390). */ #union-pricing .pricing-ladders { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1.5rem; row-gap: 1.5rem; } #union-pricing .pricing-ladder { min-width: 0; } #union-pricing .pricing-ladder { display: flex; flex-direction: column; row-gap: 1.125rem; padding: 1.75rem; } #union-pricing .pricing-ladder.is-wide { grid-column: 1 / -1; } #union-pricing .pricing-ladder_head { display: flex; align-items: baseline; justify-content: space-between; column-gap: 1rem; row-gap: .25rem; flex-wrap: wrap; } #union-pricing .pricing-ladder_unit { font-family: var(--font-code); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-gray-350); } #union-pricing .pricing-ladder_def { color: var(--brand-gray-300); } #union-pricing .pricing-ladder_foot { display: flex; align-items: center; column-gap: .5rem; row-gap: .25rem; flex-wrap: wrap; font-size: .8125rem; color: var(--brand-gray-350); } #union-pricing .pricing-ladder_cut { color: var(--brand-green); font-family: var(--font-code); } #union-pricing .pricing-ladder_footnote { color: var(--brand-gray-350); } #union-pricing .pricing-bands { display: grid; row-gap: .375rem; } #union-pricing .pricing-band { display: flex; align-items: center; justify-content: space-between; column-gap: 1rem; padding: .6875rem .875rem; border-radius: var(--radius-small); background-color: rgba(255,255,255,.03); font-family: var(--font-code); font-size: .875rem; } #union-pricing .pricing-band.is-first { background-color: rgba(252,181,31,.12); } #union-pricing .pricing-band_range { color: var(--brand-gray-300); } #union-pricing .pricing-band_qual { color: var(--brand-gray-350); font-size: .75rem; margin-left: .5rem; } #union-pricing .pricing-band_rate { color: var(--theme-heading); font-variant-numeric: tabular-nums; white-space: nowrap; } #union-pricing .pricing-gpu_wrap { overflow-x: auto; } #union-pricing .pricing-gpu_cls { display: block; color: var(--theme-heading); font-weight: 600; margin-bottom: .125rem; } #union-pricing .pricing-gpu_why { display: block; color: var(--brand-gray-350); font-size: .8125rem; margin-bottom: .5rem; } #union-pricing .pricing-gpu_button { display: inline-flex; } #union-pricing .pricing-chips { display: flex; flex-wrap: wrap; column-gap: .375rem; row-gap: .375rem; } #union-pricing .pricing-chip { font-family: var(--font-code); font-size: .75rem; padding: .125rem .5rem; border-radius: var(--radius-small); border: 1px solid var(--theme-border); color: var(--brand-gray-300); white-space: nowrap; } #union-pricing .pricing-rates_close { display: flex; align-items: center; justify-content: space-between; column-gap: 2rem; row-gap: 1.25rem; flex-wrap: wrap; border: 1px solid var(--theme-border); border-radius: var(--radius-medium); padding: 1.25rem 1.75rem; } #union-pricing .pricing-rates_closetext { flex: 1 1 26rem; color: var(--brand-gray-300); } #union-pricing .pricing-rates_closebutton { flex: none; } #union-pricing .pricing-byoc { display: flex; align-items: center; column-gap: 2rem; row-gap: 1.25rem; flex-wrap: wrap; padding: 1.5rem 1.75rem; } #union-pricing .pricing-byoc_fee { font-family: var(--font-code); font-size: 1.625rem; color: var(--theme-heading); white-space: nowrap; } #union-pricing .pricing-byoc_feeunit { display: block; font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-gray-350); margin-top: .25rem; } #union-pricing .pricing-byoc_text { flex: 1 1 22rem; color: var(--brand-gray-300); } #union-pricing .pricing-byoc_button { flex: none; } /* ---------------------------------------------------------------- comparison */ #union-pricing .pricing-compare_head { display: block; } #union-pricing .pricing-compare_wrap { overflow-x: auto; } #union-pricing .pricing-compare_sub { display: block; color: var(--brand-gray-350); font-size: .8125rem; margin-top: .125rem; } #union-pricing .pricing-dash { color: var(--brand-gray-400); } /* ---------------------------------------------------------------- faq */ #union-pricing .pricing-faq_head { display: block; } #union-pricing .pricing-faq_list { display: grid; row-gap: .75rem; } #union-pricing .pricing-faq_item { padding-left: 1.5rem; padding-right: 1.5rem; } #union-pricing .pricing-faq_q { display: flex; align-items: center; justify-content: space-between; column-gap: 1rem; width: 100%; border-style: none; background-color: transparent; color: var(--theme-heading); font-family: inherit; font-size: 1rem; font-weight: 500; text-align: left; padding: 1.125rem 0; cursor: pointer; } #union-pricing .pricing-faq_qtext { color: var(--theme-heading); } #union-pricing .pricing-faq_new { display: inline-block; font-family: var(--font-code); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-green); border: 1px solid var(--brand-green); border-radius: var(--radius-small); padding: .0625rem .375rem; margin-left: .5rem; vertical-align: middle; } #union-pricing .pricing-faq_icon { flex: none; width: 1rem; height: 1rem; } #union-pricing .pricing-faq_a { padding-bottom: 1.25rem; color: var(--brand-gray-300); max-width: 60ch; } /* ---------------------------------------------------------------- calculator */ #union-pricing .pricing-presets { display: flex; flex-wrap: wrap; align-items: center; column-gap: .5rem; row-gap: .5rem; } #union-pricing .pricing-presets_label { font-family: var(--font-code); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-gray-350); margin-right: .25rem; } #union-pricing .pricing-preset { border: 1px solid var(--theme-border); border-radius: var(--radius-large); background-color: transparent; color: var(--brand-gray-300); font-family: inherit; font-size: .875rem; padding: .4375rem 1rem; cursor: pointer; } #union-pricing .pricing-calc { padding: 2rem; } #union-pricing .pricing-calc_grid { display: grid; grid-template-columns: 1.1fr .9fr; column-gap: 2.5rem; row-gap: 2rem; align-items: start; } #union-pricing .pricing-calc_inputs { display: grid; row-gap: 0; min-width: 0; } #union-pricing .pricing-calc_output { min-width: 0; } #union-pricing .pricing-calc_panel { border: 1px solid var(--theme-border); border-radius: var(--radius-medium); background-color: rgba(255,255,255,.03); padding: 1.75rem; } #union-pricing .pricing-group { display: grid; border-top: 1px solid var(--theme-border); } #union-pricing .pricing-group:first-child { border-top-style: none; } #union-pricing .pricing-group_head { display: flex; align-items: center; justify-content: space-between; column-gap: 1rem; width: 100%; border-style: none; background-color: transparent; text-align: left; padding: .875rem 0; cursor: pointer; font-family: var(--font-code); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--theme-accent); } #union-pricing .pricing-group_body { display: grid; row-gap: 1.25rem; padding-bottom: 1.75rem; } #union-pricing .pricing-field { display: grid; row-gap: .5rem; } #union-pricing .pricing-field_top { display: flex; align-items: baseline; justify-content: space-between; column-gap: 1rem; } #union-pricing .pricing-field_label { color: var(--brand-gray-300); font-size: .9375rem; } #union-pricing .pricing-field_value { color: var(--theme-heading); font-family: var(--font-code); font-size: .9375rem; } #union-pricing .pricing-field_hint { color: var(--brand-gray-400); font-size: .8125rem; } #union-pricing .pricing-slider { width: 100%; } #union-pricing .pricing-choice { display: flex; flex-wrap: wrap; column-gap: .375rem; row-gap: .375rem; } #union-pricing .pricing-choice_btn { border: 1px solid var(--theme-border); border-radius: var(--radius-small); background-color: transparent; color: var(--brand-gray-300); font-family: inherit; font-size: .875rem; padding: .375rem .875rem; cursor: pointer; } #union-pricing .pricing-total_label { font-family: var(--font-code); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-gray-350); } #union-pricing .pricing-total_value { color: var(--theme-heading); font-size: 3rem; font-weight: 600; line-height: 1.1; margin-top: .375rem; } #union-pricing .pricing-total_note { color: var(--brand-gray-350); font-size: .875rem; margin-top: .5rem; } #union-pricing .pricing-bar { display: flex; height: .5rem; border-radius: 999px; overflow: hidden; background-color: rgba(255,255,255,.06); } #union-pricing .pricing-bar_seg { height: 100%; } #union-pricing .pricing-bar_seg.is-actions { background-color: var(--brand-yellow-500); } #union-pricing .pricing-bar_seg.is-vcpu { background-color: var(--brand-blue); } #union-pricing .pricing-bar_seg.is-memory { background-color: var(--brand-green); } #union-pricing .pricing-bar_seg.is-gpu { background-color: var(--brand-purple); } #union-pricing .pricing-meters { display: grid; margin-top: 1.25rem; } #union-pricing .pricing-meter { display: grid; grid-template-columns: 7rem 1fr auto; column-gap: .75rem; align-items: baseline; padding: .625rem 0; border-top: 1px solid var(--theme-border); } #union-pricing .pricing-meter_name { color: var(--brand-gray-300); font-size: .875rem; } #union-pricing .pricing-key { display: inline-block; width: .5rem; height: .5rem; border-radius: 2px; margin-right: .5rem; } #union-pricing .pricing-key.is-actions { background-color: var(--brand-yellow-500); } #union-pricing .pricing-key.is-vcpu { background-color: var(--brand-blue); } #union-pricing .pricing-key.is-memory { background-color: var(--brand-green); } #union-pricing .pricing-key.is-gpu { background-color: var(--brand-purple); } #union-pricing .pricing-meter_vol { font-family: var(--font-code); font-size: .8125rem; color: var(--brand-gray-350); } #union-pricing .pricing-meter_cost { font-family: var(--font-code); font-size: .875rem; color: var(--theme-heading); text-align: right; } #union-pricing .pricing-meter_marg { grid-column: 2 / -1; font-family: var(--font-code); font-size: .6875rem; color: var(--brand-gray-400); margin-top: .1875rem; } #union-pricing .pricing-lines { display: grid; row-gap: .375rem; margin-top: 1.25rem; padding-top: 1.125rem; border-top: 1px solid var(--theme-border); } #union-pricing .pricing-line { display: flex; justify-content: space-between; column-gap: 1rem; font-size: .875rem; color: var(--brand-gray-350); } #union-pricing .pricing-line_v { font-family: var(--font-code); color: var(--brand-gray-300); } #union-pricing .pricing-stats { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 1rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--theme-border); } #union-pricing .pricing-stat_val { color: var(--theme-heading); font-family: var(--font-code); font-size: 1.125rem; } #union-pricing .pricing-stat_label { color: var(--brand-gray-400); font-size: .75rem; margin-top: .25rem; } #union-pricing .pricing-warnings { display: grid; row-gap: .5rem; } #union-pricing .pricing-warn { border-left: 2px solid var(--brand-orange); background-color: rgba(232,136,58,.08); border-radius: 0 var(--radius-small) var(--radius-small) 0; padding: .625rem .875rem; font-size: .8125rem; color: var(--brand-gray-300); } #union-pricing .pricing-calc_cta { display: grid; justify-items: center; row-gap: .4375rem; margin-top: 1.5rem; } #union-pricing .pricing-calc_ctanote { color: var(--brand-gray-350); font-size: .8125rem; text-align: center; } #union-pricing .pricing-calc_assume { border: 1px solid var(--theme-border); border-radius: var(--radius-medium); padding: 1.5rem 1.75rem; } #union-pricing .pricing-calc_assumehead { color: var(--theme-heading); font-weight: 600; font-size: .9375rem; margin-bottom: .75rem; } #union-pricing .pricing-calc_assumelist { list-style-type: none; margin: 0; padding-left: 0; display: grid; row-gap: .4375rem; } #union-pricing .pricing-calc_assumeitem { color: var(--brand-gray-350); font-size: .875rem; padding-left: 1rem; } #union-pricing .pricing-calc_assumefoot { color: var(--brand-gray-400); margin-top: 1rem; } /* ---------------------------------------------------------------- cta */ #union-pricing .pricing-cta_band { padding: 3.5rem; } #union-pricing .pricing-cta_buttons { justify-content: center; } /* ══════════════════════════════════════════════════════════════════════════ WEBFLOW: paste into an Embed / page Everything below is custom code the Designer can't express — the two tables, pseudo-elements, :hover / :focus-visible, the accordion state, and the responsive block. ══════════════════════════════════════════════════════════════════════════ *//* ---- tier feature checks (pseudo-element bullet) ---- */ #union-pricing .pricing-tier_item { position: relative; } #union-pricing .pricing-tier_item::before { content: ""; position: absolute; left: 0; top: .125rem; width: 1.125rem; height: 1.125rem; border-radius: 50%; background-color: rgba(252,181,31,.12); border: 1px solid var(--theme-accent); } #union-pricing .pricing-tier_item::after { content: ""; position: absolute; left: .4375rem; top: .3125rem; width: .25rem; height: .5rem; border: solid var(--theme-accent); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); } #union-pricing .pricing-tier.is-featured { border-color: rgba(255,255,255,.2); box-shadow: inset 0 0 0 1px rgba(252,181,31,.12); } #union-pricing .pricing-rates_notelink::after { content: " \2192"; } #union-pricing .pricing-link:hover, #union-pricing .pricing-rates_notelink:hover { text-decoration: underline; } /* ---- GPU class table (Embed A) ---- */ #union-pricing .pricing-gpu_table { width: 100%; border-collapse: collapse; font-size: .9375rem; } #union-pricing .pricing-gpu_table th, #union-pricing .pricing-gpu_table td { padding: .875rem .75rem; border-top: 1px solid var(--theme-border); text-align: left; vertical-align: top; color: var(--brand-gray-300); } #union-pricing .pricing-gpu_table thead th { border-top: 0; padding-top: 0; font-family: var(--font-code); font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em; color: var(--brand-gray-350); font-weight: 400; } #union-pricing .pricing-gpu_table th.is-num, #union-pricing .pricing-gpu_table td.is-num { text-align: right; font-family: var(--font-code); font-variant-numeric: tabular-nums; color: var(--theme-heading); white-space: nowrap; } #union-pricing .pricing-gpu_table td.is-num.is-first { color: var(--theme-accent); } #union-pricing .pricing-gpu_table tr.is-reserved td { border-top: 1px solid rgba(255,255,255,.2); padding-top: 1.125rem; padding-bottom: .25rem; vertical-align: middle; } #union-pricing .pricing-gpu_table tr.is-reserved .pricing-gpu_why { margin-bottom: 0; } /* ---- plan comparison table (Embed B) ---- */ #union-pricing .pricing-compare_table { width: 100%; border-collapse: collapse; font-size: .9375rem; } #union-pricing .pricing-compare_table th, #union-pricing .pricing-compare_table td { padding: .875rem 1rem; border-top: 1px solid var(--theme-border); text-align: left; vertical-align: top; } #union-pricing .pricing-compare_table thead th { border-top: 0; padding-bottom: 1rem; color: var(--theme-heading); font-size: 1.0625rem; font-weight: 600; } #union-pricing .pricing-compare_table thead th.is-feature { color: var(--brand-gray-350); font-size: .875rem; font-weight: 400; } #union-pricing .pricing-compare_table tbody th { width: 34%; color: var(--brand-gray-300); font-weight: 400; } #union-pricing .pricing-compare_table td { color: var(--theme-heading); } #union-pricing .pricing-compare_table td.is-mono { font-family: var(--font-code); font-size: .875rem; } #union-pricing .pricing-compare_table tr.is-group th { border-top: 0; padding-top: 2.25rem; padding-bottom: .5rem; font-family: var(--font-code); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--theme-accent); } #union-pricing .pricing-compare_table tr.is-group + tr th, #union-pricing .pricing-compare_table tr.is-group + tr td { border-top: 1px solid rgba(255,255,255,.2); } #union-pricing .pricing-check { display: inline-block; width: 1.125rem; height: 1.125rem; border-radius: 50%; background-color: var(--theme-accent); position: relative; vertical-align: -.2rem; } #union-pricing .pricing-check::after { content: ""; position: absolute; left: .375rem; top: .1875rem; width: .25rem; height: .5rem; border: solid #000000; border-width: 0 2px 2px 0; transform: rotate(45deg); } /* ---- FAQ accordion state (replace with a Webflow Accordion / IX2 — see README) ---- */ #union-pricing .pricing-faq_a { display: none; } #union-pricing .pricing-faq_item.is-open .pricing-faq_a { display: block; } #union-pricing .pricing-faq_icon { position: relative; } #union-pricing .pricing-faq_icon::before, #union-pricing .pricing-faq_icon::after { content: ""; position: absolute; left: 0; top: .4375rem; width: 1rem; height: 2px; border-radius: 1px; background-color: var(--theme-accent); } #union-pricing .pricing-faq_icon::after { transform: rotate(90deg); transition: transform .18s ease, opacity .18s ease; } #union-pricing .pricing-faq_item.is-open .pricing-faq_icon::after { transform: rotate(0deg); opacity: 0; } #union-pricing .pricing-faq_q:hover .pricing-faq_qtext { color: var(--theme-accent); } #union-pricing .pricing-faq_item { transition: border-color .18s ease; } #union-pricing .pricing-faq_item:hover { border-color: rgba(255,255,255,.2); } @media (prefers-reduced-motion: reduce) { #union-pricing .pricing-faq_icon::after, #union-pricing .pricing-faq_item, #union-pricing .pricing-group_icon::after { transition: none; } } /* ---- table of contents ---- Four hairline-separated rows above the rate card, each a hash link to a section further down. The rule sits on the item rather than the container so the list closes with one too, the way the reference does. */ #union-pricing .section_pricing-toc { padding-top: 1rem; } #union-pricing .pricing-toc { display: block; border-top: 1px solid var(--theme-border); } #union-pricing .pricing-toc_item { display: flex; align-items: flex-start; justify-content: space-between; column-gap: 2rem; padding: 1.5rem 0; border-bottom: 1px solid var(--theme-border); color: inherit; text-decoration: none; } #union-pricing .pricing-toc_text { display: grid; row-gap: .375rem; max-width: 74ch; } #union-pricing .pricing-toc_title { color: var(--theme-heading); font-size: 1.25rem; font-weight: 500; line-height: 1.3; } #union-pricing .pricing-toc_desc { color: var(--brand-gray-300); font-size: 1rem; line-height: 1.5; text-wrap: pretty; } /* the arrow is the only thing saying "this row is a link" before hover */ #union-pricing .pricing-toc_arrow { flex: none; color: var(--theme-accent); font-size: 1.125rem; line-height: 1.6; opacity: .5; transition: transform .18s ease, opacity .18s ease; } #union-pricing .pricing-toc_item:hover .pricing-toc_title { color: var(--theme-accent); } #union-pricing .pricing-toc_item:hover .pricing-toc_arrow { opacity: 1; transform: translateY(3px); } @media (prefers-reduced-motion: reduce) { #union-pricing .pricing-toc_arrow { transition: none; } #union-pricing .pricing-toc_item:hover .pricing-toc_arrow { transform: none; } } /* ---- calculator: input-group accordion (Embed C) ---- Thirteen sliders is a long column next to a sticky output panel, so the groups collapse and script.js keeps exactly one of them open. Same plus/minus idiom and the same is-open class as the FAQ above, so the page has one accordion pattern rather than two — the FAQ stays multi-open, this row does not. */ #union-pricing .pricing-group:not(.is-open) .pricing-group_body { display: none; } #union-pricing .pricing-group_icon { position: relative; flex: none; width: 1rem; height: 1rem; } #union-pricing .pricing-group_icon::before, #union-pricing .pricing-group_icon::after { content: ""; position: absolute; left: 0; top: .4375rem; width: 1rem; height: 2px; border-radius: 1px; background-color: var(--theme-accent); } #union-pricing .pricing-group_icon::after { transform: rotate(90deg); transition: transform .18s ease, opacity .18s ease; } #union-pricing .pricing-group.is-open .pricing-group_icon::after { transform: rotate(0deg); opacity: 0; } #union-pricing .pricing-group_head:hover .pricing-group_headtext { color: var(--theme-heading); } /* ---- calculator: slider chrome (Embed C) ---- */ #union-pricing .pricing-slider { -webkit-appearance: none; appearance: none; height: .375rem; border-radius: 999px; background: rgba(255,255,255,.12); outline: none; cursor: pointer; } #union-pricing .pricing-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--theme-accent); border: 2px solid #000000; cursor: grab; } #union-pricing .pricing-slider::-moz-range-thumb { width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--theme-accent); border: 2px solid #000000; cursor: grab; } #union-pricing .pricing-slider:active::-webkit-slider-thumb { cursor: grabbing; } #union-pricing .pricing-slider:focus-visible { outline: 2px solid var(--theme-accent); outline-offset: 4px; } /* ---- calculator: selected states ---- */ #union-pricing .pricing-preset.is-on, #union-pricing .pricing-choice_btn.is-on { background-color: var(--theme-accent); border-color: var(--theme-accent); color: #000000; font-weight: 600; } #union-pricing .pricing-preset:hover:not(.is-on), #union-pricing .pricing-choice_btn:hover:not(.is-on) { border-color: var(--brand-gray-400); color: var(--theme-heading); } #union-pricing .pricing-preset:focus-visible, #union-pricing .pricing-choice_btn:focus-visible { outline: 2px solid var(--theme-accent); outline-offset: 2px; } /* ---- calculator: layout details the Designer can't express ---- */ #union-pricing .pricing-bar_seg { transition: width .18s ease; } #union-pricing .pricing-warnings:not(:empty) { margin-top: 1.25rem; } #union-pricing .pricing-calc_assumeitem::before { content: "·"; position: absolute; margin-left: -1rem; color: var(--theme-accent); } #union-pricing .pricing-calc_assumeitem { position: relative; } /* the estimate stays on screen while the sliders move */ #union-pricing .pricing-calc_panel { position: sticky; top: 6rem; } @media (prefers-reduced-motion: reduce) { #union-pricing .pricing-bar_seg { transition: none; } } /* ---- hover / focus ---- */ #union-pricing .button:hover { filter: brightness(1.07); } #union-pricing .pricing-faq_q:focus-visible, #union-pricing .pricing-group_head:focus-visible, #union-pricing .pricing-toc_item:focus-visible, #union-pricing .button:focus-visible, #union-pricing .pricing-link:focus-visible, #union-pricing .pricing-rates_notelink:focus-visible { outline: 2px solid var(--theme-accent); outline-offset: 2px; } @media (max-width: 991px) { #union-pricing .pricing-ladders { grid-template-columns: minmax(0, 1fr); } #union-pricing .pricing-tier { padding: 1.75rem; } #union-pricing .pricing-cta_band { padding: 2.5rem; } #union-pricing .pricing-compare_table tbody th { width: 40%; } #union-pricing .pricing-calc_grid { grid-template-columns: 1fr; } #union-pricing .pricing-calc_output { order: -1; } #union-pricing .pricing-calc_panel { position: static; } } @media (max-width: 767px) { #union-pricing .section_pricing-tiers { padding-top: 2.5rem; padding-bottom: 2.5rem; } #union-pricing .pricing-tiers_grid { grid-template-columns: 1fr; } #union-pricing .pricing-tier_name { font-size: 2rem; } #union-pricing .pricing-trial_head { font-size: 1.375rem; } #union-pricing .pricing-quote_text { font-size: 1.125rem; } #union-pricing .pricing-rates_close { flex-direction: column; align-items: flex-start; } #union-pricing .pricing-rates_closetext { flex: 0 0 auto; } #union-pricing .pricing-byoc { flex-direction: column; align-items: flex-start; } #union-pricing .pricing-byoc_text { flex: 0 0 auto; } #union-pricing .pricing-cta_band { padding: 2rem 1.5rem; } #union-pricing .pricing-compare_table { min-width: 34rem; } #union-pricing .pricing-gpu_table { min-width: 34rem; } #union-pricing .pricing-calc { padding: 1.25rem; } #union-pricing .pricing-calc_panel { padding: 1.25rem; } #union-pricing .pricing-total_value { font-size: 2.25rem; } #union-pricing .pricing-stats { grid-template-columns: 1fr; row-gap: .75rem; } #union-pricing .pricing-meter { grid-template-columns: 1fr auto; } #union-pricing .pricing-meter_name { grid-column: 1; grid-row: 1; } #union-pricing .pricing-meter_cost { grid-column: 2; grid-row: 1; } #union-pricing .pricing-meter_vol { grid-column: 1 / -1; grid-row: 2; } #union-pricing .pricing-meter_marg { grid-column: 1 / -1; grid-row: 3; margin-top: 0; } #union-pricing .pricing-calc_assume { padding: 1.25rem; } } @media (max-width: 479px) { #union-pricing .pricing-ladder { padding: 1.25rem; } #union-pricing .pricing-faq_item { padding-left: 1.125rem; padding-right: 1.125rem; } #union-pricing .pricing-band { font-size: .8125rem; } #union-pricing .pricing-band_qual { display: block; margin-left: 0; } } /* ═══ port-only: the page's relationship to the host site ═══ Carried over from the deployed sheet — these have no counterpart in the repo, because the standalone prototype has its own navbar and no host chrome to clear. */ #union-pricing { /* brand */ --brand-dark: #18191a; --brand-gray-100: #f2f3f3; --brand-gray-300: #cccfd1; --brand-gray-350: #81858b; --brand-gray-400: #72757a; --brand-yellow-500: #fcb51f; --brand-purple: #6f2aef; --brand-red: #cd3234; --brand-green: #78b856; --brand-orange: #e8883a; --brand-blue: #3378f5; --brand-pink: #ad3abb; --brand-brown: #a65a17; --brand-blue-dark: #1648b8; --brand-green-dark: #008013; --brand-red-dark: #980202; --white-12: #ffffff1f; /* theme roles */ --theme-background: #000000; --theme-heading: #ffffff; --theme-body: var(--brand-gray-300); --theme-accent: var(--brand-yellow-500); --theme-border: var(--white-12); --theme-card: var(--brand-dark); /* type */ --font-body: "Yellix", Arial, sans-serif; --font-heading: "Yellix", Arial, sans-serif; --font-code: "IBM Plex Mono", Tahoma, sans-serif; --heading-weight: 600; --heading-line-height: 1.05; /* ui — note: tighter radii than flyte.org */ --radius-small: .5rem; --radius-medium: 1rem; --radius-large: 1.5rem; --border-width: 1px; } #union-pricing { margin: 0; background-color: var(--theme-background); color: var(--theme-body); font-family: var(--font-body); font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; } #union-pricing p { margin: 0; } #union-pricing a { color: inherit; } #union-pricing img { max-width: 100%; display: block; } #union-pricing code, #union-pricing pre { font-family: var(--font-code); } /* ── prototype deviation: in-page anchor behaviour ── The hero's secondary CTA and the proof rows link to sections on the same page. Without these two rules the browser jumps instantly and lands with the heading underneath the sticky navbar. Smooth scroll is disabled for visitors who asked for reduced motion. */ #union-pricing { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { #union-pricing { scroll-behavior: auto; } } #union-pricing [id] { scroll-margin-top: 6rem; } /* ══════════════════════════════════════════════════════════════════════════ WEBFLOW PORT ONLY — none of this is in the repo's stylesheets. ══════════════════════════════════════════════════════════════════════════ */ /* Everything the stock /pricing page put in main-wrapper: the header, the tier grid, the info section, the FAQ, and the "section - testimonial" / "section - cta" ComponentInstances. set_visibility is unsupported on a ComponentInstance and remove_element is irreversible, so they are suppressed here rather than removed. Written as "every sibling but ours" so a stock section added later is hidden too, and so it does not depend on which class each component instance happens to render. This stylesheet loads on this page only, so the unscoped rule is page-scoped by virtue of that. */ .main-wrapper > *:not(#union-pricing) { display: none; } /* The host site styles BARE elements and those rules reach inside embeds — a scoped rule only wins for the properties it actually declares. Same trap the /signup and /inference ports hit. */ #union-pricing table { border-collapse: collapse; width: 100%; } #union-pricing th, #union-pricing td { text-align: left; } #union-pricing ul, #union-pricing ol { margin: 0; padding: 0; list-style: none; } #union-pricing button { font: inherit; color: inherit; } #union-pricing figure, #union-pricing blockquote, #union-pricing figcaption { margin: 0; padding: 0; border: 0; text-align: inherit; } /* Host navbar CTA: hidden from FIRST PAINT so the stock "Chat with an engineer" never flashes before the shim relabels it. visibility (not display) keeps the navbar from reflowing. Deliberately unscoped — the navbar renders outside the wrapper — and page-scoped by virtue of this stylesheet loading only here. */ .navigation .navbar2_button-wrapper > a.button { visibility: hidden; } .navigation .navbar2_button-wrapper > a.button[data-nav-cta-ready] { visibility: visible; } /* union-system.css sets scroll-behavior on `html`, which the scoper rewrites to `#union-pricing` — a div that isn't the scrolling element, so the declaration does nothing and the TOC's hash links jump where the prototype glides. The host project sets no scroll-behavior of its own, so restate it unscoped; this stylesheet loads on this page only. */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* The site's .navigation is position:fixed (~8rem tall), so the hero would sit under the nav links. Clear it the way the site's own first section does (.section_header26 { padding-top: 8rem }), and keep the #rates / #calculator / #compare / #faq anchor targets from landing behind the bar. */ #union-pricing { padding-top: 8rem; } #union-pricing [id] { scroll-margin-top: 8.5rem; }