/* The few rules the website sets inline, kept here so the pages carry no inline styles (the site's Content Security
   Policy allows stylesheets from this site only). Everything else is the website's own stylesheet. */
.xr-logo { --logo-h: 46px; }
.xr-ratio { aspect-ratio: 3 / 2; }

/* xRack's mark and name, as the app draws them (its src/styles.css, .brand-mark and .brand-name): a soft navy
   shadow along the mark's top edge keeps its white top diamond from blending into a white page, and the name sits a
   little tighter than the face's own spacing. The shadow breathes: it grows and fades over 3.6 seconds, the glow alone
   (its radius and strength), never the mark's size or place, so nothing around it moves (owner, 2026-10-09: "change
   back light of logo from orange to navy and animate it like breathing"; it was orange until then). Anyone who asks
   for reduced motion gets the glow still. The same rule draws the maintenance card's mark (public/maintenance.css). */
.xr-mark {
  filter: drop-shadow(0 -1.5px 1.5px rgba(29, 35, 48, 0.5)) drop-shadow(0 -3px 5px rgba(29, 35, 48, 0.2));
  animation: xr-breathe 3.6s ease-in-out infinite;
}
@keyframes xr-breathe {
  0%, 100% { filter: drop-shadow(0 -1px 1px rgba(29, 35, 48, 0.32)) drop-shadow(0 -2px 3px rgba(29, 35, 48, 0.1)); }
  50% { filter: drop-shadow(0 -1.5px 2px rgba(29, 35, 48, 0.6)) drop-shadow(0 -3px 7px rgba(29, 35, 48, 0.28)); }
}
@media (prefers-reduced-motion: reduce) { .xr-mark { animation: none; } }
.xr-brand-name { letter-spacing: -0.01em; line-height: 1; }
/* The phone menu's Sign in sits in the middle under the button, as the website's does (Tailwind's self-center, which
   the website's stylesheet as last copied does not carry yet). */
.self-center { align-self: center; }
/* The phone menu is no taller than the screen under the header and scrolls inside that (site/layout.tsx). 100dvh is the
   height a phone shows between its browser's own bars; 100vh, the height without them, let the bottom bar cover the
   menu's foot, where Sign in is, once the menu was tall (user, 2026-10-15: "on mobile view signin button does not work").
   A browser without dvh keeps the 100vh line. The scroll stays in the menu rather than moving the page behind it. */
.xr-menu-height { max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); overscroll-behavior: contain; }

/* The header's menus (site/chrome.ts). The menu triggers sit in the header's row as if the wrapper the worker writes
   them into were not there; every menu, and every entry in a menu, shares one cell of a grid, so the panel is the
   height of the tallest whichever is shown, as the website measures it to be; and the up-right arrow sits on the line
   of a link in running text. */
.xr-contents { display: contents; }
.xr-stack { display: grid; }
.xr-stack > * { grid-area: 1 / 1; }
/* Choosing another entry swaps its pane at once, as the website's menu does (it draws the chosen entry alone). Here every
   pane is in the page and the hidden ones carry `invisible`; visibility is inherited, and the pane's button carries the
   website's transition-all, which made a hidden pane's button stay painted for its 150ms while the new one showed at
   once: two labels on one button, and more when entries were chosen quickly (owner, 2026-10-09: "the old text fades
   later and new one lands first"). Inside the menu, transition-all animates what it does on the website (colours,
   shadow, transform, filter, opacity) but never visibility, so a pane hides and shows in the same frame. */
.xr-stack .transition-all { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; }
.xr-inline-arrow { display: inline; margin-left: 0.125rem; vertical-align: -0.125em; }
/* Two service cards share a row at the width the website gives a pair of cards (Tailwind's max-w-5xl, which the
   website's stylesheet does not carry because none of its pages draws a pair). */
.max-w-5xl { max-width: 64rem; }
/* The footer's links to the website carry the up-right arrow, which made its row of columns wider than a 1280px window
   at the website's 2.5rem gaps (by 8px): from 1280px the gaps are 2rem here. From 1280px both footers are one row of
   columns, and this one's row is as tall as the website's, whose longest column (Industries) has seven entries to this
   one's six: a 22px heading, seven 24px entries and six 4px gaps, 214px. So the two footers are one height there, 338px,
   with the same padding and foot bar (user, 2026-10-09: "reduce footer height and match height with xceleratebrands
   footer"; site/chrome.ts, footer). */
@media (min-width: 1280px) { .xr-footer-columns { column-gap: 2rem; min-height: 13.375rem; } }
/* The hero's heading takes focus when the home link is followed on the home page (site.js), for keyboard and screen-reader
   users; it is not a control, so it draws no focus ring. */
main h1[tabindex="-1"]:focus { outline: none; }
/* The website's stylesheet scrolls every in-page jump smoothly (html { scroll-behavior: smooth }); anyone who asks for
   reduced motion jumps at once instead, the home link included. */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* The reading progress bar along the top of every page (the website's ScrollProgress, Q729), above the header; its
   width is the share of the page scrolled, set by site/public/site.js as it is on the website. */
.xr-progress { position: fixed; top: 0; left: 0; right: 0; height: 0.25rem; z-index: 60; transform-origin: left; transform: scaleX(0); }

/* The illustrations (site/art.tsx), drawn in the page as SVG: the maintenance picture's motion and nothing more (its
   site/public/maintenance.css): the gears turn, the lights blink, a progress bar moves, the sparkles twinkle. All of it
   stops for anyone who asks for reduced motion. */
.xr-art { display: block; }
.xr-art .xr-spin { transform-box: fill-box; transform-origin: center; animation: xr-spin 16s linear infinite; }
.xr-art .xr-spin.xr-back { animation-duration: 10s; animation-direction: reverse; }
.xr-art .xr-blink { animation: xr-blink 2.4s ease-in-out infinite; }
.xr-art .xr-bar { transform-box: fill-box; transform-origin: left center; animation: xr-progress-bar 3.2s ease-in-out infinite alternate; }
.xr-art .xr-twinkle > * { transform-box: fill-box; transform-origin: center; animation: xr-twinkle 3s ease-in-out infinite; }
/* after the animations, so their shorthand does not reset the delay */
.xr-art .xr-late { animation-delay: 0.8s; }
.xr-art .xr-later { animation-delay: 1.6s; }
@keyframes xr-spin { to { transform: rotate(360deg); } }
@keyframes xr-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes xr-progress-bar { from { transform: scaleX(0.42); } to { transform: scaleX(0.86); } }
@keyframes xr-twinkle { 0%, 100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .xr-art * { animation: none !important; }
  .xr-art .xr-bar { transform: scaleX(0.7); }
}
/* The product's name, xRack, keeps its own case inside a label drawn in capitals (site/chrome.ts, keepName): never XRACK. */
.normal-case { text-transform: none; }