/* Sepiina V3 lightweight visual foundation.
   This supports the new Sites / Site Health pages without requiring Tailwind yet. */

.max-w-4xl { max-width: 56rem; }
.max-w-7xl { max-width: 80rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

.p-3 { padding: .75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-7 { padding: 1.75rem; }
.p-8 { padding: 2rem; }

.px-3 { padding-left: .75rem; padding-right: .75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }

.py-1 { padding-top: .25rem; padding-bottom: .25rem; }
.py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.py-3 { padding-top: .75rem; padding-bottom: .75rem; }

.mt-1 { margin-top: .25rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: .75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }

.mb-2 { margin-bottom: .5rem; }

.pt-2 { padding-top: .5rem; }
.pt-4 { padding-top: 1rem; }

.pb-3 { padding-bottom: .75rem; }

.rounded-xl { border-radius: .75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-3xl { border-radius: 1.5rem; }
.rounded-full { border-radius: 9999px; }

.border { border: 1px solid #e5e7eb; }
.border-t { border-top: 1px solid #e5e7eb; }
.border-b { border-bottom: 1px solid #e5e7eb; }

.bg-white { background: #ffffff; }
.bg-slate-50 { background: #f8fafc; }
.bg-slate-950 { background: #020617; }
.bg-blue-50 { background: #eff6ff; }
.bg-amber-50 { background: #fffbeb; }

.bg-blue-600 { background: #2563eb; }
.bg-amber-500 { background: #f59e0b; }
.bg-slate-300 { background: #cbd5e1; }

.text-white { color: #ffffff; }
.text-slate-950 { color: #020617; }
.text-slate-600 { color: #475569; }
.text-slate-500 { color: #64748b; }
.text-slate-300 { color: #cbd5e1; }
.text-blue-950 { color: #172554; }
.text-amber-950 { color: #451a03; }

.text-xs { font-size: .75rem; line-height: 1rem; }
.text-sm { font-size: .875rem; line-height: 1.25rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }

.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }

.uppercase { text-transform: uppercase; }
.tracking-widest { letter-spacing: .1em; }
.tracking-wide { letter-spacing: .025em; }

.underline { text-decoration: underline; }

.grid { display: grid; }
.flex { display: flex; }
.inline-block { display: inline-block; }
.block { display: block; }

.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }

.gap-2 { gap: .5rem; }
.gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }

.space-y-2 > * + * { margin-top: .5rem; }
.space-y-3 > * + * { margin-top: .75rem; }
.space-y-4 > * + * { margin-top: 1rem; }

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.w-3 { width: .75rem; }
.h-3 { height: .75rem; }
.w-3\.5 { width: .875rem; }
.h-3\.5 { height: .875rem; }
.w-4 { width: 1rem; }
.h-4 { height: 1rem; }

.w-full { width: 100%; }

.whitespace-nowrap { white-space: nowrap; }

.text-left { text-align: left; }

.list-disc { list-style-type: disc; }
.pl-5 { padding-left: 1.25rem; }

.overflow-x-auto { overflow-x: auto; }

.break-all { word-break: break-all; }

.border-blue-700 { border-color: #1d4ed8; }
.border-blue-900 { border-color: #1e3a8a; }
.border-amber-500 { border-color: #f59e0b; }
.border-amber-800 { border-color: #92400e; }
.border-slate-800 { border-color: #1e293b; }
.border-slate-900 { border-color: #0f172a; }
.border-slate-300 { border-color: #cbd5e1; }
.border-slate-500 { border-color: #64748b; }

input,
textarea,
select {
  font: inherit;
}

input.border,
textarea.border,
select.border {
  border: 1px solid #cbd5e1;
}

button {
  font: inherit;
}

@media (min-width: 768px) {
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .md\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
  .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:col-span-2 { grid-column: span 2 / span 2; }
}

@media (min-width: 1280px) {
  .xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xl\:col-span-2 { grid-column: span 2 / span 2; }
}


/* ==========================================================================
   Sepiina premium Site Health prototype
   ========================================================================== */

:root {
  --sp-carbon: #08090c;
  --sp-carbon-soft: #12141a;
  --sp-graphite: #20232b;
  --sp-steel: #69707d;
  --sp-line: #dfe2e7;
  --sp-paper: #ffffff;
  --sp-canvas: #f3f4f6;
  --sp-red: #d90429;
  --sp-red-dark: #9f001d;
  --sp-red-soft: #fff0f2;
  --sp-green: #079455;
  --sp-green-soft: #ecfdf3;
  --sp-amber: #d97706;
  --sp-amber-soft: #fff8e7;
  --sp-blue: #2563eb;
  --sp-blue-soft: #eff6ff;
  --sp-shadow: 0 18px 55px rgba(10, 12, 16, .08);
  --sp-shadow-hover: 0 24px 70px rgba(10, 12, 16, .13);
}

body {
  background:
    radial-gradient(circle at 50% -20%, rgba(217, 4, 41, .055), transparent 34rem),
    var(--sp-canvas);
  color: var(--sp-carbon);
}

.sp-health-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 0 54px;
}

.sp-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #5d6370;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
}

.sp-back-link:hover {
  color: var(--sp-red);
}

.sp-health-hero {
  position: relative;
  overflow: hidden;
  margin-top: 18px;
  padding: 30px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 28px;
  color: white;
  background:
    radial-gradient(circle at 88% 0%, rgba(217, 4, 41, .32), transparent 29rem),
    linear-gradient(135deg, #07080b 0%, #11131a 64%, #08090d 100%);
  box-shadow: 0 28px 80px rgba(7, 8, 11, .25);
}

.sp-health-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 30px;
  right: 30px;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.52),
    var(--sp-red),
    transparent
  );
}

.sp-health-hero::after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  right: -120px;
  bottom: -170px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 0 0 28px rgba(255,255,255,.025),
    0 0 0 56px rgba(255,255,255,.018);
}

.sp-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 26px;
}

.sp-eyebrow {
  color: rgba(255,255,255,.62);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.sp-site-title {
  margin: 8px 0 0;
  color: white;
  font-size: clamp(30px, 5vw, 48px);
  line-height: 1.03;
  letter-spacing: -.045em;
}

.sp-site-domain {
  margin-top: 9px;
  color: rgba(255,255,255,.68);
  font-size: 15px;
  font-weight: 600;
}

.sp-site-summary {
  max-width: 700px;
  margin-top: 20px;
  color: rgba(255,255,255,.82);
  font-size: 17px;
  line-height: 1.55;
}

.sp-hero-actions {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.sp-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  color: white;
  font-size: 13px;
  font-weight: 800;
}

.sp-status-pill::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #a5acb8;
  box-shadow: 0 0 0 5px rgba(165,172,184,.12);
}

.sp-status-pill[data-state="healthy"]::before {
  background: #16d17d;
  box-shadow: 0 0 0 5px rgba(22,209,125,.14);
}

.sp-status-pill[data-state="review"]::before {
  background: #ffb020;
  box-shadow: 0 0 0 5px rgba(255,176,32,.15);
}

.sp-status-pill[data-state="attention"]::before {
  background: #ff3155;
  box-shadow: 0 0 0 5px rgba(255,49,85,.16);
}

.sp-button {
  appearance: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  min-height: 42px;
  padding: 0 17px;
  border-radius: 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    background .16s ease;
}

.sp-button:hover {
  transform: translateY(-1px);
}

.sp-button:disabled {
  cursor: not-allowed;
  opacity: .55;
  transform: none;
}

.sp-button-primary {
  color: white;
  background:
    linear-gradient(180deg, #ef1b3f 0%, var(--sp-red) 60%, var(--sp-red-dark) 100%);
  box-shadow:
    inset 0 1px rgba(255,255,255,.34),
    0 10px 25px rgba(217,4,41,.3);
}

.sp-button-primary:hover {
  box-shadow:
    inset 0 1px rgba(255,255,255,.34),
    0 14px 34px rgba(217,4,41,.38);
}

.sp-button-dark {
  color: white;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.09);
}

.sp-button-dark:hover {
  background: rgba(255,255,255,.14);
}

.sp-last-checked {
  margin-top: 16px;
  color: rgba(255,255,255,.53);
  font-size: 12px;
  font-weight: 700;
}

.sp-metrics-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.sp-metric-card {
  position: relative;
  overflow: hidden;
  min-height: 138px;
  padding: 19px;
  border: 1px solid var(--sp-line);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255,255,255,1), rgba(249,250,251,.93));
  box-shadow: 0 11px 34px rgba(9, 11, 16, .055);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.sp-metric-card:hover {
  transform: translateY(-2px);
  border-color: #c9cdd4;
  box-shadow: var(--sp-shadow-hover);
}

.sp-metric-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 2px;
  border-radius: 999px;
  background: #b7bcc5;
}

.sp-metric-card[data-state="healthy"]::before {
  background: linear-gradient(90deg, #05a45b, #24d68a);
}

.sp-metric-card[data-state="review"]::before {
  background: linear-gradient(90deg, #dc7900, #ffbc43);
}

.sp-metric-card[data-state="attention"]::before {
  background: linear-gradient(90deg, #a90020, #f01d42);
}

.sp-metric-label {
  color: #6d7380;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.sp-metric-value {
  margin-top: 14px;
  color: var(--sp-carbon);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 850;
  line-height: 1;
  letter-spacing: -.035em;
}

.sp-metric-value.is-text {
  font-size: 21px;
  line-height: 1.12;
}

.sp-metric-detail {
  margin-top: 10px;
  color: #737986;
  font-size: 12px;
  line-height: 1.35;
}

.sp-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(300px, .85fr);
  gap: 20px;
  margin-top: 20px;
}

.sp-panel {
  border: 1px solid var(--sp-line);
  border-radius: 24px;
  background: var(--sp-paper);
  box-shadow: var(--sp-shadow);
}

.sp-panel-body {
  padding: 24px;
}

.sp-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.sp-panel-kicker {
  color: var(--sp-red);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.sp-panel-title {
  margin: 5px 0 0;
  color: var(--sp-carbon);
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -.025em;
}

.sp-panel-copy {
  margin-top: 7px;
  color: #6f7581;
  font-size: 13px;
  line-height: 1.5;
}

.sp-performance-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  margin-top: 22px;
}

.sp-performance-gauge {
  --score: 0;
  --gauge-color: var(--sp-green);
  display: grid;
  place-items: center;
  width: 176px;
  height: 176px;
  margin: 0 auto;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, white 57%, transparent 58%),
    conic-gradient(
      var(--gauge-color) calc(var(--score) * 1%),
      #edf0f3 0
    );
  box-shadow:
    inset 0 0 0 1px rgba(5,8,13,.05),
    0 19px 45px rgba(7,9,14,.09);
}

.sp-performance-gauge[data-grade="review"] {
  --gauge-color: var(--sp-amber);
}

.sp-performance-gauge[data-grade="attention"] {
  --gauge-color: var(--sp-red);
}

.sp-gauge-center {
  text-align: center;
}

.sp-gauge-value {
  color: var(--sp-carbon);
  font-size: 35px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.05em;
}

.sp-gauge-unit {
  margin-top: 5px;
  color: #787e89;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.sp-gauge-grade {
  margin-top: 9px;
  color: var(--sp-green);
  font-size: 12px;
  font-weight: 900;
}

.sp-performance-gauge[data-grade="review"] .sp-gauge-grade {
  color: var(--sp-amber);
}

.sp-performance-gauge[data-grade="attention"] .sp-gauge-grade {
  color: var(--sp-red);
}

.sp-endpoint-list {
  display: grid;
  gap: 13px;
}

.sp-endpoint-row {
  padding: 17px;
  border: 1px solid #e5e7eb;
  border-radius: 17px;
  background: linear-gradient(180deg, #fff, #fafbfc);
}

.sp-endpoint-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
}

.sp-endpoint-name {
  min-width: 0;
}

.sp-endpoint-label {
  color: var(--sp-carbon);
  font-size: 14px;
  font-weight: 850;
}

.sp-endpoint-url {
  margin-top: 3px;
  overflow: hidden;
  color: #747a86;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-endpoint-code {
  color: #69707c;
  font-size: 11px;
  font-weight: 800;
}

.sp-endpoint-time {
  color: var(--sp-carbon);
  font-size: 15px;
  font-weight: 900;
  white-space: nowrap;
}

.sp-response-track {
  height: 6px;
  margin-top: 13px;
  overflow: hidden;
  border-radius: 999px;
  background: #eceef1;
}

.sp-response-fill {
  height: 100%;
  min-width: 8px;
  border-radius: inherit;
  background:
    linear-gradient(90deg, var(--sp-red-dark), #f02044 52%, #ff5a75);
  box-shadow: inset 0 1px rgba(255,255,255,.4);
}

.sp-quiet-note {
  margin-top: 13px;
  color: #818691;
  font-size: 11px;
}

.sp-side-stack {
  display: grid;
  align-content: start;
  gap: 20px;
}

.sp-fix-count {
  margin-top: 20px;
  color: var(--sp-carbon);
  font-size: 48px;
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.055em;
}

.sp-fix-caption {
  margin-top: 8px;
  color: #737986;
  font-size: 13px;
}

.sp-list {
  margin-top: 20px;
  display: grid;
  gap: 11px;
}

.sp-list-item {
  display: block;
  padding: 14px 15px;
  border: 1px solid #e5e7eb;
  border-radius: 15px;
  color: inherit;
  text-decoration: none;
  background: #fff;
  transition:
    border-color .16s ease,
    transform .16s ease,
    box-shadow .16s ease;
}

.sp-list-item:hover {
  transform: translateY(-1px);
  border-color: #c9cdd4;
  box-shadow: 0 10px 25px rgba(8,10,14,.07);
}

.sp-list-item-title {
  color: var(--sp-carbon);
  font-size: 13px;
  font-weight: 850;
}

.sp-list-item-meta {
  margin-top: 4px;
  color: #7a808b;
  font-size: 11px;
}

.sp-severity {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #5f6570;
  background: #f0f1f3;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.sp-severity[data-severity="critical"] {
  color: #a90020;
  background: var(--sp-red-soft);
}

.sp-severity[data-severity="warning"] {
  color: #985000;
  background: var(--sp-amber-soft);
}

.sp-profile-grid {
  display: grid;
  gap: 13px;
  margin-top: 20px;
}

.sp-profile-item {
  padding-bottom: 13px;
  border-bottom: 1px solid #eceef1;
}

.sp-profile-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.sp-profile-label {
  color: #7b818c;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sp-profile-value {
  margin-top: 5px;
  color: var(--sp-carbon);
  font-size: 14px;
  font-weight: 800;
}

.sp-lower-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 20px;
  margin-top: 20px;
}

.sp-service-list,
.sp-event-list {
  display: grid;
  gap: 10px;
  margin-top: 19px;
}

.sp-service-row,
.sp-event-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid #eceef1;
}

.sp-service-row:last-child,
.sp-event-row:last-child {
  border-bottom: 0;
}

.sp-service-name,
.sp-event-title {
  color: var(--sp-carbon);
  font-size: 13px;
  font-weight: 850;
}

.sp-service-detail,
.sp-event-copy {
  margin-top: 4px;
  color: #777d88;
  font-size: 11px;
  line-height: 1.45;
}

.sp-state-text {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #747a85;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.sp-state-text::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a5abb5;
}

.sp-state-text[data-state="healthy"] {
  color: var(--sp-green);
}

.sp-state-text[data-state="healthy"]::before {
  background: var(--sp-green);
}

.sp-state-text[data-state="review"] {
  color: var(--sp-amber);
}

.sp-state-text[data-state="review"]::before {
  background: var(--sp-amber);
}

.sp-state-text[data-state="attention"] {
  color: var(--sp-red);
}

.sp-state-text[data-state="attention"]::before {
  background: var(--sp-red);
}

.sp-event-time {
  color: #858b95;
  font-size: 10px;
  white-space: nowrap;
}

.sp-notice {
  margin-top: 16px;
  padding: 15px 17px;
  border: 1px solid #dfe2e7;
  border-radius: 16px;
  background: white;
  box-shadow: 0 9px 28px rgba(8,10,14,.055);
}

.sp-notice-title {
  color: var(--sp-carbon);
  font-size: 13px;
  font-weight: 850;
}

.sp-notice-copy {
  margin-top: 4px;
  color: #747a86;
  font-size: 12px;
}

.sp-notice[data-state="running"] {
  border-left: 3px solid var(--sp-red);
}

.sp-notice[data-state="failed"] {
  border-color: #f5b4c0;
  background: var(--sp-red-soft);
}

.sp-empty {
  margin-top: 18px;
  padding: 18px;
  border: 1px dashed #d7dbe1;
  border-radius: 16px;
  color: #777d88;
  background: #fafbfc;
  font-size: 13px;
}

@media (max-width: 1120px) {
  .sp-metrics-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sp-content-grid {
    grid-template-columns: 1fr;
  }

  .sp-side-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .sp-health-page {
    padding-top: 8px;
  }

  .sp-health-hero {
    padding: 23px;
    border-radius: 22px;
  }

  .sp-hero-content {
    display: block;
  }

  .sp-hero-actions {
    justify-content: flex-start;
    margin-top: 22px;
  }

  .sp-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sp-performance-layout {
    grid-template-columns: 1fr;
  }

  .sp-side-stack,
  .sp-lower-grid {
    grid-template-columns: 1fr;
  }

  .sp-endpoint-top {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .sp-endpoint-code {
    display: none;
  }
}

@media (max-width: 460px) {
  .sp-metrics-grid {
    grid-template-columns: 1fr;
  }

  .sp-hero-actions {
    align-items: stretch;
  }

  .sp-hero-actions form,
  .sp-hero-actions .sp-button {
    width: 100%;
  }
}


/* ==========================================================================
   Sepiina premium Sites dashboard
   ========================================================================== */

.sp-sites-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 0 56px;
}

.sp-sites-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 30px;
  color: #fff;
  background:
    radial-gradient(circle at 76% 5%, rgba(217,4,41,.36), transparent 27rem),
    radial-gradient(circle at 104% 100%, rgba(255,255,255,.07), transparent 26rem),
    linear-gradient(135deg, #07080b 0%, #13151c 62%, #08090c 100%);
  box-shadow: 0 30px 90px rgba(5,7,11,.26);
}

.sp-sites-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 34px;
  right: 34px;
  height: 2px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.5),
      #ef1b3f,
      transparent
    );
}

.sp-sites-hero::after {
  content: "";
  position: absolute;
  width: 390px;
  height: 390px;
  right: -190px;
  bottom: -245px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow:
    0 0 0 34px rgba(255,255,255,.025),
    0 0 0 68px rgba(255,255,255,.015);
}

.sp-sites-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(310px, .75fr);
  gap: 42px;
  align-items: center;
  min-height: 330px;
  padding: 40px;
}

.sp-sites-eyebrow {
  color: rgba(255,255,255,.58);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .19em;
  text-transform: uppercase;
}

.sp-sites-title {
  max-width: 720px;
  margin: 11px 0 0;
  color: white;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.01;
  letter-spacing: -.052em;
}

.sp-sites-copy {
  max-width: 650px;
  margin-top: 20px;
  color: rgba(255,255,255,.72);
  font-size: 17px;
  line-height: 1.6;
}

.sp-sites-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 27px;
}

.sp-sites-actions .sp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sp-sites-score-panel {
  position: relative;
  padding: 27px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 24px;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.11),
      rgba(255,255,255,.035)
    );
  backdrop-filter: blur(15px);
  box-shadow:
    inset 0 1px rgba(255,255,255,.13),
    0 22px 55px rgba(0,0,0,.17);
}

.sp-sites-score-heading {
  color: rgba(255,255,255,.6);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.sp-sites-score-content {
  display: flex;
  align-items: center;
  gap: 21px;
  margin-top: 19px;
}

.sp-sites-score-ring {
  --score: 0;
  --ring-color: #19cf7b;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at center,
      rgba(13,15,20,.98) 57%,
      transparent 58%
    ),
    conic-gradient(
      var(--ring-color) calc(var(--score) * 1%),
      rgba(255,255,255,.11) 0
    );
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 15px 35px rgba(0,0,0,.2);
}

.sp-sites-score-ring[data-state="review"] {
  --ring-color: #ffb020;
}

.sp-sites-score-ring[data-state="attention"] {
  --ring-color: #ff3155;
}

.sp-sites-score-ring[data-state="unknown"] {
  --ring-color: #8b919c;
}

.sp-sites-score-number {
  color: white;
  font-size: 29px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.045em;
}

.sp-sites-score-unit {
  margin-top: 4px;
  color: rgba(255,255,255,.5);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}

.sp-sites-score-title {
  color: white;
  font-size: 19px;
  font-weight: 850;
  line-height: 1.18;
}

.sp-sites-score-copy {
  margin-top: 7px;
  color: rgba(255,255,255,.58);
  font-size: 12px;
  line-height: 1.45;
}

.sp-sites-score-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 21px;
}

.sp-sites-score-stat {
  padding: 12px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  background: rgba(255,255,255,.045);
}

.sp-sites-score-stat-label {
  color: rgba(255,255,255,.48);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sp-sites-score-stat-value {
  margin-top: 5px;
  color: white;
  font-size: 21px;
  font-weight: 900;
}

.sp-sites-overview {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.sp-sites-overview-card {
  position: relative;
  overflow: hidden;
  min-height: 126px;
  padding: 19px;
  border: 1px solid #dfe2e7;
  border-radius: 19px;
  background:
    linear-gradient(145deg, #fff, #fafbfc);
  box-shadow: 0 11px 32px rgba(8,10,14,.05);
}

.sp-sites-overview-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 2px;
  border-radius: 999px;
  background: #abb1bc;
}

.sp-sites-overview-card[data-state="healthy"]::before {
  background: linear-gradient(90deg, #049d58, #29d88c);
}

.sp-sites-overview-card[data-state="review"]::before {
  background: linear-gradient(90deg, #d97706, #ffbd43);
}

.sp-sites-overview-card[data-state="attention"]::before {
  background: linear-gradient(90deg, #a7001f, #f01e42);
}

.sp-sites-overview-label {
  color: #727985;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.sp-sites-overview-value {
  margin-top: 15px;
  color: #08090c;
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.045em;
}

.sp-sites-overview-detail {
  margin-top: 9px;
  color: #7b818d;
  font-size: 11px;
  line-height: 1.35;
}

.sp-sites-section {
  margin-top: 33px;
}

.sp-sites-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
}

.sp-sites-section-eyebrow {
  color: #d90429;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.sp-sites-section-title {
  margin: 5px 0 0;
  color: #08090c;
  font-size: 29px;
  line-height: 1.1;
  letter-spacing: -.034em;
}

.sp-sites-section-copy {
  margin-top: 7px;
  color: #737a86;
  font-size: 13px;
}

.sp-sites-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 20px;
}

.sp-site-card {
  position: relative;
  overflow: hidden;
  border: 1px solid #dfe2e7;
  border-radius: 24px;
  background:
    linear-gradient(145deg, #fff 0%, #fafbfc 100%);
  box-shadow: 0 15px 45px rgba(8,10,14,.065);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.sp-site-card:hover {
  transform: translateY(-3px);
  border-color: #c7cbd2;
  box-shadow: 0 26px 70px rgba(8,10,14,.12);
}

.sp-site-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: #a7adb8;
}

.sp-site-card[data-state="healthy"]::before {
  background:
    linear-gradient(90deg, #049d58, #20da89);
}

.sp-site-card[data-state="review"]::before {
  background:
    linear-gradient(90deg, #d97706, #ffc14e);
}

.sp-site-card[data-state="attention"]::before {
  background:
    linear-gradient(90deg, #9f001d, #f21d43);
}

.sp-site-card-body {
  padding: 25px;
}

.sp-site-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.sp-site-card-name {
  margin: 0;
  color: #08090c;
  font-size: 22px;
  line-height: 1.12;
  letter-spacing: -.028em;
}

.sp-site-card-domain {
  margin-top: 7px;
  color: #777e89;
  font-size: 13px;
  font-weight: 650;
}

.sp-site-card-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 8px 11px;
  border: 1px solid #dde0e5;
  border-radius: 999px;
  color: #686f7b;
  background: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.sp-site-card-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9ba1ac;
}

.sp-site-card-status[data-state="healthy"] {
  color: #067a47;
  border-color: #bfe8d2;
  background: #effbf5;
}

.sp-site-card-status[data-state="healthy"]::before {
  background: #079455;
}

.sp-site-card-status[data-state="review"] {
  color: #915000;
  border-color: #f4d59f;
  background: #fff8e8;
}

.sp-site-card-status[data-state="review"]::before {
  background: #d97706;
}

.sp-site-card-status[data-state="attention"] {
  color: #a4001e;
  border-color: #f2bbc5;
  background: #fff0f2;
}

.sp-site-card-status[data-state="attention"]::before {
  background: #d90429;
}

.sp-site-card-summary {
  min-height: 43px;
  margin-top: 19px;
  color: #656c78;
  font-size: 13px;
  line-height: 1.5;
}

.sp-site-signals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-top: 20px;
}

.sp-site-signal {
  min-width: 0;
  padding: 12px;
  border: 1px solid #e3e5e9;
  border-radius: 14px;
  background: rgba(255,255,255,.75);
}

.sp-site-signal-top {
  display: flex;
  align-items: center;
  gap: 7px;
}

.sp-site-signal-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #a5abb5;
}

.sp-site-signal[data-state="healthy"] .sp-site-signal-dot {
  background: #079455;
}

.sp-site-signal[data-state="review"] .sp-site-signal-dot {
  background: #d97706;
}

.sp-site-signal[data-state="attention"] .sp-site-signal-dot {
  background: #d90429;
}

.sp-site-signal-name {
  overflow: hidden;
  color: #333843;
  font-size: 10px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-site-signal-status {
  margin-top: 7px;
  overflow: hidden;
  color: #858b95;
  font-size: 9px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-site-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 21px;
  padding-top: 17px;
  border-top: 1px solid #e8eaed;
}

.sp-site-card-meta {
  color: #858b95;
  font-size: 10px;
  line-height: 1.4;
}

.sp-site-card-meta strong {
  color: #525965;
}

.sp-site-card-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.sp-site-fix-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border-radius: 999px;
  color: #747b86;
  background: #f0f1f3;
  font-size: 9px;
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
}

.sp-site-fix-badge[data-active="true"] {
  color: #a4001e;
  background: #fff0f2;
}

.sp-site-open-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 11px;
  color: white;
  background:
    linear-gradient(180deg, #ef1b3f, #d90429 62%, #a8001f);
  box-shadow:
    inset 0 1px rgba(255,255,255,.31),
    0 8px 19px rgba(217,4,41,.2);
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
  transition:
    transform .15s ease,
    box-shadow .15s ease;
}

.sp-site-open-button:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px rgba(255,255,255,.31),
    0 12px 27px rgba(217,4,41,.29);
}

.sp-sites-empty {
  grid-column: 1 / -1;
  position: relative;
  overflow: hidden;
  padding: 45px;
  border: 1px solid #dfe2e7;
  border-radius: 26px;
  background:
    radial-gradient(circle at 90% 0%, rgba(217,4,41,.08), transparent 20rem),
    white;
  box-shadow: 0 17px 48px rgba(8,10,14,.06);
}

.sp-sites-empty-title {
  margin: 0;
  color: #08090c;
  font-size: 28px;
  letter-spacing: -.035em;
}

.sp-sites-empty-copy {
  max-width: 590px;
  margin-top: 11px;
  color: #737a86;
  font-size: 14px;
  line-height: 1.55;
}

@media (max-width: 1080px) {
  .sp-sites-hero-grid {
    grid-template-columns: 1fr;
  }

  .sp-sites-score-panel {
    max-width: 540px;
  }

  .sp-sites-overview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sp-sites-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .sp-sites-hero {
    border-radius: 23px;
  }

  .sp-sites-hero-grid {
    padding: 26px;
  }

  .sp-sites-title {
    font-size: 39px;
  }

  .sp-sites-actions {
    align-items: stretch;
  }

  .sp-sites-actions .sp-button {
    width: 100%;
  }

  .sp-sites-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sp-sites-section-header {
    display: block;
  }

  .sp-site-signals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sp-site-card-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .sp-site-card-actions {
    width: 100%;
  }

  .sp-site-open-button {
    flex: 1;
  }
}

@media (max-width: 430px) {
  .sp-sites-overview {
    grid-template-columns: 1fr;
  }

  .sp-sites-score-content {
    align-items: flex-start;
    flex-direction: column;
  }

  .sp-sites-score-stats {
    grid-template-columns: 1fr;
  }

  .sp-site-card-top {
    flex-direction: column;
  }
}
/* ==========================================================================
   Sepiina Premium Site Activity Cards
   ========================================================================== */

.sp-activity-card {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.96),
            rgba(245,246,248,.96)
        );

    border: 1px solid rgba(8,9,12,.10);
    border-radius: 20px;

    padding: 22px;

    box-shadow:
        0 18px 45px rgba(8,9,12,.08),
        inset 0 1px 0 rgba(255,255,255,.9);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}


.sp-activity-card::before {
    content:"";

    position:absolute;

    top:-90px;
    right:-90px;

    width:220px;
    height:220px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.9),
            transparent 70%
        );

    pointer-events:none;
}


.sp-activity-card:hover {
    transform:translateY(-3px);

    border-color:
        rgba(217,4,41,.25);

    box-shadow:
        0 26px 70px rgba(8,9,12,.14),
        inset 0 1px 0 rgba(255,255,255,.95);
}


.sp-activity-header {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:18px;
}


.sp-activity-title {
    font-size:18px;
    font-weight:800;
    letter-spacing:-.02em;
    color:var(--sp-carbon);
}


.sp-activity-summary {
    margin-top:14px;

    font-size:14px;
    line-height:1.6;

    color:#475467;
}


.sp-activity-pill {
    white-space:nowrap;

    padding:7px 12px;

    border-radius:999px;

    font-size:12px;
    font-weight:800;

    letter-spacing:.04em;
    text-transform:uppercase;
}


.sp-activity-pill.good {
    color:#067647;
    background:#ecfdf3;
}


.sp-activity-pill.review {
    color:#b54708;
    background:#fffaeb;
}


.sp-activity-pill.bad {
    color:#b42318;
    background:#fef3f2;
}


.sp-activity-checks {

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(130px,1fr));

    gap:10px;

    margin-top:18px;
}


.sp-activity-check {

    padding:10px 12px;

    border-radius:12px;

    background:#ffffff;

    border:1px solid rgba(8,9,12,.08);

    font-size:13px;
    font-weight:700;

    color:#344054;
}


.sp-activity-footer {

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:18px;

    padding-top:14px;

    border-top:
        1px solid rgba(8,9,12,.08);

    font-size:13px;

    color:#667085;
}

/* ==========================================================================
   Sepiina Premium Site Health Hero / Instrument Cluster
   ========================================================================== */

.sp-health-hero {
    isolation: isolate;
    background:
        radial-gradient(circle at 86% 8%, rgba(217,4,41,.30), transparent 25rem),
        radial-gradient(circle at 12% 120%, rgba(255,255,255,.06), transparent 28rem),
        repeating-linear-gradient(
            135deg,
            rgba(255,255,255,.012) 0,
            rgba(255,255,255,.012) 1px,
            transparent 1px,
            transparent 8px
        ),
        linear-gradient(135deg, #06070a 0%, #111319 48%, #07080b 100%);

    border: 1px solid rgba(255,255,255,.10);

    box-shadow:
        0 34px 90px rgba(4,5,8,.30),
        inset 0 1px 0 rgba(255,255,255,.10);
}


.sp-hero-content {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(340px, .8fr);

    gap: 34px;
    align-items: stretch;
}


.sp-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}


.sp-hero-operational {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    width: fit-content;

    margin-top: 20px;

    padding: 8px 12px;

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 999px;

    background: rgba(255,255,255,.055);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .12em;
    text-transform: uppercase;

    color: rgba(255,255,255,.88);
}


.sp-hero-status-light {
    width: 9px;
    height: 9px;

    border-radius: 999px;

    background: #98a2b3;

    box-shadow: 0 0 14px rgba(152,162,179,.55);
}


.sp-hero-operational[data-state="healthy"] .sp-hero-status-light {
    background: #12b76a;

    box-shadow:
        0 0 7px rgba(18,183,106,.9),
        0 0 20px rgba(18,183,106,.45);
}


.sp-hero-operational[data-state="review"] .sp-hero-status-light {
    background: #f79009;

    box-shadow:
        0 0 7px rgba(247,144,9,.9),
        0 0 20px rgba(247,144,9,.40);
}


.sp-hero-operational[data-state="attention"] .sp-hero-status-light {
    background: #f04438;

    box-shadow:
        0 0 7px rgba(240,68,56,.95),
        0 0 22px rgba(240,68,56,.48);
}


/* Instrument cluster */

.sp-hero-cluster {
    position: relative;
    overflow: hidden;

    display: flex;
    flex-direction: column;

    padding: 18px;

    border: 1px solid rgba(255,255,255,.11);
    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.018)
        );

    box-shadow:
        0 24px 55px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.10);
}


.sp-hero-cluster::before {
    content: "";

    position: absolute;

    top: -65px;
    left: 12%;

    width: 76%;
    height: 110px;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(255,255,255,.14),
            transparent 68%
        );

    pointer-events: none;
}


.sp-hero-cluster-head {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    padding-bottom: 14px;

    border-bottom: 1px solid rgba(255,255,255,.08);
}


.sp-hero-cluster-label {
    font-size: 10px;
    font-weight: 800;

    letter-spacing: .16em;
    text-transform: uppercase;

    color: rgba(255,255,255,.48);
}


.sp-hero-cluster-state {
    font-size: 13px;
    font-weight: 800;

    color: white;
}


.sp-hero-signal-grid {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;

    margin-top: 14px;
}


.sp-hero-signal {
    position: relative;
    overflow: hidden;

    min-height: 78px;

    padding: 13px;

    border: 1px solid rgba(255,255,255,.075);
    border-radius: 14px;

    background:
        linear-gradient(
            150deg,
            rgba(255,255,255,.055),
            rgba(0,0,0,.13)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.055);
}


.sp-hero-signal::after {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 3px;
    height: 100%;

    background: #667085;
}


.sp-hero-signal.good::after {
    background: #12b76a;

    box-shadow: 0 0 14px rgba(18,183,106,.48);
}


.sp-hero-signal.review::after {
    background: #f79009;

    box-shadow: 0 0 14px rgba(247,144,9,.42);
}


.sp-hero-signal.bad::after {
    background: #f04438;

    box-shadow: 0 0 16px rgba(240,68,56,.48);
}


.sp-hero-signal-name {
    font-size: 10px;
    font-weight: 800;

    letter-spacing: .10em;
    text-transform: uppercase;

    color: rgba(255,255,255,.44);
}


.sp-hero-signal-value {
    margin-top: 8px;

    font-size: 13px;
    font-weight: 800;

    line-height: 1.25;

    color: rgba(255,255,255,.94);
}


.sp-hero-action-row {
    position: relative;
    z-index: 1;

    display: flex;
    flex-wrap: wrap;

    gap: 9px;

    margin-top: 16px;
}


.sp-hero-action-row form {
    margin: 0;
}


.sp-hero-action-row .sp-button {
    min-height: 42px;
}


.sp-hero-danger-row {
    position: relative;
    z-index: 1;

    margin-top: 12px;
    padding-top: 12px;

    border-top: 1px solid rgba(255,255,255,.07);
}


.sp-hero-delete {
    border: 0;
    padding: 0;

    background: transparent;

    color: rgba(255,255,255,.42);

    cursor: pointer;

    font-size: 12px;
    font-weight: 700;

    text-decoration: none;
}


.sp-hero-delete:hover {
    color: #ff6b66;
}


@media (max-width: 900px) {

    .sp-hero-content {
        grid-template-columns: 1fr;
    }

    .sp-hero-cluster {
        margin-top: 4px;
    }
}


@media (max-width: 520px) {

    .sp-hero-signal-grid {
        grid-template-columns: 1fr;
    }

    .sp-hero-action-row {
        display: grid;
        grid-template-columns: 1fr;
    }

    .sp-hero-action-row .sp-button,
    .sp-hero-action-row form,
    .sp-hero-action-row form button {
        width: 100%;
    }
}