/* v2: apps (see assets/css/v2.css for the shared look).
 *
 * The App Hosting page (app-hosting.php, main.site-main--apps). It opens on a scene: the
 * headline, a big glass search lit by a light that runs round its edge, the categories as
 * pills, and a horizon glowing at the foot. The catalogue follows as Apple tiles (a pointer light
 * on each, they rise in, and rise again when a filter brings them back). The sizer is a second
 * scene, its configurator a pane of glass; then the benchmark and the two services as tiles.
 * Everything else (pills, reveal, words lighting up, header) comes from v2.css and motion.js.
 */

/* ── Page rhythm ──────────────────────────────────────────────────────────────────────────── */
.site-main--apps {
  --apps-gutter: 1rem;
  --apps-pad: max(var(--apps-gutter), calc((100% - 75rem) / 2));
}
@media (min-width: 640px) {
.site-main--apps {
  --apps-gutter: 2rem;
}
}
@media (min-width: 1024px) {
.site-main--apps {
  --apps-gutter: 3rem;
}
}
.site-main--apps :is(.apps-hero, .catalog, .sizer, .benchmark, .spotlights) {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: var(--apps-pad);
  padding-right: var(--apps-pad);
}
.site-main--apps :is(.catalog, .benchmark, .spotlights) {
  background-color: var(--color-surface);
}

/* ── Hero: a scene, centred, the light high above the search ───────────────────────────── */
.site-main--apps .apps-hero {
  --v2-glow-y: 26%;
  overflow: hidden;
  padding-bottom: 9rem;
  text-align: center;
}
@media (min-width: 768px) {
.site-main--apps .apps-hero {
  padding-bottom: 10.5rem;
}
}
@media (min-width: 1024px) {
.site-main--apps .apps-hero {
  padding-bottom: 11.75rem;
}
}
/* Stars over the whole scene, fading out towards its foot. */
.site-main--apps .apps-hero > .v2-stars {
  opacity: 0.6;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 30%, transparent 92%);
}

/* The sky: the rim of a dark planet rising at the foot of the scene, lit from above, and the
   catalogue's nine apps as tiles of glass orbiting low over it: the far ones half set behind the
   rim, the near ones in front of it. The rim is an ellipse (--rx, --ry) whose top stands --rim
   above the foot; each tile sits on it at --f (-1..1 of --rx from the centre), so every tile
   follows the curve at any width. Decoration only: aria-hidden, never under the pointer. */
.site-main--apps .apps-sky {
  --rx: 72vw;
  --ry: 300px;
  --rim: 84px;
  --k: 1;
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
@media (max-width: 1023.98px) {
.site-main--apps .apps-sky {
  --ry: 240px;
  --rim: 74px;
  --k: 0.84;
}
}
@media (max-width: 767.98px) {
.site-main--apps .apps-sky {
  --rx: 76vw;
  --ry: 150px;
  --rim: 62px;
  --k: 0.7;
}
}
.site-main--apps .apps-sky__planet {
  position: absolute;
  left: calc(50% - var(--rx));
  bottom: calc(var(--rim) - var(--ry) * 2);
  width: calc(var(--rx) * 2);
  height: calc(var(--ry) * 2);
  border-radius: 50%;
  background-color: #000000;
  background-image: radial-gradient(ellipse 60% 22% at 50% 0%, rgb(30 52 150 / 0.55), rgb(10 16 48 / 0.35) 45%, rgb(0 0 0 / 0) 100%);
}
/* The rim: a hairline of light, fading out towards the sides. */
.site-main--apps .apps-sky__planet::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1.5px 0 rgb(222 232 255 / 0.9), inset 0 5px 12px -5px rgb(130 165 255 / 0.85);
  -webkit-mask-image: linear-gradient(90deg, transparent 14%, #000 36%, #000 64%, transparent 86%);
  mask-image: linear-gradient(90deg, transparent 14%, #000 36%, #000 64%, transparent 86%);
}
/* The air above the rim: a band of blue light just outside it, brightest at the crown. It brightens
   as the scene scrolls away (--v2-p, motion.js), the planet turning towards the light. */
.site-main--apps .apps-sky__halo {
  position: absolute;
  left: calc(50% - var(--rx) - 70px);
  bottom: calc(var(--rim) - var(--ry) * 2 - 70px);
  width: calc(var(--rx) * 2 + 140px);
  height: calc(var(--ry) * 2 + 140px);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(140 175 255 / 0.9) 80%, rgb(80 120 255 / 0.55) 83.5%, rgb(var(--glow-blue) / 0.22) 90%, rgb(var(--glow-blue) / 0) 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 10%, #000 40%, #000 60%, transparent 90%);
  mask-image: linear-gradient(90deg, transparent 10%, #000 40%, #000 60%, transparent 90%);
  opacity: 0.62;
  transform-origin: 50% 0;
}
@media (prefers-reduced-motion: no-preference) {
html.v2-js .site-main--apps .apps-sky__halo {
  opacity: calc(0.55 + (var(--v2-p, 0.5) - 0.5) * 1.2);
  transform: scale(calc(1 + (var(--v2-p, 0.5) - 0.5) * 0.1));
}
}
/* The rings move as layers: the far one sinks behind the rim as the scene scrolls away and the
   near one rises, and both lean a little towards the pointer (--apps-mx/--apps-my, v2-apps.js). */
.site-main--apps .apps-sky__ring {
  position: absolute;
  inset: 0;
}
@media (prefers-reduced-motion: no-preference) {
html.v2-js .site-main--apps .apps-sky__ring--far {
  translate: calc(var(--apps-mx, 0) * -5px) calc((var(--v2-p, 0.5) - 0.5) * 24px + var(--apps-my, 0) * -3px);
}
html.v2-js .site-main--apps .apps-sky__ring--near {
  translate: calc(var(--apps-mx, 0) * 12px) calc((var(--v2-p, 0.5) - 0.5) * -90px + var(--apps-my, 0) * 7px);
}
html.v2-js .site-main--apps .apps-sky__ring {
  transition: translate 0.9s var(--v2-ease-out);
  will-change: translate;
}
}
/* A tile: an app-icon squircle of dark glass, lit along its top edge, the app's mark glowing in
   its own colour (--c), a little of that colour spilling below it. */
.site-main--apps .apps-sky__tile {
  --size: calc(var(--s) * var(--k) * 1px);
  --lift: calc(var(--size) * 0.42);
  position: absolute;
  left: calc(50% + var(--f) * var(--rx) - var(--size) / 2);
  bottom: calc(var(--rim) - var(--ry) * (1 - sqrt(1 - var(--f) * var(--f))) + var(--lift) - var(--size) / 2);
  display: flex;
  width: var(--size);
  height: var(--size);
  align-items: center;
  justify-content: center;
  border-radius: 30%;
  background-color: rgb(16 18 30 / 0.92);
  background-image:
    radial-gradient(120% 70% at 50% 118%, color-mix(in srgb, var(--c) 26%, transparent), transparent 70%),
    radial-gradient(90% 60% at 18% 0%, rgb(255 255 255 / 0.2), transparent 70%),
    linear-gradient(180deg, rgb(255 255 255 / 0.12) 0%, rgb(255 255 255 / 0.03) 50%, rgb(255 255 255 / 0.01) 100%);
  color: var(--c);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.38),
    inset 0 0 0 1px rgb(255 255 255 / 0.13),
    inset 0 -1px 0 color-mix(in srgb, var(--c) 40%, transparent),
    0 calc(var(--size) * 0.28) calc(var(--size) * 0.7) calc(var(--size) * -0.26) color-mix(in srgb, var(--c) 60%, transparent),
    0 16px 34px -12px rgb(0 0 0 / 0.95);
}
.site-main--apps .apps-sky__tile > .material-symbols-outlined {
  font-size: calc(var(--size) * 0.5);
  filter: drop-shadow(0 0 calc(var(--size) * 0.12) color-mix(in srgb, var(--c) 75%, transparent));
}
/* The far ring: smaller, dimmer, half set behind the rim. */
.site-main--apps .apps-sky__ring--far .apps-sky__tile {
  --lift: calc(var(--size) * 0.26);
  background-color: rgb(10 12 20 / 0.95);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 0 calc(var(--size) * 0.5) calc(var(--size) * -0.2) color-mix(in srgb, var(--c) 30%, transparent);
}
.site-main--apps .apps-sky__ring--far {
  opacity: 0.74;
}
/* On load the tiles settle into orbit, from the centre outwards, once. */
@media (prefers-reduced-motion: no-preference) {
html.v2-motion .site-main--apps .apps-sky__tile {
  animation: apps-settle 1.1s var(--v2-ease-out) both, apps-settle-fade 0.6s linear both;
  animation-delay: calc(0.35s + abs(var(--f)) * 0.9s), calc(0.45s + abs(var(--f)) * 0.9s);
}
}
@keyframes apps-settle {
from { transform: translate3d(0, calc(var(--size) * 0.7), 0) scale(0.82); }
}
@keyframes apps-settle-fade {
from { opacity: 0; }
}
/* The narrowest phones: the outermost near tiles would sit at the very edges; the ring keeps seven. */
@media (max-width: 479.98px) {
.site-main--apps .apps-sky__ring--near > :is(:first-child, :last-child) {
  display: none;
}
}
.site-main--apps .apps-hero .page-intro {
  margin: 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2rem;
}
.site-main--apps .apps-hero .page-intro-text {
  display: flex;
  max-width: 62rem;
  flex-direction: column;
  align-items: center;
}
.site-main--apps .apps-hero__badge {
  margin-bottom: 1.5rem;
  gap: 0.5rem;
  border-radius: 980px;
  background-color: rgb(255 255 255 / 0.08);
  padding: 0.4375rem 0.875rem 0.4375rem 0.75rem;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
  color: #d2d2d7;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.site-main--apps .apps-hero__badge .dot-sm {
  height: 0.4375rem;
  width: 0.4375rem;
  border-radius: 50%;
  background-color: #4f8bff;
  box-shadow: 0 0 0 3px rgb(79 139 255 / 0.22), 0 0 12px rgb(79 139 255 / 0.9);
}
.site-main--apps .apps-hero__badge-text {
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
}
.site-main--apps .apps-hero .page-title {
  margin: 0;
  max-width: 14ch;
  font-size: clamp(2.5rem, 1rem + 5.2vw, 5.5rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 700;
  text-wrap: balance;
  background-image: linear-gradient(180deg, #ffffff 38%, #b9c9ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (min-width: 768px) {
.site-main--apps .apps-hero .page-title {
  max-width: none;
}
/* "Production-ready" stays whole: the line breaks between words, never at its hyphen. */
.site-main--apps .apps-hero__keep {
  white-space: nowrap;
}
}
@media (forced-colors: active) {
.site-main--apps .apps-hero .page-title {
  background-image: none;
  color: CanvasText;
}
}
.site-main--apps .apps-hero__lead {
  margin-top: 1.25rem;
  max-width: 38rem;
  font-size: clamp(1.0625rem, 0.95rem + 0.42vw, 1.3125rem);
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: #a1a1a6;
  text-wrap: balance;
}
/* The two facts: a small pane of glass. */
.site-main--apps .apps-hero__stat {
  gap: 1.5rem;
  border-radius: 18px;
  background-color: rgb(255 255 255 / 0.06);
  padding: 0.75rem 1.5rem;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.site-main--apps .apps-hero__stat .column {
  align-items: center;
  gap: 0.125rem;
}
.site-main--apps .apps-hero__stat-label {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: #a1a1a6;
}
.site-main--apps .apps-hero__stat :is(.apps-hero__stat-value, .heading-sm) {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 24px;
  letter-spacing: -0.016em;
  font-weight: 600;
  color: #ffffff;
}
.site-main--apps .apps-hero__stat .divider-v {
  height: 2rem;
  background-color: rgb(255 255 255 / 0.14);
}

/* Search: one wide pill of glass; a light runs round its edge, and it lights up when chosen. */
@property --apps-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.site-main--apps .app-search {
  margin: 3rem auto 0;
  max-width: 62rem;
  gap: 1.75rem;
  border-radius: 0;
  background-color: transparent;
  padding: 0;
  box-shadow: none;
}
.site-main--apps .app-search__field {
  margin: 0 auto;
  max-width: 47rem;
  border-radius: 980px;
  isolation: isolate;
}
.site-main--apps .app-search__field::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: conic-gradient(from var(--apps-angle), rgb(110 155 255 / 0) 0deg, rgb(110 155 255 / 0) 200deg, rgb(110 155 255 / 0.95) 280deg, rgb(0 194 255 / 0.95) 310deg, rgb(110 155 255 / 0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0.85;
  transition: opacity 0.3s ease;
}
/* The light makes a few slow turns, then rests (the page can fall idle); it turns again while
   the pointer is on the field. */
@media (prefers-reduced-motion: no-preference) {
.site-main--apps .app-search__field::after {
  animation: apps-orbit 7s linear 4;
}
.site-main--apps .app-search__field:hover::after {
  animation-iteration-count: infinite;
}
}
@keyframes apps-orbit {
to { --apps-angle: 360deg; }
}
.site-main--apps .app-search__field:focus-within::after {
  opacity: 0;
}
.site-main--apps .app-search__icon {
  left: 1.375rem;
  z-index: 2;
  font-size: 22px;
  color: #a1a1a6;
  pointer-events: none;
}
.site-main--apps .app-search__input {
  height: 3.75rem;
  border-radius: 980px;
  background-color: rgb(255 255 255 / 0.07);
  padding-left: 3.5rem;
  padding-right: 4.75rem;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.016em;
  color: #f5f5f7;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14), 0 24px 70px -24px rgb(var(--glow-blue) / 0.7);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.site-main--apps .app-search__input::placeholder {
  color: #a1a1a6;
  opacity: 1;
}
.site-main--apps .app-search__input:hover {
  background-color: rgb(255 255 255 / 0.09);
}
.site-main--apps .app-search__input:focus {
  background-color: rgb(255 255 255 / 0.1);
  outline: 2px solid transparent;
  box-shadow: inset 0 0 0 2px #6e9bff, 0 0 0 5px rgb(var(--glow-blue) / 0.3), 0 28px 80px -20px rgb(var(--glow-blue) / 0.9);
}
.site-main--apps .app-search__shortcut {
  right: 1.125rem;
  z-index: 2;
}
.site-main--apps .app-search__key {
  border-radius: 8px;
  background-color: rgb(255 255 255 / 0.1);
  padding: 0.25rem 0.5rem;
  font-family: var(--font-text);
  font-size: 13px;
  line-height: 16px;
  color: #d2d2d7;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
}
@media (max-width: 639.98px) {
.site-main--apps .app-search {
  margin-top: 2.5rem;
}
.site-main--apps .app-search__icon {
  left: 1.125rem;
  font-size: 20px;
}
.site-main--apps .app-search__input {
  height: 3.25rem;
  padding-left: 2.875rem;
  padding-right: 1rem;
  font-size: 16px;
}
}

/* Categories: pills like the pricing page's, glass on the scene; the pressed one (aria-pressed)
   turns white. Phones scroll the row sideways, its ends fading out. */
.site-main--apps .categories {
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  overflow: visible;
  padding: 0;
}
.site-main--apps .category-pill {
  display: inline-flex;
  height: 2.5rem;
  flex-shrink: 0;
  align-items: center;
  gap: 0.375rem;
  border-radius: 980px;
  background-color: rgb(255 255 255 / 0.07);
  padding: 0 1.125rem;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.012em;
  font-weight: 500;
  color: #d2d2d7;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
  opacity: 1;
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
@media (hover: hover) {
.site-main--apps .category-pill:hover {
  background-color: rgb(255 255 255 / 0.14);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22);
}
}
.site-main--apps .category-pill[aria-pressed='true'],
.site-main--apps .category-pill[aria-pressed='true']:hover {
  background-color: #f5f5f7;
  color: #000000;
  font-weight: 600;
  box-shadow: 0 10px 30px -12px rgb(110 155 255 / 0.8);
  opacity: 1;
}
.site-main--apps .category-pill:focus-visible {
  outline: 2px solid #6e9bff;
  outline-offset: 2px;
}
.site-main--apps .categories__count {
  font-size: 13px;
  line-height: 16px;
  font-weight: 500;
  color: inherit;
  opacity: 0.72;
}
@media (max-width: 639.98px) {
.site-main--apps .categories {
  margin-left: calc(var(--apps-pad) * -1);
  margin-right: calc(var(--apps-pad) * -1);
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.25rem var(--apps-pad);
  scroll-padding-inline: var(--apps-pad);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--apps-pad), #000 calc(100% - var(--apps-pad)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--apps-pad), #000 calc(100% - var(--apps-pad)), transparent 100%);
}
.site-main--apps .category-pill {
  height: 2.375rem;
  padding: 0 1rem;
  font-size: 14px;
}
}

/* ── Catalogue: Apple tiles on the grey page (dark: charcoal on black) ─────────────────────── */
.site-main--apps .catalog {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
@media (min-width: 1024px) {
.site-main--apps .catalog {
  padding-top: 7rem;
  padding-bottom: 7rem;
}
}
.site-main--apps .catalog__head {
  display: block;
  margin: 0 auto 3rem;
  max-width: 50rem;
  text-align: center;
}
@media (min-width: 1024px) {
.site-main--apps .catalog__head {
  margin-bottom: 3.5rem;
}
}
.site-main--apps :is(.catalog__head .overline, .recommendation__head .overline) {
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-primary);
}
.site-main--apps .catalog__head .title-lg,
.site-main--apps .sizer__title {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.05rem + 2.7vw, 3.5rem);
  line-height: 1.07;
  letter-spacing: -0.026em;
  font-weight: 700;
  color: var(--color-on-surface);
  text-wrap: balance;
}
.site-main--apps .catalog__grid {
  gap: 1rem;
}
@media (min-width: 640px) {
.site-main--apps .catalog__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.site-main--apps .catalog__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
}
.site-main--apps .catalog__card {
  --apps-brand: var(--color-primary);
  position: relative;
  min-height: 21.5rem;
  border-radius: var(--v2-radius-tile);
  background-color: var(--v2-tile);
  padding: 2rem;
  background-image: radial-gradient(circle at 3.75rem 3.75rem, color-mix(in srgb, var(--apps-brand) 8%, transparent), transparent 10rem);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.4s ease, transform 0.5s var(--v2-ease);
}
/* After hours the brand's light by the mark is a shade stronger, so it still reads on charcoal. */
:root[data-theme='dark'] .site-main--apps .catalog__card {
  background-image: radial-gradient(circle at 3.75rem 3.75rem, color-mix(in srgb, var(--apps-brand) 13%, transparent), transparent 10rem);
}
@media (min-width: 1024px) {
.site-main--apps .catalog__card {
  padding: 2.25rem 2.25rem 2rem;
}
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
.site-main--apps .catalog__card {
  padding: 1.75rem 1.75rem 1.5rem;
}
.site-main--apps .catalog__heading {
  font-size: 1.375rem;
}
}
@media (max-width: 639.98px) {
.site-main--apps .catalog__card {
  min-height: 0;
  border-radius: 22px;
  padding: 1.75rem 1.5rem 1.5rem;
}
}
.site-main--apps .catalog__card:has(.catalog__icon-wordpress) { --apps-brand: var(--brand-wordpress); }
.site-main--apps .catalog__card:has(.catalog__icon-cpanel) { --apps-brand: var(--brand-cpanel); }
.site-main--apps .catalog__card:has(.catalog__icon-docker) { --apps-brand: var(--brand-docker); }
.site-main--apps .catalog__card:has(.catalog__icon-nodejs) { --apps-brand: var(--brand-nodejs); }
.site-main--apps .catalog__card:has(.catalog__icon-gitlab) { --apps-brand: var(--brand-gitlab); }
.site-main--apps .catalog__card:has(.catalog__icon-nextjs) { --apps-brand: #5b7cff; }
.site-main--apps .catalog__card:has(.catalog__icon-ghost) { --apps-brand: #8a8a93; }
.site-main--apps .catalog__card:has(.catalog__icon-supabase) { --apps-brand: var(--brand-supabase); }
.site-main--apps .catalog__card:has(.catalog__icon-woocommerce) { --apps-brand: var(--brand-woocommerce); }
@media (hover: hover) and (pointer: fine) {
.site-main--apps .catalog__card:hover {
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.04), 0 4px 10px rgb(0 0 0 / 0.04), 0 34px 64px -30px rgb(0 0 0 / 0.3);
}
:root[data-theme='dark'] .site-main--apps .catalog__card:hover {
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.13), 0 36px 70px -34px rgb(var(--glow-blue) / 0.55);
}
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
.site-main--apps .catalog__card:hover {
  transform: translateY(-4px);
}
}
.site-main--apps .catalog__card-head {
  margin-bottom: 0;
  align-items: flex-start;
}
/* The app's mark on a small app-icon squircle, edged and underlit in the brand's colour at rest;
   the light grows when the tile is near. */
.site-main--apps .catalog__icon-tile,
.site-main--apps .catalog__card:hover .catalog__icon-tile {
  height: 3.5rem;
  width: 3.5rem;
  border-radius: 16px;
  background-color: #ffffff;
  background-image: linear-gradient(180deg, #ffffff 0%, #f1f1f4 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--apps-brand) 18%, rgb(0 0 0 / 0.05)), 0 8px 18px -10px rgb(0 0 0 / 0.26), 0 10px 22px -12px color-mix(in srgb, var(--apps-brand) 40%, transparent);
  transition: transform 0.5s var(--v2-ease), box-shadow 0.4s ease;
}
:root[data-theme='dark'] .site-main--apps .catalog__icon-tile,
:root[data-theme='dark'] .site-main--apps .catalog__card:hover .catalog__icon-tile {
  background-color: #232327;
  background-image: linear-gradient(180deg, #2c2c31 0%, #1c1c1f 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--apps-brand) 26%, rgb(255 255 255 / 0.07)), 0 10px 22px -10px rgb(0 0 0 / 0.9), 0 10px 24px -12px color-mix(in srgb, var(--apps-brand) 45%, transparent);
}
/* Marks that are too faint on their tile get a shade that reads (3:1 or more). */
.site-main--apps .catalog__icon-supabase {
  color: #23a06a;
}
:root[data-theme='dark'] .site-main--apps .catalog__icon-supabase {
  color: var(--brand-supabase);
}
:root[data-theme='dark'] .site-main--apps .catalog__icon-woocommerce {
  color: #b77fae;
}
.site-main--apps .catalog__icon-tile > .material-symbols-outlined {
  font-size: 30px;
}
@media (hover: hover) and (pointer: fine) {
.site-main--apps .catalog__card:hover .catalog__icon-tile {
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.06), 0 12px 28px -8px color-mix(in srgb, var(--apps-brand) 55%, transparent);
}
:root[data-theme='dark'] .site-main--apps .catalog__card:hover .catalog__icon-tile {
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12), 0 12px 30px -6px color-mix(in srgb, var(--apps-brand) 60%, transparent);
}
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
.site-main--apps .catalog__card:hover .catalog__icon-tile {
  transform: scale(1.06);
}
}
.site-main--apps .catalog__tag {
  border-radius: 980px;
  background-color: transparent;
  padding: 0.3125rem 0.75rem;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.006em;
  font-weight: 500;
  color: var(--color-tertiary);
  box-shadow: inset 0 0 0 1px var(--color-border-soft);
}
.site-main--apps .catalog__heading {
  margin: 1.75rem 0 0;
  font-size: clamp(1.375rem, 1.15rem + 0.5vw, 1.625rem);
  line-height: 1.15;
  letter-spacing: -0.022em;
  font-weight: 600;
  color: var(--color-on-surface);
}
.site-main--apps .catalog__desc {
  margin: 0.5rem 0 0;
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.016em;
  color: var(--color-tertiary);
}
.site-main--apps .catalog__requirements {
  margin: 1.25rem 0 0;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  border-radius: 0;
  background-color: transparent;
  padding: 1rem 0 0;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: -0.008em;
  color: var(--color-tertiary);
  box-shadow: inset 0 1px 0 var(--color-hairline);
}
.site-main--apps .catalog__card-foot {
  margin-top: auto;
  gap: 1rem;
  padding-top: 1.5rem;
}
.site-main--apps .catalog__specs {
  border-radius: 6px;
  padding: 0.5rem 0;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  color: var(--color-primary);
}
.site-main--apps .catalog__deploy {
  height: 2.5rem;
  gap: 0.25rem;
  border-radius: 980px;
  background-color: var(--color-primary-container);
  padding: 0 0.875rem 0 1.125rem;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.012em;
  font-weight: 600;
  color: #ffffff;
  transition: background-color 0.25s ease;
}
.site-main--apps .catalog__deploy:hover {
  background-color: var(--color-primary-solid);
  color: #ffffff;
}
.site-main--apps :is(.catalog__specs, .catalog__deploy, .stack-option, .traffic-tier, #deploy-stack, .spotlights__footer > a):focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
/* The tiles of one row rise together, left to right (each fades in a beat after it starts to
   move); a tile a filter brings back rises again (its animation restarts as it reappears),
   without waiting for the tiles before it. */
@media (prefers-reduced-motion: no-preference) {
html.v2-motion .site-main--apps .catalog__grid > .is-in {
  animation-delay: 0ms, 90ms;
}
}
@media (min-width: 640px) and (prefers-reduced-motion: no-preference) {
html.v2-motion .site-main--apps .catalog__grid > .is-in:nth-child(2n) {
  animation-delay: 90ms, 180ms;
}
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
html.v2-motion .site-main--apps .catalog__grid > .is-in:nth-child(n) {
  animation-delay: 0ms, 90ms;
}
html.v2-motion .site-main--apps .catalog__grid > .is-in:nth-child(3n + 2) {
  animation-delay: 90ms, 180ms;
}
html.v2-motion .site-main--apps .catalog__grid > .is-in:nth-child(3n) {
  animation-delay: 180ms, 270ms;
}
}
/* Phones: the catalogue is a rail of cards to swipe through, one card in view with the edges of
   its neighbours either side, each settling in the middle. The cards stay flex boxes (applications.js shows and hides
   them with an inline display), and they are all shown as they are: the rail arrives as one with
   its heading, no card waits to rise while it is swiped in from the side. */
@media (max-width: 639.98px) {
.site-main--apps .catalog__grid {
  display: flex;
  gap: 0.75rem;
  margin-left: calc(var(--apps-pad) * -1);
  margin-right: calc(var(--apps-pad) * -1);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 0.25rem var(--apps-pad) 1.75rem;
  scroll-padding-inline: var(--apps-pad);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.site-main--apps .catalog__grid > .catalog__card {
  width: 82vw;
  max-width: 22rem;
  flex: 0 0 auto;
  scroll-snap-align: center;
}
html.v2-motion .site-main--apps .catalog__grid > .catalog__card {
  opacity: 1;
  animation: none;
}
}

/* ── Sizer: a scene; the heading stands over a configurator made of glass ─────────────────── */
.site-main--apps .sizer {
  --v2-glow-y: 64%;
  overflow: clip;
  padding-top: 6rem;
  padding-bottom: 6rem;
}
@media (min-width: 1024px) {
.site-main--apps .sizer {
  padding-top: 8.5rem;
  padding-bottom: 9rem;
}
}
/* The light pooled under the configurator: part of the scene, so it fades out well before the
   scene's foot instead of being cut off by it. */
.site-main--apps .sizer::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 46% 26% at 50% 78%, rgb(var(--glow-blue) / 0.42), rgb(var(--glow-blue) / 0.12) 55%, rgb(var(--glow-blue) / 0) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 97%);
  mask-image: linear-gradient(180deg, #000 70%, transparent 97%);
}
.site-main--apps .sizer__head {
  margin: 0 auto 3rem;
  max-width: 50rem;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1.5rem;
  text-align: center;
}
@media (min-width: 768px) {
.site-main--apps .sizer__head {
  flex-direction: column;
  align-items: center;
}
}
@media (min-width: 1024px) {
.site-main--apps .sizer__head {
  margin-bottom: 3.5rem;
}
}
.site-main--apps .sizer__head .eyebrow {
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 0.08em;
}
.site-main--apps .sizer__title {
  color: #ffffff;
}
.site-main--apps .sizer__badge {
  gap: 0.5rem;
  border-radius: 980px;
  background-color: rgb(255 255 255 / 0.08);
  padding: 0.4375rem 0.875rem;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: #d2d2d7;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
}
/* The dot pulses three times as the heading arrives, then rests. */
.site-main--apps .sizer__dot {
  height: 0.4375rem;
  width: 0.4375rem;
  border-radius: 50%;
  background-color: #4f8bff;
  box-shadow: 0 0 10px rgb(79 139 255 / 0.9);
  animation: none;
}
@media (prefers-reduced-motion: no-preference) {
.site-main--apps .sizer__head.is-in .sizer__dot {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) 0.9s 3;
}
}
.site-main--apps .sizer .sizer__card {
  overflow: visible;
  border-radius: var(--v2-radius-tile);
  background-color: rgb(16 16 18 / 0.72);
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.05) 0%, rgb(255 255 255 / 0) 30%);
  padding: 1.25rem;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 0 0 1px rgb(255 255 255 / 0.09), 0 40px 90px -50px rgb(var(--glow-blue) / 0.65), 0 30px 60px -30px rgb(0 0 0 / 0.9);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  backdrop-filter: blur(28px) saturate(150%);
}
/* Phones: no pane round the configurator, so the choices get the whole width. */
@media (max-width: 639.98px) {
.site-main--apps .sizer .sizer__card {
  border-radius: 0;
  background-color: transparent;
  background-image: none;
  padding: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
}
@media (min-width: 640px) {
.site-main--apps .sizer .sizer__card {
  padding: 2rem;
}
}
@media (min-width: 1024px) {
.site-main--apps .sizer .sizer__card {
  padding: 2.5rem;
}
}
@media (prefers-reduced-motion: no-preference) {
html.v2-motion .site-main--apps .sizer__card.is-in {
  animation: apps-rise-big 1.2s var(--v2-ease) both;
}
}
@keyframes apps-rise-big {
from { opacity: 0; translate: 0 70px; scale: 0.96; filter: blur(8px); }
to { opacity: 1; translate: none; scale: none; filter: none; }
}
/* The layout: the steps, then the machine they size, then the recommendation. On desktop the
   steps and the machine share the left, the recommendation stands beside them. */
.site-main--apps .sizer__layout {
  position: relative;
  gap: 2rem;
}
.site-main--apps :is(.sizer__steps, .sizer__rig, .recommendation) {
  position: relative;
  z-index: 1;
}
@media (min-width: 1024px) {
.site-main--apps .sizer__layout {
  align-items: stretch;
  column-gap: 2.5rem;
  row-gap: 1.75rem;
}
.site-main--apps .sizer__steps {
  grid-column: 1 / span 7;
  grid-row: 1;
}
.site-main--apps .sizer__rig {
  grid-column: 1 / span 7;
  grid-row: 2;
}
.site-main--apps .recommendation {
  grid-column: 8 / span 5;
  grid-row: 1 / span 2;
}
}
.site-main--apps .sizer__steps {
  gap: 2.25rem;
}
@media (min-width: 1024px) {
.site-main--apps .sizer__steps {
  padding-top: 0.5rem;
}
}
.site-main--apps .sizer__step-head,
.site-main--apps .sizer__steps .panel-head {
  margin-bottom: 1rem;
  gap: 0.625rem;
}
.site-main--apps .sizer__steps .panel-head {
  flex-wrap: wrap;
  align-items: center;
  row-gap: 0.5rem;
}
.site-main--apps .sizer__steps .panel-head .cluster-xs {
  gap: 0.625rem;
}
.site-main--apps .sizer__step-number {
  height: 1.75rem;
  width: 1.75rem;
  border-radius: 50%;
  background-color: rgb(255 255 255 / 0.1);
  font-size: 13px;
  line-height: 16px;
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
}
.site-main--apps .sizer__steps .heading-sm {
  font-size: 19px;
  line-height: 24px;
  letter-spacing: -0.016em;
  font-weight: 600;
  color: #ffffff;
}
.site-main--apps .sizer__stacks {
  gap: 0.625rem;
}
.site-main--apps .stack-option {
  min-height: 7rem;
  align-items: flex-start;
  gap: 0.125rem;
  border-radius: 18px;
  background-color: rgb(255 255 255 / 0.045);
  padding: 1rem 1.125rem;
  text-align: left;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
@media (hover: hover) {
.site-main--apps .stack-option:hover {
  background-color: rgb(255 255 255 / 0.085);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16);
}
}
.site-main--apps .stack-option:is(.sizer__stack-selected, .sizer__stack-selected-hover),
.site-main--apps .stack-option:is(.sizer__stack-selected, .sizer__stack-selected-hover):hover {
  background-color: rgb(41 72 255 / 0.18);
  box-shadow: inset 0 0 0 2px #5b86ff, 0 14px 36px -16px rgb(var(--glow-blue) / 0.95);
}
.site-main--apps .stack-option > .material-symbols-outlined {
  margin-bottom: auto;
  padding-bottom: 0.75rem;
  font-size: 26px;
  width: auto;
}
.site-main--apps .stack-option .label-strong {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.012em;
  color: #f5f5f7;
}
.site-main--apps .stack-option .note {
  font-size: 13px;
  line-height: 17px;
  color: #a1a1a6;
}
@media (max-width: 639.98px) {
.site-main--apps .stack-option {
  min-height: 6.5rem;
  padding: 0.875rem;
  border-radius: 16px;
}
}
/* Marks that are dark by day get their light form here, on the black. */
.site-main--apps .sizer .sizer__icon-wordpress { color: #5aa9d6; }
.site-main--apps .sizer .sizer__icon-ghost { color: #e6e6ea; }
.site-main--apps .sizer .sizer__icon-postgresql { color: #7aa7e0; }
.site-main--apps .sizer__traffic {
  white-space: nowrap;
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  color: #8fb0ff;
}
/* Traffic: a segmented pill; the chosen level is the white one. */
.site-main--apps .sizer__tiers {
  gap: 0.25rem;
  border-radius: 980px;
  background-color: rgb(255 255 255 / 0.06);
  padding: 0.25rem;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
}
.site-main--apps .traffic-tier {
  height: 2.5rem;
  border-radius: 980px;
  background-color: transparent;
  padding: 0;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.012em;
  font-weight: 500;
  color: #a1a1a6;
  box-shadow: none;
  transition: background-color 0.3s var(--v2-ease), color 0.2s ease, box-shadow 0.3s ease;
}
@media (hover: hover) {
.site-main--apps .traffic-tier:hover {
  color: #ffffff;
}
}
.site-main--apps .traffic-tier:is(.sizer__tier-active, .sizer__tier-active-hover),
.site-main--apps .traffic-tier:is(.sizer__tier-active, .sizer__tier-active-hover):hover {
  background-color: #f5f5f7;
  font-weight: 600;
  color: #000000;
  box-shadow: 0 8px 24px -10px rgb(110 155 255 / 0.8);
}

/* The recommendation: an inner pane, the price large, the meters lit. */
.site-main--apps .recommendation {
  border-radius: 22px;
  background-color: rgb(255 255 255 / 0.04);
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0) 60%);
  padding: 1.5rem;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
}
@media (min-width: 640px) {
.site-main--apps .recommendation {
  padding: 2rem;
}
}
.site-main--apps .recommendation__head {
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-bottom: 1.25rem;
  box-shadow: inset 0 -1px 0 rgb(255 255 255 / 0.08);
}
.site-main--apps .recommendation__head .overline {
  color: #8fb0ff;
}
.site-main--apps .recommendation__tools {
  gap: 0.5rem;
}
/* The currency selector keeps the site-wide pill (v2-pages.css), in its night form here. */
.site-main--apps .recommendation .meta-pill {
  border-radius: 980px;
  background-color: rgb(255 255 255 / 0.08);
  padding: 0.3125rem 0.75rem;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: #d2d2d7;
}
.site-main--apps .recommendation__summary {
  margin-bottom: 1.75rem;
}
.site-main--apps #rec-headline {
  font-size: clamp(1.375rem, 1.1rem + 0.7vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -0.024em;
  font-weight: 700;
  color: #ffffff;
}
.site-main--apps #rec-subhead {
  margin-top: 0.5rem;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.012em;
  color: #a1a1a6;
}
.site-main--apps .recommendation__specs {
  margin-bottom: 1.75rem;
}
.site-main--apps .recommendation__specs > :not([hidden]) ~ :not([hidden]) {
  margin-top: 1.125rem;
}
.site-main--apps .recommendation__spec-head {
  margin-bottom: 0.5rem;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: -0.006em;
  color: #a1a1a6;
}
.site-main--apps .recommendation__spec-value {
  font-weight: 600;
  color: #f5f5f7;
}
.site-main--apps .recommendation .meter {
  height: 0.375rem;
  border-radius: 980px;
  background-color: rgb(255 255 255 / 0.1);
  overflow: visible;
}
.site-main--apps .recommendation__fill {
  border-radius: 980px;
  background-color: #4f8bff;
  background-image: linear-gradient(90deg, #2948ff 0%, #4f8bff 60%, #3ec8ff 100%);
  box-shadow: 0 0 14px rgb(64 128 255 / 0.65);
  transition: width 0.8s var(--v2-ease);
}
@media (prefers-reduced-motion: reduce) {
.site-main--apps .recommendation__fill {
  transition: none;
}
}
.site-main--apps .recommendation__footer {
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.25rem;
  padding-top: 1.5rem;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08);
}
.site-main--apps .recommendation__footer .caption-block {
  margin-bottom: 0.375rem;
  font-size: 13px;
  line-height: 16px;
  color: #a1a1a6;
}
.site-main--apps .recommendation__footer .figure-row {
  flex-wrap: wrap;
  gap: 0.375rem;
}
.site-main--apps .recommendation__price {
  font-size: clamp(2.5rem, 1.9rem + 1.6vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: 700;
  color: #ffffff;
}
.site-main--apps .recommendation__footer .note {
  font-size: 15px;
  line-height: 20px;
  color: #a1a1a6;
}
/* The machine being sized: the chosen app (its mark on a small squircle) wired to a server, a
   slab of dark metal lit along its top edge; its CPU, memory and NVMe cells light up as far as the
   meters beside it reach (v2-apps.js), one after another. Phones skip it: there the price follows
   the choices directly. */
.site-main--apps .sizer__rig {
  display: none;
}
@media (min-width: 640px) {
.site-main--apps .sizer__rig {
  display: flex;
  align-items: center;
}
}
.site-main--apps .rig {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  gap: 1.25rem;
  padding: 0.5rem 0;
}
/* A pool of the scene's light under the machine. */
.site-main--apps .rig::before {
  content: '';
  position: absolute;
  left: 10%;
  right: 4%;
  bottom: -1.25rem;
  height: 3.5rem;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--glow-blue) / 0.45), rgb(var(--glow-blue) / 0));
}
.site-main--apps .rig__app {
  position: relative;
  display: flex;
  height: 3.5rem;
  width: 3.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 30%;
  background-color: rgb(20 22 32 / 0.9);
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.03) 50%);
  color: #5aa9d6;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28), inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 10px 26px -10px rgb(var(--glow-blue) / 0.8);
}
.site-main--apps .rig__app > .material-symbols-outlined {
  font-size: 28px;
  filter: drop-shadow(0 0 7px currentColor);
}
.site-main--apps .rig__app[data-app='docker'] { color: #4aa8f5; }
.site-main--apps .rig__app[data-app='gitlab'] { color: #fc7a3a; }
.site-main--apps .rig__app[data-app='ghost'] { color: #e6e6ea; }
.site-main--apps .rig__app[data-app='magento'] { color: #f4844f; }
.site-main--apps .rig__app[data-app='postgres'] { color: #7aa7e0; }
/* The wire from the app to the server. */
.site-main--apps .rig__app::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  width: 1.25rem;
  height: 2px;
  margin-top: -1px;
  background: linear-gradient(90deg, rgb(110 155 255 / 0.2), rgb(143 180 255 / 0.9));
  box-shadow: 0 0 8px rgb(79 139 255 / 0.7);
}
@media (prefers-reduced-motion: no-preference) {
.site-main--apps .rig__app.is-new {
  animation: apps-chip 0.6s var(--v2-ease-out);
}
}
@keyframes apps-chip {
from { scale: 0.86; opacity: 0.4; }
}
.site-main--apps .rig__slab {
  position: relative;
  display: flex;
  min-width: 0;
  flex: 1;
  height: 5rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-radius: 14px;
  background-color: #111318;
  background-image: linear-gradient(180deg, #20232c 0%, #14161c 45%, #0c0d11 100%);
  padding: 0 0.875rem 0 1rem;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.16),
    inset 0 0 0 1px rgb(255 255 255 / 0.07),
    inset 0 -2px 0 rgb(0 0 0 / 0.55),
    0 22px 44px -20px rgb(0 0 0 / 0.95),
    0 30px 60px -36px rgb(var(--glow-blue) / 0.8);
}
/* The top face: a sliver of the slab seen from just above, lit by the scene's light. */
.site-main--apps .rig__slab::before {
  content: '';
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  top: -0.4375rem;
  height: 0.5rem;
  border-radius: 8px 8px 2px 2px;
  background: linear-gradient(180deg, rgb(150 175 255 / 0.2), rgb(40 46 64 / 0.9));
  box-shadow: inset 0 1px 0 rgb(200 215 255 / 0.25);
  transform: perspective(40px) rotateX(38deg);
  transform-origin: 50% 100%;
}
.site-main--apps .rig__vent {
  height: 2.75rem;
  width: 2.5rem;
  flex-shrink: 0;
  border-radius: 6px;
  background: radial-gradient(circle, rgb(255 255 255 / 0.2) 0.9px, transparent 1.5px) 0 0 / 6px 6px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.05);
}
.site-main--apps .rig__bank {
  display: grid;
  flex-shrink: 0;
  gap: 4px;
  border-left: 1px solid rgb(255 255 255 / 0.07);
  padding-left: 1rem;
}
.site-main--apps .rig__bank--cpu {
  grid-template-columns: repeat(6, 10px);
  grid-auto-rows: 10px;
}
.site-main--apps .rig__bank--ram {
  grid-auto-flow: column;
  grid-auto-columns: 4px;
  grid-template-rows: 34px;
  gap: 3px;
}
.site-main--apps .rig__bank--nvme {
  grid-template-columns: repeat(2, 24px);
  grid-auto-rows: 8px;
}
.site-main--apps .rig__bank > i {
  display: block;
  border-radius: 2px;
  background-color: rgb(255 255 255 / 0.07);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.04);
  transition: background-color 0.35s linear, box-shadow 0.35s linear;
  transition-delay: calc(var(--k, 0) * 32ms);
}
.site-main--apps .rig__bank > i.is-on {
  background-color: #4f8bff;
  background-image: linear-gradient(180deg, #9cbcff, #3d6bff);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), 0 0 9px rgb(64 128 255 / 0.85);
}
.site-main--apps .rig__bank--ram > i {
  border-radius: 1.5px;
}
.site-main--apps .rig__handle {
  height: 2.5rem;
  width: 0.375rem;
  flex-shrink: 0;
  border-radius: 3px;
  background: linear-gradient(180deg, #3a3f4b, #1b1e25);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18);
}
/* Narrower panes: the vent goes, so the cells keep their size. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
.site-main--apps .rig__vent {
  display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.site-main--apps .rig__bank > i {
  transition: none;
}
}

/* The trail: a line of light drawn from the option just chosen, under the glass, to the
   recommendation (v2-apps.js draws and fades it; wide layouts only). */
.site-main--apps .sizer__trail {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.site-main--apps .sizer__trail path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}
.site-main--apps .sizer__trail-glow {
  stroke: rgb(79 139 255 / 0.32);
  stroke-width: 9px;
}
.site-main--apps .sizer__trail-core {
  stroke: #b9cdff;
  stroke-width: 2px;
}

/* The pill buttons: blue and filled, as across the site. */
.site-main--apps :is(#deploy-stack, .spotlights__footer .btn-primary-flat, .spotlights__cta-dark) {
  height: 2.75rem;
  border-radius: 980px;
  padding: 0 1.375rem;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.01em;
  font-weight: 600;
  box-shadow: none;
  transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}
.site-main--apps :is(#deploy-stack, .spotlights__footer .btn-primary-flat) {
  background-color: var(--color-primary-container);
  color: #ffffff;
}
/* Under the price, the full width of the pane, like a configurator's last step. */
.site-main--apps #deploy-stack {
  flex: 1 0 100%;
}
@media (max-width: 639.98px) {
.site-main--apps :is(#deploy-stack, .spotlights__footer .btn-primary-flat, .spotlights__cta-dark) {
  height: 2.625rem;
  padding: 0 1.25rem;
  font-size: 15px;
}
}

/* ── Benchmark: one wide tile; the two figures large, the bars drawing themselves in ─────── */
.site-main--apps .benchmark {
  padding-top: 5rem;
  padding-bottom: 0;
}
@media (min-width: 1024px) {
.site-main--apps .benchmark {
  padding-top: 7rem;
}
}
.site-main--apps .benchmark__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 2.5rem;
  border-radius: var(--v2-radius-tile);
  background-color: var(--v2-tile);
  padding: 2.5rem 1.5rem 1.5rem;
  box-shadow: var(--shadow-card);
}
@media (min-width: 640px) {
.site-main--apps .benchmark__card {
  padding: 3rem 2.5rem 2.5rem;
}
}
@media (min-width: 1024px) {
.site-main--apps .benchmark__card {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4rem;
  padding: 4rem;
}
}
@media (max-width: 639.98px) {
.site-main--apps .benchmark__card {
  border-radius: 22px;
}
}
.site-main--apps .benchmark__text-col {
  max-width: 34rem;
}
.site-main--apps .benchmark__text-col .eyebrow {
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 0.08em;
}
.site-main--apps .benchmark__heading {
  margin-top: 0.75rem;
  font-size: clamp(2rem, 1.25rem + 2.2vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.028em;
  font-weight: 700;
  color: var(--color-on-surface);
  text-wrap: balance;
}
.site-main--apps .benchmark__text-col .card-text {
  margin-top: 1rem;
  font-size: clamp(1.0625rem, 0.95rem + 0.42vw, 1.3125rem);
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--color-tertiary);
}
.site-main--apps .benchmark__compare {
  width: auto;
  gap: 0.875rem;
  border-radius: 20px;
  background-color: var(--color-surface-container-low);
  padding: 1.75rem 1.5rem 1.5rem;
}
@media (min-width: 640px) {
.site-main--apps .benchmark__compare {
  padding: 2.25rem 2.25rem 1.75rem;
}
}
.site-main--apps .benchmark__compare {
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.035);
}
/* After hours the well is sunk below the tile: darker, its rim catching the light, a little of
   the blue gathered behind the lit cells. */
:root[data-theme='dark'] .site-main--apps .benchmark__compare {
  background-color: #0c0c0f;
  background-image: radial-gradient(ellipse 70% 55% at 18% 22%, rgb(var(--glow-blue) / 0.16), rgb(var(--glow-blue) / 0) 70%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.07), inset 0 1px 0 rgb(255 255 255 / 0.05), inset 0 14px 28px -18px rgb(0 0 0 / 0.95);
}
.site-main--apps :is(.benchmark__row, .benchmark__row-spaced) {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1rem;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.012em;
}
.site-main--apps .benchmark__row-spaced {
  margin-top: 1rem;
}
/* Narrow: each figure under its label, so the two rows read alike. */
@media (max-width: 639.98px) {
.site-main--apps :is(.benchmark__row, .benchmark__row-spaced) {
  flex-direction: column;
  align-items: flex-start;
}
}
.site-main--apps .benchmark__row-spaced .muted {
  color: var(--color-on-surface-variant);
  font-weight: 600;
}
.site-main--apps :is(.benchmark__value-brand, .benchmark__value) {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 700;
}
.site-main--apps .benchmark__value-brand {
  color: var(--color-primary);
}
.site-main--apps .benchmark__value {
  color: var(--color-tertiary);
}
/* The two figures as memory: each track is a module of fifty cells in two rows over a row of
   contacts, and the fill lights as many cells as its length reaches (18% and 78%: nine and
   thirty-nine), one after another as the tile arrives. */
.site-main--apps .benchmark {
  --apps-cell-off: rgb(0 0 0 / 0.07);
  --apps-pin: rgb(0 0 0 / 0.13);
}
:root[data-theme='dark'] .site-main--apps .benchmark {
  --apps-cell-off: rgb(255 255 255 / 0.075);
  --apps-pin: rgb(255 255 255 / 0.11);
}
.site-main--apps .benchmark__track {
  container-type: inline-size;
  position: relative;
  height: 1.375rem;
  margin-bottom: 0.4375rem;
  overflow: visible;
  border-radius: 0;
  background: none;
}
:root[data-theme='dark'] .site-main--apps .benchmark__track {
  background: none;
}
.site-main--apps .benchmark__track::before,
.site-main--apps .benchmark__track > div {
  -webkit-mask-image:
    repeating-linear-gradient(90deg, #000 0 calc(2cqw - 2px), transparent calc(2cqw - 2px) 2cqw),
    linear-gradient(180deg, #000 0 calc(50% - 1px), transparent calc(50% - 1px) calc(50% + 1px), #000 calc(50% + 1px));
  -webkit-mask-composite: source-in;
  mask-image:
    repeating-linear-gradient(90deg, #000 0 calc(2cqw - 2px), transparent calc(2cqw - 2px) 2cqw),
    linear-gradient(180deg, #000 0 calc(50% - 1px), transparent calc(50% - 1px) calc(50% + 1px), #000 calc(50% + 1px));
  mask-composite: intersect;
}
.site-main--apps .benchmark__track::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--apps-cell-off);
}
/* The contacts along the module's foot, with its key notch. */
.site-main--apps .benchmark__track::after {
  content: '';
  position: absolute;
  left: 0.25rem;
  right: 0.25rem;
  top: calc(100% + 3px);
  height: 4px;
  background: repeating-linear-gradient(90deg, var(--apps-pin) 0 calc(1cqw - 1.5px), transparent calc(1cqw - 1.5px) 1cqw);
  -webkit-mask-image: linear-gradient(90deg, #000 0 41%, transparent 41% 44%, #000 44%);
  mask-image: linear-gradient(90deg, #000 0 41%, transparent 41% 44%, #000 44%);
}
.site-main--apps .benchmark__track > div {
  position: relative;
  border-radius: 0;
}
.site-main--apps .benchmark__track .meter-fill {
  background-color: #2948ff;
  background-image: linear-gradient(90deg, #2948ff, #0071e3 55%, #2ab8ff);
  box-shadow: none;
}
:root[data-theme='dark'] .site-main--apps .benchmark__track .meter-fill {
  background-image: linear-gradient(90deg, #3d63ff, #4f8bff 55%, #5fd0ff);
}
/* The lit cells glow (the unlit ones are too faint to). */
.site-main--apps .benchmark__row + .benchmark__track {
  filter: drop-shadow(0 0 5px rgb(41 100 255 / 0.35));
}
:root[data-theme='dark'] .site-main--apps .benchmark__row + .benchmark__track {
  filter: drop-shadow(0 0 6px rgb(64 128 255 / 0.7));
}
.site-main--apps .benchmark__fill-standard {
  background-color: #8e8e93;
  background-image: linear-gradient(90deg, #aeaeb2, #86868b);
}
:root[data-theme='dark'] .site-main--apps .benchmark__fill-standard {
  background-image: linear-gradient(90deg, #55555b, #7a7a80);
}
@media (prefers-reduced-motion: no-preference) {
html.v2-motion.v2-js .site-main--apps .benchmark__card.is-in .benchmark__track > div {
  animation: apps-cells 0.72s steps(9, end) 0.45s both;
}
html.v2-motion.v2-js .site-main--apps .benchmark__card.is-in .benchmark__track ~ .benchmark__track > div {
  animation: apps-cells 1.4s steps(39, end) 0.75s both;
}
}
@keyframes apps-cells {
from { clip-path: inset(0 100% 0 0); }
to { clip-path: inset(0 0 0 0); }
}
.site-main--apps .benchmark__caption {
  margin-top: 0.5rem;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-tertiary);
}

/* ── Services: two big tiles. The AI builder is a little scene of its own, dark in both themes. */
.site-main--apps .spotlights {
  margin-bottom: 0;
  padding-top: 1rem;
  padding-bottom: 5rem;
}
@media (min-width: 1024px) {
.site-main--apps .spotlights {
  padding-top: 1.25rem;
  padding-bottom: 7rem;
}
}
.site-main--apps .spotlights__grid {
  gap: 1rem;
}
@media (min-width: 1024px) {
.site-main--apps .spotlights__grid {
  gap: 1.25rem;
}
}
.site-main--apps .spotlights__card {
  min-height: 0;
  border-radius: var(--v2-radius-tile);
  background-color: var(--v2-tile);
  padding: 2.5rem 1.5rem 1.75rem;
  box-shadow: var(--shadow-card);
}
@media (min-width: 640px) {
.site-main--apps .spotlights__card {
  padding: 3rem 2.5rem 2.5rem;
}
}
@media (min-width: 1024px) {
.site-main--apps .spotlights__card {
  min-height: 34rem;
  padding: 3.5rem 3.5rem 3rem;
}
}
@media (max-width: 639.98px) {
.site-main--apps .spotlights__card {
  border-radius: 22px;
}
}
/* The AI builder is the brightest thing on the page in both themes: a small scene of its own on a
   base lit from within, a rim of light running from violet to blue round its edge, and an aurora
   that blooms as it arrives. */
.site-main--apps #ai-builder {
  --color-surface: #000000;
  --color-on-surface: #f5f5f7;
  --color-on-surface-variant: #d2d2d7;
  --color-tertiary: #a1a1a6;
  --color-primary: #6e9bff;
  --color-hairline: rgb(255 255 255 / 0.08);
  --color-border-soft: rgb(255 255 255 / 0.12);
  color-scheme: dark;
  isolation: isolate;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, #080b20 0%, #03040c 52%, #000000 100%) padding-box,
    linear-gradient(140deg, rgb(186 160 255 / 0.8) 0%, rgb(110 155 255 / 0.3) 24%, rgb(255 255 255 / 0.07) 50%, rgb(110 155 255 / 0.32) 76%, rgb(90 140 255 / 0.95) 100%) border-box;
  color: var(--color-on-surface);
  box-shadow: 0 40px 80px -44px rgb(var(--glow-blue) / 0.75);
}
/* After hours its light reaches out onto the page round it. */
:root[data-theme='dark'] .site-main--apps #ai-builder {
  box-shadow: 0 0 80px -26px rgb(var(--glow-violet) / 0.5), 0 46px 96px -40px rgb(var(--glow-blue) / 0.95);
}
@media (hover: hover) and (pointer: fine) {
.site-main--apps #ai-builder {
  transition: box-shadow 0.45s var(--v2-ease-out), transform 0.5s var(--v2-ease);
}
.site-main--apps #ai-builder:hover {
  box-shadow: 0 0 60px -24px rgb(var(--glow-violet) / 0.45), 0 46px 90px -40px rgb(var(--glow-blue) / 0.95);
}
:root[data-theme='dark'] .site-main--apps #ai-builder:hover {
  box-shadow: 0 0 96px -24px rgb(var(--glow-violet) / 0.6), 0 50px 110px -40px rgb(var(--glow-blue) / 1);
}
}
.site-main--apps #ai-builder::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 85% 62% at 90% 108%, rgb(var(--glow-blue) / 0.78) 0%, rgb(var(--glow-blue) / 0.26) 42%, rgb(var(--glow-blue) / 0) 72%),
    radial-gradient(ellipse 42% 30% at 64% 104%, rgb(var(--glow-cyan) / 0.3), rgb(var(--glow-cyan) / 0) 70%),
    radial-gradient(ellipse 60% 48% at 0% 0%, rgb(var(--glow-violet) / 0.4), rgb(var(--glow-violet) / 0) 70%);
}
@media (prefers-reduced-motion: no-preference) {
.site-main--apps #ai-builder::before {
  transition: transform 1.2s var(--v2-ease);
  transform-origin: 88% 100%;
}
html.v2-motion.v2-js .site-main--apps #ai-builder.is-in::before {
  animation: apps-aurora 1.8s var(--v2-ease-out) 0.15s backwards;
}
}
@keyframes apps-aurora {
from { opacity: 0.15; transform: scale(0.86); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
.site-main--apps #ai-builder:hover::before {
  transform: scale(1.08);
}
}
/* The art: a prompt, a light, and the page it becomes, drawn in lines of light. */
.site-main--apps .spotlights__art {
  position: relative;
  z-index: 10;
  margin-top: auto;
  padding-top: 1.75rem;
}
.site-main--apps .ai-art {
  display: block;
  width: 100%;
  max-width: 23rem;
  height: auto;
  overflow: visible;
}
.site-main--apps .ai-art path,
.site-main--apps .ai-art circle {
  vector-effect: non-scaling-stroke;
}
.site-main--apps .ai-art__line {
  fill: none;
  stroke: rgb(157 184 255 / 0.78);
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.site-main--apps .ai-art__line--soft {
  stroke: rgb(157 184 255 / 0.42);
  stroke-width: 3px;
}
.site-main--apps .ai-art__trail {
  fill: none;
  stroke: url(#apps-ai-trail);
  stroke-width: 2px;
  stroke-linecap: round;
}
.site-main--apps .ai-art__fill {
  fill: rgb(110 155 255 / 0.1);
}
.site-main--apps .ai-art__fill--pill {
  fill: rgb(255 255 255 / 0.06);
}
.site-main--apps .ai-art__fill--hero {
  fill: url(#apps-ai-hero);
}
.site-main--apps .ai-art__spark {
  fill: #dbe5ff;
}
.site-main--apps .ai-art__dot {
  fill: rgb(157 184 255 / 0.5);
}
/* Drawn once, as the tile arrives: the prompt, the light leaving it, then the page. */
@media (prefers-reduced-motion: no-preference) {
html.v2-motion.v2-js .site-main--apps .ai-art :is(.ai-art__line, .ai-art__trail) {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
html.v2-motion.v2-js .site-main--apps .ai-art :is(.ai-art__fill, .ai-art__spark, .ai-art__dot) {
  opacity: 0;
}
html.v2-motion.v2-js .site-main--apps #ai-builder.is-in .ai-art :is(.ai-art__line, .ai-art__trail) {
  animation: apps-line 0.9s var(--v2-ease-out) calc(var(--d, 0) * 1ms + 350ms) both;
}
html.v2-motion.v2-js .site-main--apps #ai-builder.is-in .ai-art :is(.ai-art__fill, .ai-art__spark, .ai-art__dot) {
  animation: apps-fill 0.6s linear calc(var(--d, 0) * 1ms + 450ms) both;
}
}
@keyframes apps-line {
from { stroke-dashoffset: 1; }
to { stroke-dashoffset: 0; }
}
@keyframes apps-fill {
from { opacity: 0; }
to { opacity: 1; }
}
.site-main--apps :is(.spotlights__badge-ai, .spotlights__badge) {
  margin-bottom: 1.5rem;
  gap: 0.375rem;
  border-radius: 980px;
  padding: 0.375rem 0.875rem 0.375rem 0.75rem;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: -0.008em;
  font-weight: 600;
}
.site-main--apps .spotlights__badge-ai {
  background-color: rgb(110 155 255 / 0.14);
  color: #b7caff;
  box-shadow: inset 0 0 0 1px rgb(110 155 255 / 0.3);
}
.site-main--apps .spotlights__badge {
  background-color: transparent;
  color: var(--color-on-surface-variant);
  box-shadow: inset 0 0 0 1px var(--color-border-soft);
}
.site-main--apps .spotlights__card .feature-title {
  margin-bottom: 0;
  font-size: clamp(2rem, 1.25rem + 2.2vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.028em;
  font-weight: 700;
  color: var(--color-on-surface);
  text-wrap: balance;
}
.site-main--apps .spotlights__desc {
  margin-top: 0.875rem;
  margin-bottom: 2rem;
  max-width: 30rem;
  font-size: clamp(1.0625rem, 0.95rem + 0.42vw, 1.3125rem);
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--color-tertiary);
}
.site-main--apps .spotlights__features {
  margin-bottom: 1rem;
  gap: 0.875rem 1.5rem;
}
@media (max-width: 479.98px) {
.site-main--apps .spotlights__features {
  grid-template-columns: minmax(0, 1fr);
}
}
.site-main--apps .spotlights__feature {
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.012em;
  color: var(--color-on-surface);
}
.site-main--apps .spotlights__feature .icon-18-accent {
  font-size: 20px;
}
.site-main--apps .spotlights__footer {
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  padding-top: 2rem;
}
.site-main--apps .spotlights__footer .note-num {
  font-size: 13px;
  line-height: 18px;
  color: var(--color-tertiary);
}
/* Over the AI tile's light the note is a shade brighter, so it keeps its contrast there. */
.site-main--apps #ai-builder .note-num {
  color: #c7c7cc;
}
.site-main--apps .spotlights__cta-dark {
  background-color: #1d1d1f;
  color: #ffffff;
}
.site-main--apps .spotlights__cta-dark:hover {
  background-color: #3a3a3c;
  opacity: 1;
}
:root[data-theme='dark'] .site-main--apps .spotlights__cta-dark {
  background-color: #f5f5f7;
  color: #000000;
}
:root[data-theme='dark'] .site-main--apps .spotlights__cta-dark:hover {
  background-color: #ffffff;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
.site-main--apps .spotlights__card,
.site-main--apps .benchmark__card {
  transition: box-shadow 0.4s ease, transform 0.5s var(--v2-ease);
}
}

/* ── FAQ: on the page's own grey by day, as it sits on the page's charcoal after hours, so the
   services above flow into it without a step. ─────────────────────────────────────────────── */
.site-main--apps #faq {
  background-color: var(--color-surface);
}