/*
 * SpineScan canonical shared foundation.
 *
 * This file contains only primitives shared by the section blocks. Every
 * section root receives the design tokens directly, so a block does not need
 * a page-level composition wrapper in order to render correctly.
 */

[data-ss-block] {
  container-type: inline-size;
}

 :where(
  [data-ss-block] .ss-hero,
  [data-ss-block] .ss-trust,
  [data-ss-block] .ss-section,
  [data-ss-block] .ss-cta
 ) {
  --ss-black: #050607;
  --ss-ink: #0b0d10;
  --ss-panel: #11151a;
  --ss-panel-2: #171c22;
  --ss-line: rgba(126, 207, 240, .22);
  --ss-cyan: #20aee8;
  --ss-cyan-soft: #70cff0;
  --ss-purple: #8b3a96;
  --ss-grey: #8a8d91;
  --ss-text: #e9eef2;
  --ss-muted: #aeb6bd;
  width: 100%;
  margin-left: 0;
  overflow-x: hidden;
  color: var(--ss-text);
  background: var(--ss-black);
  font-size: 17px;
}

 [data-ss-block] .ss-hero *,
 [data-ss-block] .ss-trust *,
 [data-ss-block] .ss-section *,
 [data-ss-block] .ss-cta * {
  box-sizing: border-box;
}

 [data-ss-block] .ss-hero a,
 [data-ss-block] .ss-trust a,
 [data-ss-block] .ss-section a,
 [data-ss-block] .ss-cta a {
  color: inherit;
}

 [data-ss-block] .ss-hero h1,
 [data-ss-block] .ss-hero h2,
 [data-ss-block] .ss-hero h3,
 [data-ss-block] .ss-trust h1,
 [data-ss-block] .ss-trust h2,
 [data-ss-block] .ss-trust h3,
 [data-ss-block] .ss-section h1,
 [data-ss-block] .ss-section h2,
 [data-ss-block] .ss-section h3,
 [data-ss-block] .ss-cta h1,
 [data-ss-block] .ss-cta h2,
 [data-ss-block] .ss-cta h3 {
  margin: 0 0 13px;
  color: var(--ss-text);
  line-height: 1.08;
  letter-spacing: 0;
}

 [data-ss-block] .ss-hero h1,
 [data-ss-block] .ss-trust h1,
 [data-ss-block] .ss-section h1,
 [data-ss-block] .ss-cta h1 {
  max-width: 780px;
  font-size: clamp(38px, 5.5vw, 64px);
}

 [data-ss-block] .ss-hero h2,
 [data-ss-block] .ss-trust h2,
 [data-ss-block] .ss-section h2,
 [data-ss-block] .ss-cta h2 {
  font-size: clamp(28px, 3.6vw, 42px);
}

 [data-ss-block] .ss-hero h3,
 [data-ss-block] .ss-trust h3,
 [data-ss-block] .ss-section h3,
 [data-ss-block] .ss-cta h3 {
  font-size: 21px;
}

 [data-ss-block] :where(.ss-hero, .ss-trust, .ss-section, .ss-cta) .ss-eyebrow {
  margin: 0 0 10px;
  color: var(--ss-cyan-soft);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

 [data-ss-block] :where(.ss-hero, .ss-trust, .ss-section, .ss-cta) .ss-lead {
  max-width: 700px;
  margin: 0;
  color: var(--ss-muted);
  font-size: 19px;
  line-height: 1.55;
}

 [data-ss-block] :where(.ss-hero, .ss-trust, .ss-section, .ss-cta) .ss-shell {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
}

 [data-ss-block] .ss-section {
  padding: 60px 0;
}

 [data-ss-block] .ss-section p {
  color: var(--ss-muted);
  line-height: 1.62;
}

 [data-ss-block] :where(.ss-hero, .ss-section, .ss-cta) .ss-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

 [data-ss-block] :where(.ss-hero, .ss-section, .ss-cta) .ss-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 20px;
  border-radius: 4px;
  font-weight: 800;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

 [data-ss-block] :where(.ss-hero, .ss-section, .ss-cta) .ss-btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

 [data-ss-block] :where(.ss-hero, .ss-section, .ss-cta) .ss-btn-primary {
  color: #041016;
  background: var(--ss-cyan);
  box-shadow: 0 14px 30px rgba(32, 174, 232, .22);
}

 [data-ss-block] :where(.ss-hero, .ss-section, .ss-cta) .ss-btn-primary:hover {
  color: #041016;
  background: var(--ss-cyan-soft);
}

 [data-ss-block] :where(.ss-hero, .ss-section, .ss-cta) .ss-btn-secondary {
  border: 1px solid rgba(112, 207, 240, .34);
  color: var(--ss-text);
  background: rgba(255, 255, 255, .04);
}

 [data-ss-block] :where(.ss-hero, .ss-section, .ss-cta) .ss-card-label {
  margin: 0 0 10px;
  color: var(--ss-cyan-soft);
  font-weight: 800;
}

@media (max-width: 640px) {
 [data-ss-block] :where(.ss-hero, .ss-trust, .ss-section, .ss-cta) .ss-shell {
    width: min(100% - 28px, 1120px);
  }

 [data-ss-block] .ss-section {
    padding: 42px 0;
  }

 [data-ss-block] :where(.ss-hero, .ss-section, .ss-cta) .ss-actions {
    flex-direction: column;
  }

 [data-ss-block] :where(.ss-hero, .ss-section, .ss-cta) .ss-btn {
    width: 100%;
  }
}