/* Illusion storefront refinement.
   Existing Nunjucks/Alpine theme; no additional production dependencies.
   Design variance 6, motion 3, density 4. Preserve the dark brand and artwork.
   Shape scale: panels 18px, controls 10px, semantic badges pill.
   Layers: artwork 0, hero content 2; existing navigation/modal layers retained. */

html:root {
  --container-max: 1280px;
  --section-py: clamp(64px, 7vw, 100px);
  --radius-card: 18px;
  --radius-input: 10px;
  --radius-button: 10px;
  --grid-gap: 20px;
  --cl-t-muted: 165, 165, 178;
  --ui-line: rgba(255,255,255,.10);
  --ui-panel: #111216;
  --ui-raised: #18191f;
  --ui-accent-text: #e882e3;
  --ui-ease: cubic-bezier(.2,.7,.2,1);
}

body { line-height: 1.65; }
.wrap { padding-inline: clamp(20px, 3.5vw, 48px); }
#app { min-height: 100dvh; }
#main-content { min-width: 0; }
:where(section[id], h2[id], h3[id]) { scroll-margin-top: 120px; }
a, button, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid #eb8be6;
  outline-offset: 4px;
}
:where(button, .sa-btn) { touch-action: manipulation; }
.sa-btn { min-height: 46px; white-space: nowrap; font-weight: 650; }
.sa-btn:active { transform: translateY(1px); }
.sa-btn--primary, .sa-faq-support-card-link { box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 22px rgba(201,44,196,.12); }
.sa-btn--primary.sa-btn--solid, .sa-hero .sa-btn--primary.sa-btn--solid, .sa-faq-support-card-link {
  background: linear-gradient(180deg,#c132bb,#ad24a7); color: #fff;
}
.sa-skip-link {
  position: fixed; top: 12px; left: 20px; z-index: 100;
  padding: 10px 18px; border-radius: 10px; background: #f4f4f5; color: #111216;
  transform: translateY(-180%);
}
.sa-skip-link:focus { transform: translateY(0); }

/* Calm the background so the artwork, typography and controls lead. */
body::before { opacity: .35; }
.page-fx { opacity: .45; }
.components > .component:not(.sa-hero)::before { opacity: .35; }
.sa-section-title { font-size: clamp(30px, 3.3vw, 46px); line-height: 1.12; letter-spacing: -.035em; }
.sa-section-header { margin-bottom: 36px; }
.sa-section-subtitle { max-width: 58ch; line-height: 1.65; }
.sa-section-eyebrow {
  padding: 0; border: 0; background: none; box-shadow: none;
  color: var(--ui-accent-text); font-size: 13px;
}
.sa-section-eyebrow > span[aria-hidden] { display: none; }

/* Floating navigation, with enough breathing room for the complete menu. */
.sa-header { background: linear-gradient(#08090b 10%,rgba(8,9,11,.92) 70%,transparent); padding-bottom: 12px; }
.sa-announcement { color: #b5b3bf; font-size: 12px; }
.sa-navbar--floating-pill > div { padding: 12px 24px 0; }
.sa-navbar--floating-pill > div > div {
  border-radius: 18px; border-color: rgba(255,255,255,.12);
  background: rgba(18,19,24,.94);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 12px 32px rgba(0,0,0,.18);
}
.sa-navbar--floating-pill > div > div > div { height: 64px; padding-inline: 22px; gap: 20px; }
.sa-navbar-logo { max-width: 180px; }
.sa-navbar-logo span { font-size: 21px; font-weight: 800; }
.sa-navbar-link { font-size: 13px; white-space: nowrap; }
.sa-navbar-link[aria-current='page'] { background: rgba(255,255,255,.065); color: #f4f4f5; }
.sa-navbar :where(button[aria-label='Search'],button[aria-label='Open cart'],button[aria-label='Menu']) { min-width: 42px; min-height: 42px; }
.sa-info-dropdown [role='menu'] { padding: 6px; border-radius: 14px; background: #18191f; }

/* Cinematic hero: retain every string and both original character assets. */
.sa-tpl-shop .sa-hero {
  min-height: 610px;
  justify-content: center;
  background: radial-gradient(ellipse 52% 70% at 50% 42%,rgba(201,44,196,.085),transparent 76%);
}
.sa-tpl-shop .sa-hero::before { opacity: .3; background-size: 64px 64px,64px 64px,auto,auto; }
.sa-tpl-shop .sa-hero::after {
  inset: auto 0 0; width: 100%; height: 180px; transform: none;
  background: linear-gradient(transparent,#08090b); mask-image: none; -webkit-mask-image: none; opacity: 1;
}
.sa-tpl-shop .sa-hero-centered-inner { padding-block: 58px 88px; z-index: 2; }
.sa-hero-centered-inner > div { max-width: 790px; }
.sa-tpl-shop .sa-hero .sa-hero-title {
  max-width: 790px; margin-inline: auto; color: #f4f4f5;
  font-size: clamp(42px,4.5vw,66px); font-weight: 800;
  line-height: 1.06; letter-spacing: -.035em;
  text-shadow: 0 4px 32px rgba(8,9,11,.45);
}
.sa-hero .sa-hero-eyebrow { margin-bottom: 25px; font-size: 12px; background: rgba(22,19,28,.92); box-shadow: none; }
.sa-tpl-shop .sa-hero .sa-hero-subtitle { max-width: 590px; margin-top: 24px; font-size: 16px; color: #b7b2c1; line-height: 1.8; }
.sa-hero .sa-hero-actions { margin-top: 30px; }
.sa-hero-actions .sa-btn { min-height: 50px; padding-inline: 26px; }
.sa-hero-flanks { z-index: 0; }
.sa-hero-flank { opacity: .8; filter: saturate(.85) brightness(.92); }
.sa-hero-flank--left, .sa-hero-flank--right {
  top: 10px; width: clamp(280px,31vw,460px); height: auto; min-height: 0;
  object-fit: contain; object-position: top;
  -webkit-mask-image: linear-gradient(#000 26%,rgba(0,0,0,.6) 45%,transparent 70%);
  mask-image: linear-gradient(#000 26%,rgba(0,0,0,.6) 45%,transparent 70%);
}
.sa-hero-flank--left { left: max(-65px,calc(50% - 740px)); }
.sa-hero-flank--right { right: max(-65px,calc(50% - 740px)); }

/* The catalog starts while the first screen still has momentum. */
.sa-tpl-shop .sa-products { padding-top: 40px; }
.sa-products .wrap { max-width: var(--container-max); }
.sa-catalog-header { grid-template-columns: minmax(0,1fr) minmax(260px,.62fr); gap: 36px; margin-bottom: 28px; padding-bottom: 26px; }
.sa-catalog-heading .sa-section-title { max-width: 100%; font-size: clamp(32px,3.3vw,46px); line-height: 1.12; letter-spacing: -.035em; }
.sa-catalog-tools-label { font-size: 12px; }
.sa-catalog-tools-label span:last-child { color: #a5a5b2; }
.sa-catalog-search { height: 48px; border-radius: 12px; background: #121318; box-shadow: none; }
.sa-catalog-search input::placeholder { color: #a5a5b2; }
.sa-catalog-search:focus-within { border-color: #d85bd1; box-shadow: 0 0 0 3px rgba(201,44,196,.12); }
.sa-products-items, .sa-page-products-items { align-items: stretch; }
.sa-products-item, .sa-page-products-item { animation: none; }
.sa-product-card--flat-divider { height: 100%; border: 1px solid var(--ui-line); background: #111216; box-shadow: none; border-radius: 16px; }
.sa-product-card--flat-divider .sa-product-card-media { background: #18151e; }
.sa-product-card--flat-divider .sa-product-card-media img { transition: transform 350ms var(--ui-ease); }
.sa-product-card--flat-divider .sa-product-card-body { padding: 20px; min-height: 154px; }
.sa-product-card--flat-divider .sa-product-card-title { font-size: 17px; font-weight: 700; letter-spacing: -.015em; }
.sa-product-card--flat-divider .sa-product-card-body > div:first-child { flex-wrap: wrap; gap: 8px; }
.sa-product-card--flat-divider .sa-product-card-title { white-space: normal; overflow-wrap: anywhere; }
.sa-product-card-description { font-size: 12px; color: #a5a5b2; margin-top: 8px; }
.sa-product-card-price-label { font-size: 10px; color: #a5a5b2; font-weight: 600; }
.sa-product-card--flat-divider .sa-product-card-price { font-size: 22px; letter-spacing: -.025em; }
.sa-product-card-meta { padding-top: 16px; }
.sa-product-card--flat-divider .sa-product-card-status { font-size: 10px; border-radius: 6px; }
.sa-product-card-badge::after { animation: none; display: none; }
.sa-catalog-empty { padding: 44px 24px; border: 1px dashed var(--ui-line); border-radius: 16px; text-align: center; background: #111216; }
.sa-catalog-empty p { margin-top: 6px; color: #a5a5b2; font-size: 14px; }
.sa-catalog-empty button { margin-top: 18px; padding: 10px 18px; border: 1px solid var(--ui-line); border-radius: 10px; color: #f4f4f5; }

/* One lead benefit and four supporting benefits; a complete five-cell grid. */
.sa-tpl-shop .sa-features--icon-grid .sa-section-header { text-align: left; margin-inline: 0; max-width: 600px; }
.sa-tpl-shop .sa-features--icon-grid .sa-features-items { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 16px; }
.sa-tpl-shop .sa-features--icon-grid .sa-features-item { position: relative; padding: 28px; background: #111216; border: 1px solid var(--ui-line); box-shadow: none; overflow: hidden; text-align: left; }
.sa-tpl-shop .sa-features--icon-grid .sa-features-item:first-child { grid-row: span 2; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; background: radial-gradient(ellipse at 15% 0,rgba(201,44,196,.19),transparent 74%),#131217; }
.sa-tpl-shop .sa-features--icon-grid .sa-features-item:first-child > span:first-child { width: 72px; height: 72px; font-size: 30px; margin-bottom: auto; margin-top: 8px; background: rgba(201,44,196,.11); border-radius: 18px; }
.sa-tpl-shop .sa-features--icon-grid .sa-features-item:first-child h3 { font-size: 30px; margin-top: 48px; }
.sa-tpl-shop .sa-features--icon-grid .sa-features-item:nth-child(5) { grid-column: auto; background: linear-gradient(135deg,#1b1720,#111216 75%); }
.sa-features-item h3 { font-size: 18px; font-weight: 700; }
.sa-features-item p { font-size: 14px; color: #a5a5b2; line-height: 1.75; }
.sa-features-item > span:first-child { color: var(--ui-accent-text); box-shadow: none; background: rgba(201,44,196,.09); border: 1px solid rgba(201,44,196,.15); }

/* The purchase process reads horizontally as a sequence, with a mobile stack. */
.sa-tpl-shop .sa-steps > .wrap { padding-block: 42px; }
.sa-tpl-shop .sa-steps .sa-section-header { max-width: 620px; margin-inline: 0; text-align: left; }
.sa-tpl-shop .sa-steps--timeline .wrap > .relative { max-width: none; }
.sa-tpl-shop .sa-steps--timeline .wrap > .relative > .absolute { display: none; }
.sa-tpl-shop .sa-steps--timeline .sa-steps-items { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; }
.sa-tpl-shop .sa-steps--timeline .sa-steps-item { flex-direction: column; align-items: flex-start; gap: 18px; padding: 24px 0 0; border-radius: 0; border: 0; border-top: 1px solid rgba(255,255,255,.16); background: none; box-shadow: none; }
.sa-tpl-shop .sa-steps--timeline .sa-steps-item > span { width: 38px; height: 38px; background: rgba(201,44,196,.07); border-color: rgba(201,44,196,.24); color: #e882e3; box-shadow: none; font-size: 14px; }
.sa-steps-item h3 { font-size: 20px; }
.sa-steps-item p { max-width: 31ch; color: #a5a5b2; }

/* Reviews have room for real written feedback without nested card padding. */
.sa-feedbacks--grid > .wrap { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 0 24px; }
.sa-feedbacks--grid .sa-section-header { text-align: left; margin-inline: 0; }
.sa-feedbacks--grid .sa-feedbacks-items { grid-column: 1 / -1; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.sa-feedbacks--grid > .wrap > .flex { margin-bottom: 36px; }
.sa-feedback-card { padding: 0; border-radius: 16px; background: #111216; border-color: var(--ui-line); box-shadow: none; }
.sa-feedback-card > div { padding: 22px; }
.sa-feedback-card > div:first-child > .flex { flex-wrap: wrap; row-gap: 8px; }
.sa-feedback-card p { line-height: 1.8; }
.sa-feedbacks-empty { grid-column: 1 / -1; padding: 32px; border: 1px solid var(--ui-line); border-radius: 16px; color: #a5a5b2; }
.sa-feedbacks-link { color: var(--ui-accent-text); }

/* Questions and the support action form one balanced composition. */
.sa-faq--accordion > .wrap { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 28px 70px; align-items: start; }
.sa-faq--accordion > .wrap > .sa-section-header { grid-column: 1; grid-row: 1; margin: 0; text-align: left; }
.sa-faq--accordion > .wrap > .sa-faq-items { grid-column: 2; grid-row: 1 / span 2; width: 100%; max-width: none; gap: 10px; }
.sa-faq--accordion > .wrap > .sa-faq-support-wrap { grid-column: 1; grid-row: 2; margin: 0; max-width: none; }
.sa-faq-item { border-radius: 14px; background: #111216; border-color: var(--ui-line); box-shadow: none; }
.sa-faq-item:has(button[aria-expanded='true']) { border-color: rgba(201,44,196,.36); background: #151218; }
.sa-faq-item > button { padding: 21px 23px; min-height: 64px; font-size: 15px; line-height: 1.5; }
.sa-faq-item .faq-panel-inner > div { padding: 0 23px 22px; color: #aaa5b4; line-height: 1.8; }
.sa-faq-support-card { flex-direction: column; align-items: flex-start; gap: 22px; padding: 26px; border-radius: 16px; background: linear-gradient(130deg,rgba(201,44,196,.075),transparent 85%); box-shadow: none; }
.sa-faq-support-card > div { align-items: flex-start; }
.sa-faq-support-card-link { min-height: 44px; font-size: 13px; white-space: nowrap; }
.sa-faq-support-card .text-accent-500 { color: var(--ui-accent-text); }

/* Interior pages use the same surfaces and hierarchy as the storefront. */
.sa-breadcrumbs { font-size: 12px; color: #a5a5b2; }
.sa-page-products-filter-card { padding: 18px; background: #111216; border-color: var(--ui-line); box-shadow: none; border-radius: 16px; }
.sa-page-products-intro { border-radius: 0 14px 14px 0; }
.sa-page-products-intro > span, .sa-page-products-intro > p { color: #a5a5b2; }
.sa-page-products-results-bar { padding-block: 8px 18px; margin-bottom: 22px; }
.sa-product-layout { gap: clamp(24px,4vw,56px); }
.sa-product-gallery { border-radius: 18px; }
.sa-product-form { border-radius: 18px; }
.sa-product-form :where(input,select) { min-height: 46px; }
.sa-product-form :where(label, .text-t-muted) { color: #b3afbc; }
.sa-status-card { min-height: 82px; padding: 18px 22px; border-radius: 14px; background: #111216; border-color: var(--ui-line); box-shadow: none; }
.sa-status-card > img { width: 48px; height: 48px; }
.sa-status-card .status { font-size: 12px; }
.sa-page-status-items { max-width: 960px; }
.sa-customer-sidebar { border-radius: 16px; background: #111216; }
.sa-customer-sidebar, .sa-download-content, .sa-access-form, .sa-access-form .input { min-width: 0; }
.sa-customer-sidebar-link { min-height: 44px; border-radius: 10px; }
.sa-customer-sidebar-link[aria-current='page'] { color: #ed8fe7; }
.sa-customer-header-title { font-size: clamp(30px,3.5vw,44px); letter-spacing: -.035em; }
.sa-page-customer-dashboard-item, .sa-page-customer-reseller-stat { padding: 24px; min-height: 156px; border-radius: 16px; box-shadow: none; }
.sa-page-customer-dashboard-item p:first-of-type, .sa-page-customer-reseller-stat p:first-of-type { font-size: 32px; }
.sa-cart-item { border-radius: 14px; }
.sa-cart-panel, .sa-search-modal { --cl-t-muted: 173,170,185; }
.input { border-radius: 10px; min-height: 44px; border-color: rgba(255,255,255,.15); }
.input::placeholder { color: #a5a5b2; opacity: 1; }
.prose { line-height: 1.85; }
.sa-pagination :where(a,button) { min-width: 42px; min-height: 42px; }
.sa-docs-title { font-size: clamp(36px,4vw,56px); line-height: 1.08; letter-spacing: -.035em; }
.sa-docs-hero { margin-bottom: 36px; }
.sa-docs-subtitle { color: #aaa5b4; max-width: 64ch; line-height: 1.75; }
.sa-docs-kicker { color: var(--ui-accent-text); letter-spacing: .04em; }
.sa-download-sidebar, .sa-gitbook-sidebar { border-radius: 16px; border-color: var(--ui-line); background: #111216; }
.sa-docs-hero-panel, .sa-download-note { border-color: var(--ui-line); box-shadow: none; background: #15151b; }
.sa-filter-pills button { min-height: 42px; padding-inline: 18px; }
.sa-filter-pills button.is-active { border-color: rgba(201,44,196,.45); color: #ed8fe7; background: rgba(201,44,196,.1); }
.sa-guide-search { border-radius: 12px; }
.sa-gitbook-content { border-radius: 18px; }
.sa-guide-toolbar { gap: 14px; }
.sa-access-label { display: grid; min-width: 0; gap: 8px; color: #b9b5c4; font-size: 13px; font-weight: 500; }
.sa-gitbook-page-header [data-guide-reader-title] { max-width: 18ch; margin: 0; color: #f4f4f5; font-family: var(--ff-heading); font-size: clamp(32px,4.5vw,54px); font-weight: 800; line-height: 1.08; letter-spacing: -.035em; }

/* A more substantial finish, preserving every footer link and legal string. */
.sa-footer { margin-top: 32px; border-color: var(--ui-line); background: linear-gradient(180deg,#101014,#08090b); }
.sa-footer--columns > .wrap { padding-block: 64px 28px; }
.sa-footer--columns .sa-footer-brand { font-size: clamp(28px,3vw,42px); letter-spacing: -.04em; }
.sa-footer--columns h3 { font-size: 13px; margin-bottom: 18px; }
.sa-footer-link { font-size: 13px; line-height: 1.8; }
.sa-footer-link:hover { color: #ed8fe7; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .sa-product-card--flat-divider { transition: transform 220ms var(--ui-ease),border-color 220ms ease,box-shadow 220ms ease; }
  .sa-product-card--flat-divider:hover { transform: translateY(-5px); border-color: rgba(201,44,196,.45); box-shadow: 0 15px 35px rgba(0,0,0,.24); }
  .sa-product-card--flat-divider:hover .sa-product-card-media img { transform: scale(1.035); }
  .sa-status-card:hover { border-color: rgba(201,44,196,.3); background: #17151c; }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .sa-navbar--floating-pill .sa-desktop-links { position: static; transform: none; gap: 0; }
  .sa-navbar--floating-pill .sa-navbar-link { padding-inline: 8px; font-size: 12px; }
  .sa-navbar-logo { max-width: 130px; }
}
@media (max-width: 1023px) {
  .sa-tpl-shop .sa-hero { min-height: 540px; }
  .sa-hero-flank { opacity: .35; }
  .sa-tpl-shop .sa-features--icon-grid .sa-features-items { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .sa-tpl-shop .sa-features--icon-grid .sa-features-item:first-child { grid-column: 1 / -1; grid-row: auto; min-height: 220px; }
  .sa-tpl-shop .sa-features--icon-grid .sa-features-item:first-child h3 { margin-top: 24px; }
  .sa-feedbacks--grid .sa-feedbacks-items { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .sa-faq--accordion > .wrap { column-gap: 30px; }
  .sa-download-layout, .sa-download-layout--vault { grid-template-columns: minmax(0,1fr); gap: 24px; }
  [class*='sa-page-customer-'] > .wrap > .grid { grid-template-columns: minmax(0,1fr); }
  .sa-customer-sidebar nav { margin-inline: 0; padding-inline: 0; }
}
@media (max-width: 767px) {
  html:root { --section-py: 60px; --grid-gap: 16px; }
  .sa-header { padding-bottom: 8px; }
  .sa-navbar--floating-pill > div { padding: 10px 14px 0; }
  .sa-navbar--floating-pill > div > div { border-radius: 14px; }
  .sa-navbar--floating-pill > div > div > div { padding-inline: 14px; height: 60px; gap: 8px; }
  .sa-navbar-logo span { font-size: 20px; }
  .sa-navbar-link { min-height: 44px; display: inline-flex; align-items: center; }
  .sa-tpl-shop .sa-hero { min-height: 0; }
  .sa-tpl-shop .sa-hero-centered-inner { padding-block: 54px 56px; }
  .sa-tpl-shop .sa-hero .sa-hero-title { font-size: clamp(36px,7.5vw,52px); max-width: 620px; line-height: 1.09; }
  .sa-tpl-shop .sa-hero .sa-hero-subtitle { font-size: 14px; line-height: 1.8; max-width: 460px; margin-top: 22px; }
  .sa-hero .sa-hero-eyebrow { font-size: 10px; gap: 6px; margin-bottom: 22px; }
  .sa-hero .sa-hero-actions { width: 100%; margin-top: 26px; }
  .sa-hero-actions > div { flex-direction: row; gap: 10px; }
  .sa-hero .sa-buttons .sa-btn { flex: 1 1 0; width: auto; min-width: 0; padding-inline: 14px; font-size: 13px; }
  .sa-tpl-shop .sa-products { padding-top: 22px; }
  .sa-catalog-header { grid-template-columns: 1fr; gap: 22px; padding-bottom: 24px; }
  .sa-catalog-heading .sa-section-title { font-size: 34px; }
  .sa-tpl-shop .sa-features--icon-grid .sa-features-items { grid-template-columns: 1fr; }
  .sa-tpl-shop .sa-features--icon-grid .sa-features-item { padding: 26px; }
  .sa-tpl-shop .sa-features--icon-grid .sa-features-item:first-child { grid-column: auto; }
  .sa-tpl-shop .sa-steps > .wrap { padding-block: 0; }
  .sa-tpl-shop .sa-steps--timeline .sa-steps-items { grid-template-columns: 1fr; gap: 18px; }
  .sa-tpl-shop .sa-steps--timeline .sa-steps-item { flex-direction: row; gap: 20px; padding-top: 24px; }
  .sa-feedbacks--grid > .wrap { grid-template-columns: 1fr; }
  .sa-feedbacks--grid > .wrap > .flex { justify-content: flex-start; margin-top: -16px; }
  .sa-feedbacks--grid .sa-feedbacks-items { grid-template-columns: 1fr; }
  .sa-faq--accordion > .wrap { grid-template-columns: 1fr; gap: 26px; }
  .sa-faq--accordion > .wrap > .sa-section-header { grid-column: 1; grid-row: 1; }
  .sa-faq--accordion > .wrap > .sa-faq-items { grid-column: 1; grid-row: 2; }
  .sa-faq--accordion > .wrap > .sa-faq-support-wrap { grid-column: 1; grid-row: 3; }
  .sa-faq-item > button { padding: 18px; font-size: 14px; }
  .sa-faq-item .faq-panel-inner > div { padding: 0 18px 20px; }
  .sa-status-card { padding: 16px; gap: 12px; }
  .sa-status-card .status { max-width: 45%; }
  .sa-status-card .status > span:last-child { font-size: 12px; }
  .sa-status-card .status > span:first-child { flex-shrink: 0; }
  .sa-page-customer-dashboard-item, .sa-page-customer-reseller-stat { padding: 20px; min-width: 0; }
  .sa-page-customer-dashboard-item:last-child:nth-child(3) { grid-column: 1 / -1; }
  .sa-page-customer-dashboard-item:nth-child(3) p:first-of-type { font-size: 24px; }
  .sa-footer--columns > .wrap > .grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px 24px; }
  .sa-footer--columns > .wrap > .grid > div:first-child { grid-column: 1 / -1; }
  .sa-footer--columns > .wrap { padding-top: 44px; }
}
@media (max-width: 374px) {
  .sa-hero .sa-hero-eyebrow { gap: 4px; padding-right: 8px; font-size: 9px; }
  .sa-hero-actions .sa-btn { font-size: 12px; padding-inline: 10px; }
}
@media (prefers-reduced-transparency: reduce) {
  .sa-navbar--floating-pill > div > div { background: #121318; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-dsr] { visibility: visible !important; opacity: 1 !important; transform: none !important; }
}

/* Status page overview and responsive product rows. */
.sa-status-overview { display:flex; align-items:center; justify-content:space-between; gap:28px; margin-bottom:30px; padding:24px 26px; border:1px solid rgba(201,44,196,.22); border-radius:16px; background:linear-gradient(115deg,rgba(201,44,196,.10),rgba(17,18,22,.94) 48%); box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 42px rgba(0,0,0,.15); }
.sa-status-overview-main { display:flex; align-items:center; gap:16px; min-width:0; }
.sa-status-live-mark { display:grid; place-items:center; width:46px; height:46px; flex:0 0 auto; border:1px solid rgba(34,197,94,.30); border-radius:14px; background:rgba(34,197,94,.10); }
.sa-status-live-dot { width:11px; height:11px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 6px rgba(74,222,128,.10); }
.sa-status-overview-kicker { margin-bottom:3px; color:#e882e3; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.sa-status-overview-title { color:#f4f4f5; font-family:var(--ff-heading); font-size:20px; line-height:1.2; }
.sa-status-overview-copy { margin-top:5px; color:#aaa5b4; font-size:13px; }
.sa-status-overview-meta { display:flex; align-items:center; gap:25px; flex:0 0 auto; }
.sa-status-stat { display:grid; gap:1px; padding-left:25px; border-left:1px solid rgba(255,255,255,.13); }
.sa-status-stat strong { color:#f4f4f5; font-family:var(--ff-heading); font-size:24px; line-height:1; font-variant-numeric:tabular-nums; }
.sa-status-stat span { color:#aaa5b4; font-size:11px; }
.sa-status-updates-link { color:#ed8fe7; font-size:12px; font-weight:600; white-space:nowrap; }
.sa-status-card { min-height:82px; padding:18px 22px; border-radius:14px; background:#111216; border-color:rgba(255,255,255,.10); box-shadow:none; }
.sa-status-card > img { width:48px; height:48px; }
.sa-status-card-name { overflow-wrap:anywhere; }
.sa-status-card-hint { display:block; margin-top:3px; color:#a5a2b0; font-size:11px; }
.sa-status-card-arrow { color:#a5a2b0; font-size:17px; transition:color 180ms ease,transform 180ms ease; }
.sa-status-group-heading { min-height:26px; }
.sa-status-group-count { display:inline-grid; place-items:center; min-width:22px; height:22px; padding-inline:5px; border:1px solid rgba(255,255,255,.12); border-radius:999px; color:#aaa5b4; font-size:10px; font-variant-numeric:tabular-nums; }
.sa-status-empty { padding:52px 24px; border:1px dashed rgba(255,255,255,.10); border-radius:16px; background:#111216; text-align:center; }
.sa-status-empty-icon { display:grid; place-items:center; width:48px; height:48px; margin:0 auto 15px; border-radius:14px; background:rgba(34,197,94,.10); color:#4ade80; font-size:19px; }
.sa-status-empty h2 { color:#f4f4f5; font-family:var(--ff-heading); font-size:20px; }
.sa-status-empty p { max-width:42ch; margin:7px auto 0; color:#aaa5b4; font-size:13px; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .sa-status-card:hover { border-color:rgba(201,44,196,.3); background:#17151c; }
  .sa-status-card:hover .sa-status-card-arrow { color:#ed8fe7; transform:translateX(3px); }
}
@media (max-width:767px) {
  .sa-status-overview { align-items:flex-start; flex-direction:column; gap:20px; padding:20px; }
  .sa-status-overview-meta { justify-content:space-between; width:100%; padding-top:16px; border-top:1px solid rgba(255,255,255,.10); }
  .sa-status-stat { padding-left:0; border-left:0; }
  .sa-status-card { padding:16px; gap:12px; }
  .sa-status-card .status { min-width:0; max-width:45%; }
  .sa-status-card .status > span:last-child { min-width:0; overflow-wrap:anywhere; text-align:right; }
}