/* ───────────────────────────────────────────────────────────────────────────── Virox site stylesheet. The Arc design system ships light tokens on :root and one .arc-inverse scope. This page needs both grounds addressable at once — the footer is always the opposite of the page it sits under — so both token sets are restated here and selected by [data-theme] on . Dark is the default and is written into the served markup, so the page is correct before a single byte of JS runs. ───────────────────────────────────────────────────────────────────────────── */ /* ── Theme scopes ──────────────────────────────────────────────────────────── Read the pair of selectors on each block as "page is dark" / "footer sitting under a light page", and vice versa. */ html[data-theme="dark"], html[data-theme="light"] .vx-foot { --surface-page: var(--zunu-ink); --surface-card: #071030; --surface-sunken: #00050F; --surface-hover: rgba(255, 255, 255, .06); --surface-active: rgba(255, 255, 255, .10); --surface-selected: rgba(0, 128, 255, .18); --surface-brand-subtle: rgba(0, 128, 255, .14); --surface-arc: var(--arc-night); --text-primary: var(--zunu-white); --text-heading: var(--zunu-white); --text-secondary: #9FB0C6; --text-tertiary: var(--zunu-steel); --text-brand: var(--arc-blue); --text-link: var(--arc-blue); --text-link-hover: #4DA5FF; --border-subtle: rgba(255, 255, 255, .07); --border-default: rgba(255, 255, 255, .12); --border-strong: rgba(255, 255, 255, .20); } html[data-theme="light"], html[data-theme="dark"] .vx-foot { --surface-page: var(--zunu-mist); --surface-card: var(--zunu-white); --surface-sunken: var(--neutral-100); --surface-hover: var(--neutral-100); --surface-active: var(--zunu-silver); --surface-selected: var(--blue-50); --surface-brand-subtle: var(--blue-50); --surface-arc: var(--arc-wash); --text-primary: var(--zunu-graphite); --text-heading: var(--zunu-ink); --text-secondary: var(--neutral-600); --text-tertiary: var(--neutral-500); --text-brand: var(--zunu-blue); --text-link: var(--zunu-blue); --text-link-hover: var(--blue-700); --border-subtle: var(--neutral-100); --border-default: var(--zunu-silver); --border-strong: var(--neutral-300); } /* ── Page variables ───────────────────────────────────────────────────────── Every value the canvas recomputed per theme. Page-scoped, so the inverted footer keeps the page's reading of them. */ html[data-theme="dark"] { --vx-bar: rgba(4, 10, 30, .78); --vx-hair: rgba(255, 255, 255, .07); --vx-line: rgba(255, 255, 255, .09); --vx-card: rgba(255, 255, 255, .028); --vx-chip: rgba(255, 255, 255, .06); --vx-lock-bg: rgba(0, 7, 32, .42); --vx-lock-edge: rgba(255, 255, 255, .07); --vx-wall: url('/assets/img/wallpaper-dark.webp'); --vx-veil: linear-gradient(180deg, rgba(0, 7, 32, 0) 0%, rgba(0, 7, 32, .42) 62%, #000720 100%); --vx-frame: rgba(6, 14, 38, .86); --vx-glass: rgba(9, 18, 50, .74); --vx-glass2: rgba(9, 18, 50, .9); --vx-dot: rgba(255, 255, 255, .16); --vx-scrim: rgba(0, 7, 32, .34); --vx-ga: #0080FF; --vx-gb: #B184F5; --vx-wash-a: .16; --vx-wash-b: .15; --vx-kicker: #7FBFFF; --vx-ok: #3BD9A4; --vx-deg: #F0C34F; --vx-down: #F08A8A; --vx-overall-bg: rgba(59, 217, 164, .12); --vx-beta-bg: rgba(240, 195, 79, .1); --vx-beta-edge: rgba(240, 195, 79, .32); --vx-pop-bg: rgba(255, 255, 255, .045); --vx-pop-shadow: 0 24px 60px -28px rgba(0, 7, 32, .9); --vx-micro: var(--text-tertiary); --vx-pill: rgba(0, 128, 255, .14); --vx-logo-tile: rgba(255, 255, 255, .08); --vx-logo-edge: rgba(255, 255, 255, .12); --vx-logo-notion: url('/assets/img/logo-notion-light.png'); --vx-foot-bg: #F4F7FB; --vx-foot-hair: rgba(0, 7, 32, .1); --vx-foot-grad: linear-gradient(90deg, #0080FF, #8A50F4); --vx-link: #7FBFFF; --vx-link-hover: #B3D9FF; /* stat sparkline hues: fill, then ink for the kicker above it */ --vx-s1-h: #05D4F2; --vx-s1-i: #5CE6F7; --vx-s2-h: #0080FF; --vx-s2-i: #7FBFFF; --vx-s3-h: #8A50F4; --vx-s3-i: #B184F5; --vx-s4-h: #3BD9A4; --vx-s4-i: #6FE3BC; } html[data-theme="light"] { --vx-bar: rgba(250, 251, 253, .84); --vx-hair: rgba(0, 7, 32, .08); --vx-line: rgba(0, 7, 32, .1); --vx-card: rgba(0, 7, 32, .022); --vx-chip: rgba(0, 7, 32, .045); /* Kept clear of --vx-chip (.045), which a live chip takes on hover — on paper the two greys sat almost on top of each other. */ --vx-lock-bg: rgba(0, 7, 32, .08); --vx-lock-edge: rgba(0, 7, 32, .14); --vx-wall: url('/assets/img/wallpaper-light.webp'); --vx-veil: linear-gradient(180deg, rgba(244, 247, 251, 0) 0%, rgba(244, 247, 251, .5) 62%, #F4F7FB 100%); --vx-frame: rgba(255, 255, 255, .9); --vx-glass: rgba(250, 251, 253, .84); --vx-glass2: rgba(255, 255, 255, .93); --vx-dot: rgba(0, 7, 32, .14); --vx-scrim: rgba(244, 247, 251, .3); --vx-ga: #0056A2; --vx-gb: #4312A8; --vx-wash-a: .1; --vx-wash-b: .09; --vx-kicker: #0056A2; --vx-ok: #096B4D; --vx-deg: #8A6204; --vx-down: #C02A2A; --vx-overall-bg: rgba(9, 107, 77, .08); --vx-beta-bg: rgba(138, 98, 4, .07); --vx-beta-edge: rgba(138, 98, 4, .24); --vx-pop-bg: rgba(0, 7, 32, .035); --vx-pop-shadow: 0 24px 60px -30px rgba(0, 7, 32, .22); --vx-micro: var(--neutral-600); --vx-pill: rgba(0, 86, 162, .1); --vx-logo-tile: #FFFFFF; --vx-logo-edge: var(--zunu-silver); --vx-logo-notion: url('/assets/img/logo-notion.png'); --vx-foot-bg: #04091E; --vx-foot-hair: rgba(255, 255, 255, .09); --vx-foot-grad: linear-gradient(90deg, #0056A2, #4312A8); --vx-link: var(--text-link); --vx-link-hover: var(--text-link-hover); --vx-s1-h: #0392CA; --vx-s1-i: #026F82; --vx-s2-h: #0056A2; --vx-s2-i: #0056A2; --vx-s3-h: #5417CE; --vx-s3-i: #4312A8; --vx-s4-h: #0C8A63; --vx-s4-i: #096B4D; } /* ── Ground ─────────────────────────────────────────────────────────────── */ html { background: var(--surface-page); } body { min-height: 100vh; background: var(--surface-page); color: var(--text-primary); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; } a { color: var(--vx-link); text-decoration: none; } a:hover { color: var(--vx-link-hover); text-decoration: none; } .arc-btn--brand:hover { background-position: 38% 38%; } /* The canvas swapped this button's variant with the theme. One class, resolved by the theme scope, so the markup stays the same on both grounds. */ html[data-theme="dark"] .arc-btn--alt { background: rgba(255, 255, 255, .10); color: var(--neutral-0); border-color: rgba(255, 255, 255, .14); } html[data-theme="dark"] .arc-btn--alt:hover { background: rgba(255, 255, 255, .16); } html[data-theme="light"] .arc-btn--alt { background: var(--surface-card); color: var(--text-primary); border-color: var(--border-default); box-shadow: var(--shadow-xs); } html[data-theme="light"] .arc-btn--alt:hover { background: var(--surface-hover); border-color: var(--border-strong); } html[data-theme="light"] .arc-btn--alt:active { background: var(--surface-active); } /* The design sets display inline nearly everywhere, which outranks the UA rule for [hidden]. Restate it so hiding a node actually hides it. */ [hidden] { display: none !important; } .vx-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .vx-skip { position: absolute; left: -9999px; top: 0; z-index: 200; padding: var(--space-3) var(--space-4); border-radius: 0 0 var(--radius-sm) 0; background: var(--surface-brand); color: #fff; font-size: 13px; font-weight: 600; } .vx-skip:focus { left: 0; color: #fff; } * { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .16) transparent; } html[data-theme="light"] * { scrollbar-color: rgba(0, 7, 32, .2) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 6px; border: 3px solid transparent; background-clip: content-box; } html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0, 7, 32, .2); background-clip: content-box; } ::-webkit-scrollbar-track { background: transparent; } /* ── Header ─────────────────────────────────────────────────────────────── */ .vx-navchip { padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--text-secondary); white-space: nowrap; } a.vx-navchip:hover { background: var(--vx-chip); color: var(--text-heading); } .vx-rail { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--vx-line); border-radius: 999px; background: var(--vx-card); backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass); } .vx-hd { height: 62px; } .vx-hd-signin { display: inline-flex; align-items: center; gap: 5px; } .vx-hd-nav-compact { display: none; flex: none; align-items: center; gap: var(--space-5); } .vx-navlink { font-size: 12.5px; font-weight: 500; color: var(--text-secondary); white-space: nowrap; } .vx-navlink:hover { color: var(--text-heading); } /* The rest state is the gradient sweep at 0%; hover runs it. Restate the colour on a:hover too, or the link colour fills the glyph and hides the clip. */ @keyframes vxSweep { from { background-position: 0% 50%; } to { background-position: -200% 50%; } } .vx-grad-link { background: linear-gradient(90deg, var(--vx-ga), var(--vx-gb), var(--vx-ga)); background-size: 200% 100%; background-position: 0% 50%; -webkit-background-clip: text; background-clip: text; color: transparent; } a.vx-grad-link, a.vx-grad-link:hover { color: transparent; } a.vx-grad-link:hover { animation: vxSweep 1.5s linear infinite; } /* ── Hero ───────────────────────────────────────────────────────────────── */ /* The hero copy runs to 800px — only show the mark once there is room beside it, and pull the measure in so the two never collide. */ /* The two hero lines are set, not wrapped — the underline is drawn to the width of "operating system" and a rewrap would leave it stranded. Below the width where the set lines fit, the headline steps down and wraps normally. */ .vx-h1__line { display: block; white-space: nowrap; } .vx-hero-mark { display: none; } /* 0% matches the rest state, so a stalled timeline shows no shift. */ @keyframes vxMarkFloat { 0% { transform: none; filter: saturate(108%) drop-shadow(0 22px 48px rgba(0, 7, 32, .45)); } 50% { transform: translateY(-9px) rotate(-1.6deg) scale(1.035); filter: saturate(116%) drop-shadow(0 32px 60px rgba(0, 7, 32, .55)); } 100% { transform: none; filter: saturate(108%) drop-shadow(0 22px 48px rgba(0, 7, 32, .45)); } } .vx-hero-mark:hover { animation: vxMarkFloat 3.2s cubic-bezier(.4, 0, .5, 1) infinite; } /* The play CTA answers a press: the glyph jumps forward, the button settles. */ @keyframes vxPlayPress { 0% { transform: none; } 38% { transform: translateX(3px) scale(1.16); } 100% { transform: none; } } .vx-play:active { transform: translateY(1px); } .vx-play:active .arc-icon { animation: vxPlayPress .34s cubic-bezier(.2, .85, .25, 1); } @media (min-width: 1080px) { .vx-hero-mark { display: block; } /* Track the mark rather than a fixed measure, or line 2 rewraps. */ .vx-hero-copy { max-width: calc(100% - 260px); } } /* ── The desktop mock ───────────────────────────────────────────────────── */ /* Windows inside the stage sit at fixed offsets tuned for a ~1150px stage. Below that the stage scales as one piece rather than reflowing, so the mock keeps its composition. Without JS it scrolls instead. */ .vx-stage-wrap { overflow-x: auto; overflow-y: hidden; } .vx-stage { position: relative; height: 432px; min-width: 840px; } .vx-stage-wrap.is-scaled { overflow: hidden; } .vx-stage-wrap.is-scaled .vx-stage { transform-origin: top left; transform: scale(var(--vx-stage-scale, 1)); } /* ── Interactive bits ───────────────────────────────────────────────────── */ .vx-tabpanel[hidden] { display: none; } .vx-cardlink { transition: border-color var(--duration-fast) var(--ease-out); } .vx-cardlink:hover { border-color: var(--vx-accent); } .vx-footlink { font-size: 12.5px; color: var(--text-secondary); } .vx-footlink:hover { color: var(--text-heading); } .vx-lockchip { display: inline-flex; align-items: center; gap: 5px; color: var(--text-tertiary); white-space: nowrap; cursor: default; } /* A closed destination in the nav sits in its own recessed well, so it reads as a state rather than as a link that happens to be grey. The fill is darker than the rail it sits in, and deliberately unlike the lighter fill a live chip takes on hover — locked should not look hovered. Inset shadow, not a border: a border would make these chips 2px wider than the live ones and nudge the rail out of alignment. */ .vx-navchip.vx-lockchip, .vx-hd-nav-compact .vx-lockchip { background: var(--vx-lock-bg); box-shadow: inset 0 0 0 1px var(--vx-lock-edge); border-radius: 999px; } /* The compact nav is plain text links, so the well needs its own padding — kept tight, because every pixel here is one the header cannot spare. */ .vx-hd-nav-compact .vx-lockchip { padding: 4px 9px; margin: -4px 0; } /* The toggle carries both glyphs; the theme picks one. */ html[data-theme="dark"] .vx-icon-moon, html[data-theme="light"] .vx-icon-sun { display: none; } /* ── Pricing ────────────────────────────────────────────────────────────── */ /* Only the selected term carries the gradient; the other reads as plain text. */ .vx-term { padding: var(--space-2) var(--space-4); border: 0; border-radius: 999px; background: transparent; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: color var(--duration-fast) var(--ease-out); } .vx-term[aria-pressed="true"] { background: linear-gradient(90deg, var(--vx-ga), var(--vx-gb)); color: #fff; } /* The comparison table is four columns wide by design. On a narrow screen it scrolls sideways inside its own frame rather than folding into nonsense. */ .vx-cmp-scroll { overflow-x: auto; } .vx-cmp-row { display: grid; grid-template-columns: 1fr 130px 130px 130px; min-width: 660px; } .vx-startup { display: grid; grid-template-columns: 1fr auto; } .vx-startup > * { min-width: 0; } @media (max-width: 820px) { .vx-startup { grid-template-columns: 1fr; gap: var(--space-8) !important; } } /* ── Docs ─────────────────────────────────────────────────────────────────── The docs shell is its own chrome: a slim bar, a nav rail, the reading column and a table of contents. Its surfaces sit a shade apart from the marketing pages, so the tokens are restated inside .vx-docs rather than globally. */ .vx-docs { --vx-hair: rgba(255, 255, 255, .08); --vx-line: rgba(255, 255, 255, .1); --vx-card: rgba(255, 255, 255, .028); --vx-chip: rgba(255, 255, 255, .05); --vx-bar: rgba(4, 10, 30, .82); --vx-fact: #050D26; --vx-label: var(--neutral-500); --vx-code-dim: rgba(255, 255, 255, .5); --vx-note-info-bg: rgba(0, 128, 255, .08); --vx-note-info-line: rgba(0, 128, 255, .24); --vx-note-warn-bg: rgba(240, 195, 79, .08); --vx-note-warn-line: rgba(240, 195, 79, .26); --vx-tbl-added: #3BD9A4; --vx-log-added-ink: #3BD9A4; --vx-log-added-bg: rgba(59, 217, 164, .15); --vx-log-changed-ink: #7FBFFF; --vx-log-changed-bg: rgba(0, 128, 255, .15); --vx-log-fixed-ink: #F0C34F; --vx-log-fixed-bg: rgba(240, 195, 79, .15); --vx-log-security-ink: #B184F5; --vx-log-security-bg: rgba(138, 80, 244, .16); --vx-log-deprecated-ink: #F0A85F; --vx-log-deprecated-bg: rgba(240, 168, 95, .15); --vx-log-removed-ink: #F08A8A; --vx-log-removed-bg: rgba(240, 138, 138, .15); background: #000720; } html[data-theme="light"] .vx-docs { --vx-hair: rgba(0, 7, 32, .09); --vx-line: rgba(0, 7, 32, .11); --vx-card: rgba(0, 7, 32, .018); --vx-chip: rgba(0, 7, 32, .035); --vx-bar: rgba(255, 255, 255, .86); --vx-fact: #FBFCFE; --vx-label: var(--neutral-600); --vx-code-dim: rgba(255, 255, 255, .55); --vx-note-info-bg: rgba(0, 86, 162, .06); --vx-note-info-line: rgba(0, 86, 162, .18); --vx-note-warn-bg: rgba(138, 98, 4, .06); --vx-note-warn-line: rgba(138, 98, 4, .2); --vx-tbl-added: #0C8A63; --vx-log-added-ink: #075A40; --vx-log-added-bg: rgba(12, 138, 99, .11); --vx-log-changed-ink: #0056A2; --vx-log-changed-bg: rgba(0, 86, 162, .11); --vx-log-fixed-ink: #8A6204; --vx-log-fixed-bg: rgba(138, 98, 4, .11); --vx-log-security-ink: #4312A8; --vx-log-security-bg: rgba(67, 18, 168, .1); --vx-log-deprecated-ink: #8A4B04; --vx-log-deprecated-bg: rgba(138, 75, 4, .1); --vx-log-removed-ink: #C02A2A; --vx-log-removed-bg: rgba(192, 42, 42, .1); /* Docs read on paper white, not the marketing mist. */ --surface-page: var(--zunu-white); --surface-card: var(--zunu-white); --surface-sunken: var(--neutral-50); background: #FFFFFF; } /* The reading column must win: shed the rails before squeezing prose. */ .vx-docs-grid { display: grid; grid-template-columns: 236px minmax(0, 1fr) 200px; max-width: 1400px; margin: 0 auto; align-items: start; padding-right: var(--space-6); } .vx-docs-main { padding: var(--space-8) var(--space-10) var(--space-16); max-width: 800px; min-width: 0; } .vx-facts { display: grid; grid-template-columns: repeat(4, 1fr); } .vx-docs-link { display: flex; align-items: center; gap: var(--space-2); text-align: left; padding: var(--space-1-5) var(--space-2); border-left: 2px solid transparent; border-radius: 0 var(--radius-xs) var(--radius-xs) 0; font-size: 12.5px; font-weight: 500; color: var(--text-secondary); } .vx-docs-link:hover { background: var(--surface-hover); color: var(--text-secondary); } .vx-docs-link[aria-current="page"] { border-left-color: var(--vx-kicker); background: var(--vx-pill); color: var(--text-heading); font-weight: 600; } /* Below the rail breakpoint the same list becomes a disclosure above the prose, so a phone is never left without a way through the docs. */ .vx-docs-menu { display: none; margin-bottom: var(--space-6); border: 1px solid var(--vx-line); border-radius: var(--radius-lg); background: var(--vx-card); } .vx-docs-menu > summary { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); font-size: 12.5px; font-weight: 600; color: var(--text-heading); cursor: pointer; list-style: none; } .vx-docs-menu > summary::-webkit-details-marker { display: none; } .vx-docs-menu > summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); opacity: .55; } .vx-docs-menu[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); } .vx-docs-menu__body { padding: 0 var(--space-3) var(--space-3); } @media (max-width: 1180px) { .vx-docs-grid { grid-template-columns: 224px minmax(0, 1fr); } .vx-toc { display: none; } .vx-facts { grid-template-columns: 1fr 1fr; } } @media (max-width: 860px) { .vx-docs-grid { grid-template-columns: minmax(0, 1fr); padding-right: 0; } .vx-side { display: none; } .vx-docs-main { padding: var(--space-7) var(--space-6) var(--space-14); max-width: none; } .vx-docs-menu { display: block; } } @media (max-width: 700px) { /* Both links live in the nav list too, so the bar keeps only the CTA. */ .vx-docs-hdlink { display: none !important; } .vx-docs-hd { gap: var(--space-3) !important; } } @media (max-width: 560px) { .vx-facts { grid-template-columns: 1fr; } } @media (max-width: 430px) { .vx-docs-hd { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; } .vx-docs-main { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; } } /* Changelog filter */ .vx-log-entry[hidden], .vx-log-group[hidden], .vx-log-year[hidden] { display: none !important; } /* ── Request access ───────────────────────────────────────────────────────── The sign-in surface from the desktop design, lifted out on its own: the wallpaper, a heavy blurred scrim, and one glass card centred on it. */ .vx-auth { --vx-sh: rgba(0, 7, 32, .85); --vx-glass-bg: rgba(14, 26, 62, .66); --vx-glass-edge: rgba(255, 255, 255, .16); --vx-glass-sheen: rgba(255, 255, 255, .14); --vx-ph: rgba(255, 255, 255, .5); --vx-ok-ink: rgba(59, 217, 164, .85); --vx-ok-bg: rgba(59, 217, 164, .16); --vx-ok-line: rgba(59, 217, 164, .24); --vx-seg-on-bg: rgba(0, 128, 255, .18); --vx-seg-on-ink: #7FBFFF; position: relative; min-height: 100vh; min-height: 100dvh; display: flex; padding: var(--space-5); /* Same stack the desktop design uses behind this card: the wallpaper at cover, then a scrim that blurs what is under it. Built live rather than baked to an image, because a fixed-aspect image crops and magnifies on a window that is not 16:10 — which is most of them. */ --vx-scrim-auth: rgba(0, 7, 32, .5); background: var(--vx-wall) no-repeat center center / cover, #000720; } html[data-theme="light"] .vx-auth { --vx-scrim-auth: rgba(0, 7, 32, .26); background-color: #F4F7FB; --vx-sh: rgba(0, 7, 32, .16); --vx-glass-bg: rgba(255, 255, 255, .82); --vx-glass-edge: rgba(27, 38, 55, .12); --vx-glass-sheen: rgba(255, 255, 255, .7); --vx-ph: rgba(27, 38, 55, .66); --vx-ok-ink: #085C42; --vx-ok-bg: rgba(12, 138, 99, .1); --vx-ok-line: rgba(9, 107, 77, .2); --vx-seg-on-bg: rgba(0, 86, 162, .1); --vx-seg-on-ink: #0056A2; } .vx-auth::before { content: ""; position: absolute; inset: 0; background: var(--vx-scrim-auth); backdrop-filter: blur(42px) saturate(150%); -webkit-backdrop-filter: blur(42px) saturate(150%); } /* Without backdrop-filter the wallpaper would sit behind the card stone sharp. Fall back to a wallpaper that is already blurred — same aspect, so it crops exactly as the sharp one would. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .vx-auth { background-image: url('/assets/img/wallpaper-dark-blur.webp'); } html[data-theme="light"] .vx-auth { background-image: url('/assets/img/wallpaper-light-blur.webp'); } } /* margin:auto centres the card and still lets it scroll clear of the top edge on a viewport shorter than the card. */ .vx-auth__card { position: relative; margin: auto; width: 408px; max-width: 100%; padding: var(--space-8) var(--space-8) var(--space-7); background: var(--vx-glass-bg); backdrop-filter: blur(30px) saturate(190%); -webkit-backdrop-filter: blur(30px) saturate(190%); border: 1px solid var(--vx-glass-edge); border-radius: var(--radius-xl); box-shadow: 0 34px 80px -16px var(--vx-sh), inset 0 1px 0 var(--vx-glass-sheen); } .vx-auth__label { font-size: 11.5px; font-weight: 600; color: var(--text-primary); } .vx-auth__hint { font-size: 11px; color: var(--text-tertiary); line-height: 1.45; } .vx-auth__err { font-size: 11px; color: var(--text-danger); line-height: 1.45; } html[data-theme="dark"] .vx-auth__err { color: #F08A8A; } .vx-auth .arc-input__control::placeholder { color: var(--vx-ph); } /* Team size — a four-way segmented control, one radio underneath each label. */ .vx-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-1-5); } .vx-seg__opt { position: relative; } .vx-seg__opt input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .vx-seg__opt span { /* The design's options are