/* 1C Analytics: one shared stage geometry for every active route. */

:root {
  --shape-curve: clamp(64px, 7vw, 100px);
  --shape-overlap: clamp(48px, 5vw, 72px);
  --shape-bar-radius: clamp(28px, 3.2vw, 44px);
  --shape-stage-gap: clamp(22px, 3vw, 38px);
  --shape-canvas: #efede7;
  --shape-light: #fff;
  --shape-soft: #efede7;
  --shape-dark: #171512;
  --shape-dark-soft: #211e1a;
  --shape-accent: #bd4f20;
  --shape-accent-bright: #ff7540;
  --shape-dark-line: rgba(255, 255, 255, .18);
  --shape-light-line: rgba(23, 21, 18, .16);
  --shape-dark-outline: rgba(255, 255, 255, .16);
  --shape-light-outline: rgba(23, 21, 18, .14);
  --shape-shadow: 0 22px 58px rgba(38, 32, 25, .1);
}

body.shape-system-v1 {
  background: #11100f;
}

.shape-system-v1 .page-shell {
  overflow: clip;
  background: var(--shape-canvas);
}

/* Inner heroes start behind the shared floating header, like the home hero. */
.shape-system-v1:not(.home-reference-v3) .page-shell {
  padding-top: 0;
}

.shape-system-v1 .brand {
  min-height: 44px;
}

.shape-system-v1 .main-nav a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

.shape-system-v1 .footer-reference__column a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

.shape-system-v1 .filter-button {
  min-height: 44px;
}

.shape-system-v1 .product button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

.shape-system-v1 main {
  position: relative;
  background: var(--shape-canvas);
}

.shape-system-v1 main > .shape-stage {
  --shape-stage-background: var(--shape-light);
  --shape-stage-foreground: #171512;
  --shape-stage-muted: #6c6760;
  --shape-stage-outline: var(--shape-light-outline);
  position: relative;
  isolation: isolate;
  margin: 0 0 calc(-1 * var(--shape-overlap));
  border: solid var(--shape-stage-outline);
  border-width: 0 1px 1px;
  border-radius: 0 0 var(--shape-curve) var(--shape-curve);
  background: var(--shape-stage-background);
  color: var(--shape-stage-foreground);
  box-shadow: var(--shape-shadow);
  overflow: hidden;
}

.shape-system-v1 main > .shape-stage:nth-child(1) { z-index: 8; }
.shape-system-v1 main > .shape-stage:nth-child(2) { z-index: 7; }
.shape-system-v1 main > .shape-stage:nth-child(3) { z-index: 6; }
.shape-system-v1 main > .shape-stage:nth-child(4) { z-index: 5; }
.shape-system-v1 main > .shape-stage:nth-child(5) { z-index: 4; }
.shape-system-v1 main > .shape-stage:nth-child(6) { z-index: 3; }

.shape-system-v1 main > .shape-stage--light {
  --shape-stage-background: var(--shape-light);
}

.shape-system-v1 main > .shape-stage--soft {
  --shape-stage-background: var(--shape-soft);
}

.shape-system-v1 main > .shape-stage--dark {
  --shape-stage-background: var(--shape-dark);
  --shape-stage-foreground: #f7f5f1;
  --shape-stage-muted: #b7b1aa;
  --shape-stage-outline: var(--shape-dark-outline);
}

.shape-system-v1 main > .shape-stage:not(.shape-stage--with-bar)::after {
  content: none;
}

.shape-system-v1 .shape-stage__bar {
  position: relative;
  z-index: 3;
  border: 1px solid var(--shape-dark-line);
  border-radius: var(--shape-bar-radius);
  background: rgba(20, 18, 15, .76);
  overflow: hidden;
}

/* Home: preserve the approved hero, then make every following surface overlap it. */
.shape-system-v1.home-reference-v3 .home-reference-hero {
  margin-bottom: 0;
  border-radius: 0 0 var(--shape-curve) var(--shape-curve);
}

.shape-system-v1.home-reference-v3 .home-reference-hero__routes {
  border-radius: var(--shape-bar-radius);
}

.shape-system-v1.home-reference-v3 #choose {
  z-index: 7;
  margin-top: calc(-1 * var(--hero-choose-overlap));
  margin-bottom: calc(-1 * var(--shape-overlap));
  padding-bottom: calc(clamp(48px, 5vw, 68px) + var(--shape-overlap));
  border-radius: 0 0 var(--shape-curve) var(--shape-curve);
}

.shape-system-v1.home-reference-v3 #choose::after {
  content: none;
}

.shape-system-v1.home-reference-v3 #process {
  z-index: 6;
  padding-top: calc(clamp(86px, 8vw, 112px) + var(--shape-overlap));
  padding-bottom: calc(clamp(48px, 5vw, 68px) + var(--shape-overlap));
  border-radius: 0 0 var(--shape-curve) var(--shape-curve);
}

.shape-system-v1.home-reference-v3 #before-contact {
  z-index: 5;
  padding-top: calc(clamp(86px, 8vw, 112px) + var(--shape-overlap));
  padding-bottom: calc(clamp(96px, 9vw, 132px) + var(--shape-overlap));
  border-radius: 0 0 var(--shape-curve) var(--shape-curve);
}

.shape-system-v1 #process .steps.shape-stage__bar,
.shape-system-v1:not(.home-reference-v3) .steps.shape-stage__bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(34px, 4vw, 52px);
  padding: 0;
  border-color: var(--shape-dark-line);
  background: var(--shape-dark);
  color: #f7f5f1;
  box-shadow: 0 18px 42px rgba(38, 32, 25, .13);
}

.shape-system-v1 #process .steps.shape-stage__bar::before,
.shape-system-v1:not(.home-reference-v3) .steps.shape-stage__bar::before {
  content: none;
}

.shape-system-v1 #process .steps.shape-stage__bar .step,
.shape-system-v1:not(.home-reference-v3) .steps.shape-stage__bar .step {
  min-width: 0;
  min-height: 210px;
  margin: 0;
  border: 0;
  border-right: 1px solid var(--shape-dark-line);
  padding: clamp(26px, 3vw, 38px);
  background: transparent;
  color: #f7f5f1;
}

.shape-system-v1 #process .steps.shape-stage__bar .step:last-child,
.shape-system-v1:not(.home-reference-v3) .steps.shape-stage__bar .step:last-child {
  border-right: 0;
}

.shape-system-v1 #process .steps.shape-stage__bar .step::before {
  content: none;
}

.shape-system-v1 #process .steps.shape-stage__bar .step > b,
.shape-system-v1:not(.home-reference-v3) .steps.shape-stage__bar .step > b {
  color: var(--shape-accent-bright);
}

.shape-system-v1 #process .steps.shape-stage__bar .step > h3,
.shape-system-v1:not(.home-reference-v3) .steps.shape-stage__bar .step > h3 {
  min-height: 0;
  margin: 28px 0 10px;
  color: #f7f5f1;
}

.shape-system-v1 #process .steps.shape-stage__bar .step > p,
.shape-system-v1:not(.home-reference-v3) .steps.shape-stage__bar .step > p {
  color: #aaa59e;
}

/* Inner routes reuse the same dark hero and alternating light stage rhythm. */
.shape-system-v1:not(.home-reference-v3) main > .shape-stage {
  padding-top: calc(clamp(70px, 7vw, 98px) + var(--shape-overlap));
  padding-bottom: calc(clamp(76px, 8vw, 108px) + var(--shape-overlap));
}

.shape-system-v1:not(.home-reference-v3) main > .shape-stage:first-child {
  padding-top: clamp(104px, 8vw, 128px);
  padding-bottom: calc(clamp(56px, 5vw, 76px) + var(--shape-overlap));
}

.shape-system-v1:not(.home-reference-v3) main > .shape-stage--process {
  padding-bottom: calc(clamp(42px, 4vw, 60px) + var(--shape-overlap));
}

.shape-system-v1:not(.home-reference-v3) .page-hero {
  background:
    radial-gradient(circle at 82% 18%, rgba(189, 79, 32, .16), transparent 31%),
    linear-gradient(135deg, #1d1a16 0%, var(--shape-dark) 52%, #11100e 100%);
}

.shape-system-v1:not(.home-reference-v3) .page-hero h1,
.shape-system-v1:not(.home-reference-v3) .page-hero .kicker {
  color: #f7f5f1;
}

.shape-system-v1:not(.home-reference-v3) .page-hero .kicker {
  color: var(--shape-accent-bright);
}

.shape-system-v1:not(.home-reference-v3) .page-hero__copy > p:not(.kicker) {
  color: #b7b1aa;
}

.shape-system-v1:not(.home-reference-v3) .page-hero .primary-button {
  border-color: var(--shape-accent);
  background: var(--shape-accent);
  color: #fff;
}

.shape-system-v1:not(.home-reference-v3) .page-hero .secondary-button {
  border-color: rgba(255, 255, 255, .34);
  background: transparent;
  color: #fff;
}

.shape-system-v1:not(.home-reference-v3) .page-hero .result-card {
  border: 1px solid var(--shape-dark-line);
  border-radius: var(--shape-bar-radius);
  background: rgba(255, 255, 255, .06);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .22);
}

.shape-system-v1:not(.home-reference-v3) .page-hero .result-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center;
  background: #11100e;
  opacity: 1;
}

.shape-system-v1:not(.home-reference-v3) .page-hero .result-card__body p {
  color: #d2cdc6;
}

.shape-system-v1:not(.home-reference-v3) .footer-reference__bridge {
  border-radius: 0 0 var(--shape-curve) var(--shape-curve);
}

@media (max-width: 900px) {
  :root {
    --shape-curve: clamp(54px, 9vw, 76px);
    --shape-overlap: clamp(40px, 7vw, 58px);
    --shape-bar-radius: clamp(24px, 5vw, 36px);
  }

  .shape-system-v1 #process .steps.shape-stage__bar,
  .shape-system-v1:not(.home-reference-v3) .steps.shape-stage__bar {
    grid-template-columns: minmax(0, 1fr);
  }

  .shape-system-v1 #process .steps.shape-stage__bar .step,
  .shape-system-v1:not(.home-reference-v3) .steps.shape-stage__bar .step {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    grid-template-rows: auto auto;
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--shape-dark-line);
    padding: 28px;
  }

  .shape-system-v1 #process .steps.shape-stage__bar .step:last-child,
  .shape-system-v1:not(.home-reference-v3) .steps.shape-stage__bar .step:last-child {
    border-bottom: 0;
  }

  .shape-system-v1 #process .steps.shape-stage__bar .step > b,
  .shape-system-v1:not(.home-reference-v3) .steps.shape-stage__bar .step > b {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .shape-system-v1 #process .steps.shape-stage__bar .step > h3,
  .shape-system-v1:not(.home-reference-v3) .steps.shape-stage__bar .step > h3 {
    grid-column: 2;
    grid-row: 1;
    margin: 0 0 8px;
  }

  .shape-system-v1 #process .steps.shape-stage__bar .step > p,
  .shape-system-v1:not(.home-reference-v3) .steps.shape-stage__bar .step > p {
    grid-column: 2;
    grid-row: 2;
  }
}

@media (max-width: 640px) {
  :root {
    --shape-curve: 48px;
    --shape-overlap: 38px;
    --shape-bar-radius: 28px;
    --shape-stage-gap: 18px;
  }

  .shape-system-v1.home-reference-v3 #choose {
    padding-bottom: calc(68px + var(--shape-overlap));
  }

  .shape-system-v1.home-reference-v3 #process,
  .shape-system-v1.home-reference-v3 #before-contact,
  .shape-system-v1:not(.home-reference-v3) main > .shape-stage {
    padding-top: calc(58px + var(--shape-overlap));
    padding-bottom: calc(68px + var(--shape-overlap));
  }

  .shape-system-v1:not(.home-reference-v3) main > .shape-stage:first-child {
    padding-top: 108px;
  }

  .shape-system-v1 #process .steps.shape-stage__bar .step,
  .shape-system-v1:not(.home-reference-v3) .steps.shape-stage__bar .step {
    grid-template-columns: 62px minmax(0, 1fr);
    padding: 24px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shape-system-v1 .shape-stage,
  .shape-system-v1 .shape-stage * {
    scroll-behavior: auto;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}