@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

.gs-app-hero,
.gs-app-hero * {
  box-sizing: border-box;
}

.gs-app-hero {
  --gs-ink: #142a2b;
  --gs-green: #119a61;
  --gs-green-bright: #16bb76;
  width: 100%;
  overflow: hidden;
  background:
    radial-gradient(ellipse 46% 35% at 50% 72%, rgba(130, 241, 205, .16), transparent 75%),
    #fff;
  color: var(--gs-ink);
  font-family: "Inter", sans-serif;
}

.gs-app-hero__inner {
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
  padding: 5px 42px 25px;
}

.gs-app-hero__intro {
  position: relative;
  z-index: 5;
  max-width: 1040px;
  margin: 0 auto;
  text-align: center;
}

.gs-app-hero__eyebrow {
  margin: 0 0 15px;
  color: #149c65;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .25em;
  line-height: 1.5;
  text-transform: uppercase;
}

.gs-app-hero h1 {
  margin: 0;
  font-size: clamp(37px, 3.15vw, 51px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.055em;
}

.gs-app-hero h1 span {
  color: var(--gs-green);
}

.gs-app-hero__description {
  max-width: 875px;
  margin: 17px auto 0;
  color: #697276;
  font-size: 16px;
  line-height: 1.6;
}

.gs-app-hero__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

.gs-app-btn {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s, background .2s;
}

.gs-app-btn:hover {
  transform: translateY(-2px);
}

.gs-app-btn--primary {
  min-width: 248px;
  background: linear-gradient(110deg, #139b61, #008c58);
  color: #fff;
  box-shadow: 0 5px 12px rgba(5, 121, 75, .12);
}

.gs-app-btn--primary span {
  font-size: 21px;
  font-weight: 400;
  line-height: 0;
}

.gs-app-btn--secondary {
  min-width: 205px;
  border-color: #a8b5b8;
  background: #fff;
  color: #24373a;
}

/* Three-phone composition */
.gs-app-showcase {
  position: relative;
  height: 450px;
  margin: 5px auto 0;
  isolation: isolate;
  transform: scale(0.82);
  transform-origin: top center;
}

.gs-app-showcase::before {
  position: absolute;
  z-index: -3;
  right: -42px;
  bottom: 42px;
  left: -42px;
  height: 360px;
  background:
    linear-gradient(transparent 98%, rgba(86, 147, 133, .08) 99%) 0 0 / 100% 76px,
    linear-gradient(90deg, transparent 98%, rgba(86, 147, 133, .055) 99%) 0 0 / 95px 100%;
  content: "";
  opacity: .6;
  mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
}

.gs-app-showcase__skyline {
  position: absolute;
  z-index: -2;
  right: 0;
  bottom: 55px;
  left: 0;
  height: 320px;
  background:
    linear-gradient(to top, rgba(27, 119, 103, .075), transparent 90%) 6% 100% / 22px 170px no-repeat,
    linear-gradient(to top, rgba(27, 119, 103, .075), transparent 90%) 11% 100% / 46px 115px no-repeat,
    linear-gradient(to top, rgba(27, 119, 103, .06), transparent 90%) 22% 100% / 25px 225px no-repeat,
    linear-gradient(to top, rgba(27, 119, 103, .07), transparent 90%) 39% 100% / 40px 145px no-repeat,
    linear-gradient(to top, rgba(27, 119, 103, .07), transparent 90%) 62% 100% / 28px 185px no-repeat,
    linear-gradient(to top, rgba(27, 119, 103, .075), transparent 90%) 77% 100% / 52px 135px no-repeat,
    linear-gradient(to top, rgba(27, 119, 103, .065), transparent 90%) 92% 100% / 30px 270px no-repeat;
  border-bottom: 1px solid rgba(70, 149, 129, .13);
  opacity: .65;
}

.gs-app-flow {
  position: absolute;
  z-index: -1;
  top: 159px;
  left: 14%;
  width: 72%;
  height: 240px;
  overflow: visible;
}

.gs-app-stage {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gs-app-stage--design {
  top: 37px;
  left: 15.5%;
}

.gs-app-stage--build {
  top: 19px;
  left: 50%;
  transform: translateX(-50%);
}

.gs-app-stage--ship {
  top: 40px;
  right: 15.5%;
}

.gs-app-stage__label {
  align-self: flex-start;
  margin: 0 0 14px 18px;
  color: #36474a;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.gs-app-stage__label span {
  margin-right: 11px;
  color: #149c65;
  font-weight: 700;
  letter-spacing: 0;
}

.gs-app-stage--build .gs-app-stage__label {
  margin-left: 60px;
  color: var(--gs-green);
}

.gs-app-stage--ship .gs-app-stage__label {
  margin-left: 37px;
}

.gs-phone {
  padding: 5px;
  border: 3px solid #254748;
  border-radius: 28px;
  background: #dce7e6;
  box-shadow: 6px 8px 0 #a6b5b4, 9px 17px 22px rgba(20, 51, 49, .14);
}

.gs-phone--design {
  width: 181px;
  height: 445px;
  transform: perspective(800px) rotateY(-7deg) rotateZ(2deg);
}

.gs-phone--build {
  width: 241px;
  height: 486px;
  border-radius: 29px;
  box-shadow: 6px 7px 0 #779391, 8px 18px 25px rgba(20, 51, 49, .16);
  transform: perspective(900px) rotateY(3deg) rotateZ(-1deg);
}

.gs-phone--ship {
  width: 205px;
  height: 449px;
  transform: perspective(800px) rotateY(6deg) rotateZ(-2deg);
}

.gs-phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 21px;
  background: #fff;
  color: #172d30;
}

.gs-phone__status {
  display: flex;
  justify-content: space-between;
  padding: 13px 13px 0;
  font-size: 9px;
  font-weight: 800;
}

.gs-phone__nav {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-around;
  height: 48px;
  align-items: center;
  border-top: 1px solid #e7eded;
  background: #fff;
}

.gs-phone__nav span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  color: #869799;
  font-size: 17px;
  line-height: 1;
}

.gs-phone__nav small {
  font-size: 6px;
  font-weight: 600;
}

.gs-phone__nav .selected {
  color: #10a86a;
}

/* Left: wireframe screen */
.gs-wireframe {
  padding: 0 11px;
}

.gs-wireframe .gs-phone__status {
  padding-right: 0;
  padding-left: 0;
}

.gs-wireframe__top {
  display: flex;
  justify-content: space-between;
  margin-top: 19px;
}

.gs-wireframe__top span {
  width: 32px;
  height: 11px;
  border: 1px solid #bdc8c8;
  border-radius: 4px;
}

.gs-wireframe__top i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #d4dadb;
}

.gs-wireframe__greeting {
  margin: 12px 0 15px;
  font-size: 13px;
}

.gs-wireframe__banner {
  height: 69px;
  border: 1px solid #cbd1d2;
  border-radius: 6px;
  background:
    linear-gradient(29deg, transparent 49.5%, #d4dadb 50%, transparent 50.5%),
    linear-gradient(-29deg, transparent 49.5%, #d4dadb 50%, transparent 50.5%),
    #f0f2f2;
}

.gs-wireframe__row {
  display: flex;
  height: 42px;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #edf0f0;
}

.gs-wireframe__row b {
  flex: 0 0 23px;
  height: 23px;
  border-radius: 50%;
  background: #e2e6e6;
}

.gs-wireframe__row span {
  width: 61px;
  height: 8px;
  border-radius: 3px;
  background: #dce1e1;
}

.gs-wireframe__row em {
  margin-left: auto;
  color: #c1cccc;
  font-style: normal;
}

.gs-wireframe__content {
  display: flex;
  height: 69px;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid #edf0f0;
}

.gs-wireframe__content i {
  width: 45px;
  height: 45px;
  border: 1px solid #d2d9d9;
  border-radius: 4px;
  background: #ecefef;
}

.gs-wireframe__content span {
  width: 70px;
  height: 9px;
  border-radius: 3px;
  background: #dce1e1;
}

.gs-wireframe .gs-phone__nav {
  right: -11px;
  left: -11px;
}

/* Center: finished dashboard */
.gs-dashboard {
  padding: 0 13px;
}

.gs-dashboard .gs-phone__status {
  padding-right: 0;
  padding-left: 0;
}

.gs-dashboard__brand {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  color: #08ac6a;
  font-size: 23px;
}

.gs-dashboard__brand span {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  background: #007c59;
  color: #fff;
  font-size: 10px;
}

.gs-dashboard h2 {
  margin: 16px 0 2px;
  font-size: 18px;
  letter-spacing: -.05em;
}

.gs-dashboard>p {
  margin: 0;
  color: #707d80;
  font-size: 10px;
}

.gs-dashboard__search {
  display: flex;
  justify-content: space-between;
  height: 32px;
  align-items: center;
  margin-top: 16px;
  padding: 0 8px;
  border: 1px solid #edf1f1;
  border-radius: 7px;
  color: #8c999b;
  font-size: 9px;
}

.gs-dashboard__tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: 12px;
}

.gs-dashboard__tiles div {
  display: flex;
  height: 65px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 9px;
  background: #f4f8fc;
  font-size: 8px;
  font-weight: 600;
}

.gs-dashboard__tiles div.active {
  background: #e3f8ef;
}

.gs-dashboard__tiles b {
  color: #138dd6;
  font-size: 17px;
}

.gs-dashboard__tiles .active b {
  color: #08a966;
}

.gs-dashboard__section-title {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
  font-size: 12px;
  font-weight: 800;
}

.gs-dashboard__section-title span {
  color: #13a36b;
  font-size: 9px;
}

.gs-dashboard__task {
  display: flex;
  min-height: 49px;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid #f1f4f4;
  font-size: 13px;
}

.gs-dashboard__task i {
  display: grid;
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  place-items: center;
  border-radius: 50%;
  background: #e9f9f1;
  color: #0bb970;
  font-size: 13px;
  font-style: normal;
}

.gs-dashboard__task span {
  flex: 1;
  font-size: 9px;
  font-weight: 700;
}

.gs-dashboard__task small {
  display: block;
  margin-top: 3px;
  color: #96a3a4;
  font-size: 8px;
  font-weight: 400;
}

.gs-dashboard .gs-phone__nav {
  right: -13px;
  left: -13px;
}

/* Right: app launch screen */
.gs-launch {
  padding: 0 10px;
}

.gs-launch .gs-phone__status {
  padding-right: 0;
  padding-left: 0;
}

.gs-launch__app {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 31px;
}

.gs-launch__icon {
  display: grid;
  width: 63px;
  height: 63px;
  flex: 0 0 63px;
  place-items: center;
  border-radius: 15px;
  background: linear-gradient(145deg, #08c774, #008757);
  color: #fff;
  font-size: 36px;
}

.gs-launch__app strong {
  display: block;
  font-size: 11px;
}

.gs-launch__app small {
  display: block;
  margin: 5px 0;
  color: #6b7879;
  font-size: 8px;
  line-height: 1.4;
}

.gs-launch__app b {
  display: inline-block;
  padding: 4px 13px;
  border-radius: 20px;
  background: #193b3c;
  color: #fff;
  font-size: 8px;
  font-weight: 600;
}

.gs-launch__app>span {
  align-self: flex-end;
  margin-bottom: 5px;
  font-size: 16px;
}

.gs-launch__previews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-top: 21px;
}

.gs-launch__previews>div {
  height: 125px;
  padding: 6px 4px;
  border-radius: 6px;
  background: #f5faf8;
}

.gs-launch__previews span {
  display: block;
  min-height: 34px;
  font-size: 8px;
  font-weight: 700;
  line-height: 1.25;
}

.gs-launch__previews i {
  display: block;
  height: 71px;
  margin: 5px auto;
  border: 2px solid #527071;
  border-radius: 5px;
  background:
    linear-gradient(#0eaa6c 0 0) center 80% / 80% 25% no-repeat,
    repeating-linear-gradient(#e8eeee 0 5px, transparent 5px 11px),
    #fff;
}

.gs-launch__checklist {
  margin-top: 13px;
  padding: 9px 10px;
  border-radius: 8px;
  background: #f3f9f8;
}

.gs-launch__checklist p {
  margin: 5px 0;
  color: #274443;
  font-size: 8px;
}

.gs-launch__ready {
  margin-top: 11px;
  padding: 10px 8px;
  border-radius: 6px;
  background: #e6f9ef;
  color: #0c9b62;
  font-size: 9px;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.gs-app-tag {
  position: absolute;
  z-index: 2;
  padding: 7px 12px;
  border: 1px solid #afe9cf;
  border-radius: 20px;
  background: #fff;
  color: #344e4d;
  font-size: 10px;
  font-weight: 700;
  box-shadow: 0 2px 9px rgba(25, 103, 74, .07);
}

.gs-app-tag--ios {
  top: 245px;
  left: 32%;
}

.gs-app-tag--android {
  top: 254px;
  right: 35.5%;
}

.gs-app-tag--cross {
  top: 260px;
  right: 27%;
}

.gs-app-side-note {
  position: absolute;
  top: 68px;
  color: #a7b3b7;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .45em;
  line-height: 2.1;
}

.gs-app-side-note--left {
  left: 0;
}

.gs-app-side-note--right {
  right: 0;
}

.gs-app-handnote {
  position: absolute;
  color: #7c898c;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-style: italic;
  line-height: 1.25;
  transform: rotate(-12deg);
}

.gs-app-handnote span {
  font-size: 27px;
}

.gs-app-handnote--left {
  top: 210px;
  left: 10%;
}

.gs-app-handnote--right {
  top: 244px;
  right: 4%;
  transform: rotate(-9deg);
}

.gs-app-hero__features {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin-top: 0;
  color: #304649;
  font-size: 16px;
}

.gs-app-hero__features>div {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

.gs-app-hero__features>i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #184547;
}

.gs-feature-icon {
  color: #0eaf6d;
  font-size: 29px;
  line-height: 1;
}

@media (max-width: 1100px) {
  .gs-app-hero__inner {
    padding-right: 24px;
    padding-left: 24px;
  }

  .gs-app-showcase {
    height: 510px;
  }

  .gs-app-stage--design {
    left: 10%;
  }

  .gs-app-stage--ship {
    right: 10%;
  }

  .gs-app-side-note,
  .gs-app-handnote,
  .gs-app-tag {
    display: none;
  }
}

@media (max-width: 760px) {
  .gs-app-hero__inner {
    padding: 48px 20px 45px;
  }

  .gs-app-hero__eyebrow {
    font-size: 10px;
    letter-spacing: .17em;
  }

  .gs-app-hero h1 {
    font-size: clamp(34px, 8vw, 48px);
  }

  .gs-desktop-break {
    display: none;
  }

  .gs-app-hero__description {
    font-size: 14px;
    line-height: 1.7;
  }

  .gs-app-hero__actions {
    flex-wrap: wrap;
  }

  .gs-app-btn {
    width: min(100%, 330px);
  }

  .gs-app-showcase {
    height: 440px;
    margin-top: 45px;
    transform: none;
  }

  .gs-app-showcase__skyline {
    bottom: 25px;
  }

  .gs-app-flow {
    top: 145px;
    left: 3%;
    width: 94%;
  }

  .gs-app-stage--design {
    top: 45px;
    left: 0;
  }

  .gs-app-stage--build {
    top: 0;
  }

  .gs-app-stage--ship {
    top: 47px;
    right: 0;
  }

  .gs-phone--design {
    transform: scale(.64) rotate(2deg);
    transform-origin: top left;
  }

  .gs-phone--build {
    transform: scale(.76) rotate(-1deg);
    transform-origin: top center;
  }

  .gs-phone--ship {
    transform: scale(.62) rotate(-2deg);
    transform-origin: top right;
  }

  .gs-app-stage__label {
    margin-left: 0 !important;
    font-size: 10px;
  }

  .gs-app-stage__label span {
    margin-right: 3px;
  }

  .gs-app-hero__features {
    flex-wrap: wrap;
    gap: 13px 19px;
    font-size: 12px;
  }

  .gs-feature-icon {
    font-size: 20px;
  }

  .gs-app-hero__features>div {
    gap: 6px;
  }
}

@media (max-width: 480px) {
  .gs-app-hero__inner {
    padding-right: 16px;
    padding-left: 16px;
  }

  .gs-app-showcase {
    height: 365px;
    margin-top: 35px;
  }

  .gs-app-stage--design {
    top: 62px;
    left: -5px;
  }

  .gs-app-stage--build {
    top: 0;
  }

  .gs-app-stage--ship {
    top: 67px;
    right: -5px;
  }

  .gs-phone--design {
    transform: scale(.45) rotate(2deg);
  }

  .gs-phone--build {
    transform: scale(.62) rotate(-1deg);
  }

  .gs-phone--ship {
    transform: scale(.41) rotate(-2deg);
  }

  .gs-app-stage__label {
    font-size: 8px;
    letter-spacing: .08em;
  }

  .gs-app-flow {
    top: 145px;
    height: 120px;
  }

  .gs-app-hero__features {
    gap: 10px;
  }

  .gs-app-hero__features>i {
    display: none;
  }
}

.gs-clients,
.gs-clients * {
  box-sizing: border-box;
}

.gs-clients {
  --gs-dark: #082823;
  --gs-muted: #687a7d;
  --gs-green: #0bc879;

  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 60px 32px 40px;
  background: #ffffff;
  color: var(--gs-dark);
  font-family: "Inter", sans-serif;
}

.gs-clients__inner {
  position: relative;
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
}

.gs-clients__content {
  position: relative;
  z-index: 1;
  text-align: center;
}

.gs-clients__eyebrow {
  margin: 0 0 24px;
  color: var(--gs-green);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.36em;
  line-height: 1.2;
  text-transform: uppercase;
}

.gs-clients h2 {
  margin: 0;
  color: #092722;
  font-size: clamp(22px, 3.0vw, 46px);
  font-weight: 600;
  letter-spacing: -0.066em;
  line-height: 1.12;
}

/* Corner crosses */
.gs-clients__corner {
  position: absolute;
  z-index: 2;
  width: 49px;
  height: 98px;
  pointer-events: none;
}

.gs-clients__corner::before,
.gs-clients__corner::after {
  position: absolute;
  display: block;
  content: "";
  background: #8c9b9e;
}

.gs-clients__corner::before {
  left: 24px;
  top: 0;
  width: 1.5px;
  height: 98px;
}

.gs-clients__corner::after {
  top: 25px;
  left: 0;
  width: 49px;
  height: 1.5px;
}

.gs-clients__corner--tl {
  top: 20px;
  left: 33px;
}

.gs-clients__corner--tr {
  top: 20px;
  right: 28px;
}

.gs-clients__corner--bl {
  bottom: 12px;
  left: 33px;
}

.gs-clients__corner--br {
  right: 28px;
  bottom: 12px;
}

/* Small editorial labels near the corners */
.gs-clients__edge {
  position: absolute;
  z-index: 2;
  color: #65767b;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-transform: uppercase;
}

.gs-clients__edge--tl {
  top: 65px;
  left: 100px;
  text-align: left;
}

.gs-clients__edge--tl span {
  display: block;
  width: 38px;
  height: 1px;
  margin-top: 12px;
  background: #92a0a2;
}

.gs-clients__edge--tr {
  top: 45px;
  right: 111px;
  display: flex;
  align-items: flex-start;
  gap: 23px;
  text-align: left;
}

.gs-clients__edge--tr span,
.gs-clients__edge--br span {
  width: 44px;
  height: 1px;
  margin-top: 29px;
  background: #92a0a2;
}

.gs-clients__edge--tr p,
.gs-clients__edge--br p {
  margin: 0;
}

.gs-clients__edge--bl {
  bottom: 35px;
  left: 108px;
  text-align: left;
}

.gs-clients__edge--br {
  right: 109px;
  bottom: 30px;
  display: flex;
  align-items: center;
  gap: 24px;
  text-align: left;
}

/* Curve and client names */
.gs-clients__map {
  position: relative;
  height: 220px;
  margin-top: 8px;
}

.gs-clients__line {
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  height: 150px;
  overflow: visible;
}

.gs-clients__name {
  position: absolute;
  color: #617579;
  font-size: clamp(18px, 1.57vw, 32px);
  font-weight: 400;
  letter-spacing: -0.052em;
  white-space: nowrap;
  transform: translateX(-50%) scale(1);
  transform-origin: center;
}

/* Animated green line – driven entirely by rAF, no CSS transition */
#gs-curve-anim {
  will-change: stroke-dashoffset;
}

/* Active (lit-up) dot */
.gs-dot {
  /* Fade-out transition (slow and smooth) */
  transition: fill 0.7s ease, filter 0.7s ease, transform 0.7s ease;
  transform-origin: center;
  transform-box: fill-box;
}

.gs-dot.gs-dot--active {
  fill: #0cc580 !important;
  filter: drop-shadow(0 0 6px rgba(12, 197, 128, 0.6));
  transform: scale(1.15);
  /* Fade-in transition (crisp and quick) */
  transition: fill 0.4s ease, filter 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Active (lit-up) client name */
.gs-clients__name {
  /* Fade-out transition (slow and smooth) */
  transition:
    color 0.7s ease,
    text-shadow 0.7s ease,
    transform 0.7s ease;
}

.gs-clients__name.gs-name--active {
  color: #0cc580 !important;
  transform: translateX(-50%) scale(1.08);
  text-shadow: 0 0 1px rgba(12, 197, 128, 0.4);
  /* Fade-in transition (crisp and quick) */
  transition:
    color 0.4s ease,
    text-shadow 0.4s ease,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.gs-clients__name--meridian {
  top: 7px;
  left: 6.1%;
  color: #16423a;
}

.gs-clients__name--north {
  top: 155px;
  left: 19.45%;
}

.gs-clients__name--lumina {
  top: 35px;
  left: 34.7%;
  color: #16423a;
}

.gs-clients__name--vantage {
  top: 165px;
  left: 51.1%;
}

.gs-clients__name--aveni {
  top: 34px;
  left: 66.7%;
}

.gs-clients__name--cobalt {
  top: 158px;
  left: 82%;
}

.gs-clients__name--helix {
  top: 8px;
  left: 95.6%;
  color: #16423a;
}

/* Bottom message */
.gs-clients__message {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 80px auto 0;
}

.gs-clients__message p {
  margin: 0;
  color: #65777b;
  font-size: clamp(14px, 1.1vw, 18px);
  line-height: 1.5;
  letter-spacing: -0.04em;
}

.gs-clients__shield {
  position: relative;
  display: block;
  width: 33px;
  height: 39px;
  flex: 0 0 33px;
  overflow: hidden;
  clip-path: polygon(50% 0, 100% 21%, 100% 67%, 50% 100%, 0 67%, 0 21%);
  background: #06c97b;
}

.gs-clients__shield::before {
  position: absolute;
  inset: 0 0 50%;
  content: "";
  background: #36dda0;
}

.gs-clients__shield::after {
  position: absolute;
  inset: 0 50% 0 0;
  content: "";
  background: rgba(0, 116, 71, 0.14);
}

.gs-clients__disclaimer {
  margin: 16px 0 0;
  color: #95a1a4;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.015em;
}

/* Tablet */
@media (max-width: 1100px) {
  .gs-clients {
    min-height: 610px;
    padding-top: 90px;
  }

  .gs-clients__eyebrow {
    font-size: 13px;
  }

  .gs-clients h2 {
    font-size: clamp(36px, 5vw, 56px);
  }

  .gs-clients__map {
    margin-top: 62px;
    height: 220px;
  }

  .gs-clients__message {
    max-width: 780px;
  }

  .gs-clients__edge {
    font-size: 10px;
  }

  .gs-clients__edge--tr,
  .gs-clients__edge--br {
    right: 85px;
  }
}

/* Mobile: keep names readable instead of compressing the curve */
@media (max-width: 700px) {
  .gs-clients {
    min-height: auto;
    padding: 75px 24px 72px;
  }

  .gs-clients__corner {
    transform: scale(0.65);
  }

  .gs-clients__corner--tl,
  .gs-clients__corner--bl {
    left: 3px;
  }

  .gs-clients__corner--tr,
  .gs-clients__corner--br {
    right: 3px;
  }

  .gs-clients__corner--tl,
  .gs-clients__corner--tr {
    top: 0;
  }

  .gs-clients__corner--bl,
  .gs-clients__corner--br {
    bottom: -24px;
  }

  .gs-clients__edge {
    display: none;
  }

  .gs-clients__eyebrow {
    margin-bottom: 22px;
    font-size: 11px;
    letter-spacing: 0.28em;
  }

  .gs-clients h2 {
    max-width: 530px;
    margin: 0 auto;
    font-size: clamp(32px, 7.5vw, 48px);
    line-height: 1.13;
    letter-spacing: -0.055em;
  }

  .gs-clients h2 br {
    display: none;
  }

  .gs-clients__map {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: center;
    gap: 14px;
    height: auto;
    margin-top: -10px;
  }

  .gs-clients__line {
    display: none;
  }

  .gs-clients__name {
    position: static;
    display: grid;
    min-height: 62px;
    place-items: center;
    padding: 10px 6px;
    border: 1px solid #e4ece8;
    border-radius: 4px;
    color: #24423b;
    background: #fff;
    font-size: clamp(17px, 4vw, 22px);
    transform: none;
  }

  .gs-clients__name--lumina {
    border-color: #b5ecd0;
    color: #098f59;
  }

  .gs-clients__message {
    align-items: flex-start;
    gap: 13px;
    margin-top: 35px;
    text-align: left;
  }

  .gs-clients__message p {
    font-size: 13px;
  }

  .gs-clients__shield {
    width: 27px;
    height: 32px;
    flex-basis: 27px;
  }

  .gs-clients__disclaimer {
    margin-top: 20px;
    font-size: 11px;
  }
}

/* =========================================================
   GROWTHSPELL — MOBILE APP DEVELOPMENT PROCESS SECTION
   Reference proportions: 1700px wide image
========================================================= */

.gs-mobile-process,
.gs-mobile-process * {
  box-sizing: border-box;
}

.gs-mobile-process {
  --gs-dark: #132729;
  --gs-body: #5d686e;
  --gs-green: #13c779;
  --gs-deep-green: #07392f;

  width: 100%;
  overflow: hidden;
  background: #fff;
  color: var(--gs-dark);
  font-family: "Inter", sans-serif;
}

.gs-mobile-process__container {
  width: min(100% - 76px, 1300px);
  margin: 0 auto;
  padding: 49px 0 0;
}

/* Heading */

.gs-mobile-process__eyebrow {
  display: flex;
  align-items: center;
  gap: 19px;
  margin-left: 19px;
  color: #10bb70;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.25em;
  line-height: 1.4;
  text-transform: uppercase;
}

.gs-mobile-process__eyebrow i {
  display: block;
  width: 59px;
  height: 2px;
  background: #13ca79;
}

.gs-mobile-process__heading {
  max-width: 1210px;
  margin: 20px 0 0 18px;
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.gs-mobile-process__intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  margin: 24px 18px 0;
}

.gs-mobile-process__intro p {
  max-width: 745px;
  margin: 0;
  color: var(--gs-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
}

.gs-mobile-process__intro p+p {
  max-width: 715px;
}

/* Main three-panel layout */

.gs-process-grid {
  position: relative;
  display: grid;
  grid-template-columns: 0.99fr 1.14fr 1.02fr;
  gap: 9px;
  height: 421px;
  margin-top: 34px;
}

.gs-process-panel {
  position: relative;
  min-width: 0;
  height: 421px;
  overflow: hidden;
  border-radius: 14px;
}

.gs-process-panel h3 {
  position: relative;
  z-index: 3;
  margin: 23px 30px 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.21em;
  line-height: 1.2;
  text-transform: uppercase;
}

.gs-process-panel__footer {
  position: absolute;
  right: 30px;
  bottom: 18px;
  left: 30px;
  padding-top: 15px;
  border-top: 1px solid rgba(31, 80, 74, 0.15);
  color: #657276;
  font-size: 15px;
  line-height: 1.3;
  text-align: center;
}

/* =========================================================
   PANEL 1 — DEFINE
========================================================= */

.gs-process-panel--define {
  background: linear-gradient(113deg, #eafff5 0%, #effff9 70%, #e9fbf5 100%);
}

.gs-define-diagram {
  position: absolute;
  top: 78px;
  right: 27px;
  left: 30px;
  height: 250px;
}

.gs-define-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: #17d07c;
  stroke-width: 2;
}

.gs-define-lines circle {
  fill: #13c879;
  stroke: none;
}

.gs-define-inputs {
  position: absolute;
  top: 3px;
  left: 0;
  display: flex;
  width: 35%;
  height: 222px;
  flex-direction: column;
  justify-content: space-between;
}

.gs-define-input {
  display: flex;
  height: 63px;
  align-items: center;
  gap: 17px;
  padding: 0 17px;
  border: 1px solid #d8e7e4;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(20, 70, 58, 0.025);
}

.gs-define-input strong {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  margin-left: -10px;
}

.gs-process-line-icon {
  display: inline-flex;
  width: 38px;
  flex: 0 0 38px;
}

.gs-process-line-icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: #244847;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.gs-blueprint {
  position: absolute;
  top: 31px;
  right: 8%;
  display: flex;
  width: 33%;
  height: 164px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #d9e6e3;
  border-radius: 11px;
  background: #fff;
  text-align: center;
}

.gs-blueprint__icon {
  width: 56px;
  height: 65px;
}

.gs-blueprint strong {
  font-size: 15px;
  line-height: 1.15;
}

/* =========================================================
   PANEL 2 — ENGINEER
========================================================= */

.gs-process-panel--engineer {
  background: linear-gradient(145deg, #082f2b 0%, #083c31 100%);
  color: #fff;
}

.gs-process-panel--engineer h3 {
  margin-left: 31px;
}

.gs-engineer-diagram {
  position: absolute;
  top: 63px;
  right: 29px;
  left: 29px;
  height: 285px;
}

.gs-engineer-platforms {
  display: grid;
  grid-template-columns: 1fr 1.07fr 1.08fr;
  gap: 15px;
}

.gs-engineer-platforms>div {
  display: flex;
  height: 53px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgba(46, 218, 144, 0.58);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.025);
  box-shadow: inset 0 0 0 1px rgba(28, 215, 131, 0.08);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.gs-platform-symbol {
  color: #fff;
  font-size: 22px;
  line-height: 1;
}

.gs-platform-symbol--android {
  color: #12d27c;
}

.gs-platform-symbol--code {
  font-size: 25px;
  font-weight: 400;
}

.gs-engineer-lines {
  position: absolute;
  top: 53px;
  left: 0;
  width: 100%;
  height: 83px;
  overflow: visible;
  fill: none;
  stroke: #10d27b;
  stroke-width: 2;
}

.gs-engineer-lines circle {
  fill: #10d27b;
  stroke: none;
}

.gs-custom-development {
  position: absolute;
  top: 92px;
  left: 50%;
  display: flex;
  width: 54%;
  height: 53px;
  align-items: center;
  justify-content: center;
  gap: 17px;
  border: 1px solid #17cf7b;
  border-radius: 7px;
  background: #0b4a3c;
  box-shadow: 0 0 14px rgba(17, 203, 122, 0.12);
  transform: translateX(-50%);
}

.gs-custom-development strong {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.gs-custom-development__cube {
  color: #1ddb91;
  font-size: 33px;
  line-height: 1;
}

.gs-engineer-build {
  position: absolute;
  top: 157px;
  right: 7%;
  left: 7%;
  display: grid;
  grid-template-columns: 1fr 22px 1.06fr;
  gap: 10px;
  height: 126px;
}

.gs-code-window {
  overflow: hidden;
  border: 1px solid rgba(162, 205, 191, 0.4);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.gs-code-window__bar {
  display: flex;
  height: 23px;
  align-items: center;
  gap: 5px;
  padding: 0 11px;
  border-bottom: 1px solid rgba(162, 205, 191, 0.35);
}

.gs-code-window__bar i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f28a84;
}

.gs-code-window__bar i:nth-child(2) {
  background: #f4cb65;
}

.gs-code-window__bar i:nth-child(3) {
  background: #28cf86;
}

.gs-code-window__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 15px 25px;
}

.gs-code-window__body span {
  display: block;
  height: 4px;
  border-radius: 4px;
  background: #4d8175;
}

.gs-code-window__body span:nth-child(2),
.gs-code-window__body span:nth-child(4) {
  background: #14b874;
}

.gs-code-window__body .short {
  width: 34%;
}

.gs-code-window__body .medium {
  width: 51%;
}

.gs-code-window__body .long {
  width: 73%;
}

.gs-engineer-build__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  color: #83a89e;
  font-size: 13px;
}

.gs-engineer-modules {
  overflow: hidden;
  border: 1px solid rgba(162, 205, 191, 0.4);
  border-radius: 8px;
}

.gs-engineer-modules>div {
  display: flex;
  height: 31px;
  align-items: center;
  gap: 13px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(162, 205, 191, 0.28);
  font-size: 11px;
}

.gs-engineer-modules>div:last-child {
  border-bottom: 0;
}

.gs-engineer-modules span {
  width: 17px;
  font-size: 17px;
  text-align: center;
}

.gs-process-panel--engineer .gs-process-panel__footer {
  border-top-color: rgba(223, 255, 240, 0.37);
  color: #c7ded5;
}

/* =========================================================
   PANEL 3 — LAUNCH & EVOLVE
========================================================= */

.gs-process-panel--launch {
  border: 1px solid #d7e2e2;
  background: #fff;
}

.gs-process-panel--launch h3 {
  margin-left: 30px;
}

.gs-launch-diagram {
  position: absolute;
  top: 114px;
  right: 28px;
  left: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.14fr;
  align-items: center;
  gap: 19px;
}

.gs-launch-diagram::before {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 0;
  left: 0;
  height: 2px;
  background: #14ce7c;
  content: "";
}

.gs-launch-step {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  height: 109px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid #d7e7e4;
  border-radius: 9px;
  background: #fff;
  text-align: center;
}

.gs-launch-step:not(:last-child)::after {
  position: absolute;
  top: calc(50% - 4px);
  right: -14px;
  width: 8px;
  height: 8px;
  border: 2px solid #16cf7d;
  border-radius: 50%;
  background: #fff;
  content: "";
}

.gs-launch-step__icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: #2f5554;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.gs-launch-step strong {
  font-size: 12px;
  line-height: 1.25;
}

.gs-launch-step--live {
  height: 145px;
  border: 0;
  background: #e7fff4;
}

.gs-launch-step__sun {
  color: #09bb6b;
  font-size: 52px;
  font-weight: 400;
  line-height: 1;
}

/* Connector circles between panels */

.gs-process-panel--define::after,
.gs-process-panel--engineer::after {
  position: absolute;
  z-index: 10;
  top: 186px;
  right: -9px;
  width: 17px;
  height: 17px;
  border: 3px solid #16cf7b;
  border-radius: 50%;
  background: #087b55;
  content: "";
}

/* Bottom statement */

.gs-mobile-process__closing {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 39px;
  color: #627073;
}

.gs-mobile-process__closing span {
  height: 1px;
  flex: 1;
  background: #bfcac9;
}

.gs-mobile-process__closing p {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-align: center;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1350px) {
  .gs-mobile-process__container {
    width: min(100% - 56px, 1360px);
  }

  .gs-mobile-process__heading {
    font-size: clamp(26px, 3.5vw, 40px);
  }

  .gs-mobile-process__intro {
    gap: 40px;
  }

  .gs-mobile-process__intro p {
    font-size: 13px;
  }

  .gs-define-input {
    gap: 9px;
    padding: 0 10px;
  }

  .gs-engineer-platforms {
    gap: 6px;
  }

  .gs-engineer-platforms>div {
    gap: 5px;
    font-size: 11px;
  }

  .gs-launch-diagram {
    right: 18px;
    left: 18px;
    gap: 9px;
  }

  .gs-launch-step strong {
    font-size: 11px;
  }
}

@media (max-width: 1050px) {
  .gs-mobile-process__container {
    width: min(100% - 40px, 850px);
    padding-top: 70px;
  }

  .gs-mobile-process__heading {
    margin-left: 0;
    font-size: clamp(38px, 5.4vw, 56px);
    line-height: 1.05;
  }

  .gs-mobile-process__eyebrow {
    margin-left: 0;
  }

  .gs-process-desktop-break {
    display: none;
  }

  .gs-mobile-process__intro {
    gap: 30px;
    margin-right: 0;
    margin-left: 0;
  }

  .gs-process-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    height: auto;
    margin-top: 10px;
  }

  .gs-process-panel {
    height: 421px;
  }

  .gs-process-panel--define::after,
  .gs-process-panel--engineer::after {
    display: none;
  }

  .gs-define-diagram {
    right: 12%;
    left: 10%;
  }

  .gs-engineer-diagram {
    right: 10%;
    left: 10%;
  }

  .gs-launch-diagram {
    right: 8%;
    left: 8%;
  }
}

@media (max-width: 600px) {
  .gs-mobile-process__container {
    width: min(100% - 32px, 430px);
    padding-top: 62px;
  }

  .gs-mobile-process__eyebrow {
    gap: 12px;
    font-size: 11px;
  }

  .gs-mobile-process__eyebrow i {
    width: 42px;
  }

  .gs-mobile-process__heading {
    margin-top: 18px;
    font-size: clamp(35px, 9.3vw, 48px);
    letter-spacing: -0.055em;
  }

  .gs-mobile-process__intro {
    display: block;
    margin-top: 24px;
  }

  .gs-mobile-process__intro p {
    font-size: 15px;
    line-height: 1.6;
  }

  .gs-mobile-process__intro p+p {
    margin-top: 15px;
  }

  .gs-process-grid {
    margin-top: 10px;
  }

  .gs-process-panel {
    height: 365px;
  }

  .gs-process-panel h3 {
    margin: 22px 19px 0;
    font-size: 15px;
  }

  .gs-process-panel__footer {
    right: 18px;
    bottom: 15px;
    left: 18px;
    font-size: 14px;
  }

  .gs-define-diagram {
    top: 80px;
    right: 16px;
    left: 16px;
    height: 205px;
  }

  .gs-define-inputs {
    height: 195px;
  }

  .gs-define-input {
    height: 54px;
    gap: 4px;
    padding: 0 7px;
  }

  .gs-define-input strong {
    font-size: 10px;
  }

  .gs-process-line-icon {
    width: 25px;
    flex-basis: 25px;
  }

  .gs-process-line-icon svg {
    width: 23px;
    height: 23px;
  }

  .gs-define-lines {
    height: 195px;
  }

  .gs-blueprint {
    top: 22px;
    right: 4%;
    height: 145px;
  }

  .gs-blueprint__icon {
    width: 44px;
    height: 54px;
  }

  .gs-blueprint strong {
    font-size: 13px;
  }

  .gs-engineer-diagram {
    top: 64px;
    right: 15px;
    left: 15px;
  }

  .gs-engineer-platforms {
    gap: 4px;
  }

  .gs-engineer-platforms>div {
    height: 48px;
    flex-direction: column;
    gap: 1px;
    font-size: 9px;
  }

  .gs-platform-symbol {
    font-size: 16px;
  }

  .gs-platform-symbol--code {
    font-size: 17px;
  }

  .gs-engineer-lines {
    top: 48px;
    height: 65px;
  }

  .gs-custom-development {
    top: 82px;
    width: 70%;
    height: 45px;
    gap: 7px;
  }

  .gs-custom-development strong {
    font-size: 11px;
  }

  .gs-custom-development__cube {
    font-size: 24px;
  }

  .gs-engineer-build {
    top: 142px;
    right: 2%;
    left: 2%;
    grid-template-columns: 1fr 12px 1fr;
    gap: 3px;
    height: 112px;
  }

  .gs-code-window__body {
    padding-right: 10px;
    padding-left: 10px;
  }

  .gs-engineer-modules>div {
    height: 28px;
    gap: 4px;
    padding: 0 5px;
    font-size: 9px;
  }

  .gs-engineer-modules span {
    width: 13px;
    font-size: 12px;
  }

  .gs-launch-diagram {
    top: 125px;
    right: 11px;
    left: 11px;
    gap: 5px;
  }

  .gs-launch-step {
    height: 82px;
    gap: 5px;
    border-radius: 6px;
  }

  .gs-launch-step__icon svg {
    width: 20px;
    height: 20px;
  }

  .gs-launch-step strong {
    font-size: 8px;
  }

  .gs-launch-step--live {
    height: 103px;
  }

  .gs-launch-step__sun {
    font-size: 32px;
  }

  .gs-launch-step:not(:last-child)::after {
    right: -7px;
    width: 5px;
    height: 5px;
  }

  .gs-mobile-process__closing {
    gap: 9px;
    margin: 30px 0 45px;
  }

  .gs-mobile-process__closing p {
    max-width: 210px;
    font-size: 9px;
    letter-spacing: 0.1em;
  }
}

/* =========================================================
   MOBILE APP DEVELOPMENT SERVICES
========================================================= */

.gs-app-services,
.gs-app-services * {
  box-sizing: border-box;
}

.gs-app-services {
  --gs-ink: #16282b;
  --gs-muted: #5d696e;
  --gs-green: #10bd70;

  width: 100%;
  background: #fff;
  color: var(--gs-ink);
  font-family: "Inter", sans-serif;
}

.gs-app-services__container {
  width: min(100% - 76px, 1300px);
  margin: 0 auto;
  padding: 12px 0 42px;
}

.gs-app-services__eyebrow {
  margin: 0 0 7px;
  color: #16945f;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .025em;
  line-height: 1.4;
  text-transform: uppercase;
}

.gs-app-services__header h2 {
  margin: 0;
  font-size: clamp(30px, 2.45vw, 39px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.045em;
}

.gs-app-services__header>p:last-child {
  margin: 5px 0 0;
  color: var(--gs-muted);
  font-size: 17px;
  line-height: 1.45;
}

.gs-app-services__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 17px;
  margin-top: 25px;
}

.gs-service-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 7px;
}

.gs-service-card h3 {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: 23px;
  font-weight: 750;
  line-height: 1.22;
  letter-spacing: -.035em;
}

.gs-service-card p {
  position: relative;
  z-index: 2;
  margin: 7px 0 0;
  font-size: 15px;
  line-height: 1.45;
}

/* =========================================================
   TOP ROW
========================================================= */

.gs-service-card--native {
  grid-column: span 8;
  height: 425px;
  padding: 24px 35px;
  background:
    radial-gradient(circle at 93% 15%, rgba(2, 184, 107, .36), transparent 42%),
    repeating-linear-gradient(46deg, transparent 0 9px, rgba(21, 220, 129, .035) 10px 11px),
    linear-gradient(115deg, #102024, #063e32);
  color: #fff;
}

.gs-service-card--native .gs-service-card__copy p {
  color: #d9e3e1;
}

.gs-native-diagram {
  position: absolute;
  right: 35px;
  bottom: 35px;
  left: 35px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, .95fr) minmax(0, 1fr);
  align-items: end;
  height: 253px;
}

.gs-native-platform {
  position: relative;
  z-index: 1;
  height: 239px;
  padding: 15px 18px 10px;
  border: 1px solid #e6eded;
  border-radius: 9px;
  background: #fff;
  color: #17292b;
  box-shadow: 0 4px 14px rgba(23, 58, 53, .05);
}

.gs-native-platform__heading {
  display: flex;
  height: 25px;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
  font-size: 12px;
  white-space: nowrap;
}

.gs-native-platform__apple {
  color: #112f32;
  font-size: 24px;
  line-height: 1;
}

.gs-native-platform__android {
  color: #0dc775;
  font-size: 23px;
  line-height: 1;
}

.gs-native-feature {
  display: flex;
  min-height: 51px;
  align-items: center;
  gap: 10px;
  border-top: 1px solid #f0f3f4;
}

.gs-native-feature__icon {
  display: grid;
  width: 37px;
  height: 37px;
  flex: 0 0 37px;
  place-items: center;
  border-radius: 9px;
  font-size: 21px;
  font-weight: 800;
}

.gs-native-feature__icon--blue {
  background: #e8f0ff;
  color: #3984ef;
}

.gs-native-feature__icon--green {
  background: #e4fbef;
  color: #0eb96e;
}

.gs-native-feature__icon--coral {
  background: #fff0ef;
  color: #ff7773;
}

.gs-native-feature__icon--purple {
  background: #f1ecff;
  color: #8161e9;
}

.gs-native-feature__icon--yellow {
  background: #fff5e6;
  color: #f4b128;
}

.gs-native-feature span:nth-child(2) {
  min-width: 0;
}

.gs-native-feature strong,
.gs-native-feature small {
  display: block;
}

.gs-native-feature strong {
  font-size: 11px;
  line-height: 1.25;
}

.gs-native-feature small {
  margin-top: 2px;
  color: #8a999b;
  font-size: 9px;
  line-height: 1.25;
  white-space: nowrap;
}

.gs-native-feature b {
  margin-left: auto;
  color: #b5c3c4;
  font-size: 18px;
  font-weight: 400;
}

.gs-native-center {
  position: relative;
  z-index: 1;
  display: flex;
  height: 210px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #21383a;
  text-align: center;
}

.gs-native-center::before,
.gs-native-center::after {
  position: absolute;
  top: 85px;
  width: 25%;
  height: 1px;
  background: #24d884;
  content: "";
}

.gs-native-center::before {
  left: 0;
}

.gs-native-center::after {
  right: 0;
}

.gs-native-center__box {
  display: flex;
  width: 110px;
  height: 113px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid #e3eceb;
  border-radius: 11px;
  background: #fff;
}

.gs-native-center__box span {
  color: #0caf67;
  font-size: 31px;
  line-height: 1;
}

.gs-native-center__box strong {
  font-size: 11px;
  line-height: 1.35;
}

.gs-native-center p {
  margin-top: 25px;
  color: #91a7a4;
  font-size: 10px;
  white-space: nowrap;
}

.gs-service-card--cross {
  grid-column: span 4;
  height: 381px;
  padding: 24px 25px;
  border: 1px solid #e3f2eb;
  background:
    radial-gradient(circle at 68% 55%, rgba(214, 255, 236, .5), transparent 65%),
    #f2fff8;
}

.gs-service-card--cross p {
  color: #627177;
}

.gs-cross-diagram {
  position: absolute;
  right: 27px;
  bottom: 27px;
  left: 27px;
  height: 190px;
}

.gs-cross-diagram__source {
  display: flex;
  width: 260px;
  height: 59px;
  align-items: center;
  gap: 13px;
  margin: 0 auto;
  padding: 0 16px;
  border: 1px solid #cfecdd;
  border-radius: 11px;
  background: rgba(255, 255, 255, .75);
  font-size: 12px;
  white-space: nowrap;
}

.gs-cross-diagram__source span {
  display: grid;
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
  place-items: center;
  border-radius: 6px;
  background: #076449;
  color: #fff;
  font-size: 15px;
}

.gs-cross-diagram__branches {
  position: relative;
  width: 65%;
  height: 67px;
  margin: 0 auto;
}

.gs-cross-diagram__branches::before,
.gs-cross-diagram__branches::after {
  position: absolute;
  top: 0;
  width: 50%;
  height: 64px;
  border-bottom: 1px solid #1cc576;
  content: "";
}

.gs-cross-diagram__branches::before {
  right: 50%;
  border-right: 1px solid #1cc576;
  border-radius: 0 0 25px 0;
}

.gs-cross-diagram__branches::after {
  left: 50%;
  border-left: 1px solid #1cc576;
  border-radius: 0 0 0 25px;
}

.gs-cross-diagram__targets {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  align-items: center;
  gap: 9px;
}

.gs-cross-diagram__targets>div {
  display: flex;
  height: 65px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid #dfebea;
  border-radius: 9px;
  background: #fff;
  font-size: 12px;
}

.gs-cross-diagram__targets>div span {
  font-size: 26px;
}

.gs-cross-diagram__apple {
  color: #183335;
}

.gs-cross-diagram__android {
  color: #0fbf6b;
}

.gs-cross-diagram__targets p {
  margin: 0;
  padding: 11px 4px;
  border-radius: 28px;
  background: #e1faeb;
  color: #407b65;
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
}

/* =========================================================
   MIDDLE ROW
========================================================= */

.gs-service-card--mvp,
.gs-service-card--custom,
.gs-service-card--enterprise {
  height: 302px;
}

.gs-service-card--mvp {
  grid-column: span 4;
  padding: 25px 30px;
  background: url('../images/mvp-bg.jpg') center/cover no-repeat;
}

.gs-service-card--mvp p {
  color: #667479;
  font-size: 14px;
}

.gs-mvp-steps {
  position: absolute;
  right: 15px;
  bottom: 92px;
  left: 15px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.gs-mvp-steps::before {
  position: absolute;
  top: 50%;
  right: 20px;
  left: 20px;
  height: 1px;
  background: #19c67a;
  content: "";
}

.gs-mvp-steps>div {
  position: relative;
  display: flex;
  min-height: 45px;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border-radius: 25px;
  background: #fff;
  box-shadow: 0 3px 11px rgba(43, 98, 79, .04);
  font-size: 10px;
  white-space: nowrap;
}

.gs-mvp-steps span {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
}

.gs-mvp-steps span svg {
  width: 1em;
  height: 1em;
}

.gs-mvp-icon--concept {
  color: #556ee6;
}

.gs-mvp-icon--prototype {
  color: #f1b44c;
}

.gs-mvp-icon--mvp {
  color: #f46a9b;
}

.gs-mvp-icon--feedback {
  color: #34c38f;
}

.gs-service-card--custom {
  grid-column: span 4;
  padding: 25px 27px;
  border: 1px solid #e9eeee;
  background: #fff;
}

.gs-service-card--custom h3 {
  font-size: 20px;
}

.gs-service-card--custom p {
  color: #667479;
  font-size: 14px;
}

.gs-custom-diagram {
  position: absolute;
  right: 27px;
  bottom: 31px;
  left: 27px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 29px 26px;
}

.gs-custom-diagram::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 92px;
  height: 78px;
  border: 1px solid #2ad585;
  border-radius: 10px;
  content: "";
  transform: translate(-50%, -50%);
}

.gs-custom-diagram__item {
  position: relative;
  display: flex;
  min-width: 0;
  height: 53px;
  align-items: center;
  gap: 9px;
  padding: 0 9px;
  border: 1px solid #e8eeee;
  border-radius: 7px;
  background: #fff;
}

.gs-custom-diagram__item>span {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border-radius: 6px;
  background: #e6fcf1;
  color: #0eb96e;
  font-size: 18px;
}

.gs-custom-diagram__item strong,
.gs-custom-diagram__item small {
  display: block;
  white-space: nowrap;
}

.gs-custom-diagram__item strong {
  font-size: 11px;
}

.gs-custom-diagram__item small {
  margin-top: 2px;
  color: #7c8b8f;
  font-size: 9px;
}

.gs-custom-diagram__center {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border-radius: 10px;
  background: #096044;
  color: #26d887;
  font-size: 33px;
  transform: translate(-50%, -50%);
}

.gs-service-card--enterprise {
  grid-column: span 4;
  padding: 25px 25px;
  background: url('../images/enterprise-bg.jpg') center/cover no-repeat;
  color: #fff;
}

.gs-enterprise-content {
  position: relative;
  z-index: 2;
}

.gs-service-card--enterprise h3 {
  font-size: 20px;
}

.gs-service-card--enterprise p {
  color: #c8d3d2;
  font-size: 13px;
}

.gs-enterprise-list {
  display: grid;
  gap: 4px;
  margin-top: 14px;
}

.gs-enterprise-list>div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gs-enterprise-list>div>span {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border: 1px solid rgba(208, 242, 228, .26);
  border-radius: 7px;
  background: rgba(255, 255, 255, .07);
  color: #eafff4;
  font-size: 18px;
}

.gs-enterprise-list strong,
.gs-enterprise-list small {
  display: block;
}

.gs-enterprise-list strong {
  font-size: 11px;
  line-height: 1.2;
}

.gs-enterprise-list small {
  margin-top: 3px;
  color: #b9cfca;
  font-size: 9px;
  line-height: 1.2;
}

.gs-enterprise-art {
  position: absolute;
  inset: 0 0 0 47%;
  opacity: .7;
  transform: skewY(-6deg);
}

.gs-enterprise-art::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #102a2e, transparent 55%);
  content: "";
  z-index: 1;
}

.gs-server {
  position: absolute;
  top: 30px;
  bottom: -30px;
  width: 20%;
  border: 7px solid #081a1d;
  background:
    repeating-linear-gradient(to bottom,
      transparent 0 9px,
      #087452 9px 11px,
      transparent 11px 18px),
    repeating-linear-gradient(to right,
      #101f22 0 5px,
      #071113 5px 10px);
  box-shadow: inset 0 0 17px #00ad71, 8px 5px 16px rgba(0, 0, 0, .45);
}

.gs-server--one {
  left: 12%;
}

.gs-server--two {
  left: 35%;
}

.gs-server--three {
  left: 58%;
}

.gs-server--four {
  left: 81%;
}

/* =========================================================
   BOTTOM LINKS AND CTA
========================================================= */

.gs-service-link {
  grid-column: span 6;
  display: flex;
  min-height: 88px;
  align-items: center;
  gap: 22px;
  padding: 13px 28px;
  border: 1px solid #e3eded;
  border-radius: 7px;
  color: var(--gs-ink);
  text-decoration: none;
  transition: border-color .2s, transform .2s;
}

.gs-service-link:hover {
  border-color: #16c879;
  transform: translateY(-2px);
}

.gs-service-link--pwa {
  background: #f0fff8;
}

.gs-service-link--enterprise {
  background: #fff;
}

.gs-service-link__icon {
  display: grid;
  width: 59px;
  height: 59px;
  flex: 0 0 59px;
  place-items: center;
  border-radius: 11px;
  background: #dffbed;
  color: #0eaa66;
  font-size: 33px;
}

.gs-service-link--enterprise .gs-service-link__icon {
  background: #eff4f5;
  color: #194b4b;
}

.gs-service-link__text {
  min-width: 0;
}

.gs-service-link__text strong,
.gs-service-link__text small {
  display: block;
}

.gs-service-link__text strong {
  font-size: 16px;
}

.gs-service-link__text small {
  margin-top: 5px;
  color: #6c797e;
  font-size: 13px;
}

.gs-service-link__arrow {
  margin-left: auto;
  color: #345456;
  font-size: 25px;
}

.gs-app-services__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  padding-top: 19px;
}

.gs-app-services__bottom strong {
  font-size: 16px;
}

.gs-app-services__bottom p {
  margin: 5px 0 0;
  color: #67757a;
  font-size: 14px;
}

.gs-app-services__bottom>a {
  display: inline-flex;
  min-height: 51px;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 0 22px;
  border-radius: 7px;
  background: #19c86f;
  color: #093e2b;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s, transform .2s;
}

.gs-app-services__bottom>a:hover {
  background: #25dd80;
  transform: translateY(-2px);
}

.gs-app-services__bottom>a span {
  font-size: 24px;
  font-weight: 400;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1200px) {
  .gs-app-services__container {
    width: min(100% - 48px, 1050px);
  }

  .gs-service-card--native {
    grid-column: span 7;
  }

  .gs-service-card--cross {
    grid-column: span 5;
  }

  .gs-service-card--mvp,
  .gs-service-card--custom,
  .gs-service-card--enterprise {
    grid-column: span 6;
  }

  .gs-service-card--enterprise {
    grid-column: span 12;
  }
}

@media (max-width: 900px) {

  .gs-service-card--native,
  .gs-service-card--cross,
  .gs-service-card--mvp,
  .gs-service-card--custom,
  .gs-service-card--enterprise {
    grid-column: span 12;
  }

  .gs-service-card--native {
    height: 430px;
  }

  .gs-service-card--cross {
    height: 355px;
  }

  .gs-service-card--mvp,
  .gs-service-card--custom,
  .gs-service-card--enterprise {
    height: 300px;
  }
}

@media (max-width: 600px) {
  .gs-app-services__container {
    width: min(100% - 32px, 440px);
    padding-top: 45px;
  }

  .gs-app-services__header h2 {
    font-size: 32px;
    line-height: 1.12;
  }

  .gs-app-services__header>p:last-child {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.6;
  }

  .gs-app-services__grid {
    gap: 13px;
    margin-top: 23px;
  }

  .gs-service-card h3 {
    font-size: 20px;
  }

  .gs-service-card p {
    font-size: 13px;
  }

  .gs-wide-only {
    display: none;
  }

  .gs-service-card--native {
    height: 540px;
    padding: 22px 17px;
  }

  .gs-native-diagram {
    right: 10px;
    left: 10px;
    grid-template-columns: 1fr .54fr 1fr;
    height: 342px;
  }

  .gs-native-platform {
    height: 258px;
    padding: 10px 7px;
  }

  .gs-native-platform__heading {
    gap: 4px;
    font-size: 8px;
  }

  .gs-native-platform__apple,
  .gs-native-platform__android {
    font-size: 17px;
  }

  .gs-native-feature {
    min-height: 61px;
    gap: 4px;
  }

  .gs-native-feature__icon {
    width: 25px;
    height: 25px;
    flex-basis: 25px;
    font-size: 14px;
  }

  .gs-native-feature strong {
    font-size: 8px;
  }

  .gs-native-feature small {
    font-size: 7px;
    white-space: normal;
  }

  .gs-native-feature b {
    display: none;
  }

  .gs-native-center {
    height: 245px;
  }

  .gs-native-center__box {
    width: 65px;
    height: 93px;
  }

  .gs-native-center__box strong {
    font-size: 8px;
  }

  .gs-native-center p {
    position: absolute;
    bottom: 12px;
    left: 50%;
    width: 140px;
    font-size: 8px;
    transform: translateX(-50%);
  }

  .gs-service-card--cross {
    height: 365px;
    padding: 22px 20px;
  }

  .gs-cross-diagram {
    right: 14px;
    left: 14px;
  }

  .gs-cross-diagram__source {
    width: 245px;
  }

  .gs-service-card--mvp,
  .gs-service-card--custom,
  .gs-service-card--enterprise {
    height: 285px;
    padding: 22px 18px;
  }

  .gs-mvp-steps {
    right: 7px;
    left: 7px;
    gap: 3px;
  }

  .gs-mvp-steps>div {
    min-height: 39px;
    gap: 3px;
    padding: 0 6px;
    font-size: 8px;
  }

  .gs-mvp-steps span {
    font-size: 13px;
  }

  .gs-custom-diagram {
    right: 10px;
    bottom: 28px;
    left: 10px;
    gap: 27px 13px;
  }

  .gs-custom-diagram__item {
    gap: 4px;
    padding: 0 4px;
  }

  .gs-custom-diagram__item>span {
    width: 25px;
    height: 25px;
    flex-basis: 25px;
    font-size: 15px;
  }

  .gs-custom-diagram__item strong {
    font-size: 9px;
  }

  .gs-custom-diagram__item small {
    font-size: 7px;
  }

  .gs-enterprise-art {
    left: 52%;
  }

  .gs-service-link {
    grid-column: span 12;
    min-height: 79px;
    gap: 12px;
    padding: 10px 14px;
  }

  .gs-service-link__icon {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    font-size: 25px;
  }

  .gs-service-link__text strong {
    font-size: 13px;
  }

  .gs-service-link__text small {
    font-size: 10px;
    line-height: 1.4;
  }

  .gs-app-services__bottom {
    align-items: stretch;
    flex-direction: column;
    gap: 17px;
    padding: 24px 0 0;
  }

  .gs-app-services__bottom>a {
    width: 100%;
  }
}

.gs-ux-section,
.gs-ux-section * {
  box-sizing: border-box;
}

.gs-ux-section {
  --ux-dark: #102e2a;
  --ux-green: #16cf7c;
  --ux-ink: #193033;
  --ux-muted: #667377;
  overflow: hidden;
  background: #fff;
  color: var(--ux-ink);
  font-family: "Inter", sans-serif;
}

.gs-ux-container {
  width: min(100% - 76px, 1300px);
  margin: 0 auto;
  padding: 30px 0 25px;
}

.gs-ux-header {
  max-width: 1060px;
  margin: 0 auto 28px;
  text-align: center;
}

.gs-ux-eyebrow {
  margin: 0 0 12px;
  color: #13bc70;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.gs-ux-header h2 {
  margin: 0;
  font-size: clamp(34px, 3.4vw, 51px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.055em;
}

.gs-ux-header>p:last-child {
  margin: 15px auto 0;
  color: #606d72;
  font-size: 18px;
  line-height: 1.55;
}

/* Dark presentation canvas */

.gs-ux-showcase {
  position: relative;
  height: 623px;
  overflow: hidden;
  border-radius: 13px;
  background: url('../images/ux-bg.jpg') center/cover no-repeat;
}

.gs-ux-journey {
  position: absolute;
  z-index: 0;
  top: 93px;
  left: 0;
  width: 100%;
  height: 390px;
  overflow: visible;
}

.gs-ux-journey path {
  fill: none;
  stroke: #16d681;
  stroke-width: 2.5;
}

.gs-ux-journey circle {
  fill: #14ce7b;
}

.gs-ux-label {
  position: absolute;
  z-index: 1;
  top: 45px;
  padding-left: 14px;
  color: #d8e8e3;
  font-size: 12px;
  line-height: 1.45;
}

.gs-ux-label::before {
  position: absolute;
  top: 4px;
  left: 0;
  width: 1px;
  height: 91px;
  background: linear-gradient(#14d17c, transparent);
  content: "";
}

.gs-ux-label span {
  position: absolute;
  top: 0;
  left: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #1ae68b;
}

.gs-ux-label--research {
  left: 5.7%;
}

.gs-ux-label--wireframe {
  left: 27.3%;
  top: 38px;
}

.gs-ux-label--brand {
  left: 50.5%;
  top: 27px;
}

.gs-ux-label--accessibility {
  left: 69.3%;
  top: 39px;
}

.gs-ux-label--testing {
  left: 84%;
  top: 44px;
}

/* Shared board styling */

.gs-ux-board {
  position: absolute;
  z-index: 2;
  overflow: hidden;
  background: #fff;
  color: #20383b;
  box-shadow: 0 15px 30px rgba(0, 15, 12, .12);
}

.gs-ux-board h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 750;
  letter-spacing: -.035em;
  line-height: 1.2;
}

.gs-ux-board__subtitle {
  margin: 3px 0 0;
  color: #526369;
  font-size: 12px;
}

.gs-ux-board--research {
  top: 140px;
  left: 3.4%;
  width: 17%;
  height: 390px;
  padding: 21px 22px;
  transform: rotate(-3.8deg);
}

.gs-ux-board--wireframe {
  top: 120px;
  left: 21%;
  width: 29%;
  height: 425px;
  padding: 20px 28px;
  transform: rotate(2deg);
}

.gs-ux-board--interface {
  z-index: 5;
  top: 84px;
  left: 44%;
  width: 35.5%;
  height: 497px;
  padding: 19px 22px;
  border: 1px solid #d8f7e9;
  border-radius: 8px;
  background: #edfff8;
  transform: rotate(1.2deg);
}

.gs-ux-board--testing {
  z-index: 4;
  top: 177px;
  right: 3.2%;
  width: 18.2%;
  height: 382px;
  padding: 20px 18px;
  transform: rotate(4.5deg);
}

/* Research board */

.gs-ux-persona {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

.gs-ux-avatar {
  display: grid;
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  place-items: center;
  border-radius: 50%;
  background: #e0f8ee;
  color: #287e61;
  font-size: 25px;
}

.gs-ux-persona strong,
.gs-ux-persona small {
  display: block;
}

.gs-ux-persona strong {
  font-size: 10px;
}

.gs-ux-persona small {
  margin-top: 3px;
  color: #718083;
  font-size: 9px;
  line-height: 1.25;
}

.gs-ux-observations {
  display: grid;
  gap: 10px;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid #e4ebeb;
}

.gs-ux-observations>strong {
  margin-bottom: 3px;
  font-size: 10px;
}

.gs-ux-observations>div {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  line-height: 1.25;
}

.gs-ux-observations b {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  border-radius: 50%;
  background: #e3f9ef;
  color: #32846c;
  font-size: 10px;
}

.gs-ux-scribble {
  position: absolute;
  right: 18px;
  bottom: 17px;
  color: #728a85;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-style: italic;
  line-height: 1.2;
  text-align: center;
  transform: rotate(-8deg);
}

/* Journey and wireframe board */

.gs-ux-flow {
  display: flex;
  justify-content: space-between;
  margin: 39px 4px 0;
}

.gs-ux-flow::before {
  position: absolute;
  top: 113px;
  right: 49px;
  left: 49px;
  height: 1px;
  background: #a5c5bf;
  content: "";
}

.gs-ux-flow>div {
  position: relative;
  z-index: 1;
  text-align: center;
}

.gs-ux-flow i {
  display: block;
  width: 16px;
  height: 16px;
  margin: 0 auto 7px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #1ac47a;
  box-shadow: 0 0 0 1px #d4ebe1;
}

.gs-ux-flow>div:first-child i {
  background: #3b746b;
}

.gs-ux-flow span {
  font-size: 9px;
}

.gs-ux-flow-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 25px 8px 20px;
}

.gs-ux-flow-options span {
  padding: 7px 13px;
  border-radius: 20px;
  background: #f4f9f8;
  color: #617176;
  font-size: 9px;
}

.gs-ux-board__minor-heading {
  display: block;
  margin-bottom: 11px;
  font-size: 11px;
}

.gs-ux-wireframes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.gs-ux-wireframe {
  min-width: 0;
  height: 137px;
  padding: 9px 7px;
  border: 1px solid #dfe9e9;
  border-radius: 5px;
  background: #fff;
}

.gs-ux-wireframe__image {
  height: 49px;
  margin-bottom: 10px;
  background: linear-gradient(145deg, #edf3f4, #dce7e7);
}

.gs-ux-wireframe__header {
  height: 9px;
  margin-bottom: 16px;
  border-radius: 2px;
  background: #e5eeee;
}

.gs-ux-wireframe i {
  display: block;
  width: 83%;
  height: 5px;
  margin: 7px 0;
  border-radius: 2px;
  background: #e1e9e9;
}

.gs-ux-wireframe i:nth-of-type(2) {
  width: 60%;
}

.gs-ux-wireframe span {
  display: block;
  margin-top: 12px;
  font-size: 9px;
}

.gs-ux-wireframe__check {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  margin: 16px auto 0;
  border-radius: 50%;
  background: #e1f9ed;
  color: #288a67;
}

.gs-ux-wireframe:has(.gs-ux-wireframe__check) span {
  margin-top: 15px;
}

/* Main interface board */

.gs-ux-interface__top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0 11px;
}

.gs-ux-interface__top>div:first-child {
  margin-right: auto;
}

.gs-ux-language {
  display: flex;
  overflow: hidden;
  border: 1px solid #dcece7;
  border-radius: 6px;
  background: #fff;
}

.gs-ux-language span {
  padding: 6px 10px;
  font-size: 9px;
  font-weight: 700;
}

.gs-ux-language span+span {
  border-left: 1px solid #e6efec;
}

.gs-ux-theme-toggle {
  margin-top: 4px;
  font-size: 21px;
  line-height: 1;
}

.gs-ux-app {
  display: grid;
  grid-template-columns: 26% 45% 29%;
  height: 388px;
  margin-top: 13px;
  padding: 14px 10px;
  background: #fff;
}

.gs-ux-app__sidebar {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 4px 5px;
  border-right: 1px solid #eef3f1;
}

.gs-ux-app__sidebar strong {
  margin-bottom: 10px;
  font-size: 10px;
}

.gs-ux-app__sidebar span {
  padding: 8px 7px;
  border-radius: 4px;
  color: #6e8080;
  font-size: 9px;
}

.gs-ux-app__sidebar span.active {
  background: #e3faee;
  color: #099f61;
}

.gs-ux-app__content {
  min-width: 0;
  padding: 9px 11px;
}

.gs-ux-app__content>small {
  color: #82918d;
  font-size: 9px;
}

.gs-ux-app__content h4 {
  margin: 6px 0 12px;
  font-size: 21px;
  line-height: 1.12;
  letter-spacing: -.045em;
}

.gs-ux-app__search {
  padding: 8px;
  border: 1px solid #e5eeee;
  border-radius: 15px;
  color: #a2aeaa;
  font-size: 9px;
}

.gs-ux-app__section-title {
  display: flex;
  justify-content: space-between;
  gap: 5px;
  margin: 18px 0 9px;
  font-size: 9px;
}

.gs-ux-app__section-title span {
  color: #82908e;
}

.gs-ux-app__actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.gs-ux-app__actions>div {
  display: flex;
  height: 70px;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 7px;
  border-radius: 5px;
  background: #f2faf8;
}

.gs-ux-app__actions b {
  color: #1ac786;
  font-size: 20px;
  line-height: 1;
}

.gs-ux-app__actions span {
  font-size: 7px;
  line-height: 1.2;
}

.gs-ux-app__activity-heading {
  display: block;
  margin: 17px 0 8px;
  font-size: 9px;
}

.gs-ux-activity {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 0;
  border-bottom: 1px solid #eff3f2;
  font-size: 8px;
  white-space: nowrap;
}

.gs-ux-activity i {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: #1dc782;
}

.gs-ux-activity:nth-last-child(2) i {
  background: #22a9b4;
}

.gs-ux-activity:last-child i {
  background: #2978bb;
}

.gs-ux-activity span {
  margin-left: auto;
  color: #91a09c;
  font-size: 7px;
}

.gs-ux-app__feature {
  position: relative;
  height: 152px;
  margin-top: 4px;
  overflow: hidden;
  border-radius: 5px;
  background: #ccf9e5;
}

.gs-ux-app__feature-art {
  position: absolute;
  inset: 0;
  background: url('../images/ux-feature-bg.jpg') center/cover no-repeat;
}

.gs-ux-app__feature strong {
  position: absolute;
  bottom: 21px;
  left: 25%;
  font-size: 12px;
  line-height: 1.25;
}

.gs-ux-app__feature>span {
  position: absolute;
  bottom: 15px;
  left: 25%;
  width: 22px;
  height: 2px;
  background: #285850;
}

.gs-ux-interface__note {
  position: absolute;
  right: 35px;
  bottom: 16px;
  color: #657f77;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-style: italic;
  line-height: 1.2;
}

/* Testing board */

.gs-ux-board--testing .gs-ux-board__subtitle {
  margin-bottom: 17px;
}

.gs-ux-metric {
  display: flex;
  min-height: 66px;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
  padding: 9px;
  border: 1px solid #e3ebea;
  border-radius: 7px;
}

.gs-ux-metric__symbol {
  color: #16c57b;
  font-size: 31px;
  line-height: 1;
}

.gs-ux-metric div {
  min-width: 0;
}

.gs-ux-metric div strong,
.gs-ux-metric div b,
.gs-ux-metric div small {
  display: block;
}

.gs-ux-metric div strong {
  font-size: 9px;
  white-space: nowrap;
}

.gs-ux-metric div b {
  margin-top: 3px;
  font-size: 21px;
  line-height: 1;
}

.gs-ux-metric div small {
  margin-top: 5px;
  color: #768885;
  font-size: 8px;
}

.gs-ux-metric>small {
  margin-left: auto;
  color: #13bd76;
  font-size: 9px;
  font-weight: 700;
  text-align: right;
}

.gs-ux-metric>small em {
  color: #82918e;
  font-size: 7px;
  font-style: normal;
  font-weight: 400;
}

.gs-ux-metric__approved {
  display: grid;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  place-items: center;
  margin-left: auto;
  border-radius: 50%;
  background: #19c77e;
  color: #fff;
  font-size: 13px;
}

.gs-ux-board--testing .gs-ux-scribble {
  right: 18px;
  bottom: 18px;
}

.gs-ux-ready {
  position: absolute;
  z-index: 3;
  top: 128px;
  right: 1.1%;
  display: flex;
  width: 111px;
  height: 53px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 5px;
  background: #94efbf;
  color: #174b38;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
  transform: rotate(4deg);
}

.gs-ux-ready span {
  font-size: 19px;
  font-weight: 400;
}

/* Closing line and button */

.gs-ux-footer {
  padding: 31px 0 4px;
  text-align: center;
}

.gs-ux-footer p {
  margin: 0;
  font-size: 20px;
  line-height: 1.4;
}

.gs-ux-footer a {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 17px;
  padding: 0 25px;
  border: 1px solid #8ca9a3;
  border-radius: 25px;
  color: #233b3e;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s, border-color .2s;
}

.gs-ux-footer a:hover {
  border-color: #16c878;
  background: #eefff6;
}

.gs-ux-footer a span {
  font-size: 19px;
  line-height: 1;
}

/* Tablet: readable two-column boards */

@media (max-width: 1100px) {
  .gs-ux-header>p:last-child {
    font-size: 16px;
  }

  .gs-ux-showcase {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
    height: auto;
    padding: 25px;
  }

  .gs-ux-journey,
  .gs-ux-label,
  .gs-ux-ready {
    display: none;
  }

  .gs-ux-board {
    position: relative;
    inset: auto;
    width: auto;
    height: 440px;
    transform: none;
  }

  .gs-ux-board--research,
  .gs-ux-board--wireframe,
  .gs-ux-board--interface,
  .gs-ux-board--testing {
    padding: 24px;
  }

  .gs-ux-board--interface {
    grid-column: 1 / -1;
    grid-row: 1;
    height: 500px;
  }

  .gs-ux-board--testing {
    grid-column: 1 / -1;
    height: 360px;
  }

  .gs-ux-board--testing .gs-ux-scribble {
    bottom: 12px;
  }

  .gs-ux-metric {
    max-width: 550px;
  }
}

/* Mobile: one board per row */

@media (max-width: 650px) {
  .gs-ux-container {
    width: min(100% - 32px, 440px);
    padding-top: 60px;
  }

  .gs-ux-eyebrow {
    font-size: 11px;
  }

  .gs-ux-header h2 {
    font-size: 36px;
    line-height: 1.1;
  }

  .gs-ux-header>p:last-child {
    font-size: 14px;
    line-height: 1.65;
  }

  .gs-ux-showcase {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px;
  }

  .gs-ux-board--research,
  .gs-ux-board--wireframe,
  .gs-ux-board--interface,
  .gs-ux-board--testing {
    width: 100%;
  }

  .gs-ux-board--research {
    height: 395px;
  }

  .gs-ux-board--wireframe {
    height: 390px;
  }

  .gs-ux-board--interface {
    height: 455px;
    padding: 15px 10px;
  }

  .gs-ux-board--testing {
    height: 365px;
  }

  .gs-ux-interface__top {
    padding: 0 5px;
  }

  .gs-ux-interface__top h3 {
    font-size: 17px;
  }

  .gs-ux-language span {
    padding: 5px;
    font-size: 8px;
  }

  .gs-ux-app {
    grid-template-columns: 25% 48% 27%;
    height: 365px;
    padding: 9px 3px;
  }

  .gs-ux-app__sidebar span {
    padding: 6px 2px;
    font-size: 7px;
  }

  .gs-ux-app__sidebar strong {
    font-size: 8px;
  }

  .gs-ux-app__content {
    padding: 8px 5px;
  }

  .gs-ux-app__content h4 {
    font-size: 17px;
  }

  .gs-ux-app__actions>div {
    height: 62px;
    padding: 3px;
  }

  .gs-ux-app__actions span {
    font-size: 6px;
  }

  .gs-ux-app__feature {
    height: 125px;
  }

  .gs-ux-app__feature strong {
    left: 12%;
    font-size: 9px;
  }

  .gs-ux-interface__note {
    right: 15px;
    bottom: 12px;
    font-size: 10px;
  }

  .gs-ux-footer {
    padding-top: 25px;
  }

  .gs-ux-footer p {
    font-size: 16px;
  }
}

/* =========================================================
   GROWTHSPELL — FEATURES & INTEGRATIONS
========================================================= */

.gs-integrations,
.gs-integrations * {
  box-sizing: border-box;
}

.gs-integrations {
  --gs-int-dark: #103c33;
  --gs-int-green: #35e49a;
  --gs-int-ink: #17272c;
  --gs-int-muted: #637077;

  width: 100%;
  overflow: hidden;
  background: #fff;
  color: var(--gs-int-ink);
  font-family: "Inter", sans-serif;
}

.gs-integrations__container {
  width: min(100% - 60px, 1300px);
  margin: 0 auto;
  padding: 32px 0 45px;
}

/* Heading */

.gs-integrations__header {
  max-width: 1220px;
  margin: 0 auto 18px;
  text-align: center;
}

.gs-integrations__eyebrow {
  margin: 0 0 16px;
  color: #168054;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .19em;
  text-transform: uppercase;
}

.gs-integrations__header h2 {
  margin: 0;
  font-size: clamp(30px, 2.65vw, 42px);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -.045em;
}

.gs-integrations__header>p:last-child {
  max-width: 1060px;
  margin: 11px auto 0;
  color: var(--gs-int-muted);
  font-size: 19px;
  line-height: 1.55;
}

/* Diagram shell */

.gs-integrations__diagram {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px minmax(0, 1fr);
  gap: 38px;
  height: 586px;
  padding: 38px 53px 73px;
  overflow: hidden;
  border-radius: 15px;
  background:
    radial-gradient(circle at 50% 47%, rgba(15, 102, 76, .25), transparent 55%),
    #103c33;
  color: #fff;
}

.gs-integrations__wires {
  position: absolute;
  z-index: 0;
  top: 49px;
  left: 2.8%;
  width: 94.4%;
  height: 480px;
  overflow: visible;
  pointer-events: none;
}

.gs-integrations__wires path {
  fill: none;
  stroke: #50d8a4;
  stroke-width: 1.5;
  opacity: .75;
}

.gs-integrations__glows circle {
  fill: #45efaa;
  filter: url(#gs-integrations-glow);
}

.gs-integrations__dots circle {
  fill: #94ffd0;
}

.gs-integrations__side,
.gs-integrations__center {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.gs-integrations__side h3,
.gs-integrations__center h3 {
  height: 34px;
  margin: 0;
  color: #dfefe9;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .23em;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
}

.gs-integrations__side {
  display: grid;
  grid-template-rows: 34px repeat(5, 87px);
}

.gs-integrations__side--left h3 {
  padding-right: 95px;
}

.gs-integrations__side--right h3 {
  padding-left: 95px;
  text-align: right;
}

/* Items on either side */

.gs-integration-item {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 28px;
}

.gs-integrations__side--right .gs-integration-item {
  flex-direction: row-reverse;
  text-align: right;
  padding-left: 0;
}

.gs-integration-item__icon {
  display: grid;
  width: 47px;
  height: 47px;
  flex: 0 0 47px;
  place-items: center;
  color: #ebfff6;
}

.gs-integration-item__icon svg {
  display: block;
  width: 39px;
  height: 39px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gs-integration-item strong,
.gs-integration-item div>span {
  display: block;
}

.gs-integration-item strong {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

.gs-integration-item div>span {
  margin-top: 3px;
  color: #b8cdc7;
  font-size: 13px;
  line-height: 1.3;
}

/* Center app */

.gs-integrations__center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gs-integrations__center h3 {
  width: 100%;
}

.gs-connected-app {
  width: 216px;
  height: 426px;
  padding: 27px 23px 19px;
  border-radius: 15px;
  background: linear-gradient(165deg, #ecfff7, #ddfff0);
  box-shadow: 0 17px 35px rgba(0, 19, 15, .1);
  color: #183235;
}

.gs-connected-app h4 {
  margin: 0 0 18px;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

.gs-connected-app__screen {
  height: 193px;
  padding: 17px 15px;
  border-radius: 11px;
  background: #fff;
}

.gs-connected-app__top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gs-connected-app__top>i {
  display: block;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 7px;
  background: linear-gradient(140deg, #22ba82, #077b5d);
}

.gs-connected-app__top>div {
  display: grid;
  width: 100%;
  gap: 8px;
}

.gs-connected-app__top>div span,
.gs-connected-app__lines span {
  display: block;
  height: 7px;
  border-radius: 8px;
  background: #d0ebe2;
}

.gs-connected-app__top>div span:last-child {
  width: 75%;
}

.gs-connected-app__banner {
  height: 35px;
  margin-top: 15px;
  border-radius: 7px;
  background: #d8f4e9;
}

.gs-connected-app__tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 10px;
}

.gs-connected-app__tiles span {
  height: 32px;
  border-radius: 7px;
  background: #ddf7ed;
}

.gs-connected-app__lines {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.gs-connected-app__lines span:last-child {
  width: 68%;
}

.gs-connected-app ul {
  display: grid;
  gap: 10px;
  margin: 17px 0 0;
  padding: 0 0 0 17px;
  list-style: none;
}

.gs-connected-app li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
}

.gs-connected-app li span {
  display: grid;
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  place-items: center;
  border-radius: 50%;
  background: #1eaa76;
  color: #fff;
  font-size: 12px;
}

/* Sentence along bottom edge */

.gs-integrations__diagram-footer {
  position: absolute;
  right: 38px;
  bottom: 23px;
  left: 38px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.gs-integrations__diagram-footer span {
  height: 1px;
  flex: 1;
  background: rgba(162, 225, 199, .38);
}

.gs-integrations__diagram-footer p {
  margin: 0;
  color: #b9d3c9;
  font-size: 15px;
  letter-spacing: .015em;
  text-align: center;
  white-space: nowrap;
}

/* Three benefits */

.gs-integrations__benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 35px;
  margin: 35px auto 0;
  padding: 0 68px;
}

.gs-integration-benefit {
  display: flex;
  align-items: center;
  gap: 21px;
}

.gs-integration-benefit__icon {
  display: grid;
  width: 65px;
  height: 65px;
  flex: 0 0 65px;
  place-items: center;
  border-radius: 50%;
  background: #e3fbf1;
  color: #09825c;
  font-size: 30px;
  font-weight: 500;
}

.gs-integration-benefit strong {
  display: block;
  font-size: 16px;
  line-height: 1.3;
}

.gs-integration-benefit p {
  margin: 4px 0 0;
  color: #657277;
  font-size: 13px;
  line-height: 1.4;
}

.gs-integrations__cta {
  display: flex;
  width: max-content;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 17px;
  margin: 32px auto 0;
  padding: 0 30px;
  border: 1px solid #478e75;
  border-radius: 28px;
  color: #145540;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s, transform .2s;
}

.gs-integrations__cta:hover {
  background: #e9fff4;
  transform: translateY(-2px);
}

.gs-integrations__cta span {
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1150px) {
  .gs-integrations__diagram {
    grid-template-columns: minmax(0, 1fr) 220px minmax(0, 1fr);
    gap: 14px;
    padding-right: 24px;
    padding-left: 24px;
  }

  .gs-integrations__side--left h3,
  .gs-integrations__side--right h3 {
    padding: 0;
  }

  .gs-integration-item {
    gap: 9px;
  }

  .gs-integrations__side--right .gs-integration-item {
    padding-left: 0;
  }

  .gs-integration-item strong {
    font-size: 13px;
  }

  .gs-integration-item div>span {
    font-size: 11px;
  }

  .gs-integration-item__icon {
    width: 35px;
    flex-basis: 35px;
  }

  .gs-integration-item__icon svg {
    width: 29px;
    height: 29px;
  }

  .gs-integrations__benefits {
    gap: 18px;
    padding: 0;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {
  .gs-integrations__container {
    width: min(100% - 32px, 520px);
    padding: 55px 0;
  }

  .gs-integrations__header {
    margin-bottom: 25px;
  }

  .gs-integrations__eyebrow {
    font-size: 11px;
  }

  .gs-integrations__header h2 {
    font-size: clamp(31px, 7.4vw, 39px);
  }

  .gs-integrations__header>p:last-child {
    font-size: 14px;
    line-height: 1.6;
  }

  .gs-integrations__diagram {
    display: flex;
    height: auto;
    flex-direction: column;
    gap: 26px;
    padding: 27px 22px 26px;
  }

  .gs-integrations__wires {
    display: none;
  }

  .gs-integrations__center {
    order: -1;
  }

  .gs-integrations__side {
    display: grid;
    grid-template-rows: none;
    gap: 14px;
  }

  .gs-integrations__side h3,
  .gs-integrations__center h3 {
    height: auto;
    margin-bottom: 12px;
    font-size: 11px;
    text-align: center;
  }

  .gs-connected-app {
    width: 216px;
    height: 426px;
  }

  .gs-integration-item {
    gap: 15px;
    padding: 0 5px;
  }

  .gs-integrations__side--right .gs-integration-item {
    flex-direction: row;
    text-align: left;
    padding-left: 5px;
  }

  .gs-integration-item__icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .gs-integration-item__icon svg {
    width: 32px;
    height: 32px;
  }

  .gs-integration-item strong {
    font-size: 14px;
  }

  .gs-integration-item div>span {
    font-size: 12px;
  }

  .gs-integrations__diagram-footer {
    position: static;
    order: 5;
    display: block;
    padding-top: 18px;
    border-top: 1px solid rgba(162, 225, 199, .38);
  }

  .gs-integrations__diagram-footer span {
    display: none;
  }

  .gs-integrations__diagram-footer p {
    font-size: 13px;
    line-height: 1.5;
    white-space: normal;
  }

  .gs-integrations__benefits {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-top: 10px;
    padding: 0 7px;
  }

  .gs-integration-benefit {
    gap: 16px;
  }

  .gs-integration-benefit__icon {
    width: 54px;
    height: 54px;
    flex-basis: 54px;
    font-size: 25px;
  }

  .gs-integrations__cta {
    margin-top: 31px;
    font-size: 13px;
  }
}

/* =========================================================
   GROWTHSPELL — HOW WE BUILD
========================================================= */

.gs-build-process,
.gs-build-process * {
  box-sizing: border-box;
}

.gs-build-process {
  --gs-build-ink: #172a2d;
  --gs-build-muted: #647278;
  --gs-build-dark: #0b382f;
  --gs-build-green: #1cc985;

  width: 100%;
  overflow: hidden;
  background: #fff;
  color: var(--gs-build-ink);
  font-family: "Inter", sans-serif;
}

.gs-build-process__container {
  width: min(100% - 90px, 1300px);
  margin: 0 auto;
  padding: 33px 0 35px;
}

/* Heading */

.gs-build-process__header {
  margin-bottom: 29px;
  text-align: center;
}

.gs-build-process__eyebrow {
  margin: 0 0 16px;
  color: #48716c;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .32em;
  text-transform: uppercase;
}

.gs-build-process__header h2 {
  margin: 0;
  font-size: clamp(30px, 2.8vw, 43px);
  font-weight: 800;
  line-height: 1.17;
  letter-spacing: -.045em;
}

.gs-build-process__header>p:last-child {
  margin: 10px 0 0;
  color: var(--gs-build-muted);
  font-size: 17px;
  line-height: 1.5;
}

/* Three aligned panels */

.gs-build-process__board {
  display: grid;
  grid-template-columns: 26.5% 47% 26.5%;
  min-height: 577px;
  overflow: hidden;
  border: 1px solid #dce6e6;
  border-radius: 7px;
  background: #fff;
}

.gs-build-process__roadmap,
.gs-build-process__active,
.gs-build-process__visibility {
  min-width: 0;
  padding: 30px;
}

.gs-build-process__roadmap h3,
.gs-build-process__visibility h3 {
  margin: 0 0 20px;
  font-size: 23px;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -.035em;
}

/* Left roadmap */

.gs-build-process__roadmap {
  display: flex;
  flex-direction: column;
}

.gs-build-process__stages {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gs-build-process__stages li {
  display: flex;
  min-height: 53px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 4px;
  border-top: 1px solid #e3e9e9;
  color: #657177;
  font-size: 16px;
  line-height: 1.2;
}

.gs-build-process__stages li.is-complete {
  color: #263b3e;
}

.gs-build-process__stages li.is-current {
  min-height: 52px;
  margin: 0 -10px;
  padding: 0 14px;
  border: 0;
  border-radius: 5px;
  background: #0b3e35;
  color: #fff;
}

.gs-stage-status {
  color: #14bb72;
  font-size: 23px;
  font-weight: 500;
}

.is-current .gs-stage-status {
  color: #d8eee6;
  font-size: 29px;
  line-height: 1;
}

.gs-build-process__stage-caption {
  margin: auto 0 0;
  padding-top: 20px;
  border-top: 1px solid #e1e9e8;
  color: #7c9191;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.gs-build-process__stage-caption span {
  margin: 0 3px;
}

/* Center panel */

.gs-build-process__active {
  background:
    radial-gradient(circle at 55% 50%, rgba(29, 118, 81, .13), transparent 65%),
    var(--gs-build-dark);
  color: #fff;
}

.gs-build-process__active-eyebrow {
  margin: 5px 0 10px;
  color: #c1d8cf;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .25em;
  text-transform: uppercase;
}

.gs-build-process__active h3 {
  margin: 0;
  font-size: clamp(26px, 2.5vw, 36px);
  font-weight: 750;
  line-height: 1.18;
  letter-spacing: -.04em;
}

.gs-build-process__active-description {
  max-width: 570px;
  margin: 9px 0 18px;
  color: #b9d0c9;
  font-size: 16px;
  line-height: 1.45;
}

.gs-build-process__components {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.gs-build-component {
  display: flex;
  min-height: 85px;
  align-items: flex-start;
  gap: 11px;
  padding: 15px 13px;
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 6px;
  background: #f5fffa;
  color: #1b3235;
}

.gs-build-component--interface {
  border-top: 3px solid #65a9dc;
}

.gs-build-component--logic {
  border-top: 3px solid #a69be5;
}

.gs-build-component--integrations {
  border-top: 3px solid #e8b96c;
}

.gs-build-component__icon {
  width: 34px;
  flex: 0 0 34px;
  color: #245158;
}

.gs-build-component__icon svg {
  display: block;
  width: 29px;
  height: 29px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.gs-build-component--interface .gs-build-component__icon {
  color: #518fca;
}

.gs-build-component--logic .gs-build-component__icon {
  color: #8b77d2;
}

.gs-build-component--integrations .gs-build-component__icon {
  color: #b48137;
}

.gs-build-component strong,
.gs-build-component div>span {
  display: block;
}

.gs-build-component strong {
  font-size: 14px;
  font-weight: 700;
}

.gs-build-component div>span {
  margin-top: 4px;
  color: #66777a;
  font-size: 11px;
  line-height: 1.35;
}

/* Lines converging toward working build */

.gs-build-process__connector {
  position: relative;
  width: 68%;
  height: 45px;
  margin: 0 auto;
  border-right: 1px solid #48b890;
  border-bottom: 1px solid #48b890;
  border-left: 1px solid #48b890;
  border-radius: 0 0 10px 10px;
}

.gs-build-process__connector::after {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1px;
  height: 17px;
  background: #48b890;
  content: "";
}

.gs-build-process__connector span {
  position: absolute;
  top: -2px;
  height: 2px;
  background: #48b890;
}

.gs-build-process__connector span:nth-child(1) {
  left: 0;
  width: 1px;
}

.gs-build-process__connector span:nth-child(2) {
  left: 50%;
  height: 45px;
  width: 1px;
}

.gs-build-process__connector span:nth-child(3) {
  right: 0;
  width: 1px;
}

.gs-build-process__output {
  display: flex;
  width: min(100%, 300px);
  min-height: 73px;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin: 18px auto 0;
  padding: 11px 16px;
  border-radius: 6px;
  background: linear-gradient(105deg, #4bdda3, #2fce8f);
  color: #063e31;
}

.gs-build-process__output-icon svg {
  display: block;
  width: 34px;
  height: 34px;
  fill: none;
  stroke: #0b664e;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.gs-build-process__output strong,
.gs-build-process__output div>span {
  display: block;
}

.gs-build-process__output strong {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.gs-build-process__output div>span {
  margin-top: 4px;
  color: #226c55;
  font-size: 10px;
}

/* Three sprint checkpoints */

.gs-build-process__sprint {
  position: relative;
  display: flex;
  width: 75%;
  justify-content: space-between;
  margin: 23px auto 0;
}

.gs-build-process__sprint-track {
  position: absolute;
  z-index: 0;
  top: 11px;
  right: 10px;
  left: 10px;
  height: 1px;
  background: rgba(209, 234, 223, .55);
}

.gs-build-process__sprint-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #d7e6e0;
}

.gs-build-process__sprint-step>span {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border: 2px solid #90aca2;
  border-radius: 50%;
  background: var(--gs-build-dark);
  color: #fff;
  font-size: 12px;
}

.gs-build-process__sprint-step.is-done>span {
  border-color: #50dca2;
  background: #50dca2;
}

.gs-build-process__sprint-step.is-active>span {
  border-color: #66f0b4;
  box-shadow: 0 0 0 4px rgba(102, 240, 180, .16);
}

.gs-build-process__sprint-step small {
  font-size: 11px;
  white-space: nowrap;
}

.gs-build-process__receive {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(214, 238, 224, .45);
}

.gs-build-process__receive p {
  margin: 0 0 8px;
  color: #c2d7d0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .19em;
  text-transform: uppercase;
}

.gs-build-process__receive strong {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
}

/* Right panel */

.gs-build-process__visibility {
  display: flex;
  flex-direction: column;
}

.gs-build-process__fact {
  display: flex;
  min-height: 93px;
  align-items: center;
  gap: 27px;
  border-bottom: 1px solid #dfe7e7;
}

.gs-build-process__fact:nth-of-type(3) {
  border-bottom: 0;
}

.gs-build-process__fact-icon {
  width: 45px;
  flex: 0 0 45px;
  color: #2c5555;
}

.gs-build-process__fact-icon svg {
  display: block;
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.gs-build-process__fact strong,
.gs-build-process__fact div>span {
  display: block;
}

.gs-build-process__fact strong {
  font-size: 14px;
  font-weight: 700;
}

.gs-build-process__fact div>span {
  margin-top: 6px;
  color: #67747a;
  font-size: 15px;
}

.gs-build-process__fact div>span.is-on-track {
  color: #16aa6c;
  font-weight: 700;
}

.gs-build-process__up-next {
  margin-top: 15px;
  padding: 22px 23px;
  border-radius: 5px;
  background: linear-gradient(115deg, #ebfff5, #effcfb);
}

.gs-build-process__up-next span {
  display: block;
  margin-bottom: 6px;
  color: #62837b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.gs-build-process__up-next strong {
  display: block;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
}

.gs-build-process__plan-link {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid #dfe7e7;
  color: #344e51;
  font-size: 14px;
  text-decoration: none;
}

.gs-build-process__plan-link:hover {
  color: #0b9b63;
}

.gs-build-process__plan-link span {
  font-size: 22px;
  line-height: 1;
}

/* Deliverables under board */

.gs-build-process__deliverables {
  padding: 28px 5px 0;
}

.gs-build-process__deliverables>p {
  margin: 0 0 17px;
  color: #4e666a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .19em;
  text-transform: uppercase;
}

.gs-build-process__deliverable-list {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.gs-build-process__deliverable-list span {
  padding: 2px 16px;
  border-right: 1px solid #dce5e6;
  color: #647177;
  font-size: 13px;
  text-align: center;
  white-space: nowrap;
}

.gs-build-process__deliverable-list span:first-child {
  padding-left: 0;
  text-align: left;
}

.gs-build-process__deliverable-list span:last-child {
  border-right: 0;
  padding-right: 0;
  text-align: right;
}

.gs-build-process__deliverable-list .is-highlighted {
  color: #0aaa69;
  font-weight: 800;
}

/* Closing CTA */

.gs-build-process__closing {
  margin-top: 51px;
  text-align: center;
}

.gs-build-process__closing h3 {
  margin: 0;
  font-size: 25px;
  font-weight: 750;
  letter-spacing: -.035em;
}

.gs-build-process__closing a {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-top: 17px;
  padding: 0 27px;
  border-radius: 5px;
  background: #0b3b32;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s, transform .2s;
}

.gs-build-process__closing a:hover {
  background: #126d50;
  transform: translateY(-2px);
}

.gs-build-process__closing a span {
  font-size: 20px;
  line-height: 1;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1200px) {
  .gs-build-process__container {
    width: min(100% - 48px, 1050px);
  }

  .gs-build-process__board {
    grid-template-columns: 27% 46% 27%;
  }

  .gs-build-process__roadmap,
  .gs-build-process__active,
  .gs-build-process__visibility {
    padding: 22px;
  }

  .gs-build-process__roadmap h3,
  .gs-build-process__visibility h3 {
    font-size: 19px;
  }

  .gs-build-process__stages li {
    font-size: 13px;
  }

  .gs-build-process__components {
    gap: 7px;
  }

  .gs-build-component {
    flex-direction: column;
    gap: 5px;
    padding: 9px;
  }

  .gs-build-process__fact {
    gap: 10px;
  }

  .gs-build-process__fact-icon {
    width: 32px;
    flex-basis: 32px;
  }

  .gs-build-process__fact-icon svg {
    width: 27px;
    height: 27px;
  }

  .gs-build-process__deliverable-list span {
    padding-right: 7px;
    padding-left: 7px;
    font-size: 11px;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 850px) {
  .gs-build-process__container {
    width: min(100% - 32px, 600px);
    padding: 55px 0;
  }

  .gs-build-process__header {
    margin-bottom: 26px;
  }

  .gs-build-process__eyebrow {
    font-size: 11px;
  }

  .gs-build-process__header h2 {
    font-size: clamp(31px, 7vw, 42px);
  }

  .gs-build-process__header>p:last-child {
    font-size: 14px;
    line-height: 1.6;
  }

  .gs-build-process__board {
    display: flex;
    flex-direction: column;
  }

  .gs-build-process__roadmap,
  .gs-build-process__active,
  .gs-build-process__visibility {
    padding: 24px;
  }

  .gs-build-process__roadmap h3,
  .gs-build-process__visibility h3 {
    font-size: 21px;
  }

  .gs-build-process__stages li {
    min-height: 45px;
    font-size: 14px;
  }

  .gs-build-process__stage-caption {
    margin-top: 18px;
  }

  .gs-build-process__components {
    gap: 8px;
  }

  .gs-build-component {
    min-height: 91px;
  }

  .gs-build-component strong {
    font-size: 12px;
  }

  .gs-build-component div>span {
    font-size: 10px;
  }

  .gs-build-process__active-description {
    font-size: 14px;
  }

  .gs-build-process__sprint {
    width: 86%;
  }

  .gs-build-process__receive {
    margin-top: 25px;
  }

  .gs-build-process__visibility {
    gap: 0;
  }

  .gs-build-process__plan-link {
    margin-top: 23px;
  }

  .gs-build-process__deliverable-list {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
  }

  .gs-build-process__deliverable-list span,
  .gs-build-process__deliverable-list span:first-child,
  .gs-build-process__deliverable-list span:last-child {
    padding: 8px 11px;
    border: 1px solid #e0e8e7;
    border-radius: 20px;
    font-size: 12px;
    text-align: center;
  }

  .gs-build-process__deliverable-list .is-highlighted {
    border-color: #b4ebd2;
    background: #eafff4;
  }

  .gs-build-process__closing {
    margin-top: 38px;
  }

  .gs-build-process__closing h3 {
    font-size: 22px;
  }
}

@media (max-width: 390px) {
  .gs-build-process__active {
    padding: 19px 14px;
  }

  .gs-build-process__components {
    gap: 5px;
  }

  .gs-build-component {
    padding: 7px 5px;
  }

  .gs-build-component strong {
    font-size: 11px;
  }

  .gs-build-component div>span {
    font-size: 9px;
  }

  .gs-build-process__sprint {
    width: 96%;
  }

  .gs-build-process__sprint-step small {
    font-size: 9px;
  }
}

/* =========================================================
   GROWTHSPELL TECHNOLOGY STACK
========================================================= */

.gs-tech-stack,
.gs-tech-stack * {
  box-sizing: border-box;
}

.gs-tech-stack {
  --tech-ink: #18292d;
  --tech-muted: #647278;
  --tech-green: #3eaa7a;
  width: 100%;
  overflow: hidden;
  background: #fff;
  color: var(--tech-ink);
  font-family: "Inter", sans-serif;
}

.gs-tech-stack__container {
  width: min(100% - 40px, 1300px);
  margin: 0 auto;
  padding: 34px 0 18px;
}

/* Section header */

.gs-tech-stack__header {
  max-width: 1250px;
  margin: 0 auto 36px;
  text-align: center;
}

.gs-tech-stack__eyebrow {
  margin: 0 0 15px;
  color: #268e61;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .19em;
  text-transform: uppercase;
}

.gs-tech-stack__header h2 {
  margin: 0;
  font-size: clamp(31px, 2.8vw, 45px);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -.048em;
}

.gs-tech-stack__header>p:last-child {
  margin: 9px 0 0;
  color: var(--tech-muted);
  font-size: 18px;
  line-height: 1.5;
}

/* Mint background canvas */

.gs-tech-stack__canvas {
  position: relative;
  height: 750px;
  overflow: hidden;
  border: 1px solid #ccece0;
  border-radius: 15px;
  background:
    radial-gradient(circle at 50% 52%, rgba(197, 247, 222, .42), transparent 44%),
    #f2fff9;
}

.gs-tech-stack__topline {
  position: absolute;
  top: 16px;
  right: 18%;
  left: 4%;
  display: flex;
  justify-content: space-between;
  color: #879a9d;
  font-size: 13px;
}

.gs-tech-stack__topline>span {
  display: flex;
  align-items: center;
  gap: 9px;
}

.gs-tech-stack__topline svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #93a9ab;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gs-tech-stack__badge {
  position: absolute;
  z-index: 4;
  top: -1px;
  right: -1px;
  display: flex;
  height: 46px;
  align-items: center;
  gap: 9px;
  padding: 0 18px;
  border: 1px solid #b7e9d1;
  border-radius: 19px 14px 0 19px;
  background: #f1fff8;
  color: #31594c;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .065em;
  text-transform: uppercase;
}

.gs-tech-stack__badge svg {
  width: 22px;
  height: 22px;
  fill: #389d70;
  stroke: #389d70;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gs-tech-stack__badge svg path:last-child {
  fill: none;
  stroke: #fff;
}

.gs-tech-stack__canvas-title {
  position: absolute;
  z-index: 2;
  top: 53px;
  left: 50%;
  width: max-content;
  margin: 0;
  color: #657b80;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .23em;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.gs-tech-stack__connections {
  position: absolute;
  z-index: 1;
  top: 106px;
  left: 2.4%;
  width: 95.2%;
  height: 630px;
  pointer-events: none;
}

.gs-tech-stack__connections path {
  fill: none;
  stroke: #6bc69a;
  stroke-width: 1.6;
}

.gs-tech-stack__connection-dots {
  fill: #42ab7c;
}

/* Three-column content */

.gs-tech-stack__layout {
  position: absolute;
  z-index: 2;
  top: 89px;
  right: 3.3%;
  bottom: 28px;
  left: 3.3%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 510px minmax(0, 1fr);
  gap: 42px;
}

.gs-tech-stack__group {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px 0 31px;
}

.gs-tech-item {
  display: flex;
  min-height: 155px;
  align-items: flex-start;
  gap: 23px;
}

.gs-tech-item__icon {
  display: grid;
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
  place-items: center;
  border: 1px solid #d5eee4;
  border-radius: 13px;
  background: rgba(255, 255, 255, .32);
}

.gs-tech-item__icon svg {
  width: 35px;
  height: 35px;
  fill: none;
  stroke: #2e4950;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gs-tech-item__label {
  margin: 5px 0 11px;
  color: #4c646b;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.3;
  text-transform: uppercase;
}

.gs-tech-item h3 {
  margin: 0;
  font-size: 21px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -.025em;
}

.gs-tech-item__tools {
  margin: 6px 0 0;
  color: #5d6c72;
  font-size: 15px;
  line-height: 1.4;
}

.gs-tech-item__pill {
  display: inline-block;
  margin-top: 17px;
  padding: 7px 15px;
  border-radius: 22px;
  background: #daf5e8;
  color: #356a54;
  font-size: 14px;
  line-height: 1.2;
}

.gs-tech-stack__group--right .gs-tech-item {
  padding-left: 0;
}

/* Center app preview */

.gs-tech-stack__app {
  align-self: stretch;
  overflow: hidden;
  border: 1px solid #e3edef;
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 17px 35px rgba(42, 113, 82, .08);
}

.gs-tech-app__navigation {
  display: flex;
  height: 59px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 21px;
}

.gs-tech-app__brand {
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.gs-tech-app__brand span {
  margin-right: 7px;
  color: #48b37a;
  font-size: 20px;
  vertical-align: middle;
}

.gs-tech-app__navigation nav {
  display: flex;
  height: 100%;
  align-items: center;
  gap: 18px;
}

.gs-tech-app__navigation nav span {
  display: flex;
  height: 100%;
  align-items: center;
  color: #5b6d73;
  font-size: 12px;
}

.gs-tech-app__navigation nav .is-selected {
  border-bottom: 3px solid #70c99d;
  color: #24383b;
}

.gs-tech-app__online {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid #edf4f0;
  border-radius: 15px;
  color: #56846d;
  font-size: 10px;
}

.gs-tech-app__online i,
.gs-tech-app__footer strong i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #37b77c;
}

.gs-tech-app__hero {
  position: relative;
  display: flex;
  height: 122px;
  justify-content: space-between;
  overflow: hidden;
  margin: 0 17px;
  padding: 19px;
  border-radius: 10px;
  background: #edfff7;
}

.gs-tech-app__hero h3 {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -.035em;
}

.gs-tech-app__hero p {
  position: relative;
  z-index: 2;
  margin: 6px 0 0;
  color: #5f7474;
  font-size: 11px;
}

.gs-tech-app__landscape {
  position: absolute;
  inset: 0 0 0 44%;
  overflow: hidden;
}

.gs-tech-app__sun {
  position: absolute;
  top: 27px;
  right: 38px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #ffdfa2;
}

.gs-tech-app__hill {
  position: absolute;
  right: -25px;
  bottom: -48px;
  width: 250px;
  height: 103px;
  border-radius: 50%;
  transform: rotate(-11deg);
}

.gs-tech-app__hill--back {
  bottom: -35px;
  background: #cef1de;
}

.gs-tech-app__hill--front {
  right: -60px;
  background: #9dddb8;
}

.gs-tech-app__plant {
  position: absolute;
  right: 95px;
  bottom: 25px;
  width: 3px;
  height: 45px;
  background: #64b987;
}

.gs-tech-app__plant::before,
.gs-tech-app__plant::after {
  position: absolute;
  width: 22px;
  height: 12px;
  border-radius: 100% 0 100% 0;
  background: #66bf8c;
  content: "";
}

.gs-tech-app__plant::before {
  top: 10px;
  left: -22px;
  transform: rotate(42deg);
}

.gs-tech-app__plant::after {
  top: 1px;
  right: -20px;
  transform: rotate(-35deg);
}

.gs-tech-app__focus {
  display: flex;
  min-height: 93px;
  align-items: center;
  gap: 12px;
  margin: 13px 17px 0;
  padding: 14px 17px;
  border: 1px solid #edf0f0;
  border-radius: 10px;
}

.gs-tech-app__focus-icon {
  align-self: flex-start;
  color: #39ae75;
  font-size: 25px;
  line-height: 1;
}

.gs-tech-app__focus strong {
  font-size: 13px;
}

.gs-tech-app__focus p {
  margin: 5px 0 0;
  color: #63747a;
  font-size: 12px;
  line-height: 1.3;
}

.gs-tech-app__fake-button {
  display: inline-flex;
  min-height: 35px;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  padding: 0 17px;
  border-radius: 6px;
  background: #3daf7d;
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
}

.gs-tech-app__fake-button b {
  font-size: 17px;
  font-weight: 400;
}

.gs-tech-app__progress {
  margin: 13px 17px 0;
  padding: 12px 10px;
  border: 1px solid #edf0f0;
  border-radius: 10px;
}

.gs-tech-app__progress-heading {
  display: flex;
  justify-content: space-between;
  padding: 0 2px;
}

.gs-tech-app__progress-heading strong {
  font-size: 13px;
}

.gs-tech-app__progress-heading span {
  color: #65777c;
  font-size: 11px;
}

.gs-tech-app__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 9px;
}

.gs-tech-app__stats>div {
  display: grid;
  grid-template-columns: 29px 1fr;
  align-content: center;
  min-height: 69px;
  padding: 9px;
  border: 1px solid #eaf0ee;
  border-radius: 8px;
}

.gs-tech-app__stats b {
  grid-row: span 2;
  color: #46af80;
  font-size: 23px;
  line-height: 1;
}

.gs-tech-app__stats strong {
  font-size: 15px;
}

.gs-tech-app__stats small {
  color: #67787b;
  font-size: 9px;
  white-space: nowrap;
}

.gs-tech-app__assistant {
  margin: 13px 17px 0;
  padding: 14px 17px;
  border: 1px solid #eaf0f0;
  border-radius: 10px;
  background: #fafcff;
}

.gs-tech-app__assistant-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.gs-tech-app__assistant-heading strong {
  font-size: 13px;
}

.gs-tech-app__assistant-heading strong span {
  color: #758de9;
  font-size: 19px;
}

.gs-tech-app__assistant-heading small {
  color: #5d9ca2;
  font-size: 10px;
}

.gs-tech-app__assistant-input {
  display: flex;
  height: 39px;
  align-items: center;
  gap: 14px;
  margin-top: 9px;
  padding-left: 16px;
  border: 1px solid #e6eded;
  border-radius: 21px;
  background: #fff;
  color: #7b8b91;
  font-size: 11px;
}

.gs-tech-app__assistant-input span:nth-child(2) {
  margin-left: auto;
  font-size: 18px;
}

.gs-tech-app__assistant-input b {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  margin-right: 3px;
  border-radius: 50%;
  background: #d9e5ea;
  color: #fff;
  font-size: 18px;
}

.gs-tech-app__footer {
  display: flex;
  min-height: 43px;
  align-items: center;
  gap: 10px;
  margin: 14px 17px 0;
  padding: 0 12px;
  border: 1px solid #edf1f0;
  border-radius: 9px;
  color: #617176;
  font-size: 11px;
}

.gs-tech-app__footer span:nth-child(2) {
  margin-left: auto;
}

.gs-tech-app__footer strong {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 15px;
  background: #e6f8ed;
  color: #227b55;
  font-size: 11px;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1300px) {
  .gs-tech-stack__layout {
    right: 2%;
    left: 2%;
    grid-template-columns: minmax(0, 1fr) 430px minmax(0, 1fr);
    gap: 18px;
  }

  .gs-tech-item {
    gap: 10px;
  }

  .gs-tech-item__icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  .gs-tech-item__icon svg {
    width: 29px;
    height: 29px;
  }

  .gs-tech-item h3 {
    font-size: 18px;
  }

  .gs-tech-item__tools {
    font-size: 12px;
  }

  .gs-tech-item__pill {
    font-size: 11px;
  }

  .gs-tech-app__navigation {
    padding: 0 12px;
  }

  .gs-tech-app__navigation nav {
    gap: 9px;
  }
}

@media (max-width: 1000px) {
  .gs-tech-stack__canvas {
    height: auto;
    padding: 90px 24px 28px;
  }

  .gs-tech-stack__topline,
  .gs-tech-stack__connections {
    display: none;
  }

  .gs-tech-stack__canvas-title {
    top: 32px;
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
  }

  .gs-tech-stack__layout {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
  }

  .gs-tech-stack__app {
    grid-column: 1 / -1;
    grid-row: 1;
    width: min(100%, 510px);
    min-height: 628px;
    justify-self: center;
  }

  .gs-tech-stack__group {
    gap: 23px;
    padding: 0;
  }

  .gs-tech-item {
    min-height: 135px;
  }

  .gs-tech-stack__badge {
    top: 0;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {
  .gs-tech-stack__container {
    width: min(100% - 32px, 460px);
    padding-top: 55px;
  }

  .gs-tech-stack__eyebrow {
    font-size: 11px;
  }

  .gs-tech-stack__header h2 {
    font-size: 34px;
  }

  .gs-tech-stack__header>p:last-child {
    font-size: 14px;
    line-height: 1.6;
  }

  .gs-tech-stack__canvas {
    padding: 86px 15px 22px;
  }

  .gs-tech-stack__canvas-title {
    top: 53px;
    font-size: 10px;
    letter-spacing: .12em;
  }

  .gs-tech-stack__badge {
    height: 38px;
    padding: 0 11px;
    font-size: 9px;
  }

  .gs-tech-stack__badge svg {
    width: 17px;
    height: 17px;
  }

  .gs-tech-stack__layout {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .gs-tech-stack__app {
    width: 100%;
    min-height: 0;
  }

  .gs-tech-stack__group {
    gap: 24px;
  }

  .gs-tech-item {
    min-height: auto;
  }

  .gs-tech-item h3 {
    font-size: 18px;
  }

  .gs-tech-item__tools {
    font-size: 12px;
  }

  .gs-tech-item__pill {
    margin-top: 10px;
    font-size: 11px;
  }

  .gs-tech-app__navigation {
    height: 48px;
    gap: 3px;
    padding: 0 8px;
  }

  .gs-tech-app__brand {
    font-size: 9px;
  }

  .gs-tech-app__brand span {
    margin-right: 2px;
    font-size: 13px;
  }

  .gs-tech-app__navigation nav {
    gap: 6px;
  }

  .gs-tech-app__navigation nav span {
    font-size: 8px;
  }

  .gs-tech-app__online {
    gap: 3px;
    padding: 3px;
    font-size: 7px;
  }

  .gs-tech-app__online i {
    width: 6px;
    height: 6px;
  }

  .gs-tech-app__hero {
    height: 105px;
    margin: 0 9px;
    padding: 14px;
  }

  .gs-tech-app__hero h3 {
    font-size: 18px;
  }

  .gs-tech-app__hero p {
    max-width: 145px;
    font-size: 9px;
  }

  .gs-tech-app__focus,
  .gs-tech-app__progress,
  .gs-tech-app__assistant,
  .gs-tech-app__footer {
    margin-right: 9px;
    margin-left: 9px;
  }

  .gs-tech-app__focus {
    gap: 6px;
    padding: 9px;
  }

  .gs-tech-app__focus strong {
    font-size: 10px;
  }

  .gs-tech-app__focus p {
    font-size: 9px;
  }

  .gs-tech-app__fake-button {
    padding: 0 8px;
    font-size: 9px;
  }

  .gs-tech-app__stats {
    gap: 4px;
  }

  .gs-tech-app__stats>div {
    grid-template-columns: 20px 1fr;
    padding: 5px;
  }

  .gs-tech-app__stats b {
    font-size: 17px;
  }

  .gs-tech-app__stats strong {
    font-size: 12px;
  }

  .gs-tech-app__stats small {
    font-size: 7px;
  }

  .gs-tech-app__assistant {
    padding: 10px;
  }

  .gs-tech-app__footer {
    margin-bottom: 11px;
    font-size: 9px;
  }
}

/* =========================================================
   GROWTHSPELL — INDUSTRIES ACCORDION
========================================================= */

.gs-industries,
.gs-industries * {
  box-sizing: border-box;
}

.gs-industries {
  --gs-industry-ink: #162c2d;
  --gs-industry-green: #14bb75;
  width: 100%;
  overflow: hidden;
  background: #fff;
  color: var(--gs-industry-ink);
  font-family: "Inter", sans-serif;
}

.gs-industries__container {
  width: min(100% - 28px, 1300px);
  margin: 0 auto;
  padding: 44px 0 35px;
}

/* Header */

.gs-industries__heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 35px;
  margin: 0 37px 31px;
}

.gs-industries__eyebrow {
  margin: 0 0 13px;
  color: #5d6f70;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .35em;
  text-transform: uppercase;
}

.gs-industries__heading h2 {
  margin: 0;
  font-size: clamp(32px, 3vw, 47px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.045em;
}

.gs-industries__intro {
  max-width: 570px;
  margin: 0 0 4px;
  color: #677479;
  font-size: 16px;
  line-height: 1.5;
}

/* Horizontal expandable gallery */

.gs-industries__gallery {
  display: flex;
  width: 100%;
  height: 735px;
  overflow: hidden;
  background: #eef4f2;
}

.gs-industry {
  position: relative;
  min-width: 0;
  flex: 1 1 0;
  overflow: hidden;
  border-right: 2px solid #fff;
  background: #d9e5e1;
  transition: flex-grow .65s cubic-bezier(.2, .75, .2, 1);
}

.gs-industry:last-child {
  border-right: 0;
}

.gs-industry.is-active {
  flex-grow: 5.6;
}

.gs-industry::before {
  position: absolute;
  inset: 0;
  background-image: var(--industry-image);
  background-position: center;
  background-size: cover;
  content: "";
  transition: transform .7s ease, filter .5s ease;
}

.gs-industry.is-active::before {
  transform: scale(1.015);
}

.gs-industry:not(.is-active)::before {
  filter: saturate(.85);
}

.gs-industry::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 37%;
  background: linear-gradient(transparent, rgba(255, 255, 255, .94));
  content: "";
  pointer-events: none;
}

/* Entire photo is a button for hover, click and keyboard access */

.gs-industry__trigger {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #24383a;
  cursor: pointer;
  text-align: left;
}

.gs-industry__trigger:focus-visible {
  outline: 3px solid #17d988;
  outline-offset: -5px;
}

.gs-industry__trigger>span {
  position: absolute;
  right: 50%;
  bottom: 30px;
  width: max-content;
  max-width: 400px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  line-height: 1.2;
  text-transform: uppercase;
  transform: translateX(50%) rotate(-90deg) translateX(50%);
  transform-origin: center;
  transition: opacity .2s ease;
}

.gs-industry.is-active .gs-industry__trigger>span {
  opacity: 0;
}

/* White overlay on the open image */

.gs-industry__content {
  position: absolute;
  z-index: 4;
  bottom: 18px;
  left: 18px;
  width: min(450px, calc(100% - 36px));
  min-height: 260px;
  padding: 19px 26px 17px;
  background: rgba(255, 255, 255, .96);
  color: #1c3032;
  opacity: 0;
  pointer-events: none;
  transform: translateY(15px);
  transition: opacity .28s ease, transform .35s ease;
}

.gs-industry.is-active .gs-industry__content {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: .25s;
}

.gs-industry__category {
  margin: 0 0 8px;
  color: #496365;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.gs-industry__content h3 {
  margin: 0;
  font-size: clamp(22px, 2vw, 29px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.04em;
}

.gs-industry__description {
  margin: 11px 0 0;
  color: #677579;
  font-size: 13px;
  line-height: 1.45;
}

.gs-industry__tags {
  margin: 17px 0 0;
  color: #52686b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.gs-industry__tags i {
  margin: 0 7px;
  color: #a5b9b5;
  font-style: normal;
}

.gs-industry__content a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding-bottom: 5px;
  border-bottom: 2px solid #22c982;
  color: #2a4545;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.gs-industry__content a span {
  font-size: 17px;
  line-height: 1;
}

/* Bottom line and controls */

.gs-industries__bottom {
  display: flex;
  min-height: 82px;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 0 37px;
}

.gs-industries__bottom p {
  margin: 0;
  color: #68767a;
  font-size: 17px;
}

.gs-industries__bottom p strong {
  font-weight: 500;
}

.gs-industries__bottom p span {
  margin: 0 9px;
}

.gs-industries__controls {
  display: flex;
  align-items: center;
  gap: 21px;
  color: #5e6c70;
  font-size: 15px;
}

.gs-industries__controls button {
  display: grid;
  width: 45px;
  height: 45px;
  place-items: center;
  border: 1px solid #dce6e4;
  border-radius: 50%;
  background: #fff;
  color: #476264;
  cursor: pointer;
  font: inherit;
  font-size: 31px;
  line-height: 1;
  transition: border-color .2s, background .2s;
}

.gs-industries__controls button:hover {
  border-color: #46ce92;
  background: #eafff3;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {
  .gs-industries__heading {
    margin-right: 12px;
    margin-left: 12px;
  }

  .gs-industries__heading h2 {
    font-size: 36px;
  }

  .gs-industries__intro {
    max-width: 360px;
    font-size: 14px;
  }

  .gs-industries__gallery {
    height: 620px;
  }

  .gs-industry.is-active {
    flex-grow: 8;
  }

  .gs-industry__content {
    width: min(390px, calc(100% - 30px));
    min-height: 0;
    padding: 16px 19px;
  }

  .gs-industry__trigger>span {
    font-size: 9px;
  }
}

/* =========================================================
   MOBILE: horizontal gallery with room for the active card
========================================================= */

@media (max-width: 700px) {
  .gs-industries__container {
    width: 100%;
    padding: 55px 0 25px;
  }

  .gs-industries__heading {
    display: block;
    margin: 0 18px 25px;
  }

  .gs-industries__eyebrow {
    font-size: 10px;
    letter-spacing: .25em;
  }

  .gs-industries__heading h2 {
    font-size: clamp(31px, 8vw, 39px);
  }

  .gs-industries__intro {
    max-width: 100%;
    margin-top: 13px;
    font-size: 14px;
  }

  .gs-industries__gallery {
    height: 550px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .gs-industries__gallery::-webkit-scrollbar {
    display: none;
  }

  .gs-industry,
  .gs-industry.is-active {
    min-width: min(82vw, 400px);
    flex: 0 0 min(82vw, 400px);
    scroll-snap-align: center;
    transition: none;
  }

  .gs-industry::after {
    height: 60%;
  }

  .gs-industry__trigger>span {
    right: auto;
    bottom: 24px;
    left: 20px;
    font-size: 12px;
    transform: none;
  }

  .gs-industry.is-active .gs-industry__trigger>span {
    opacity: 0;
  }

  .gs-industry__content {
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    padding: 17px;
  }

  .gs-industry__content h3 {
    font-size: 23px;
  }

  .gs-industry__description {
    font-size: 12px;
  }

  .gs-industries__bottom {
    min-height: 76px;
    flex-wrap: wrap;
    padding: 13px 18px;
  }

  .gs-industries__bottom p {
    font-size: 13px;
  }

  .gs-industries__controls {
    gap: 11px;
    font-size: 12px;
  }

  .gs-industries__controls button {
    width: 36px;
    height: 36px;
    font-size: 25px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .gs-industry,
  .gs-industry::before,
  .gs-industry__content,
  .gs-industry__trigger>span {
    transition-duration: .01ms;
  }
}

/* =========================================================
   GROWTHSPELL — WHAT WE BUILD
========================================================= */

.gs-product-types,
.gs-product-types * {
  box-sizing: border-box;
}

.gs-product-types {
  --product-ink: #14292d;
  --product-muted: #627177;
  --product-accent: #159d70;
  --product-tint: #e5f9f0;
  --product-background: #f0fff9;

  width: 100%;
  background: #fff;
  color: var(--product-ink);
  font-family: "Inter", sans-serif;
}

.gs-product-types__container {
  width: min(100% - 64px, 1300px);
  margin: 0 auto;
  padding: 35px 0 30px;
}

/* Heading */

.gs-product-types__header {
  margin: 0 auto 29px;
  text-align: center;
}

.gs-product-types__header>p {
  margin: 0 0 16px;
  color: #267f63;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .26em;
  text-transform: uppercase;
}

.gs-product-types__header h2 {
  margin: 0;
  font-size: clamp(31px, 2.8vw, 44px);
  font-weight: 800;
  line-height: 1.13;
  letter-spacing: -.05em;
}

.gs-product-types__header>span {
  display: block;
  margin-top: 11px;
  color: var(--product-muted);
  font-size: 19px;
  line-height: 1.45;
}

/* Two-column panel */

.gs-product-types__panel {
  display: grid;
  grid-template-columns: 35.2% 64.8%;
  min-height: 688px;
  overflow: hidden;
  border: 1px solid #d9e8e3;
  border-radius: 14px;
}

.gs-product-types__menu {
  display: flex;
  flex-direction: column;
  padding: 16px 11px;
  border-right: 1px solid #dcebe6;
  background: #fff;
}

.gs-product-tab {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 77px;
  align-items: center;
  gap: 29px;
  padding: 0 26px;
  border: 0;
  border-bottom: 1px solid #e5ebea;
  background: transparent;
  color: #445259;
  cursor: pointer;
  font: inherit;
  font-size: 19px;
  text-align: left;
  transition: background .2s ease, color .2s ease;
}

.gs-product-tab:last-child {
  border-bottom: 0;
}

.gs-product-tab:hover {
  background: #f4fbf8;
}

.gs-product-tab.is-active {
  border-bottom-color: transparent;
  border-radius: 5px;
  background: linear-gradient(90deg, #eaf9f3, #e3f7ef);
  color: #162c2d;
  font-weight: 700;
}

.gs-product-tab.is-active::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  border-radius: 4px;
  background: var(--product-accent);
  content: "";
}

.gs-product-tab:focus-visible,
.gs-product-types a:focus-visible {
  outline: 3px solid var(--product-accent);
  outline-offset: -4px;
}

.gs-product-tab__icon {
  display: grid;
  width: 45px;
  height: 45px;
  flex: 0 0 45px;
  place-items: center;
  color: #526970;
  font-size: 36px;
  font-weight: 400;
  line-height: 1;
}

.gs-product-tab.is-active .gs-product-tab__icon,
.gs-product-tab.is-active .gs-product-tab__arrow {
  color: #225e4c;
}

.gs-product-tab>span:nth-child(2) {
  min-width: 0;
}

.gs-product-tab__arrow {
  margin-left: auto;
  font-size: 27px;
  font-weight: 300;
  line-height: 1;
}

/* Right panel */

.gs-product-types__detail {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 41px 40px 39px;
  background:
    radial-gradient(circle at 72% 46%, var(--product-tint), transparent 62%),
    var(--product-background);
}

.gs-product-types__detail-label {
  margin: 0 0 19px;
  color: #44766a;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.gs-product-types__detail h3 {
  margin: 0;
  font-size: clamp(29px, 2.6vw, 40px);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -.055em;
}

.gs-product-types__description {
  max-width: 790px;
  min-height: 90px;
  margin: 15px 0 21px;
  color: #65737a;
  font-size: 21px;
  line-height: 1.5;
}

/* Three workflow cards */

.gs-product-types__flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 54px;
  margin-top: 5px;
}

.gs-product-types__flow::before {
  position: absolute;
  top: 50%;
  right: 12%;
  left: 12%;
  height: 1px;
  background: var(--product-accent);
  content: "";
}

.gs-product-flow-card {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  height: 177px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 16px 16px 12px;
  border: 1px solid #d7ece4;
  border-radius: 13px;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.95) 55%, #ffffff 100%),
    var(--card-bg, #fff);
  background-size: cover;
  background-position: center;
  text-align: center;
}

.gs-product-flow-card:not(:last-child)::after {
  position: absolute;
  top: calc(50% - 6px);
  right: -33px;
  width: 12px;
  height: 12px;
  border: 1px solid #58b18e;
  border-radius: 50%;
  background: #8cd5b0;
  content: "";
}

.gs-product-flow-card strong {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e2ece9;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .025em;
  line-height: 1.2;
  text-transform: uppercase;
}

.gs-product-flow-card small {
  display: block;
  width: 100%;
  margin-top: 10px;
  color: #647278;
  font-size: 13px;
  line-height: 1.25;
  white-space: nowrap;
}

/* Four capabilities */

.gs-product-types__capabilities {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 50px;
}

.gs-product-types__capabilities>div {
  display: flex;
  min-height: 92px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  padding: 0 10px;
  border-right: 1px solid #d8e8e4;
  color: #365059;
  font-size: 15px;
  text-align: center;
}

.gs-product-types__capabilities>div:last-child {
  border-right: 0;
}

.gs-product-types__capabilities span {
  color: #316d5e;
  font-size: 32px;
  line-height: 1;
}

/* Right-aligned text link */

.gs-product-types__explore {
  display: inline-flex;
  align-self: flex-end;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding: 0 0 6px;
  border-bottom: 2px solid var(--product-accent);
  color: #245748;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.gs-product-types__explore span {
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}

/* Bottom message and CTA */

.gs-product-types__footer {
  display: flex;
  min-height: 106px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 17px;
  padding: 14px 25px;
  border-radius: 14px;
  background: #f7fbf9;
}

.gs-product-types__footer-message {
  display: flex;
  align-items: center;
  gap: 26px;
}

.gs-product-types__footer-message>span {
  display: grid;
  width: 59px;
  height: 59px;
  flex: 0 0 59px;
  place-items: center;
  border-radius: 50%;
  background: #ddf8eb;
  color: #278765;
  font-size: 27px;
}

.gs-product-types__footer-message p {
  margin: 0;
  color: #657277;
  font-size: 18px;
  line-height: 1.4;
}

.gs-product-types__footer>a {
  display: inline-flex;
  min-height: 55px;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 0 29px;
  border: 1px solid #548e7b;
  border-radius: 30px;
  color: #275b4d;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.gs-product-types__footer>a:hover {
  background: #eafff2;
}

.gs-product-types__footer>a span {
  font-size: 23px;
  font-weight: 400;
  line-height: 1;
}

/* =========================================================
   SMALLER DESKTOP
========================================================= */

@media (max-width: 1200px) {
  .gs-product-types__container {
    width: min(100% - 44px, 1100px);
  }

  .gs-product-types__panel {
    grid-template-columns: 38% 62%;
  }

  .gs-product-tab {
    gap: 13px;
    padding: 0 16px;
    font-size: 15px;
  }

  .gs-product-types__detail {
    padding: 37px 27px;
  }

  .gs-product-types__flow {
    gap: 15px;
  }

  .gs-product-flow-card:not(:last-child)::after {
    right: -13px;
    width: 9px;
    height: 9px;
  }

  .gs-product-flow-card small {
    font-size: 10px;
  }

  .gs-product-types__description {
    font-size: 18px;
  }
}

/* =========================================================
   TABLET / MOBILE
========================================================= */

@media (max-width: 850px) {
  .gs-product-types__container {
    width: min(100% - 32px, 650px);
    padding-top: 55px;
  }

  .gs-product-types__header>p {
    font-size: 11px;
  }

  .gs-product-types__header h2 {
    font-size: clamp(32px, 6vw, 40px);
  }

  .gs-product-types__header>span {
    font-size: 14px;
    line-height: 1.6;
  }

  .gs-product-types__panel {
    display: flex;
    flex-direction: column;
  }

  .gs-product-types__menu {
    display: flex;
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    padding: 11px;
    border-right: 0;
    border-bottom: 1px solid #dcebe6;
    scrollbar-width: thin;
  }

  .gs-product-tab {
    width: max-content;
    min-width: max-content;
    min-height: 48px;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid #e1e9e7;
    border-radius: 7px;
    font-size: 13px;
    white-space: nowrap;
  }

  .gs-product-tab.is-active {
    border-color: #a7ddc4;
  }

  .gs-product-tab.is-active::before {
    width: 3px;
  }

  .gs-product-tab__icon {
    width: 23px;
    height: 23px;
    flex-basis: 23px;
    font-size: 20px;
  }

  .gs-product-tab__arrow {
    display: none;
  }

  .gs-product-types__detail {
    min-height: 575px;
    padding: 27px 22px;
  }

  .gs-product-types__detail-label {
    margin-bottom: 11px;
    font-size: 10px;
  }

  .gs-product-types__detail h3 {
    font-size: 29px;
  }

  .gs-product-types__description {
    min-height: 0;
    margin: 12px 0 20px;
    font-size: 15px;
    line-height: 1.55;
  }

  .gs-product-types__flow {
    gap: 8px;
  }

  .gs-product-flow-card {
    height: 150px;
    padding: 12px 5px 8px;
  }

  .gs-product-flow-card:not(:last-child)::after {
    display: none;
  }

  .gs-product-flow-card__icon {
    width: 44px;
    height: 44px;
    font-size: 23px;
  }

  .gs-product-flow-card strong {
    margin-top: 8px;
    padding-bottom: 7px;
    font-size: 10px;
  }

  .gs-product-flow-card small {
    margin-top: 7px;
    font-size: 9px;
    line-height: 1.25;
    white-space: normal;
  }

  .gs-product-types__capabilities {
    margin-top: 31px;
  }

  .gs-product-types__capabilities>div {
    min-height: 78px;
    padding: 0 4px;
    font-size: 10px;
  }

  .gs-product-types__capabilities span {
    font-size: 24px;
  }

  .gs-product-types__explore {
    margin-top: 10px;
    font-size: 12px;
  }

  .gs-product-types__footer {
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 19px;
    padding: 20px;
  }

  .gs-product-types__footer-message {
    gap: 13px;
  }

  .gs-product-types__footer-message>span {
    width: 45px;
    height: 45px;
    flex-basis: 45px;
    font-size: 22px;
  }

  .gs-product-types__footer-message p {
    font-size: 14px;
  }

  .gs-product-types__footer>a {
    width: 100%;
    min-height: 48px;
    font-size: 13px;
  }
}

@media (max-width: 390px) {
  .gs-product-types__detail {
    padding: 23px 13px;
  }

  .gs-product-types__detail h3 {
    font-size: 26px;
  }

  .gs-product-types__capabilities>div {
    font-size: 9px;
  }
}

/* ==========================================
   CUSTOM MOBILE APPS — BUSINESS ADVANTAGE
========================================== */

.gs-app-value {
  --av-green: #24cc70;
  --av-dark: #07191d;
  --av-text: #788184;
  --av-border: #e4ece9;
  --av-soft-green: #eafaf2;
  --av-icon-green: #16794b;

  /* Match this width to your existing page container. */
  --av-container: 1300px;

  width: 100%;
  padding: 36px 28px 20px;
  background: #fbfdfc;
  color: var(--av-dark);
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.gs-app-value,
.gs-app-value *,
.gs-app-value *::before,
.gs-app-value *::after {
  box-sizing: border-box;
}

.gs-app-value h2,
.gs-app-value h3,
.gs-app-value h4,
.gs-app-value p {
  margin: 0;
}

.gs-av-symbols {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.gs-av-container {
  width: 100%;
  max-width: var(--av-container);
  margin-inline: auto;
}

/* Heading */

.gs-av-heading {
  padding-inline: 42px;
  margin-bottom: 40px;
}

.gs-av-eyebrow {
  margin-bottom: 15px !important;
  color: var(--av-green);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.gs-av-heading h2 {
  color: #06161a;
  font-size: clamp(34px, 3.35vw, 58px);
  font-weight: 750;
  line-height: 1.12;
  letter-spacing: -2.3px;
  text-wrap: balance;
}

.gs-av-intro {
  margin-top: 12px !important;
  color: #777f82;
  font-size: clamp(17px, 1.65vw, 28px);
  font-weight: 400;
  line-height: 1.5;
}

/* Three equal-height cards */

.gs-av-cards {
  --av-gap: 14px;
  --av-head-height: 52px;
  --av-card-top: 24px;
  --av-art-height: clamp(174px, 12.65vw, 219px);

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--av-gap);
  align-items: stretch;
}

.gs-av-card {
  position: relative;
  min-width: 0;
  padding: var(--av-card-top) 26px 24px;
  border: 1px solid var(--av-border);
  border-radius: 12px;
  background: #fff;
}

/* Middle card: same geometry, green background */

.gs-av-card-featured {
  background: linear-gradient(125deg, #effcf6 0%, #edfaf5 100%);
}

.gs-av-card-featured::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 6px;
  border-radius: 12px 12px 0 0;
  background: var(--av-green);
}

/* Card headings */

.gs-av-card-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  height: var(--av-head-height);
}

.gs-av-card-heading h3 {
  width: fit-content;
  padding-bottom: 7px;
  border-bottom: 1px solid #dce6e1;
  color: #152428;
  font-size: clamp(15px, 1.16vw, 20px);
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.gs-av-card-featured .gs-av-card-heading h3 {
  border-bottom-color: #a9e9c7;
}

.gs-av-card-heading>p {
  flex-shrink: 0;
  color: #7a8285;
  font-size: clamp(11px, .87vw, 15px);
  line-height: 1.35;
}

/* Illustrations span the full width of each card.
   Their center lines all sit at exactly 50%. */

.gs-av-visual {
  height: var(--av-art-height);
  margin-inline: -26px;
}

.gs-av-visual>svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.gs-av-muted {
  fill: #edf5f2;
}

.gs-av-person {
  color: #9ebbb3;
}

.gs-av-dotted {
  fill: none;
  stroke: #b3c8c0;
  stroke-width: 2;
  stroke-dasharray: 1 5;
  stroke-linecap: round;
}

.gs-av-green-line {
  fill: none;
  stroke: var(--av-green);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gs-av-soft-line {
  fill: none;
  stroke: #a3eac3;
  stroke-width: 2;
}

.gs-av-node {
  fill: var(--av-green);
  stroke: #f8fdfb;
  stroke-width: 3;
}

.gs-av-panel {
  fill: #eafaf2;
}

.gs-av-panel-bordered {
  fill: #e6f9ef;
  stroke: #bcefd6;
  stroke-width: 1;
}

.gs-av-leaf {
  color: #20bc66;
}

.gs-av-svg-text {
  fill: #244047;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-anchor: middle;
}

.gs-av-svg-label {
  text-anchor: start;
  font-weight: 600;
}

.gs-av-document-box {
  fill: #edf9f4;
  stroke: #d8eee3;
  stroke-width: 1;
}

.gs-av-document-icon {
  fill: none;
  stroke: #537f78;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gs-av-big-gear {
  fill: #24c66d;
  stroke: #24c66d;
  stroke-width: 1.4;
}

.gs-av-big-gear use {
  fill-rule: evenodd;
}

.gs-av-globe {
  fill: none;
  stroke: #177e4d;
  stroke-width: 2;
}

/* Connect adjacent card illustrations */

.gs-av-connector {
  position: absolute;
  z-index: 2;
  top: calc(var(--av-card-top) + var(--av-head-height) + var(--av-art-height) / 2);
  left: calc(0px - var(--av-gap) / 2 - 1px);
  width: 22px;
  height: 22px;
  border: 4px solid #fbfdfc;
  border-radius: 50%;
  background: var(--av-green);
  transform: translate(-50%, -50%);
}

.gs-av-connector::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: calc(var(--av-gap) + 4px);
  height: 2px;
  background: var(--av-green);
  transform: translate(-50%, -50%);
}

/* Two benefit columns */

.gs-av-benefits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 15px;
}

.gs-av-benefit {
  min-width: 0;
  padding-right: 20px;
}

.gs-av-benefit+.gs-av-benefit {
  padding-right: 0;
  padding-left: 30px;
  border-left: 1px solid #e7efeb;
}

.gs-av-icon {
  display: grid;
  width: 45px;
  height: 45px;
  margin-bottom: 11px;
  place-items: center;
  border-radius: 50%;
  background: #e0f9ec;
  color: var(--av-icon-green);
}

.gs-av-icon svg {
  display: block;
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gs-av-benefit h4 {
  margin-bottom: 7px;
  color: #152429;
  font-size: clamp(16px, 1.1vw, 19px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.45px;
}

.gs-av-benefit p {
  color: var(--av-text);
  font-size: clamp(15px, 1.05vw, 18px);
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -.2px;
}

/* Bottom process strip */

.gs-av-process {
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 78px;
  margin: 20px 0 0;
  padding: 18px 5.5%;
  list-style: none;
  border: 1px solid var(--av-border);
  border-radius: 13px;
  background: #fff;
}

.gs-av-process li {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 15px;
  min-width: 0;
  color: #243238;
  font-size: clamp(11px, .9vw, 15px);
  font-weight: 750;
  line-height: 1.4;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}

.gs-av-process li:last-child {
  flex: 0 0 auto;
}

.gs-av-process li:not(:last-child)::after {
  content: "";
  flex: 1;
  min-width: 25px;
  height: 14px;
  margin-inline: 4px 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='14' viewBox='0 0 160 14' preserveAspectRatio='none'%3E%3Cpath d='M0 7H157M151 1l6 6-6 6' fill='none' stroke='%2324cc70' stroke-width='2'/%3E%3C/svg%3E") center / 100% 14px no-repeat;
}

.gs-av-process-dot {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--av-green);
  box-shadow: 0 0 0 7px #e8fbf0;
}

/* Footer and CTA */

.gs-av-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 18px 18px 0;
}

.gs-av-footer>p {
  color: #768088;
  font-size: 17px;
  line-height: 1.5;
}

.gs-av-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  min-height: 56px;
  padding: 15px 26px 15px 30px;
  border-radius: 12px;
  background: linear-gradient(105deg, #19c966, #32d27d);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  transition: background .2s ease, box-shadow .2s ease;
}

.gs-av-button svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gs-av-button:hover {
  background: #16b95d;
  box-shadow: 0 6px 20px rgb(24 185 94 / 15%);
}

.gs-av-button:focus-visible {
  outline: 3px solid #126f45;
  outline-offset: 4px;
}

/* Laptop */

@media (max-width: 1350px) {
  .gs-app-value {
    padding-inline: 24px;
  }

  .gs-av-heading {
    padding-inline: 16px;
  }

  .gs-av-card {
    padding-inline: 18px;
  }

  .gs-av-visual {
    margin-inline: -18px;
  }

  .gs-av-card-heading {
    gap: 8px;
  }

  .gs-av-card-heading h3 {
    letter-spacing: .6px;
  }

  .gs-av-benefit {
    padding-right: 14px;
  }

  .gs-av-benefit+.gs-av-benefit {
    padding-left: 16px;
  }

  .gs-av-process {
    padding-inline: 28px;
  }

  .gs-av-process li {
    gap: 12px;
    letter-spacing: .5px;
  }

  .gs-av-process li:not(:last-child)::after {
    margin-right: 15px;
  }
}

/* Tablet: stack cards so text and diagrams stay readable */

@media (max-width: 1050px) {
  .gs-app-value {
    padding: 44px 24px 28px;
  }

  .gs-av-heading {
    padding-inline: 0;
    margin-bottom: 28px;
  }

  .gs-av-heading h2 {
    max-width: 850px;
    font-size: clamp(34px, 4.7vw, 48px);
    letter-spacing: -1.6px;
  }

  .gs-av-intro {
    max-width: 820px;
    font-size: 19px;
  }

  .gs-av-cards {
    --av-art-height: 230px;
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .gs-av-card {
    padding-inline: 28px;
  }

  .gs-av-card-heading h3 {
    font-size: 20px;
  }

  .gs-av-card-heading>p {
    font-size: 14px;
  }

  .gs-av-visual {
    margin-inline: 0;
  }

  .gs-av-connector {
    display: none;
  }

  .gs-av-benefits {
    margin-top: 10px;
  }

  .gs-av-benefit {
    padding-right: 28px;
  }

  .gs-av-benefit+.gs-av-benefit {
    padding-left: 28px;
  }

  .gs-av-benefit h4 {
    font-size: 19px;
  }

  .gs-av-benefit p {
    font-size: 17px;
    line-height: 1.5;
  }

  .gs-av-process {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px 30px;
    padding: 25px 30px;
  }

  .gs-av-process li {
    font-size: 12px;
    white-space: normal;
  }

  .gs-av-process li:not(:last-child)::after {
    display: none;
  }

  .gs-av-footer {
    padding-inline: 0;
  }

  .gs-av-footer>p {
    max-width: 340px;
    font-size: 15px;
  }

  .gs-av-button {
    padding-inline: 20px;
    font-size: 14px;
  }
}

/* Mobile */

@media (max-width: 600px) {
  .gs-app-value {
    padding: 36px 16px 24px;
  }

  .gs-av-eyebrow {
    margin-bottom: 12px !important;
    font-size: 11px;
    letter-spacing: 2.1px;
  }

  .gs-av-heading h2 {
    font-size: clamp(30px, 8vw, 40px);
    line-height: 1.12;
    letter-spacing: -1.3px;
    text-wrap: initial;
  }

  .gs-av-intro {
    margin-top: 14px !important;
    font-size: 16px;
    line-height: 1.55;
  }

  .gs-av-cards {
    --av-card-top: 22px;
    --av-head-height: 55px;
    --av-art-height: 175px;
    gap: 16px;
  }

  .gs-av-card {
    padding-inline: 18px;
    padding-bottom: 22px;
  }

  .gs-av-card-heading h3 {
    max-width: 60%;
    font-size: 14px;
    letter-spacing: .7px;
    line-height: 1.4;
  }

  .gs-av-card-heading>p {
    font-size: 10px;
    line-height: 1.5;
  }

  .gs-av-visual {
    margin-inline: -12px;
  }

  .gs-av-benefits {
    margin-top: 8px;
  }

  .gs-av-benefit {
    padding-right: 14px;
  }

  .gs-av-benefit+.gs-av-benefit {
    padding-left: 16px;
  }

  .gs-av-icon {
    width: 39px;
    height: 39px;
  }

  .gs-av-icon svg {
    width: 22px;
    height: 22px;
  }

  .gs-av-benefit h4 {
    font-size: 15px;
    line-height: 1.35;
    letter-spacing: -.3px;
  }

  .gs-av-benefit p {
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0;
  }

  .gs-av-process {
    gap: 24px 18px;
    margin-top: 16px;
    padding: 24px 20px;
  }

  .gs-av-process li {
    gap: 12px;
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: .55px;
  }

  .gs-av-process-dot {
    flex-basis: 12px;
    width: 12px;
    height: 12px;
    box-shadow: 0 0 0 5px #e8fbf0;
  }

  .gs-av-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding-top: 22px;
  }

  .gs-av-footer>p {
    max-width: none;
    text-align: center;
    font-size: 14px;
  }

  .gs-av-button {
    width: 100%;
    min-height: 52px;
    font-size: 14px;
  }
}

/* Font imports must appear at the top of your stylesheet.
   Remove this import if these fonts are already loaded. */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800&family=Inter:wght@400;500;600;700;800&display=swap");

/* =========================================
   WHY GROWTHSPELL
========================================= */

.gs-standard {
  --gs-standard-bg: #033528;
  --gs-standard-white: #f4faf6;
  --gs-standard-muted: #c0d2c8;
  --gs-standard-green: #4bdb7b;
  --gs-standard-line: rgba(205, 231, 216, 0.3);
  --gs-standard-mint: #e3f8f0;

  width: 100%;
  padding: 22px 28px 0 50px;
  background:
    radial-gradient(ellipse at 12% 45%,
      rgba(0, 24, 17, 0.18),
      transparent 65%),
    var(--gs-standard-bg);
  color: var(--gs-standard-white);
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.gs-standard,
.gs-standard *,
.gs-standard *::before,
.gs-standard *::after {
  box-sizing: border-box;
}

.gs-standard h2,
.gs-standard h3,
.gs-standard p {
  margin: 0;
}

.gs-standard-container {
  width: 100%;
  max-width: 1300px;
  margin-inline: auto;
}

/* =========================================
   MAIN TWO-COLUMN LAYOUT
========================================= */

.gs-standard-layout {
  display: grid;
  grid-template-columns: 32% 68%;
  align-items: stretch;
}

/* =========================================
   LEFT COLUMN
========================================= */

.gs-standard-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 40px 30px 20px 0;
}

.gs-standard-eyebrow {
  margin-bottom: 28px !important;
  color: #a8c2b4;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 4px;
  text-transform: uppercase;
}

.gs-standard-intro h2 {
  color: var(--gs-standard-white);
  font-size: clamp(34px, 3vw, 50px);
  font-weight: 700;
  line-height: 1.025;
  letter-spacing: -1.5px;
}

.gs-standard-description {
  max-width: 450px;
  margin-top: 38px !important;
  color: var(--gs-standard-muted);
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight: 400;
  line-height: 1.43;
  letter-spacing: -0.3px;
}

.gs-standard-statement {
  display: flex;
  flex-direction: column;
  margin-top: 36px !important;
  color: var(--gs-standard-white);
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-size: clamp(42px, 4vw, 65px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -1px;
  text-transform: uppercase;
}

.gs-standard-statement span {
  display: block;
}

.gs-standard-statement span:last-child {
  color: var(--gs-standard-green);
  white-space: nowrap;
}

.gs-standard-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 55px;
  margin-top: 34px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--gs-standard-green);
  color: #043727;
  font-size: clamp(14px, 1.18vw, 20px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.4px;
  text-decoration: none;
  transition:
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.gs-standard-button svg {
  flex: 0 0 23px;
  width: 23px;
  height: 23px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gs-standard-button:hover {
  background: #70e697;
  box-shadow: 0 5px 22px rgb(0 0 0 / 12%);
}

.gs-standard-button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 5px;
}

/* =========================================
   RIGHT COLUMN
========================================= */

.gs-standard-principles {
  display: grid;
  grid-template-rows: 1fr 0.92fr 1.17fr 1fr;
  min-width: 0;
  border-left: 1px solid var(--gs-standard-line);
  border-right: 1px solid var(--gs-standard-line);
}

.gs-standard-row {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 34px 32px 34px 38px;
}

/* Inset divider between the first two rows */
.gs-standard-row:first-child::after {
  content: "";
  position: absolute;
  right: 20px;
  bottom: 0;
  left: 20px;
  height: 1px;
  background: var(--gs-standard-line);
}

/* All four rows share identical column tracks */
.gs-standard-row-main {
  display: grid;
  grid-template-columns:
    100px 215px minmax(0, 1fr) 160px;
  align-items: center;
  column-gap: 28px;
  width: 100%;
  min-width: 0;
}

.gs-standard-symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.gs-standard-symbol svg {
  display: block;
  width: 96px;
  height: 90px;
  overflow: visible;
}

.gs-shape-fill {
  fill: var(--gs-standard-green);
}

.gs-shape-outline {
  fill: none;
  stroke: #b1cbbd;
  stroke-width: 1.7;
}

.gs-standard-row h3 {
  color: var(--gs-standard-white);
  font-size: clamp(18px, 1.4vw, 24px);
  font-weight: 700;
  line-height: 1.27;
  letter-spacing: -0.5px;
  text-transform: uppercase;
}

.gs-standard-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  align-self: stretch;
  min-height: 94px;
  padding-left: 29px;
  border-left: 1px solid var(--gs-standard-line);
}

.gs-standard-details p {
  color: var(--gs-standard-muted);
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.2px;
}

.gs-standard-outcome {
  color: var(--gs-standard-green);
  font-size: clamp(15px, 1.2vw, 20px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.3px;
  text-align: right;
  text-transform: uppercase;
}

/* =========================================
   MINT DELIVERY ROW
========================================= */

.gs-standard-row-highlight {
  padding-top: 38px;
  padding-bottom: 29px;
  background: var(--gs-standard-mint);
}

.gs-standard-row-highlight h3 {
  color: #073a2e;
}

.gs-standard-row-highlight .gs-standard-details {
  min-height: 86px;
  border-left-color: #a9cdc0;
}

.gs-standard-row-highlight .gs-standard-details p {
  color: #244f44;
}

.gs-standard-row-highlight .gs-standard-outcome {
  color: #34c66a;
}

/* Timeline sits under the details and outcome columns */
.gs-standard-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-column: 3 / 5;
  gap: 0;
  margin: 24px 20px 0 -22px;
  padding: 0;
  list-style: none;
}

/* Line starts and finishes at the dot centers */
.gs-standard-timeline::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 10%;
  right: 10%;
  height: 3px;
  background: linear-gradient(to right,
      #2dc66b 0%,
      #2dc66b 75%,
      #b6d1c7 75%,
      #b6d1c7 100%);
}

.gs-standard-timeline li {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: #234c40;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}

.gs-stage-dot {
  display: block;
  width: 19px;
  height: 19px;
  border: 2px solid #25be65;
  border-radius: 50%;
  background: #25be65;
}

.gs-stage-first .gs-stage-dot {
  border-color: #075c3d;
  background: #075c3d;
}

.gs-stage-last .gs-stage-dot {
  border-color: #214f40;
  background: var(--gs-standard-mint);
}

/* =========================================
   FOOTER STRIP
========================================= */

.gs-standard-footer {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  margin-top: 24px;
  padding-top: 23px;
  padding-bottom: 10px;
  border-top: 1px solid var(--gs-standard-line);
}

.gs-standard-footer span {
  padding-block: 6px;
  color: #a3bdaf;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 1.8px;
}

.gs-standard-footer span+span {
  border-left: 1px solid var(--gs-standard-line);
  text-align: center;
}

.gs-standard-footer span:last-child {
  text-align: right;
}

/* =========================================
   LAPTOP
========================================= */

@media (max-width: 1500px) {
  .gs-standard {
    padding-left: 36px;
    padding-right: 26px;
  }

  .gs-standard-intro {
    padding-right: 24px;
  }

  .gs-standard-row {
    padding-left: 25px;
    padding-right: 25px;
  }

  .gs-standard-row-main {
    grid-template-columns:
      76px 175px minmax(0, 1fr) 132px;
    column-gap: 20px;
  }

  .gs-standard-symbol svg {
    width: 76px;
    height: 76px;
  }

  .gs-standard-details {
    padding-left: 22px;
  }

  .gs-standard-timeline {
    margin-left: -18px;
    margin-right: 8px;
  }
}

@media (max-width: 1200px) {
  .gs-standard {
    padding-inline: 28px;
  }

  .gs-standard-layout {
    grid-template-columns: 31% 69%;
  }

  .gs-standard-intro h2 {
    font-size: 42px;
    letter-spacing: -1.6px;
  }

  .gs-standard-description {
    font-size: 16px;
  }

  .gs-standard-statement {
    font-size: 58px;
  }

  .gs-standard-button {
    padding-inline: 16px;
    font-size: 14px;
  }

  .gs-standard-row {
    padding-inline: 20px;
  }

  .gs-standard-row-main {
    grid-template-columns:
      58px 143px minmax(0, 1fr) 112px;
    column-gap: 14px;
  }

  .gs-standard-symbol svg {
    width: 58px;
    height: 64px;
  }

  .gs-standard-row h3 {
    font-size: 20px;
  }

  .gs-standard-details {
    gap: 12px;
    padding-left: 16px;
  }

  .gs-standard-details p {
    font-size: 14px;
  }

  .gs-standard-outcome {
    font-size: 16px;
  }

  .gs-standard-timeline li {
    font-size: 11px;
  }
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {
  .gs-standard {
    padding: 44px 28px 0;
  }

  .gs-standard-layout {
    grid-template-columns: 1fr;
  }

  .gs-standard-intro {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    column-gap: 35px;
    align-items: start;
    padding: 0 0 36px;
  }

  .gs-standard-eyebrow {
    grid-column: 1 / -1;
    margin-bottom: 22px !important;
  }

  .gs-standard-intro h2 {
    grid-column: 1;
    grid-row: 2 / 4;
    font-size: clamp(42px, 5.7vw, 56px);
  }

  .gs-standard-description {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0 !important;
    font-size: 16px;
  }

  .gs-standard-statement {
    grid-column: 2;
    grid-row: 3;
    margin-top: 24px !important;
    font-size: 58px;
  }

  .gs-standard-button {
    grid-column: 1;
    justify-self: start;
    align-self: end;
    margin-top: 24px;
  }

  .gs-standard-principles {
    grid-template-rows: auto;
    border-top: 1px solid var(--gs-standard-line);
    border-bottom: 1px solid var(--gs-standard-line);
  }

  .gs-standard-row {
    padding: 30px 24px;
  }

  .gs-standard-row-main {
    grid-template-columns:
      66px 165px minmax(0, 1fr) 124px;
    column-gap: 18px;
  }

  .gs-standard-symbol svg {
    width: 66px;
    height: 70px;
  }

  .gs-standard-row h3 {
    font-size: 21px;
  }

  .gs-standard-outcome {
    font-size: 17px;
  }

  .gs-standard-footer span {
    font-size: 11px;
    letter-spacing: 1.2px;
  }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {
  .gs-standard {
    padding: 36px 20px 0;
  }

  .gs-standard-intro {
    display: flex;
    flex-direction: column;
    padding-bottom: 32px;
  }

  .gs-standard-eyebrow {
    margin-bottom: 22px !important;
    font-size: 11px;
    letter-spacing: 3px;
  }

  .gs-standard-intro h2 {
    font-size: clamp(39px, 9vw, 58px);
    line-height: 1.06;
    letter-spacing: -1.7px;
  }

  .gs-standard-description {
    max-width: 480px;
    margin-top: 24px !important;
    font-size: 16px;
    line-height: 1.6;
  }

  .gs-standard-statement {
    margin-top: 26px !important;
    font-size: clamp(58px, 13vw, 78px);
    line-height: 0.97;
  }

  .gs-standard-button {
    min-height: 50px;
    margin-top: 26px;
    padding-inline: 20px;
    font-size: 15px;
  }

  .gs-standard-row {
    padding: 26px 18px;
  }

  .gs-standard-row-main {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 18px;
  }

  .gs-standard-symbol {
    grid-column: 1;
    grid-row: 1;
  }

  .gs-standard-symbol svg {
    width: 58px;
    height: 62px;
  }

  .gs-standard-row h3 {
    grid-column: 2;
    grid-row: 1;
    font-size: 23px;
    line-height: 1.2;
  }

  .gs-standard-details {
    grid-column: 1 / -1;
    min-height: auto;
    gap: 10px;
    padding-left: 15px;
  }

  .gs-standard-details p {
    font-size: 15px;
    line-height: 1.5;
  }

  .gs-standard-outcome {
    grid-column: 1 / -1;
    padding-left: 16px;
    font-size: 16px;
    text-align: left;
    letter-spacing: 1px;
  }

  .gs-standard-row-highlight .gs-standard-details {
    min-height: auto;
  }

  .gs-standard-timeline {
    grid-column: 1 / -1;
    margin: 8px -8px 0;
  }

  .gs-standard-timeline li {
    gap: 9px;
    font-size: 10px;
  }

  .gs-stage-dot {
    width: 16px;
    height: 16px;
  }

  .gs-standard-timeline::before {
    top: 7px;
    height: 2px;
  }

  .gs-standard-footer {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 24px;
    padding-top: 10px;
    padding-bottom: 14px;
  }

  .gs-standard-footer span,
  .gs-standard-footer span+span,
  .gs-standard-footer span:last-child {
    padding-block: 9px;
    border-left: 0;
    font-size: 11px;
    text-align: center;
    letter-spacing: 1.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gs-standard-button {
    transition: none;
  }
}

/* Place at the top of your CSS file.
   Skip if Inter is already loaded on your website. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

.gs-work {
  --gw-green: #34ca73;
  --gw-dark: #0a181d;
  --gw-muted: #7b858b;
  --gw-border: #e0e7e6;

  padding: 44px 32px 40px;
  background: #fff;
  color: var(--gw-dark);
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.gs-work,
.gs-work *,
.gs-work *::before,
.gs-work *::after {
  box-sizing: border-box;
}

.gs-work h2,
.gs-work h3,
.gs-work h4,
.gs-work p {
  margin: 0;
}

.gs-work button,
.gs-work a {
  -webkit-tap-highlight-color: transparent;
}

.gs-work button {
  font: inherit;
}

.gs-work svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gs-work-symbols {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.gs-work-container {
  width: 100%;
  max-width: 1300px;
  margin-inline: auto;
}

/* HEADING */

.gs-work-heading {
  padding-inline: 10px;
  margin-bottom: 34px;
}

.gs-work-eyebrow {
  margin-bottom: 9px !important;
  color: var(--gw-green);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.gs-work-heading h2 {
  font-size: clamp(28px, 2.5vw, 42px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -1.5px;
}

.gs-work-description {
  margin-top: 17px !important;
  color: var(--gw-muted);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.6;
  letter-spacing: -.3px;
}

/* SHOWCASE GEOMETRY */

.gs-work-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1.92fr) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--gw-border);
  border-radius: 9px;
}

.gs-work-previews {
  min-width: 0;
  padding: 4px;
  border-right: 1px solid var(--gw-border);
}

.gs-work-panel {
  position: relative;
  min-height: 590px;
  height: 100%;
  overflow: hidden;
  border-radius: 5px;
  isolation: isolate;
  background: #f0faf5;
  animation: gw-panel-enter .35s ease both;
}

.gs-work-panel[hidden] {
  display: none !important;
}

.gs-work-panel-heading {
  position: relative;
  z-index: 3;
  padding: 42px 36px 0;
  pointer-events: none;
}

.gs-work-sector {
  margin-bottom: 10px !important;
  color: #496960;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.gs-work-panel-heading h3 {
  max-width: 690px;
  color: #081c20;
  font-size: clamp(26px, 2.3vw, 38px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -1.2px;
}

.gs-work-panel-heading>p:last-child {
  margin-top: 10px !important;
  color: #6b7b80;
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.5;
  letter-spacing: -.4px;
}

.gs-work-badge {
  position: absolute;
  z-index: 4;
  top: 28px;
  right: 26px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px;
  border: 1px solid #d7e9e0;
  border-radius: 30px;
  background: rgb(246 253 249 / 85%);
  color: #567b6d;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.gs-work-badge i,
.gs-status-dot {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--gw-green);
}

/* CATEGORY TABS */

.gs-work-tabs {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  min-width: 0;
}

.gs-work-tab {
  position: relative;
  display: grid;
  grid-template-columns: 49px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 24px;
  width: 100%;
  min-height: 146px;
  padding: 25px 25px 25px 32px;
  border: 0;
  border-bottom: 1px solid #edf0ef;
  background: #fff;
  color: #142028;
  text-align: left;
  cursor: pointer;
  transition: background-color .2s ease;
}

.gs-work-tab:last-child {
  border-bottom: 0;
}

.gs-work-tab::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: transparent;
}

.gs-work-tab:hover {
  background: #f5fbf8;
}

.gs-work-tab.is-active {
  background: #eaf8f1;
  box-shadow: inset 0 1px #ccebdc, inset 0 -1px #dbeee4;
}

.gs-work-tab.is-active::before {
  background: var(--gw-green);
}

.gs-category-icon {
  width: 43px;
  height: 43px;
}

.gs-work-tab strong {
  display: block;
  font-size: clamp(16px, 1.2vw, 20px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.5px;
}

.gs-work-tab small {
  display: block;
  margin-top: 6px;
  color: var(--gw-muted);
  font-size: clamp(12px, .9vw, 14px);
  line-height: 1.5;
  letter-spacing: -.35px;
}

.gs-category-arrow {
  width: 25px;
  height: 25px;
}

/* SHARED PREVIEW COMPONENTS */

.gs-mini-card {
  position: absolute;
  z-index: 2;
  padding: 18px;
  border: 1px solid #e0e9e6;
  border-radius: 14px;
  background: rgb(255 255 255 / 94%);
  box-shadow: 0 5px 20px rgb(25 64 47 / 2%);
  color: #233438;
}

.gs-mini-card>strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
}

.gs-mini-card p {
  color: #7e898e;
  font-size: 12px;
  line-height: 1.5;
}

.gs-mini-eyebrow {
  display: block;
  color: #7a8a83;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.gs-round-icon {
  display: grid;
  flex-shrink: 0;
  width: 47px;
  height: 47px;
  place-items: center;
  border-radius: 50%;
  background: #e8f6ee;
  color: #22543b;
}

.gs-round-icon svg {
  width: 27px;
  height: 27px;
}

.gs-progress-track {
  height: 6px;
  overflow: hidden;
  border-radius: 20px;
  background: #e9f2ee;
}

.gs-progress-track i {
  display: block;
  width: 68%;
  height: 100%;
  border-radius: inherit;
  background: #46c982;
}

/* LOGISTICS DESIGN */

.gs-logistics-panel {
  background: linear-gradient(135deg, #f1faf6, #edf9f3);
}

.gs-logistics-map {
  position: absolute;
  inset: auto 0 0;
  height: 66%;
  opacity: .9;
  mask-image: linear-gradient(transparent, #000 25%);
}

.gs-logistics-map>svg {
  width: 100%;
  height: 100%;
  stroke: none;
}

.gs-driver-card {
  top: 105px;
  right: 4.5%;
  width: 28.5%;
}

.gs-driver-person {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  margin-bottom: 12px;
}

.gs-driver-person b {
  color: #235a3a;
  font-size: 13px;
  white-space: nowrap;
}

.gs-small-chevron {
  margin-left: auto;
  color: #a2afb2;
  font-size: 28px;
}

.gs-driver-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px !important;
}

.gs-driver-note i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #aebabc;
}

.gs-dispatch-card {
  bottom: 36px;
  left: 3%;
  width: 29%;
}

.gs-dispatch-row {
  display: grid;
  grid-template-columns: 28px 1fr 55px;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
}

.gs-dispatch-row svg {
  width: 27px;
  height: 27px;
  padding: 5px;
  border-radius: 50%;
  background: #eaf5f0;
}

.gs-dispatch-row span {
  color: #6e7e83;
  font-size: 11px;
}

.gs-dispatch-row i {
  height: 10px;
  border-radius: 4px;
  background: #e9f5ef;
}

.gs-dispatch-row .gs-bar-active {
  background: #b4eccc;
}

.gs-map-marker {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #234c39;
}

.gs-map-marker>span {
  display: grid;
  width: 61px;
  height: 61px;
  place-items: center;
  border: 5px solid #d3f4e1;
  border-radius: 50%;
  background: #f5fcf8;
}

.gs-map-marker svg {
  width: 28px;
  height: 28px;
}

.gs-map-marker strong {
  font-size: 12px;
  font-weight: 500;
}

.gs-map-pickup {
  top: 40%;
  left: 12%;
}

.gs-map-transit {
  top: 56%;
  left: 43%;
}

.gs-map-delivered {
  top: 64%;
  right: 8%;
  flex-direction: column;
  gap: 5px;
}

/* RETAIL DESIGN */

.gs-retail-panel {
  background: linear-gradient(130deg, #f4f6f0, #eff8f1 65%, #f6eee5);
}

.gs-retail-art,
.gs-hospitality-art,
.gs-services-art {
  position: absolute;
  inset: 200px 0 0;
}

.gs-retail-orbit {
  position: absolute;
  width: 440px;
  height: 440px;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid #d8e6d8;
  border-radius: 50%;
  box-shadow: 0 0 0 40px rgb(216 230 216 / 20%);
}

.gs-retail-phone {
  position: absolute;
  left: 46%;
  bottom: -47px;
  width: 230px;
  height: 398px;
  padding: 25px 14px 14px;
  transform: translateX(-50%) rotate(-5deg);
  border: 6px solid #20382d;
  border-radius: 35px;
  background: #fff;
  box-shadow: 12px 20px 40px rgb(30 66 44 / 12%);
}

.gs-phone-camera {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 62px;
  height: 8px;
  transform: translateX(-50%);
  border-radius: 20px;
  background: #20382d;
}

.gs-phone-top,
.gs-shop-label,
.gs-phone-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.gs-phone-top strong {
  font-size: 13px;
}

.gs-phone-top svg {
  width: 20px;
  height: 20px;
}

.gs-shop-banner {
  margin-top: 15px;
  padding: 17px 12px;
  border-radius: 9px;
  background: #dcebdc;
}

.gs-shop-banner>span:first-child {
  font-size: 7px;
  letter-spacing: 1px;
}

.gs-shop-banner strong {
  display: block;
  margin: 8px 0 12px;
  color: #254431;
  font-size: 25px;
  line-height: 1.05;
  letter-spacing: -1px;
}

.gs-shop-pill {
  display: inline-block;
  padding: 6px 9px;
  border-radius: 20px;
  background: #fff;
  font-size: 8px;
}

.gs-shop-label {
  margin-top: 15px;
  font-size: 9px;
}

.gs-shop-label>span {
  color: #7d8b80;
  font-size: 8px;
}

.gs-shop-products {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 9px;
}

.gs-product-art {
  display: grid;
  height: 77px;
  place-items: center;
  border-radius: 7px;
  background: #edf3ed;
}

.gs-product-bottle {
  position: relative;
  width: 24px;
  height: 46px;
  border-radius: 7px 7px 9px 9px;
  background: #819c7c;
  box-shadow: inset -7px 0 rgb(0 0 0 / 8%);
}

.gs-product-bottle::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 5px;
  width: 14px;
  height: 8px;
  border-radius: 3px 3px 0 0;
  background: #40593d;
}

.gs-product-art-peach {
  background: #f3e8dc;
  color: #a78b6c;
}

.gs-product-art svg {
  width: 43px;
  height: 43px;
}

.gs-shop-products strong,
.gs-shop-products span {
  display: block;
  margin-top: 5px;
  font-size: 8px;
}

.gs-shop-products span {
  color: #7b857e;
}

.gs-phone-nav {
  margin-top: 12px;
  padding-top: 9px;
  border-top: 1px solid #edf0eb;
  font-size: 8px;
}

.gs-retail-loyalty {
  top: 66px;
  left: 5%;
  width: 215px;
  transform: rotate(-3deg);
}

.gs-retail-loyalty>strong {
  margin-top: 10px;
  font-size: 24px;
}

.gs-reward-points {
  margin-block: 20px 12px;
  color: #3e8e56;
  font-size: 29px;
  font-weight: 700;
}

.gs-reward-points span {
  font-size: 12px;
  font-weight: 400;
}

.gs-retail-loyalty p {
  margin-top: 11px;
  font-size: 10px;
}

.gs-retail-order {
  top: 125px;
  right: 3.5%;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 245px;
}

.gs-retail-order strong {
  font-size: 13px;
}

.gs-retail-order p {
  margin-top: 4px;
  font-size: 10px;
}

/* HOSPITALITY DESIGN */

.gs-hospitality-panel {
  background: linear-gradient(120deg, #faf7f0, #f3f2e8);
}

.gs-hotel-arch {
  position: absolute;
  right: 10%;
  bottom: -60px;
  width: 260px;
  height: 380px;
  overflow: hidden;
  border-radius: 160px 160px 0 0;
  background: #d7e5dc;
}

.gs-hotel-sun {
  position: absolute;
  top: 55px;
  right: 40px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #f9e3b3;
}

.gs-hotel-hill {
  position: absolute;
  bottom: -50px;
  left: -30px;
  width: 370px;
  height: 250px;
  transform: rotate(-25deg);
  border-radius: 45%;
  background: #9cb8a8;
}

.gs-stay-card {
  bottom: 24px;
  left: 10%;
  width: 280px;
  transform: rotate(-3deg);
}

.gs-stay-card h4 {
  margin-top: 9px;
  color: #384b3d;
  font-family: Georgia, serif;
  font-size: 27px;
  font-weight: 400;
  line-height: 1.1;
}

.gs-room-art {
  position: relative;
  height: 96px;
  overflow: hidden;
  margin-top: 13px;
  border-radius: 8px;
  background: #e9decd;
}

.gs-room-window {
  position: absolute;
  top: 8px;
  right: 25px;
  width: 52px;
  height: 70px;
  border: 5px solid #f7f0e5;
  border-radius: 28px 28px 0 0;
  background: linear-gradient(#c8dfd7 70%, #9db6a4 70%);
}

.gs-room-bed {
  position: absolute;
  bottom: 11px;
  left: 24px;
  width: 130px;
  height: 30px;
  border-radius: 7px 7px 3px 3px;
  background: #fffaf1;
  box-shadow: 0 9px #a59781;
}

.gs-room-bed::before {
  content: "";
  position: absolute;
  top: -14px;
  width: 130px;
  height: 19px;
  border-radius: 8px 8px 0 0;
  background: #b8b399;
}

.gs-room-lamp {
  position: absolute;
  bottom: 15px;
  left: 12px;
  width: 3px;
  height: 39px;
  background: #85785e;
}

.gs-stay-dates {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}

.gs-stay-dates span,
.gs-stay-dates strong {
  display: block;
}

.gs-stay-dates span {
  margin-bottom: 5px;
  color: #8c9488;
  font-size: 8px;
  letter-spacing: 1px;
}

.gs-stay-dates strong {
  font-size: 17px;
}

.gs-stay-dates>i {
  width: 35px;
  height: 1px;
  background: #d9e0d6;
}

.gs-stay-confirmed {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 15px;
  color: #4c8060;
  font-size: 10px;
}

.gs-stay-confirmed svg {
  width: 16px;
  height: 16px;
}

.gs-guest-card {
  top: 50px;
  right: 8%;
  width: 250px;
}

.gs-guest-card>strong {
  margin-top: 13px;
  font-size: 20px;
}

.gs-guest-card>p {
  margin-top: 6px;
  font-size: 10px;
}

.gs-guest-card>div {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  padding-top: 12px;
  border-top: 1px solid #eaf0e9;
  font-size: 12px;
}

.gs-guest-card b {
  color: #6a9278;
}

/* PROFESSIONAL SERVICES DESIGN */

.gs-services-panel {
  background:
    radial-gradient(ellipse at 80% 90%, #e2e9fa, transparent 65%),
    #f3f6fa;
}

.gs-portal-card {
  top: 25px;
  left: 6%;
  width: 55%;
  padding: 23px;
}

.gs-portal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 15px;
  border-bottom: 1px solid #edf0f5;
}

.gs-portal-top>strong {
  color: #566474;
  font-size: 12px;
}

.gs-portal-top>span,
.gs-meeting-attendees>span {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 50%;
  background: #e6eaf6;
  color: #657398;
  font-size: 9px;
  font-weight: 600;
}

.gs-portal-card h4 {
  margin-top: 16px;
  font-size: 20px;
  letter-spacing: -.7px;
}

.gs-portal-card>p {
  margin-top: 5px;
  font-size: 10px;
}

.gs-portal-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-block: 17px;
}

.gs-portal-stats>div {
  padding: 10px;
  border: 1px solid #e8edf5;
  border-radius: 7px;
  background: #f9faff;
}

.gs-portal-stats b,
.gs-portal-stats span {
  display: block;
}

.gs-portal-stats b {
  color: #667bb4;
  font-size: 22px;
}

.gs-portal-stats span {
  margin-top: 4px;
  color: #8790a0;
  font-size: 8px;
}

.gs-project-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
}

.gs-project-square {
  width: 25px;
  height: 25px;
  border-radius: 6px;
  background: #dbe6fa;
}

.gs-project-row strong,
.gs-project-row small {
  display: block;
  font-size: 10px;
}

.gs-project-row small {
  margin-top: 3px;
  color: #8793a1;
  font-size: 8px;
}

.gs-project-row>b {
  margin-left: auto;
  color: #6b84bb;
  font-size: 12px;
}

.gs-portal-card .gs-progress-track i {
  background: #94aadb;
}

.gs-project-task {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 13px;
  color: #66727f;
  font-size: 9px;
}

.gs-project-task>span {
  color: #75a990;
}

.gs-project-task small {
  margin-left: auto;
  color: #91a1b0;
  font-size: 8px;
}

.gs-meeting-card {
  top: 100px;
  right: 5%;
  width: 240px;
  transform: rotate(3deg);
}

.gs-meeting-date {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin-block: 16px;
  padding: 10px 18px;
  border-radius: 10px;
  background: #edf0fc;
  color: #7283b3;
}

.gs-meeting-date b {
  font-size: 30px;
  line-height: 1;
}

.gs-meeting-date span {
  margin-top: 6px;
  font-size: 9px;
  letter-spacing: 1px;
}

.gs-meeting-card>strong {
  font-size: 13px;
}

.gs-meeting-card>p {
  margin-top: 6px;
  font-size: 11px;
}

.gs-meeting-attendees {
  display: flex;
  align-items: center;
  margin-top: 18px;
}

.gs-meeting-attendees>span+span {
  margin-left: -5px;
  border: 2px solid #fff;
  background: #e7f2ed;
  color: #6e9780;
}

.gs-meeting-attendees small {
  margin-left: 8px;
  color: #8a95a2;
  font-size: 9px;
}

/* FOOTER */

.gs-work-footer {
  display: grid;
  grid-template-columns: 1fr 1.3fr auto;
  align-items: center;
  gap: 28px;
  padding: 34px 10px 0;
}

.gs-work-navigation {
  display: flex;
  align-items: center;
  gap: 14px;
}

.gs-work-prev,
.gs-work-next {
  display: grid;
  flex-shrink: 0;
  width: 45px;
  height: 45px;
  padding: 0;
  place-items: center;
  border: 1px solid #dbe3e3;
  border-radius: 50%;
  background: #fff;
  color: #25333a;
  cursor: pointer;
}

.gs-work-prev svg,
.gs-work-next svg {
  width: 19px;
  height: 19px;
}

.gs-work-prev svg {
  transform: rotate(180deg);
}

.gs-work-prev:hover,
.gs-work-next:hover {
  background: #edf9f2;
}

.gs-work-indicators {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 20px;
}

.gs-work-indicators button {
  position: relative;
  width: 39px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.gs-work-indicators button::before {
  content: "";
  position: absolute;
  top: 11px;
  right: 0;
  left: 0;
  height: 8px;
  border-radius: 10px;
  background: #dce3e3;
}

.gs-work-indicators button[aria-current="true"]::before {
  background: var(--gw-green);
}

.gs-work-footer>p {
  color: var(--gw-muted);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -.3px;
}

.gs-work-actions {
  display: flex;
  align-items: center;
  gap: 45px;
}

.gs-work-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 13px 24px;
  border-radius: 8px;
  background: var(--gw-green);
  color: #062c1b;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.gs-work-primary svg {
  width: 21px;
  height: 21px;
}

.gs-work-primary:hover {
  background: #26ba65;
}

.gs-work-link {
  color: #606d75;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  text-underline-offset: 5px;
  white-space: nowrap;
}

.gs-work button:focus-visible,
.gs-work a:focus-visible,
.gs-work-panel:focus-visible {
  outline: 3px solid #1b9b57;
  outline-offset: -4px;
}

@keyframes gw-panel-enter {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* LAPTOP */

@media (max-width: 1300px) {
  .gs-work {
    padding-inline: 24px;
  }

  .gs-work-panel {
    min-height: 560px;
  }

  .gs-work-panel-heading {
    padding: 53px 24px 0;
  }

  .gs-work-badge {
    top: 16px;
    right: 16px;
    font-size: 9px;
  }

  .gs-work-tab {
    grid-template-columns: 35px minmax(0, 1fr) 22px;
    gap: 17px;
    padding-inline: 22px;
  }

  .gs-category-icon {
    width: 34px;
    height: 34px;
  }

  .gs-work-tab strong {
    font-size: 20px;
  }

  .gs-work-tab small {
    font-size: 12px;
  }

  .gs-driver-card {
    top: 210px;
    right: 20px;
    width: 215px;
    padding: 14px;
  }

  .gs-dispatch-card {
    width: 240px;
    padding: 14px;
  }

  .gs-map-pickup {
    top: 44%;
    left: 11%;
  }

  .gs-map-transit {
    top: 62%;
    left: 45%;
  }

  .gs-map-delivered {
    top: 76%;
  }

  .gs-retail-loyalty {
    left: 3%;
    width: 165px;
    padding: 13px;
  }

  .gs-retail-loyalty>strong {
    font-size: 20px;
  }

  .gs-retail-phone {
    left: 52%;
  }

  .gs-retail-order {
    top: auto;
    bottom: 24px;
    right: 3%;
    width: 210px;
    padding: 12px;
  }

  .gs-stay-card {
    left: 5%;
    width: 250px;
  }

  .gs-guest-card {
    right: 4%;
    width: 210px;
    padding: 14px;
  }

  .gs-portal-card {
    left: 4%;
    width: 65%;
    padding: 16px;
  }

  .gs-meeting-card {
    top: 140px;
    right: 3%;
    width: 185px;
    padding: 14px;
  }

  .gs-work-footer {
    grid-template-columns: 1fr auto;
    gap: 22px;
  }

  .gs-work-footer>p {
    grid-row: 2;
    grid-column: 1 / -1;
    font-size: 14px;
  }

  .gs-work-desktop-break {
    display: none;
  }

  .gs-work-actions {
    gap: 24px;
  }
}

/* TABLET */

@media (max-width: 950px) {
  .gs-work-showcase {
    grid-template-columns: 1fr;
  }

  .gs-work-previews {
    border-right: 0;
    border-bottom: 1px solid var(--gw-border);
  }

  .gs-work-panel {
    min-height: 570px;
  }

  .gs-work-panel-heading h3 {
    font-size: 43px;
  }

  .gs-work-tabs {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }

  .gs-work-tab {
    min-height: 115px;
  }

  .gs-work-tab:nth-child(odd) {
    border-right: 1px solid var(--gw-border);
  }

  .gs-work-tab:nth-child(3) {
    border-bottom: 0;
  }

  .gs-driver-card {
    top: 125px;
    width: 235px;
  }

  .gs-retail-loyalty {
    left: 7%;
    width: 210px;
  }

  .gs-retail-order {
    bottom: 90px;
    width: 220px;
  }

  .gs-stay-card {
    left: 10%;
    width: 270px;
  }

  .gs-guest-card {
    right: 9%;
    width: 240px;
  }
}

/* MOBILE */

@media (max-width: 600px) {
  .gs-work {
    padding: 32px 16px;
  }

  .gs-work-heading {
    padding: 0;
    margin-bottom: 24px;
  }

  .gs-work-eyebrow {
    font-size: 12px;
  }

  .gs-work-heading h2 {
    font-size: 32px;
    line-height: 1.12;
    letter-spacing: -1.2px;
  }

  .gs-work-description {
    margin-top: 14px !important;
    font-size: 15px;
    line-height: 1.6;
  }

  .gs-work-panel {
    min-height: 580px;
  }

  .gs-work-panel-heading {
    padding: 57px 18px 0;
  }

  .gs-work-panel-heading h3 {
    font-size: clamp(27px, 7vw, 36px);
    line-height: 1.12;
    letter-spacing: -1.2px;
  }

  .gs-work-sector {
    font-size: 11px;
    margin-bottom: 9px !important;
  }

  .gs-work-panel-heading>p:last-child {
    max-width: 320px;
    font-size: 13px;
    line-height: 1.5;
  }

  .gs-work-badge {
    top: 16px;
    left: 18px;
    right: auto;
    padding: 6px 9px;
    font-size: 8px;
  }

  .gs-work-tabs {
    grid-template-columns: 1fr;
  }

  .gs-work-tab {
    grid-template-columns: 35px minmax(0, 1fr) 22px;
    min-height: 93px;
    padding: 19px;
    gap: 16px;
  }

  .gs-work-tab:nth-child(odd) {
    border-right: 0;
  }

  .gs-work-tab:nth-child(3) {
    border-bottom: 1px solid #edf0ef;
  }

  .gs-work-tab strong {
    font-size: 18px;
  }

  .gs-work-tab small {
    font-size: 11px;
  }

  .gs-driver-card {
    top: 230px;
    right: 12px;
    width: 165px;
    padding: 12px;
  }

  .gs-driver-card>strong {
    font-size: 12px;
  }

  .gs-driver-person {
    gap: 6px;
  }

  .gs-driver-person .gs-round-icon {
    width: 33px;
    height: 33px;
  }

  .gs-driver-person svg {
    width: 22px;
    height: 22px;
  }

  .gs-driver-person b,
  .gs-driver-note {
    font-size: 10px !important;
  }

  .gs-dispatch-card {
    left: 12px;
    bottom: 17px;
    width: 208px;
    padding: 12px;
  }

  .gs-dispatch-card>strong {
    font-size: 12px;
  }

  .gs-dispatch-row {
    grid-template-columns: 24px 1fr 35px;
    gap: 6px;
    margin-top: 8px;
  }

  .gs-dispatch-row span {
    font-size: 9px;
  }

  .gs-map-marker>span {
    width: 43px;
    height: 43px;
    border-width: 3px;
  }

  .gs-map-marker svg {
    width: 23px;
    height: 23px;
  }

  .gs-map-marker strong {
    font-size: 9px;
  }

  .gs-map-pickup {
    top: 43%;
    left: 7%;
    flex-direction: column;
    gap: 3px;
  }

  .gs-map-transit {
    top: 64%;
    left: 35%;
  }

  .gs-map-delivered {
    top: 77%;
    right: 6%;
  }

  .gs-retail-art,
  .gs-hospitality-art,
  .gs-services-art {
    top: 220px;
  }

  .gs-retail-phone {
    left: 57%;
    bottom: -32px;
    width: 210px;
    height: 370px;
  }

  .gs-retail-loyalty {
    top: 35px;
    left: 10px;
    width: 135px;
    padding: 12px;
  }

  .gs-retail-loyalty>strong {
    font-size: 18px;
  }

  .gs-mini-eyebrow {
    font-size: 8px;
  }

  .gs-reward-points {
    margin-block: 13px 9px;
    font-size: 23px;
  }

  .gs-retail-order {
    bottom: 22px;
    right: 12px;
    width: 205px;
  }

  .gs-retail-order .gs-round-icon {
    width: 32px;
    height: 32px;
  }

  .gs-retail-order svg {
    width: 20px;
    height: 20px;
  }

  .gs-stay-card {
    left: 12px;
    bottom: 22px;
    width: 207px;
    padding: 13px;
  }

  .gs-stay-card h4 {
    font-size: 23px;
  }

  .gs-guest-card {
    top: 60px;
    right: 10px;
    width: 148px;
    padding: 12px;
  }

  .gs-guest-card .gs-round-icon {
    width: 34px;
    height: 34px;
  }

  .gs-guest-card .gs-round-icon svg {
    width: 22px;
    height: 22px;
  }

  .gs-guest-card>strong {
    font-size: 15px;
  }

  .gs-guest-card>p {
    font-size: 9px;
  }

  .gs-guest-card>div {
    margin-top: 11px;
    padding-top: 10px;
    font-size: 9px;
  }

  .gs-hotel-arch {
    right: 0;
    width: 190px;
  }

  .gs-portal-card {
    top: 14px;
    left: 10px;
    width: calc(100% - 32px);
    padding: 15px;
  }

  .gs-portal-card h4 {
    font-size: 18px;
  }

  .gs-portal-stats {
    margin-block: 13px;
  }

  .gs-meeting-card {
    top: auto;
    bottom: 10px;
    right: 10px;
    width: 165px;
    padding: 12px;
    transform: rotate(2deg);
  }

  .gs-meeting-date {
    float: left;
    margin: 10px 10px 8px 0;
    padding: 7px 10px;
  }

  .gs-meeting-date b {
    font-size: 23px;
  }

  .gs-meeting-card>strong {
    margin-top: 12px;
    font-size: 11px;
  }

  .gs-meeting-card>p {
    font-size: 9px;
  }

  .gs-meeting-attendees {
    clear: both;
    margin-top: 10px;
  }

  .gs-meeting-attendees small {
    font-size: 8px;
  }

  .gs-work-footer {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 24px 0 0;
  }

  .gs-work-navigation {
    justify-content: space-between;
    gap: 10px;
  }

  .gs-work-indicators {
    margin-left: auto;
    gap: 6px;
  }

  .gs-work-indicators button {
    width: 29px;
  }

  .gs-work-footer>p {
    grid-column: auto;
    grid-row: auto;
    font-size: 13px;
  }

  .gs-work-actions {
    flex-wrap: wrap;
    gap: 20px;
  }

  .gs-work-primary {
    min-height: 48px;
    padding-inline: 18px;
    font-size: 14px;
  }

  .gs-work-link {
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gs-work-panel {
    animation: none;
  }

  .gs-work-tab {
    transition: none;
  }
}

/* Put this import at the top of your CSS file.
   Remove it if your website already loads Inter. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

/* ======================================
   APP INVESTMENT
====================================== */

.gs-investment {
  --gsi-green: #42ce7c;
  --gsi-dark: #102e25;
  --gsi-text: #263d43;
  --gsi-muted: #7b898d;
  --gsi-border: #e3e9e8;

  padding: 20px 32px 28px;
  background: #fff;
  color: var(--gsi-text);
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.gs-investment,
.gs-investment *,
.gs-investment *::before,
.gs-investment *::after {
  box-sizing: border-box;
}

.gs-investment :is(h2, h3, h4, p) {
  margin: 0;
}

.gs-investment svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gs-investment .gsi-symbols {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.gs-investment-container {
  width: 100%;
  max-width: 1300px;
  margin-inline: auto;
}

/* HEADER */

.gsi-header {
  display: flex;
  justify-content: space-between;
  gap: 35px;
  padding: 0 20px;
  margin-bottom: 20px;
}

.gsi-eyebrow {
  margin-bottom: 6px !important;
  color: #6da78e;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.gsi-header h2 {
  color: #082b24;
  font-size: clamp(28px, 2.5vw, 42px);
  font-weight: 750;
  line-height: 1.13;
  letter-spacing: -1.5px;
}

.gsi-intro {
  max-width: 1150px;
  margin-top: 7px !important;
  color: var(--gsi-muted);
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.5;
}

.gsi-brand {
  flex-shrink: 0;
  padding-top: 1px;
}

.gsi-brand strong {
  display: block;
  color: #354e50;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.gsi-brand span {
  display: block;
  margin-top: 20px;
  padding-left: 16px;
  border-left: 1px solid #8faaa2;
  color: #829194;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.9;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* MAIN GRID */

.gsi-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.96fr) minmax(0, 1fr);
  align-items: stretch;
}

.gsi-builder {
  min-width: 0;
  padding: 20px 32px 32px 26px;
  border: 1px solid var(--gsi-border);
  border-radius: 9px;
  background: #fff;
}

.gsi-builder-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 19px;
}

.gsi-builder-heading h3,
.gsi-summary-heading h3 {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.gsi-completion {
  color: #86979a;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 1.7px;
  text-align: right;
  text-transform: uppercase;
}

/* SHARED COLUMN ALIGNMENT ACROSS ALL ROWS */

.gsi-rows {
  position: relative;
  border-top: 1px solid var(--gsi-border);
}

.gsi-rows::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 13px;
  bottom: 13px;
  right: 0;
  width: 2px;
  background: linear-gradient(#a1ebbf, #37c971);
}

.gsi-row {
  position: relative;
  display: grid;
  grid-template-columns: 38px 52px minmax(0, 1fr) minmax(265px, 36%);
  align-items: center;
  column-gap: 20px;
  min-height: 81px;
  padding: 16px 56px 16px 0;
  border-bottom: 1px solid var(--gsi-border);
}

.gsi-row::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  right: -6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gsi-green);
  transform: translateY(-50%);
}

.gsi-number {
  color: #667e85;
  font-size: 14px;
}

.gsi-row-icon {
  width: 34px;
  height: 34px;
  color: #2a4248;
}

.gsi-label {
  min-width: 0;
}

.gsi-label h4 {
  color: #253e47;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -.4px;
}

.gsi-label p {
  margin-top: 3px;
  color: var(--gsi-muted);
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: -.25px;
}

/* RADIO / CHECKBOX CONTROLS */

.gsi-options {
  display: flex;
  min-width: 0;
  min-height: 39px;
  border: 1px solid var(--gsi-border);
  border-radius: 8px;
  background: #fff;
}

.gsi-options label {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

/* Visually hidden; still keyboard accessible */
.gsi-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.gsi-options label>span {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 0;
  min-height: 38px;
  padding: 8px 9px;
  border-radius: 6px;
  color: #4c646e;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease;
}

.gsi-options label+label {
  border-left: 1px solid var(--gsi-border);
}

.gsi-options input[type="radio"]:checked+span {
  background: var(--gsi-green);
  color: #093e25;
  box-shadow: 0 2px 5px rgb(39 178 94 / 12%);
}

.gsi-options label:hover>span {
  background: #f0faf4;
}

.gsi-options input[type="radio"]:checked+span:hover {
  background: #36c772;
}

.gsi-options input:focus-visible+span {
  outline: 2px solid #137848;
  outline-offset: -3px;
}

.gsi-checkboxes {
  min-height: 45px;
}

.gsi-checkboxes label>span {
  justify-content: flex-start;
  min-height: 44px;
  padding-inline: 12px;
}

.gsi-checkboxes i {
  position: relative;
  flex: 0 0 21px;
  width: 21px;
  height: 21px;
  border: 1px solid #c9d8d0;
  border-radius: 5px;
  background: #fff;
}

.gsi-checkboxes input:checked+span i {
  border-color: var(--gsi-green);
  background: var(--gsi-green);
}

.gsi-checkboxes input:checked+span i::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 7px;
  width: 5px;
  height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(40deg);
}

/* DARK SUMMARY */

.gsi-summary {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 21px 30px 18px;
  border: 1px solid #214238;
  border-radius: 8px;
  background: linear-gradient(125deg, #112f26, #102a23);
  color: #f5faf7;
}

.gsi-summary-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.gsi-summary-heading h3 {
  color: #e4eee8;
}

.gsi-summary-heading>span {
  color: #a4bab0;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.gsi-summary-list {
  display: grid;
  gap: 15px;
  margin: 26px 0 23px;
  padding: 0;
  list-style: none;
}

.gsi-summary-list li {
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr);
  align-items: start;
  gap: 23px;
}

.gsi-check {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border-radius: 50%;
  background: #44d081;
  color: #075231;
}

.gsi-check svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

.gsi-summary-list strong {
  display: block;
  color: #eef6f0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}

.gsi-summary-list p {
  margin-top: 2px;
  color: #b0c1b8;
  font-size: 12px;
  line-height: 1.4;
}

.gsi-summary-cta {
  margin-top: auto;
  padding-top: 19px;
  border-top: 1px solid #73887d;
}

.gsi-summary-cta h4 {
  color: #f8fcf9;
  font-size: clamp(22px, 1.6vw, 27px);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -.6px;
}

.gsi-summary-cta>p {
  margin-top: 9px;
  color: #b2c3ba;
  font-size: 15px;
  line-height: 1.45;
}

.gsi-quote-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 44px;
  margin-top: 18px;
  padding: 11px 14px;
  border-radius: 8px;
  background: #53d58b;
  color: #083e25;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .18s ease;
}

.gsi-quote-button svg {
  width: 20px;
  height: 20px;
}

.gsi-quote-button:hover {
  background: #75e4a3;
}

.gsi-consultation {
  display: block;
  width: fit-content;
  margin: 14px auto 0;
  color: #e0ebe4;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  text-underline-offset: 3px;
}

.gsi-reassurance {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 17px;
  color: #b1c4b9;
  font-size: 12px;
  line-height: 1.4;
}

.gsi-reassurance svg {
  flex: 0 0 23px;
  width: 23px;
  height: 23px;
}

.gsi-summary a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

/* FOOTER PROCESS */

.gsi-footer {
  display: grid;
  grid-template-columns: 31% 1fr;
  gap: 30px;
  align-items: start;
  padding: 26px 15px 0;
}

.gsi-footer-note {
  color: #7a888c;
  font-size: 15px;
  line-height: 1.5;
}

.gsi-process {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 25px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gsi-process li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  gap: 17px;
  min-width: 0;
}

.gsi-process svg {
  width: 28px;
  height: 28px;
  color: #7a8b91;
  stroke-width: 1.5;
}

.gsi-process strong {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #3e555b;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.5;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.gsi-process li:not(:last-child) strong::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #a9b7b9;
}

.gsi-process p {
  margin-top: 3px;
  color: #849093;
  font-size: 12px;
  line-height: 1.5;
}

/* LAPTOP */

@media (max-width: 1400px) {
  .gsi-builder {
    padding-inline: 20px 25px;
  }

  .gsi-row {
    grid-template-columns: 26px 35px minmax(0, 1fr) 275px;
    gap: 13px;
    padding-right: 26px;
    min-height: 85px;
  }

  .gsi-label h4 {
    font-size: 14px;
  }

  .gsi-label p {
    font-size: 11px;
  }

  .gsi-row-icon {
    width: 29px;
    height: 29px;
  }

  .gsi-options label>span {
    font-size: 11px;
    padding-inline: 7px;
  }

  .gsi-checkboxes label>span {
    gap: 6px;
    padding-inline: 8px;
  }

  .gsi-summary {
    padding-inline: 23px;
  }

  .gsi-summary-list li {
    gap: 15px;
  }

  .gsi-summary-cta>p {
    font-size: 14px;
  }

  .gsi-footer {
    grid-template-columns: 29% 1fr;
    gap: 20px;
  }

  .gsi-footer-note {
    font-size: 13px;
  }

  .gsi-process {
    gap: 16px;
  }

  .gsi-process li {
    grid-template-columns: 26px 1fr;
    gap: 12px;
  }

  .gsi-process p {
    font-size: 11px;
  }
}

/* TABLET */

@media (max-width: 1150px) {
  .gsi-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .gsi-header {
    padding-inline: 0;
  }

  .gsi-brand {
    display: none;
  }

  .gsi-builder {
    padding: 24px 28px;
  }

  .gsi-row {
    grid-template-columns: 30px 43px minmax(0, 1fr) 320px;
    gap: 18px;
    padding-right: 35px;
  }

  .gsi-label h4 {
    font-size: 16px;
  }

  .gsi-label p {
    font-size: 12px;
  }

  .gsi-options label>span {
    font-size: 12px;
  }

  .gsi-summary {
    padding: 26px;
  }

  .gsi-summary-list {
    grid-template-columns: 1fr 1fr;
    gap: 22px 30px;
  }

  .gsi-summary-cta h4 {
    font-size: 30px;
  }

  .gsi-summary-cta h4 br {
    display: none;
  }

  .gsi-summary-cta>p {
    max-width: 700px;
    font-size: 16px;
  }

  .gsi-quote-button {
    max-width: 400px;
  }

  .gsi-consultation {
    margin-left: 0;
  }

  .gsi-footer {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-inline: 0;
  }

  .gsi-desktop-break {
    display: none;
  }
}

/* SMALL TABLET */

@media (max-width: 800px) {
  .gs-investment {
    padding: 32px 22px;
  }

  .gsi-row {
    grid-template-columns: 28px 35px minmax(0, 1fr);
    gap: 13px;
    padding: 20px 25px 20px 0;
  }

  .gsi-options {
    grid-column: 3;
    margin-top: 2px;
  }

  .gsi-label h4 {
    font-size: 15px;
  }

  .gsi-label p {
    font-size: 12px;
  }

  .gsi-process {
    grid-template-columns: 1fr 1fr;
    gap: 25px;
  }
}

/* MOBILE */

@media (max-width: 520px) {
  .gs-investment {
    padding: 28px 16px;
  }

  .gsi-eyebrow {
    font-size: 10px;
    letter-spacing: 2.4px;
  }

  .gsi-header h2 {
    font-size: 32px;
    line-height: 1.12;
    letter-spacing: -1.3px;
  }

  .gsi-intro {
    margin-top: 12px !important;
    font-size: 14px;
    line-height: 1.6;
  }

  .gsi-builder {
    padding: 18px 19px 20px 15px;
  }

  .gsi-builder-heading {
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 15px;
  }

  .gsi-builder-heading h3 {
    max-width: 165px;
    font-size: 11px;
    letter-spacing: 1.3px;
  }

  .gsi-completion {
    font-size: 9px;
    letter-spacing: .7px;
    white-space: nowrap;
  }

  .gsi-row {
    grid-template-columns: 23px 29px minmax(0, 1fr);
    gap: 10px;
    padding: 19px 14px 19px 0;
  }

  .gsi-number {
    font-size: 11px;
  }

  .gsi-row-icon {
    width: 26px;
    height: 26px;
  }

  .gsi-label h4 {
    font-size: 14px;
  }

  .gsi-label p {
    font-size: 11px;
    line-height: 1.5;
  }

  .gsi-options {
    grid-column: 1 / -1;
    margin-top: 5px;
  }

  .gsi-options label>span {
    min-height: 42px;
    font-size: 11px;
  }

  .gsi-checkboxes label>span {
    justify-content: center;
    gap: 7px;
    padding-inline: 5px;
  }

  .gsi-checkboxes i {
    flex-basis: 19px;
    width: 19px;
    height: 19px;
  }

  .gsi-checkboxes input:checked+span i::after {
    top: 3px;
    left: 6px;
  }

  .gsi-row::after {
    right: -4px;
    width: 10px;
    height: 10px;
  }

  .gsi-summary {
    padding: 23px 20px;
  }

  .gsi-summary-heading h3 {
    font-size: 13px;
    letter-spacing: 1.5px;
  }

  .gsi-summary-heading>span {
    font-size: 8px;
    letter-spacing: 1.2px;
  }

  .gsi-summary-list {
    grid-template-columns: 1fr;
    gap: 19px;
    margin-block: 25px;
  }

  .gsi-summary-list strong {
    font-size: 14px;
  }

  .gsi-summary-list p {
    font-size: 12px;
  }

  .gsi-summary-cta h4 {
    font-size: 27px;
  }

  .gsi-summary-cta>p {
    font-size: 14px;
    line-height: 1.6;
  }

  .gsi-quote-button {
    min-height: 48px;
    font-size: 14px;
  }

  .gsi-consultation {
    margin-inline: auto;
    font-size: 12px;
  }

  .gsi-reassurance {
    font-size: 10px;
  }

  .gsi-process {
    gap: 24px 18px;
  }

  .gsi-process li {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 10px;
  }

  .gsi-process svg {
    width: 23px;
    height: 23px;
  }

  .gsi-process strong {
    gap: 7px;
    font-size: 10px;
  }

  .gsi-process p {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .gsi-options label>span,
  .gsi-quote-button {
    transition: none;
  }
}

/* Add at the top of your stylesheet.
   Remove if Inter is already loaded. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

/* =========================================
   DELIVERY TIMELINE
========================================= */

.gs-roadmap {
  --gr-green: #2dcc7c;
  --gr-dark-green: #165747;
  --gr-dark: #071e20;
  --gr-text: #667e81;
  --gr-line: #dee8e6;
  --gr-label-width: 300px;
  --gr-axis-height: 58px;
  --gr-row-height: 145px;
  --gr-right-space: 34px;

  width: 100%;
  padding: 30px 40px 28px;
  background: #fff;
  color: var(--gr-dark);
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.gs-roadmap,
.gs-roadmap *,
.gs-roadmap *::before,
.gs-roadmap *::after {
  box-sizing: border-box;
}

.gs-roadmap :is(h2, h3, h4, p) {
  margin: 0;
}

.gs-roadmap-container {
  width: 100%;
  max-width: 1300px;
  margin-inline: auto;
}

.gs-roadmap svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* HEADING */

.gs-roadmap-heading {
  padding-inline: 24px;
  margin-bottom: 30px;
}

.gs-roadmap-eyebrow {
  margin-bottom: 10px !important;
  color: #718e89;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.gs-roadmap-heading h2 {
  color: #061d1e;
  font-size: clamp(30px, 2.7vw, 46px);
  font-weight: 750;
  line-height: 1.12;
  letter-spacing: -1.5px;
}

.gs-roadmap-description {
  max-width: 1060px;
  margin-top: 10px !important;
  color: #64777b;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.45;
  letter-spacing: -.25px;
}

/* CHART WRAPPER */

.gs-roadmap-scroll {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: #a9d4bd #f0f6f2;
}

.gs-roadmap-scroll:focus-visible {
  outline: 2px solid #278a61;
  outline-offset: 3px;
}

.gs-roadmap-chart {
  position: relative;
  min-width: 1110px;
  padding: var(--gr-axis-height) var(--gr-right-space) 0 24px;
}

/* SHARED AXIS */

.gs-roadmap-axis {
  position: absolute;
  top: 0;
  right: var(--gr-right-space);
  left: calc(24px + var(--gr-label-width));
  height: var(--gr-axis-height);
}

.gs-roadmap-axis::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 16px;
  left: 0;
  height: 1px;
  background: #d6e2df;
}

.gs-roadmap-axis-point {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--position);
  width: 0;
}

.gs-roadmap-axis-point>span {
  position: absolute;
  top: 5px;
  left: 0;
  color: #3b5357;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: .5px;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(-50%);
}

.gs-roadmap-axis-point>i {
  position: absolute;
  z-index: 1;
  bottom: 12px;
  left: -4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #adc1bd;
}

.gs-roadmap-axis-point:first-child>i {
  background: #426f62;
}

/* CONTINUOUS VERTICAL GUIDES */

.gs-roadmap-guides {
  position: absolute;
  top: calc(var(--gr-axis-height) - 16px);
  right: var(--gr-right-space);
  bottom: 0;
  left: calc(24px + var(--gr-label-width));
  pointer-events: none;
}

.gs-roadmap-guides i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--position);
  border-left: 1px dashed #d4e1dd;
}

/* THREE MATCHING ROWS */

.gs-roadmap-row {
  position: relative;
  display: grid;
  grid-template-columns: var(--gr-label-width) minmax(0, 1fr);
  min-height: var(--gr-row-height);
}

.gs-roadmap-label {
  position: relative;
  z-index: 1;
  padding: 15px 20px 20px 0;
}

.gs-roadmap-label h3 {
  color: #12282d;
  font-size: 18px;
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: -.45px;
  text-transform: uppercase;
}

.gs-roadmap-duration {
  margin-top: 3px !important;
  color: #209e69;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.8px;
}

.gs-roadmap-scope {
  margin-top: 5px !important;
  color: #708184;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: -.2px;
}

.gs-roadmap-mid .gs-roadmap-duration,
.gs-roadmap-enterprise .gs-roadmap-duration {
  color: #247b60;
}

/* Each track uses the same coordinate system */
.gs-roadmap-track {
  position: relative;
  min-width: 0;
  height: var(--gr-row-height);
}

.gs-roadmap-line {
  position: absolute;
  top: 55px;
  left: 0;
  width: var(--line-end);
  height: 5px;
  border-radius: 6px;
  background: var(--gr-green);
  transform: translateY(-50%);
}

.gs-roadmap-stages {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gs-roadmap-stage {
  position: absolute;
  top: 55px;
  left: var(--position);
  width: 0;
  height: 0;
}

.gs-roadmap-stage>i {
  position: absolute;
  top: -8px;
  left: -8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gr-green);
}

.gs-roadmap-stage>span {
  position: absolute;
  top: 18px;
  left: 0;
  color: #5a7679;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
}

.gs-roadmap-first>span {
  left: 0;
  text-align: left;
  transform: none;
}

.gs-roadmap-label-end>span {
  left: -12px;
  transform: translateX(-100%);
}

/* Launch dot with mint halo */
.gs-roadmap-launch>i {
  top: -11px;
  left: -11px;
  width: 22px;
  height: 22px;
  border: 3px solid #f3fff8;
  background: #27cd78;
  box-shadow: 0 0 0 8px #def8e9;
}

/* Result labels */

.gs-roadmap-result {
  position: absolute;
  top: 55px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 33px;
  padding: 8px 14px;
  border-radius: 8px;
  background: #e8f7ef;
  color: #254f46;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: .6px;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateY(-50%);
}

.gs-roadmap-result-mvp {
  left: calc(38.5% + 27px);
}

.gs-roadmap-result-mid {
  left: calc(77% + 23px);
}

/* Enterprise line */

.gs-roadmap-enterprise .gs-roadmap-line {
  background: linear-gradient(90deg, #155747 75%, #22a86d);
}

.gs-roadmap-enterprise .gs-roadmap-stage:not(.gs-roadmap-launch)>i {
  background: #165747;
}

.gs-roadmap-continuation {
  position: absolute;
  top: 55px;
  right: -31px;
  left: 91%;
  border-top: 5px dotted #197552;
  transform: translateY(-50%);
}

.gs-roadmap-continuation::after {
  content: "";
  position: absolute;
  top: -7px;
  right: -1px;
  width: 10px;
  height: 10px;
  border-top: 3px solid #197552;
  border-right: 3px solid #197552;
  transform: rotate(45deg);
}

.gs-roadmap-result-enterprise {
  top: 18px;
  right: -26px;
  font-size: 11px;
  letter-spacing: .1px;
}

.gs-roadmap-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* MINT FACTORS STRIP */

.gs-roadmap-factors {
  margin-top: 10px;
  padding: 17px 23px 20px;
  border-radius: 10px;
  background: linear-gradient(100deg, #edf9f4, #ecf9f4);
}

.gs-roadmap-factors>h3 {
  margin-bottom: 10px;
  color: #284b45;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.gs-roadmap-factors-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) 75px minmax(0, 1fr) 65px minmax(0, 1fr) 45px minmax(270px, 1.25fr);
  align-items: center;
  gap: 25px;
}

.gs-roadmap-factor {
  display: flex;
  align-items: flex-start;
  gap: 21px;
  min-width: 0;
}

.gs-roadmap-factor-icon {
  display: grid;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid #d0e9df;
  border-radius: 50%;
  background: #f8fdfa;
  color: #568679;
}

.gs-roadmap-factor-icon svg {
  width: 27px;
  height: 27px;
}

.gs-roadmap-factor h4 {
  margin-top: 5px;
  color: #2d4b46;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.4;
  letter-spacing: .4px;
  text-transform: uppercase;
}

.gs-roadmap-factor p {
  margin-top: 3px;
  color: #7a8b8b;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: -.3px;
}

.gs-roadmap-factor-line {
  position: relative;
  display: block;
  height: 1px;
  background: #9ec4b7;
}

.gs-roadmap-factor-arrow::after {
  content: "";
  position: absolute;
  top: -4px;
  right: 0;
  width: 8px;
  height: 8px;
  border-top: 2px solid #3f7b68;
  border-right: 2px solid #3f7b68;
  transform: rotate(45deg);
}

.gs-roadmap-factor-result {
  padding: 17px 16px;
  border-radius: 8px;
  background: #d2efe2;
  color: #244c40;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.5;
  letter-spacing: .7px;
  text-align: center;
  text-transform: uppercase;
}

/* FOOTER */

.gs-roadmap-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 3px 0;
}

.gs-roadmap-footer>p {
  color: #73858b;
  font-size: 14px;
  line-height: 1.5;
}

.gs-roadmap-actions {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-shrink: 0;
}

.gs-roadmap-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 51px;
  padding: 14px 22px;
  border-radius: 9px;
  background: #38d47a;
  color: #083c29;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color .2s ease;
}

.gs-roadmap-button svg {
  width: 21px;
  height: 21px;
}

.gs-roadmap-button:hover {
  background: #28c56b;
}

.gs-roadmap-consultation {
  color: #345952;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  text-underline-offset: 5px;
}

.gs-roadmap-actions a:focus-visible {
  outline: 3px solid #157346;
  outline-offset: 4px;
}

/* LAPTOP */

@media (max-width: 1400px) {
  .gs-roadmap {
    --gr-label-width: 265px;
    padding-inline: 28px;
  }

  .gs-roadmap-heading {
    padding-inline: 12px;
  }

  .gs-roadmap-chart {
    padding-left: 12px;
  }

  .gs-roadmap-axis,
  .gs-roadmap-guides {
    left: calc(12px + var(--gr-label-width));
  }

  .gs-roadmap-label h3 {
    font-size: 16px;
  }

  .gs-roadmap-duration {
    font-size: 28px;
  }

  .gs-roadmap-scope {
    font-size: 12px;
  }

  .gs-roadmap-stage>span {
    font-size: 11px;
  }

  .gs-roadmap-result {
    padding-inline: 10px;
    font-size: 10px;
  }

  .gs-roadmap-factors-grid {
    grid-template-columns:
      minmax(0, 1fr) 35px minmax(0, 1fr) 30px minmax(0, 1fr) 30px minmax(220px, 1fr);
    gap: 15px;
  }

  .gs-roadmap-factor {
    gap: 12px;
  }

  .gs-roadmap-factor p {
    font-size: 12px;
  }

  .gs-roadmap-factor-result {
    font-size: 10px;
  }

  .gs-roadmap-actions {
    gap: 25px;
  }

  .gs-roadmap-footer>p {
    font-size: 12px;
  }
}

/* TABLET */

@media (max-width: 1050px) {
  .gs-roadmap {
    padding: 38px 24px 28px;
  }

  .gs-roadmap-heading {
    padding: 0;
  }

  .gs-roadmap-heading h2 {
    font-size: 40px;
  }

  .gs-roadmap-break {
    display: none;
  }

  .gs-roadmap-scroll {
    padding-bottom: 12px;
  }

  .gs-roadmap-factors-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }

  .gs-roadmap-factor-line {
    display: none;
  }

  .gs-roadmap-factor-result {
    grid-column: 1 / -1;
    font-size: 12px;
  }

  .gs-roadmap-footer {
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 22px;
  }

  .gs-roadmap-footer>p {
    font-size: 13px;
  }
}

/* MOBILE */

@media (max-width: 600px) {
  .gs-roadmap {
    padding: 30px 16px 26px;
  }

  .gs-roadmap-eyebrow {
    font-size: 11px;
    letter-spacing: 1px;
  }

  .gs-roadmap-heading {
    margin-bottom: 24px;
  }

  .gs-roadmap-heading h2 {
    font-size: 33px;
    line-height: 1.12;
    letter-spacing: -1.3px;
  }

  .gs-roadmap-description {
    margin-top: 13px !important;
    font-size: 15px;
    line-height: 1.6;
  }

  .gs-roadmap-factors {
    margin-top: 20px;
    padding: 20px 17px;
  }

  .gs-roadmap-factors>h3 {
    margin-bottom: 20px;
    font-size: 11px;
  }

  .gs-roadmap-factors-grid {
    grid-template-columns: 1fr;
    gap: 21px;
  }

  .gs-roadmap-factor {
    align-items: center;
    gap: 16px;
  }

  .gs-roadmap-factor h4 {
    margin-top: 0;
    font-size: 12px;
  }

  .gs-roadmap-factor p {
    font-size: 13px;
  }

  .gs-roadmap-factor p br {
    display: none;
  }

  .gs-roadmap-factor-result {
    padding: 15px 12px;
    font-size: 11px;
  }

  .gs-roadmap-footer {
    align-items: stretch;
    gap: 20px;
  }

  .gs-roadmap-footer>p {
    font-size: 12px;
    line-height: 1.7;
  }

  .gs-roadmap-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 18px;
  }

  .gs-roadmap-button {
    width: 100%;
    font-size: 14px;
  }

  .gs-roadmap-consultation {
    text-align: center;
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gs-roadmap-button {
    transition: none;
  }
}

/* Add at the top of your stylesheet.
   Remove if your website already loads Inter. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

/* =========================================
   QUALITY ASSURANCE & SECURITY
========================================= */

.gs-quality {
  --gsq-leaf: #2d653c;
  --gsq-leaf-dark: #204d2d;
  --gsq-mint: #92e8a7;
  --gsq-dark: #092622;
  --gsq-muted: #71837f;
  --gsq-gap: 30px;

  width: 100%;
  padding: 54px 40px 36px;
  background: #fff;
  color: var(--gsq-dark);
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.gs-quality,
.gs-quality *,
.gs-quality *::before,
.gs-quality *::after {
  box-sizing: border-box;
}

.gs-quality :is(h2, h3, p) {
  margin: 0;
}

.gs-quality svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gs-quality .gsq-symbols {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.gs-quality-container {
  width: 100%;
  max-width: 1300px;
  margin-inline: auto;
}

/* HEADING */

.gsq-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  margin-bottom: 48px;
}

.gsq-heading-copy {
  min-width: 0;
}

.gsq-eyebrow {
  margin-bottom: 15px !important;
  color: #7e9e90;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 3.6px;
  text-transform: uppercase;
}

.gsq-heading h2 {
  max-width: 1200px;
  color: #061e1a;
  font-size: clamp(28px, 2.7vw, 44px);
  font-weight: 750;
  line-height: 1.12;
  letter-spacing: -1.5px;
}

.gsq-intro {
  margin-top: 12px !important;
  color: #738481;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.55;
  letter-spacing: -.2px;
}

.gsq-brand-note {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 0 0 170px;
}

.gsq-brand-note>span {
  flex: 1;
  height: 1px;
  background: #abc8b9;
}

.gsq-brand-note p {
  color: #8ca89a;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.9;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* TOP PATH */

.gsq-path {
  display: grid;
  grid-template-columns: 205px 1fr;
  gap: 25px;
  align-items: center;
  width: 79%;
  margin-bottom: 20px;
}

.gsq-path>span {
  color: #8aa89a;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.gsq-path-line {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 1px;
  background: #bdd4c8;
}

.gsq-path-line>i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #accbb9;
  box-shadow: 0 0 0 5px #fff;
}

.gsq-path-line::after {
  content: "";
  position: absolute;
  right: 0;
  width: 11px;
  height: 11px;
  border-top: 1px solid #94b9a6;
  border-right: 1px solid #94b9a6;
  transform: rotate(45deg);
}

/* FIVE-COLUMN WORKFLOW */

.gsq-workflow {
  display: grid;
  grid-template-columns:
    minmax(135px, .72fr) repeat(3, minmax(0, 1fr)) minmax(220px, 1.04fr);
  align-items: stretch;
  gap: var(--gsq-gap);
}

/* RELEASE CANDIDATE */

.gsq-release {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 16px;
  text-align: center;
}

.gsq-release h3 {
  color: #15352b;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.4;
  letter-spacing: .4px;
  text-transform: uppercase;
}

.gs-quality .gsq-release-cube {
  width: 150px;
  height: 164px;
  margin-block: 23px 18px;
  stroke: none;
}

.gsq-release>p {
  color: #70817b;
  font-size: 13px;
  line-height: 1.7;
}

.gsq-release-arrow,
.gsq-card-arrow {
  position: absolute;
  z-index: 3;
  top: 46%;
  right: calc(-1 * var(--gsq-gap) + 3px);
  width: 24px;
  height: 24px;
  color: #527e64;
}

/* LEAF-GREEN QA CARDS */

.gsq-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 445px;
  padding: 27px 20px 20px;
  border: 1px solid #3e784b;
  border-radius: 5px;
  background:
    radial-gradient(ellipse at 0% 0%,
      rgb(149 195 98 / 14%),
      transparent 65%),
    linear-gradient(155deg, var(--gsq-leaf), var(--gsq-leaf-dark));
  color: #fff;
  box-shadow: 0 9px 22px rgb(25 73 38 / 7%);
}

/* Narrow side face inspired by the reference */
.gsq-card::before {
  content: "";
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: -9px;
  width: 8px;
  border: 1px solid #b9d9bc;
  border-right: 0;
  border-radius: 3px 0 0 3px;
  background: #d9edd5;
  transform: skewY(-28deg);
  transform-origin: right top;
}

.gsq-step {
  display: block;
  margin-bottom: 12px;
  color: #b2d9af;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .8px;
}

.gsq-card h3 {
  color: #fff;
  font-size: 17px;
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: -.2px;
  text-transform: uppercase;
}

.gsq-card-top>p {
  min-height: 39px;
  margin-top: 5px;
  color: #d0e1cf;
  font-size: 12px;
  line-height: 1.55;
}

/* CHECKLISTS */

.gsq-checklist {
  display: grid;
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.gsq-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: #e5eee1;
  font-size: 12px;
  line-height: 1.45;
}

.gsq-tick {
  display: grid;
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  place-items: center;
  border-radius: 50%;
  background: #8fe5a3;
  color: #204d2d;
}

.gsq-tick svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.5;
}

/* DEVICE ILLUSTRATION */

.gsq-devices {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-top: 31px;
  margin-bottom: 28px;
}

.gsq-devices>div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #d1e5cf;
  font-size: 10px;
}

.gsq-device {
  width: 100%;
  max-width: 41px;
  height: 38px;
  color: #d3e7cb;
  stroke-width: 1.5 !important;
}

.gsq-device-check {
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border-radius: 50%;
  background: #8fe5a3;
  color: #215032;
  font-size: 11px;
  font-weight: 700;
}

/* CARD STATUS */

.gsq-card-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 43px;
  margin-top: auto;
  padding: 9px 12px;
  border: 1px solid rgb(183 225 169 / 17%);
  border-radius: 7px;
  background: rgb(182 223 166 / 13%);
  color: #baf3c5;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.gsq-card-status .gsq-tick {
  flex-basis: 24px;
  width: 24px;
  height: 24px;
}

.gsq-card-status .gsq-tick svg {
  width: 16px;
  height: 16px;
}

/* PERFORMANCE ILLUSTRATION */

.gsq-network {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin: 23px 5px 29px;
}

.gsq-network>svg {
  align-self: center;
  width: 15px;
  height: 15px;
  margin-top: 12px;
  color: #a1c1a0;
}

.gsq-signal {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 34px;
}

.gsq-signal i {
  display: block;
  width: 5px;
  border-radius: 3px;
  background: #91e7a1;
}

.gsq-signal i:nth-child(1) {
  height: 11px;
}

.gsq-signal i:nth-child(2) {
  height: 16px;
}

.gsq-signal i:nth-child(3) {
  height: 21px;
}

.gsq-signal i:nth-child(4) {
  height: 27px;
}

.gsq-signal i:nth-child(5) {
  height: 34px;
}

.gsq-signal-low {
  opacity: .42;
  transform: scaleY(.7);
  transform-origin: bottom;
}

.gsq-signal-mid {
  opacity: .7;
  transform: scaleY(.85);
  transform-origin: bottom;
}

.gsq-load-label {
  margin-top: 0;
}

.gsq-wave {
  width: 100%;
  height: 66px;
  margin: 20px 0 23px;
}

/* SECURITY ILLUSTRATION */

.gsq-security-list {
  gap: 8px;
}

.gsq-security-list li {
  font-size: 11px;
  gap: 8px;
}

.gsq-security-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 22px 0 15px;
}

.gsq-user-circle {
  display: grid;
  flex: 0 0 35px;
  width: 35px;
  height: 35px;
  place-items: center;
  border-radius: 50%;
  background: rgb(188 229 175 / 15%);
  color: #a9e9af;
}

.gsq-user-circle svg {
  width: 22px;
  height: 22px;
}

.gsq-security-arrow {
  width: 26px;
  height: 22px;
  color: #92e3a0;
}

.gsq-shield-circle {
  display: grid;
  flex: 0 0 77px;
  width: 77px;
  height: 77px;
  place-items: center;
  border: 1px dashed #82bd87;
  border-radius: 50%;
  background: rgb(188 229 175 / 5%);
  color: #9be7a8;
}

.gsq-shield-circle svg {
  width: 42px;
  height: 46px;
}

.gsq-block-line {
  width: 16px;
  height: 1px;
  background: #a8b7a0;
}

.gsq-blocked {
  display: grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: #fce4dc;
  color: #b65b4f;
  font-size: 25px;
  line-height: 1;
}

.gsq-industry-tags {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 17px;
}

.gsq-industry-tags span {
  padding: 5px 10px;
  border-radius: 20px;
  background: rgb(194 225 181 / 12%);
  color: #d1e8c7;
  font-size: 8px;
  letter-spacing: .3px;
  text-transform: uppercase;
}

/* PRODUCTION */

.gsq-production {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 23px 0 0;
  text-align: center;
  background: linear-gradient(105deg, #eff9f0, #fff 55%);
}

.gsq-production-eyebrow {
  color: #65a47e;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.gsq-production h3 {
  margin-top: 13px;
  color: #15342a;
  font-size: 16px;
  font-weight: 750;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.gs-quality .gsq-deploy-box {
  width: 142px;
  height: 132px;
  margin-top: 3px;
  stroke: none;
}

.gsq-production-checks {
  display: grid;
  gap: 8px;
  margin: 4px 0 18px;
  padding: 0;
  list-style: none;
  text-align: left;
}

.gsq-production-checks li {
  display: flex;
  align-items: center;
  gap: 13px;
  color: #6d8378;
  font-size: 12px;
}

.gsq-production-checks li>span {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  background: #41c880;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.gsq-monitoring {
  width: 100%;
  margin-top: auto;
  padding-top: 13px;
  border-top: 1px dashed #dbe9de;
}

.gsq-monitoring>p:first-child {
  color: #6f837b;
  font-size: 12px;
  line-height: 1.5;
}

.gsq-monitoring-cycle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin: 16px 0 22px;
}

.gsq-monitoring-cycle::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 31px;
  right: 0;
  bottom: -12px;
  left: 0;
  border: 1px solid #aacabd;
  border-top: 0;
  border-radius: 0 0 30px 30px;
}

.gsq-monitoring-cycle>div {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 62px;
  height: 62px;
  flex-shrink: 0;
  border: 1px solid #d5e7dc;
  border-radius: 50%;
  background: #fcfefb;
}

.gsq-monitoring-cycle>div>svg {
  width: 21px;
  height: 21px;
  color: #3f7560;
}

.gsq-monitoring-cycle>div>span {
  color: #305a48;
  font-size: 8px;
  font-weight: 650;
  text-transform: uppercase;
}

.gsq-cycle-arrow {
  width: 17px;
  height: 17px;
  color: #9abeb0;
}

.gsq-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #247253;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.5;
  text-transform: uppercase;
}

.gsq-live i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3ace7c;
  box-shadow: 0 0 0 3px #e5f8eb;
}

/* FOOTER */

.gsq-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-top: 55px;
  padding-top: 25px;
  border-top: 1px solid #d6e3db;
}

.gsq-footer h3 {
  color: #102b23;
  font-size: clamp(20px, 1.5vw, 25px);
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: -.6px;
  text-transform: uppercase;
}

.gsq-footer p {
  margin-top: 6px;
  color: #74857f;
  font-size: 18px;
  line-height: 1.5;
}

.gsq-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-shrink: 0;
  min-height: 53px;
  padding: 15px 24px;
  border-radius: 10px;
  background: #44d483;
  color: #0c3d25;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color .2s ease;
}

.gsq-button svg {
  width: 21px;
  height: 21px;
}

.gsq-button:hover {
  background: #32c774;
}

.gsq-button:focus-visible {
  outline: 3px solid #24673c;
  outline-offset: 4px;
}

/* LAPTOP */

@media (max-width: 1350px) {
  .gs-quality {
    --gsq-gap: 23px;
    padding-inline: 28px;
  }

  .gsq-brand-note {
    display: none;
  }

  .gsq-workflow {
    grid-template-columns:
      minmax(110px, .65fr) repeat(3, minmax(0, 1fr)) minmax(190px, 1fr);
  }

  .gsq-card {
    padding-inline: 14px;
  }

  .gsq-card h3 {
    font-size: 15px;
  }

  .gsq-card-top>p {
    font-size: 11px;
    min-height: 38px;
  }

  .gsq-checklist li {
    font-size: 11px;
    gap: 7px;
  }

  .gsq-security-list li {
    font-size: 10px;
  }

  .gsq-release h3 {
    font-size: 11px;
  }

  .gs-quality .gsq-release-cube {
    width: 125px;
  }

  .gsq-path {
    grid-template-columns: 175px 1fr;
  }

  .gsq-path>span {
    font-size: 9px;
    letter-spacing: 1.3px;
  }

  .gsq-security-visual {
    gap: 3px;
  }

  .gsq-shield-circle {
    flex-basis: 60px;
    width: 60px;
    height: 60px;
  }

  .gsq-shield-circle svg {
    width: 35px;
    height: 40px;
  }

  .gsq-user-circle {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
  }

  .gsq-blocked {
    flex-basis: 25px;
    width: 25px;
    height: 25px;
  }

  .gsq-security-arrow {
    width: 20px;
  }

  .gsq-monitoring-cycle>div {
    width: 51px;
    height: 51px;
  }

  .gsq-monitoring-cycle>div>span {
    font-size: 7px;
  }

  .gsq-cycle-arrow {
    width: 12px;
  }

  .gsq-monitoring>p:first-child {
    font-size: 11px;
  }
}

/* TABLET: THREE CARDS IN A ROW */

@media (max-width: 1100px) {
  .gs-quality {
    padding: 42px 26px 30px;
  }

  .gsq-heading {
    margin-bottom: 30px;
  }

  .gsq-heading h2 {
    font-size: 40px;
  }

  .gsq-path {
    width: 100%;
  }

  .gsq-workflow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
  }

  .gsq-release {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: flex-start;
    gap: 25px;
    padding: 0 0 10px;
    text-align: left;
  }

  .gsq-release h3 {
    font-size: 14px;
  }

  .gs-quality .gsq-release-cube {
    width: 70px;
    height: 78px;
    margin: 0;
  }

  .gsq-release>p {
    font-size: 12px;
  }

  .gsq-release-arrow {
    position: static;
    margin-left: auto;
    transform: rotate(90deg);
  }

  .gsq-card {
    min-height: 435px;
    padding: 24px 18px 18px;
  }

  .gsq-card h3 {
    font-size: 17px;
  }

  .gsq-checklist li {
    font-size: 12px;
  }

  .gsq-security-list li {
    font-size: 11px;
  }

  .gsq-card:last-of-type .gsq-card-arrow {
    display: none;
  }

  .gsq-production {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 150px 170px 1fr;
    column-gap: 25px;
    align-items: center;
    padding: 22px;
    border: 1px solid #dfede2;
    border-radius: 8px;
    background: #f4fbf5;
  }

  .gsq-production-eyebrow {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
  }

  .gsq-production h3 {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
  }

  .gs-quality .gsq-deploy-box {
    grid-column: 2;
    grid-row: 1 / 3;
    width: 125px;
    height: 115px;
    justify-self: center;
  }

  .gsq-production-checks {
    grid-column: 1 / 3;
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 12px 0 0;
  }

  .gsq-monitoring {
    grid-column: 3;
    grid-row: 1 / 4;
    padding: 0;
    border: 0;
  }

  .gsq-monitoring-cycle>div {
    width: 60px;
    height: 60px;
  }

  .gsq-monitoring-cycle>div>span {
    font-size: 8px;
  }

  .gsq-footer {
    margin-top: 32px;
  }

  .gsq-footer p {
    font-size: 15px;
  }
}

/* MOBILE */

@media (max-width: 700px) {
  .gs-quality {
    padding: 34px 20px 28px;
  }

  .gsq-eyebrow {
    margin-bottom: 12px !important;
    font-size: 10px;
    letter-spacing: 2px;
  }

  .gsq-heading h2 {
    font-size: 33px;
    line-height: 1.12;
    letter-spacing: -1.3px;
  }

  .gsq-intro {
    font-size: 15px;
    line-height: 1.65;
  }

  .gsq-path {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 26px;
  }

  .gsq-path>span {
    font-size: 9px;
  }

  .gsq-workflow {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .gsq-release {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 7px 20px;
    padding-bottom: 10px;
  }

  .gs-quality .gsq-release-cube {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .gsq-release h3 {
    grid-column: 2;
    align-self: end;
    font-size: 13px;
  }

  .gsq-release>p {
    grid-column: 2;
    align-self: start;
  }

  .gsq-release-arrow {
    display: none;
  }

  .gsq-card {
    min-height: 410px;
    margin-left: 8px;
    padding: 25px 25px 22px;
  }

  .gsq-card h3 {
    font-size: 19px;
  }

  .gsq-card-top>p {
    min-height: auto;
    font-size: 13px;
  }

  .gsq-checklist {
    gap: 13px;
    margin-top: 23px;
  }

  .gsq-checklist li,
  .gsq-security-list li {
    font-size: 13px;
    gap: 11px;
  }

  .gsq-devices {
    gap: 15px;
    margin-block: 30px;
  }

  .gsq-devices>div {
    font-size: 11px;
  }

  .gsq-device {
    height: 42px;
  }

  .gsq-card-arrow {
    top: auto;
    right: calc(50% - 12px);
    bottom: -28px;
    transform: rotate(90deg);
  }

  .gsq-card:last-of-type .gsq-card-arrow {
    display: block;
  }

  .gsq-network {
    justify-content: center;
    gap: 25px;
    margin-block: 25px;
  }

  .gsq-load-label {
    margin-top: 0;
  }

  .gsq-wave {
    height: 72px;
    margin-block: 20px 28px;
  }

  .gsq-security-visual {
    gap: 10px;
    margin-top: 25px;
  }

  .gsq-shield-circle {
    flex-basis: 85px;
    width: 85px;
    height: 85px;
  }

  .gsq-shield-circle svg {
    width: 44px;
    height: 49px;
  }

  .gsq-user-circle {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
  }

  .gsq-blocked {
    flex-basis: 31px;
    width: 31px;
    height: 31px;
  }

  .gsq-industry-tags {
    margin-bottom: 22px;
  }

  .gsq-industry-tags span {
    font-size: 9px;
  }

  .gsq-production {
    display: flex;
    flex-direction: column;
    padding: 27px 20px 23px;
  }

  .gsq-production h3 {
    align-self: auto;
    font-size: 18px;
  }

  .gsq-production-eyebrow {
    align-self: auto;
  }

  .gs-quality .gsq-deploy-box {
    width: 145px;
    height: 135px;
    margin-top: 5px;
  }

  .gsq-production-checks {
    flex-wrap: wrap;
    gap: 12px 18px;
    margin: 0 0 22px;
  }

  .gsq-monitoring {
    padding-top: 18px;
    border-top: 1px dashed #d4e7d8;
  }

  .gsq-monitoring>p:first-child {
    font-size: 12px;
  }

  .gsq-monitoring-cycle {
    gap: 8px;
    max-width: 310px;
    margin-inline: auto;
  }

  .gsq-monitoring-cycle>div {
    width: 64px;
    height: 64px;
  }

  .gsq-cycle-arrow {
    width: 17px;
  }

  .gsq-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 23px;
    margin-top: 10px;
    padding-top: 24px;
  }

  .gsq-footer h3 {
    font-size: 21px;
    line-height: 1.3;
  }

  .gsq-footer p {
    font-size: 14px;
    line-height: 1.6;
  }

  .gsq-button {
    width: 100%;
    padding-inline: 15px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gsq-button {
    transition: none;
  }
}

@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=Inter:wght@400;500;600;700&display=swap");

.gs-support {
  --gss-bg: #002d23;
  --gss-text: #edf7f2;
  --gss-muted: #a8c5b9;
  --gss-green: #49e58a;
  --gss-border: rgba(128, 203, 169, 0.25);
  --gss-column-pad: clamp(20px, 2vw, 38px);

  background:
    radial-gradient(ellipse at 48% 44%, rgba(0, 72, 48, 0.22), transparent 70%),
    var(--gss-bg);
  color: var(--gss-text);
  font-family: "Inter", sans-serif;
  padding: 34px 28px 22px;
  -webkit-font-smoothing: antialiased;
}

.gs-support,
.gs-support * {
  box-sizing: border-box;
}

.gs-support h2,
.gs-support h3,
.gs-support p {
  margin: 0;
}

.gs-support-symbols {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.gs-support-container {
  max-width: 1300px;
  margin-inline: auto;
}

.gs-support svg {
  display: block;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* Header */

.gs-support-header {
  display: grid;
  grid-template-columns: 1.08fr 1fr 150px;
  align-items: end;
  gap: clamp(28px, 3.5vw, 65px);
  padding: 0 48px 36px;
}

.gs-support-eyebrow {
  margin-bottom: 14px !important;
  color: #b0c9bd;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 4px;
}

.gs-support h2 {
  font-size: clamp(24px, 2.2vw, 36px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -1.4px;
}

.gs-support-intro {
  max-width: 600px;
  color: #c3d7cd;
  font-size: clamp(14px, 1.08vw, 18px);
  line-height: 1.6;
}

.gs-support-motto {
  justify-self: end;
  align-self: center;
  padding-left: 24px;
  border-left: 1px solid var(--gss-border);
  color: #a5c0b3;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 1.9px;
}

/* Main board */

.gs-support-board {
  display: grid;
  grid-template-columns: 114px repeat(3, minmax(0, 1fr)) 190px;
  overflow: hidden;
  border: 1px solid var(--gss-border);
  border-radius: 13px;
}

.gs-support-launch {
  position: relative;
  min-width: 0;
}

.gs-support-launch::after,
.gs-support-column::after {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 24px;
  right: 0;
  width: 1px;
  background: var(--gss-border);
}

.gs-support-launch-label {
  position: absolute;
  top: 116px;
  left: 24px;
  color: #9bb8a9;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 1.5px;
}

.gs-support-launch::before {
  content: "";
  position: absolute;
  top: 174px;
  left: 33px;
  right: 0;
  height: 3px;
  background: var(--gss-green);
  box-shadow: 0 0 6px #49e58a55;
}

.gs-support-launch-dot {
  position: absolute;
  top: 167px;
  left: 25px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gss-green);
  box-shadow:
    0 0 0 6px #49e58a22,
    0 0 18px #49e58a66;
}

.gs-support-live {
  position: absolute;
  top: 198px;
  left: 24px;
  padding: 5px 12px;
  border-radius: 4px;
  background: var(--gss-green);
  color: #003c28;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
}

.gs-support-column {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 32px var(--gss-column-pad) 26px;
}

.gs-support-column-heading {
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 1.8vw, 32px);
  min-height: 75px;
}

.gs-support-number {
  color: #7eaa94;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.1;
}

.gs-support h3 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 1px;
}

.gs-support-column-heading p {
  margin-top: 8px;
  color: #d3e1d9;
  font-size: 14px;
  line-height: 1.5;
}

/* Continuous pulse: identical height and position in each column */

.gs-support-pulse {
  position: relative;
  flex: 0 0 105px;
  margin-inline: calc(-1 * var(--gss-column-pad));
}

.gs-support-pulse>svg {
  position: absolute;
  top: 24px;
  width: 100%;
  height: 90px;
  overflow: visible;
  stroke: var(--gss-green);
  stroke-width: 2.8;
  filter: drop-shadow(0 0 3px #49e58a55);
}

.gs-support-pulse path {
  vector-effect: non-scaling-stroke;
}

.gs-support-pulse-shadow {
  opacity: 0.15;
  stroke-width: 7;
}

.gs-support-line-dot {
  position: absolute;
  top: 61px;
  left: 59%;
  width: 16px;
  height: 16px;
  border: 2px solid var(--gss-bg);
  border-radius: 50%;
  background: var(--gss-green);
  box-shadow: 0 0 8px #49e58a33;
}

.gs-support-update {
  position: absolute;
  top: 14px;
  left: calc(59% - 36px);
  padding: 5px 10px;
  border: 1px solid #247150;
  border-radius: 5px;
  background: #084b36;
  color: #62dd98;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: 0.5px;
}

.gs-support-pulse-growing .gs-support-line-dot {
  left: 24%;
}

.gs-support-dotted {
  stroke-dasharray: 1 8;
}

/* Illustrations */

.gs-support-visual {
  flex-shrink: 0;
  height: 170px;
}

.gs-support-health {
  display: grid;
  grid-template-columns: 1fr 0.4fr 1fr 0.4fr 1fr;
  align-items: start;
  height: 140px;
  margin-block: 15px;
  padding: 22px 12px 15px;
  border: 1px solid var(--gss-border);
  border-radius: 7px;
}

.gs-support-health-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.gs-support-status {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 11px;
  border-radius: 50%;
  font-size: 23px;
  font-weight: 600;
}

.gs-support-status-alert {
  background: #fa987a;
  color: #07432d;
  border: 2px solid var(--gss-bg);
  outline: 1px solid #eb8e70;
  box-shadow: 0 0 0 4px #ed937018;
}

.gs-support-status-loading {
  border: 3px solid #24664a;
  border-right-color: var(--gss-green);
  box-shadow: 0 0 0 4px #49e58a12;
}

.gs-support-status-done {
  background: var(--gss-green);
  color: #065032;
  box-shadow: 0 0 0 4px #49e58a22;
}

.gs-support-health-step strong,
.gs-support-growth-card strong {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
}

.gs-support-health-step small,
.gs-support-growth-card small {
  margin-top: 7px;
  color: #a6c4b5;
  font-size: 11px;
  line-height: 1.4;
}

.gs-support-step-arrow {
  margin-top: 1px;
  color: #699d83;
  font-size: 29px;
  text-align: center;
}

.gs-support-platforms {
  overflow: hidden;
  border: 1px solid var(--gss-border);
  border-radius: 7px;
}

.gs-support-platform-row {
  display: grid;
  grid-template-columns: 45% 55%;
  height: 25%;
}

.gs-support-platform-row+.gs-support-platform-row {
  border-top: 1px solid var(--gss-border);
}

.gs-support-platform-row>span {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 14px;
  font-size: 11px;
  color: #d6e6dd;
}

.gs-support-platform-row>span+span {
  border-left: 1px solid var(--gss-border);
}

.gs-support-platform-row svg {
  width: 22px;
  height: 22px;
}

.gs-support-platform-row strong {
  font-size: 12px;
  font-weight: 600;
}

.gs-support-check {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--gss-green);
  color: #075433;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.gs-support-mini-loader {
  flex-shrink: 0;
  width: 23px;
  height: 23px;
  border: 3px solid #397764;
  border-top-color: #6de4d6;
  border-right-color: #6de4d6;
  border-radius: 50%;
}

.gs-support-growth {
  display: grid;
  grid-template-columns: 1fr 18px 1.35fr 18px 1.08fr;
  align-items: stretch;
  height: 150px;
  margin-block: 10px;
}

.gs-support-growth-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 22px 5px 12px;
  text-align: center;
  border: 1px solid var(--gss-border);
  border-radius: 7px;
}

.gs-support-growth-card>svg {
  width: 32px;
  height: 32px;
  margin-bottom: 13px;
  color: #bfd9cc;
}

.gs-support-growth-card strong {
  font-size: clamp(9px, 0.72vw, 12px);
}

.gs-support-growth-arrow {
  align-self: center;
  margin-top: -45px;
  color: #92b7a3;
  text-align: center;
}

/* Feature lists and process captions */

.gs-support-features {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 132px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.gs-support-features li {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  color: #d0e1d7;
  font-size: 13px;
  line-height: 1.55;
}

.gs-support-features svg {
  width: 25px;
  height: 25px;
  color: #c3dacb;
}

.gs-support-sla {
  display: table;
  margin-top: 5px;
  padding: 3px 10px;
  border: 1px solid #1c7950;
  border-radius: 6px;
  background: #075337;
  color: #63de98;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.8px;
}

.gs-support-process {
  display: flex;
  justify-content: center;
  gap: clamp(12px, 1.4vw, 25px);
  margin-top: auto !important;
  padding-top: 16px;
  border-top: 1px solid var(--gss-border);
  color: #a4c1b1;
  font-size: 10px;
  letter-spacing: 1.6px;
}

.gs-support-process b {
  font-weight: 400;
}

/* Pale right panel */

.gs-support-state {
  display: flex;
  flex-direction: column;
  padding: 40px 23px;
  background: #e7f6ef;
  color: #123f32;
}

.gs-support-state-label {
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.6px;
}

.gs-support-state-words {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  margin-top: 50px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 33px;
  font-weight: 700;
}

.gs-support-continuous {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 48px;
  padding-top: 48px;
  border-top: 1px solid #bdded0;
}

.gs-support-continuous>span {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #31d37a;
  box-shadow: 0 0 0 5px #31d37a22, 0 0 13px #31d37a66;
}

.gs-support-continuous strong {
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.9px;
}

/* Footer */

.gs-support-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  margin: 20px 38px 0;
  padding-top: 21px;
  border-top: 1px solid var(--gss-border);
}

.gs-support-footer>p {
  font-size: clamp(16px, 1.4vw, 23px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.6px;
}

.gs-support-footer-services {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #91b29e;
  font-size: 12px;
  white-space: nowrap;
}

.gs-support-footer-services i {
  font-style: normal;
}

.gs-support-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-shrink: 0;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: 7px;
  background: var(--gss-green);
  color: #043c26;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background 180ms ease, transform 180ms ease;
}

.gs-support-button svg {
  width: 20px;
  height: 20px;
}

.gs-support-button:hover {
  background: #76f0a5;
  transform: translateY(-2px);
}

.gs-support-text-link {
  flex-shrink: 0;
  padding-block: 5px;
  border-bottom: 1px solid #87b39a;
  color: #e0eee6;
  font-size: 13px;
  text-decoration: none;
}

.gs-support a:focus-visible {
  outline: 2px solid #e8fff1;
  outline-offset: 5px;
}

/* Laptop */

@media (max-width: 1400px) {
  .gs-support {
    padding-inline: 20px;
    --gss-column-pad: 22px;
  }

  .gs-support-header {
    grid-template-columns: 1.1fr 1fr 110px;
    gap: 30px;
    padding-inline: 22px;
  }

  .gs-support-board {
    grid-template-columns: 85px repeat(3, minmax(0, 1fr)) 145px;
  }

  .gs-support-launch-label,
  .gs-support-live {
    left: 14px;
  }

  .gs-support-launch-dot {
    left: 15px;
  }

  .gs-support-launch::before {
    left: 23px;
  }

  .gs-support-column-heading {
    gap: 14px;
  }

  .gs-support h3 {
    font-size: 23px;
  }

  .gs-support-column-heading p {
    font-size: 12px;
  }

  .gs-support-platform-row>span {
    gap: 9px;
    padding-inline: 9px;
    font-size: 10px;
  }

  .gs-support-state {
    padding-inline: 17px;
  }

  .gs-support-state-words {
    font-size: 30px;
  }

  .gs-support-continuous {
    gap: 10px;
  }

  .gs-support-continuous strong {
    font-size: 8px;
  }

  .gs-support-footer {
    flex-wrap: wrap;
    margin-inline: 20px;
  }

  .gs-support-footer-services {
    font-size: 11px;
  }
}

/* Tablet: preserve readable cards */

@media (max-width: 1100px) {
  .gs-support-header {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  .gs-support-motto {
    display: none;
  }

  .gs-support-board {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .gs-support-launch {
    display: none;
  }

  .gs-support-column {
    --gss-column-pad: 18px;
  }

  .gs-support-column-heading {
    gap: 10px;
    min-height: 88px;
  }

  .gs-support-number {
    font-size: 24px;
  }

  .gs-support h3 {
    font-size: 22px;
  }

  .gs-support-health {
    padding-inline: 7px;
    grid-template-columns: 1fr 12px 1fr 12px 1fr;
  }

  .gs-support-health-step strong,
  .gs-support-health-step small {
    font-size: 9px;
  }

  .gs-support-features {
    min-height: 165px;
  }

  .gs-support-features li {
    gap: 10px;
    font-size: 12px;
  }

  .gs-support-process {
    gap: 10px;
    font-size: 9px;
    letter-spacing: 1px;
  }

  .gs-support-state {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px;
  }

  .gs-support-state-words {
    flex-direction: row;
    gap: 35px;
    margin-top: 0;
    font-size: 28px;
  }

  .gs-support-continuous {
    margin: 0;
    padding: 0 0 0 25px;
    border-top: 0;
    border-left: 1px solid #bdded0;
  }

  .gs-support-continuous strong {
    font-size: 9px;
  }

  .gs-support-footer>p {
    flex: 1 1 50%;
  }
}

/* Mobile */

@media (max-width: 760px) {
  .gs-support {
    padding: 38px 16px 28px;
  }

  .gs-support-header {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 4px 28px;
  }

  .gs-support-eyebrow {
    font-size: 9px;
    letter-spacing: 3px;
  }

  .gs-support h2 {
    font-size: clamp(28px, 6.6vw, 39px);
    line-height: 1.16;
    letter-spacing: -1px;
  }

  .gs-support-intro {
    max-width: 560px;
    font-size: 14px;
    line-height: 1.7;
  }

  .gs-support-board {
    grid-template-columns: minmax(0, 1fr);
  }

  .gs-support-column {
    --gss-column-pad: 24px;
    padding-top: 28px;
    padding-bottom: 24px;
  }

  .gs-support-column::after {
    display: none;
  }

  .gs-support-column+.gs-support-column {
    border-top: 1px solid var(--gss-border);
  }

  .gs-support-column-heading {
    min-height: 66px;
    gap: 22px;
  }

  .gs-support-number {
    font-size: 29px;
  }

  .gs-support h3 {
    font-size: 27px;
  }

  .gs-support-column-heading p {
    font-size: 13px;
  }

  .gs-support-pulse {
    flex-basis: 100px;
  }

  .gs-support-health {
    grid-template-columns: 1fr 0.35fr 1fr 0.35fr 1fr;
    padding-inline: 12px;
  }

  .gs-support-health-step strong,
  .gs-support-health-step small {
    font-size: 11px;
  }

  .gs-support-platform-row>span {
    gap: 16px;
    padding-inline: 16px;
    font-size: 12px;
  }

  .gs-support-growth-card strong {
    font-size: 11px;
  }

  .gs-support-features {
    min-height: 0;
    margin-bottom: 25px;
    gap: 16px;
  }

  .gs-support-features li {
    font-size: 13px;
    gap: 14px;
  }

  .gs-support-process {
    justify-content: space-evenly;
    font-size: 10px;
    letter-spacing: 1.4px;
  }

  .gs-support-state {
    flex-direction: column;
    gap: 23px;
    padding: 28px 20px;
  }

  .gs-support-state-words {
    justify-content: center;
    flex-wrap: wrap;
    gap: 25px;
    font-size: 29px;
  }

  .gs-support-continuous {
    border: 0;
    padding: 0;
  }

  .gs-support-continuous strong {
    font-size: 10px;
  }

  .gs-support-footer {
    justify-content: flex-start;
    gap: 22px;
    margin: 22px 4px 0;
  }

  .gs-support-footer>p {
    flex-basis: 100%;
    font-size: 21px;
  }

  .gs-support-footer-services {
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    font-size: 11px;
  }

  .gs-support-button {
    padding-inline: 18px;
  }

  .gs-support-text-link {
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gs-support-button {
    transition: none;
  }
}

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;650;700;750;800&display=swap");

/* ========================================
   MOBILE APP — CLOSING CTA
======================================== */

.gs-app-cta {
  --gs-cta-green: #32dc82;
  --gs-cta-dark: #00382b;
  --gs-cta-muted: #7a8485;
  --gs-cta-background: #fcfefd;

  position: relative;
  isolation: isolate;
  overflow: hidden;

  padding: 55px 40px 60px;
  background: var(--gs-cta-background);
  color: var(--gs-cta-dark);

  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.gs-app-cta,
.gs-app-cta * {
  box-sizing: border-box;
}

.gs-app-cta h2,
.gs-app-cta p {
  margin: 0;
}

.gs-app-cta-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1300px;
  margin-inline: auto;
}

/* Background outlined word */

.gs-app-cta-backdrop {
  position: absolute;
  z-index: 0;
  top: 125px;
  left: 50%;

  width: min(100%, 1400px);
  transform: translateX(-50%);

  pointer-events: none;
  user-select: none;
}

.gs-app-cta-backdrop svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.gs-app-cta-backdrop text {
  fill: none;
  stroke: #e2f6eb;
  stroke-width: 1.7px;
  paint-order: stroke;

  font-family: "Inter", sans-serif;
  font-size: 380px;
  font-weight: 700;
}

/* Heading area */

.gs-app-cta-content {
  position: relative;
  z-index: 2;
  text-align: center;
}

.gs-app-cta-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  min-height: 48px;
  padding: 11px 18px;

  border: 1px solid #d4dcda;
  border-radius: 999px;
  background: rgba(252, 254, 253, 0.88);

  color: #244a3f;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.1px;

  box-shadow: 0 0 0 1px rgba(0, 56, 43, 0.025);
}

.gs-app-cta-badge>span {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--gs-cta-green);
  box-shadow: 0 0 0 2px rgba(50, 220, 130, 0.08);
}

.gs-app-cta h2 {
  max-width: 1040px;
  margin: 20px auto 17px;

  color: var(--gs-cta-dark);
  font-size: clamp(34px, 3.8vw, 60px);
  font-weight: 750;
  line-height: 1.02;
  letter-spacing: -2.5px;
}

.gs-app-cta-description {
  max-width: 850px;
  margin-inline: auto !important;

  color: var(--gs-cta-muted);
  font-size: clamp(15px, 1.3vw, 20px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.45px;
}

/* Buttons */

.gs-app-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 22px;
}

.gs-app-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  min-height: 62px;
  padding: 17px 34px;
  border: 1.5px solid transparent;
  border-radius: 15px;

  font-family: inherit;
  font-size: 18px;
  line-height: 1.3;
  text-decoration: none;
  text-align: center;

  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.gs-app-cta-primary {
  min-width: 340px;
  background: var(--gs-cta-green);
  color: #003823;
  font-weight: 700;
}

.gs-app-cta-primary svg {
  display: block;
  flex-shrink: 0;
  width: 21px;
  height: 21px;

  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gs-app-cta-secondary {
  min-width: 260px;
  border-color: #31584b;
  background: rgba(252, 254, 253, 0.75);
  color: #123e30;
  font-weight: 500;

  box-shadow: 0 0 0 1px rgba(0, 56, 43, 0.06);
}

.gs-app-cta-primary:hover {
  background: #25cd74;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(30, 179, 100, 0.14);
}

.gs-app-cta-secondary:hover {
  background: #edf8f1;
  transform: translateY(-2px);
}

.gs-app-cta-button:focus-visible {
  outline: 3px solid #078d50;
  outline-offset: 5px;
}

/* Overlapping card illustration */

.gs-app-cta-visual {
  position: relative;
  z-index: 1;

  width: min(100%, 900px);
  margin: 17px auto 0;
}

.gs-app-cta-art {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.gs-app-cta-art text {
  font-family: "Inter", sans-serif;
}

/* Bottom trust row */

.gs-app-cta-trust {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 35px;

  margin-top: 42px;
  color: #183f34;

  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.45px;
}

.gs-app-cta-trust>span:nth-of-type(1) {
  justify-self: start;
}

.gs-app-cta-trust>span:nth-of-type(2) {
  justify-self: center;
  color: #7a8485;
}

.gs-app-cta-trust>span:nth-of-type(3) {
  justify-self: end;
}

.gs-app-cta-trust>i {
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--gs-cta-green);
}

/* ========================================
   LAPTOP
======================================== */

@media (max-width: 1200px) {
  .gs-app-cta {
    padding: 55px 32px 45px;
  }

  .gs-app-cta h2 {
    font-size: clamp(44px, 5.3vw, 64px);
    letter-spacing: -2.6px;
  }

  .gs-app-cta-description {
    font-size: 19px;
  }

  .gs-app-cta-backdrop {
    top: 150px;
    width: 110%;
  }

  .gs-app-cta-visual {
    max-width: 800px;
    margin-top: 25px;
  }

  .gs-app-cta-trust {
    margin-top: 35px;
    font-size: 16px;
    gap: 25px;
  }
}

/* ========================================
   TABLET
======================================== */

@media (max-width: 800px) {
  .gs-app-cta {
    padding: 48px 24px 36px;
  }

  .gs-app-cta-badge {
    min-height: 42px;
    padding: 10px 16px;
    font-size: 12px;
  }

  .gs-app-cta-badge>span {
    width: 12px;
    height: 12px;
  }

  .gs-app-cta h2 {
    margin-top: 22px;
    font-size: clamp(36px, 6.2vw, 49px);
    line-height: 1.08;
    letter-spacing: -2px;
  }

  .gs-app-cta-description {
    max-width: 600px;
    font-size: 17px;
    line-height: 1.55;
    letter-spacing: -0.2px;
  }

  .gs-app-cta-description .gs-app-cta-desktop-break {
    display: none;
  }

  .gs-app-cta-actions {
    gap: 12px;
    margin-top: 24px;
  }

  .gs-app-cta-button {
    min-height: 55px;
    padding: 15px 22px;
    border-radius: 12px;
    font-size: 15px;
  }

  .gs-app-cta-primary {
    min-width: 280px;
  }

  .gs-app-cta-secondary {
    min-width: 220px;
  }

  .gs-app-cta-visual {
    margin-top: 10px;
  }

  .gs-app-cta-backdrop {
    top: 190px;
    width: 125%;
  }

  .gs-app-cta-trust {
    gap: 15px;
    margin-top: 32px;
    font-size: 13px;
    letter-spacing: -0.2px;
  }

  .gs-app-cta-trust>i {
    width: 8px;
    height: 8px;
  }
}

/* ========================================
   MOBILE
======================================== */

@media (max-width: 560px) {
  .gs-app-cta {
    padding: 42px 18px 30px;
  }

  .gs-app-cta h2 {
    max-width: 420px;
    margin-top: 21px;
    margin-bottom: 17px;

    font-size: clamp(33px, 8.7vw, 46px);
    line-height: 1.09;
    letter-spacing: -1.6px;
  }

  .gs-app-cta-desktop-break {
    display: none;
  }

  .gs-app-cta-description {
    max-width: 390px;
    font-size: 15px;
    line-height: 1.6;
  }

  .gs-app-cta-actions {
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
  }

  .gs-app-cta-button {
    width: min(100%, 340px);
    min-width: 0;
    min-height: 54px;
    font-size: 15px;
  }

  .gs-app-cta-backdrop {
    top: 275px;
    width: 155%;
    opacity: 0.8;
  }

  .gs-app-cta-visual {
    width: calc(100% + 12px);
    max-width: none;
    margin-top: 29px;
    margin-left: -6px;
  }

  .gs-app-cta-trust {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 13px;
    margin-top: 26px;
    font-size: 13px;
  }

  .gs-app-cta-trust>span:nth-of-type(n) {
    justify-self: center;
  }

  .gs-app-cta-trust>span {
    display: flex;
    align-items: center;
    gap: 9px;
  }

  .gs-app-cta-trust>span::before {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gs-cta-green);
  }

  .gs-app-cta-trust>i {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gs-app-cta-button {
    transition: none;
  }
}

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

/* ========================================
   GROWTHSPELL CONTACT FOOTER
======================================== */

.gs-contact-footer {
  --gs-footer-ink: #062e29;
  --gs-footer-muted: #7c898a;
  --gs-footer-green: #16df8c;
  --gs-footer-line: #dfe7e5;

  position: relative;
  isolation: isolate;
  overflow: hidden;

  padding: 52px 4.5% 20px 6.5%;
  background: #ffffff;
  color: var(--gs-footer-ink);

  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.gs-contact-footer,
.gs-contact-footer * {
  box-sizing: border-box;
}

.gs-contact-footer a {
  color: inherit;
  text-decoration: none;
}

.gs-contact-footer h2,
.gs-contact-footer p {
  margin: 0;
}

.gs-contact-footer-inner {
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns: minmax(0, 0.69fr) minmax(0, 1fr);
  align-items: start;
  column-gap: clamp(55px, 5.5vw, 112px);

  width: 100%;
  max-width: 1300px;
  margin-inline: auto;
}

/* ========================================
   LEFT COLUMN
======================================== */

.gs-footer-brand-column {
  min-width: 0;
}

.gs-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 23px;

  width: fit-content;
  font-size: clamp(20px, 1.4vw, 26px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -1.5px;
}

.gs-footer-logo-img {
  display: block;
  flex-shrink: 0;
  width: clamp(160px, 15vw, 240px);
  height: auto;
  object-fit: contain;
  margin-top: -30px;
  margin-bottom: -80px;
}

.gs-contact-footer h2 {
  margin: 10px 0 25px 24px;

  font-size: clamp(32px, 3.1vw, 56px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -2.5px;
}

.gs-footer-description {
  margin-left: 26px !important;

  color: var(--gs-footer-muted);
  font-size: clamp(15px, 1.2vw, 20px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.4px;
}

.gs-footer-back-top {
  display: inline-flex;
  align-items: center;
  gap: 13px;

  margin-top: 54px;
  margin-left: 64px;
  padding-bottom: 3px;

  border-bottom: 2px solid #83eac0;

  font-size: clamp(16px, 1.05vw, 21px);
  font-weight: 400;
  line-height: 1.2;
}

.gs-footer-back-top svg {
  display: block;
  width: 21px;
  height: 21px;

  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;

  transition: transform 180ms ease;
}

.gs-footer-back-top:hover svg {
  transform: translateY(-3px);
}

/* ========================================
   RIGHT COLUMN
======================================== */

.gs-footer-contact-column {
  min-width: 0;
  margin: 0;
  border-top: 1px solid var(--gs-footer-line);
  font-style: normal;
}

.gs-footer-contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;

  min-width: 0;
  min-height: 157px;
  padding: 30px 12px 32px 10px;

  border-bottom: 1px solid var(--gs-footer-line);
}

.gs-footer-visit {
  min-height: 178px;
}

.gs-footer-contact-copy {
  flex: 1;
  min-width: 0;
}

.gs-footer-contact-label {
  display: block;
  margin-bottom: 10px;

  color: #8a9899;
  font-size: clamp(13px, 1.02vw, 21px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 1px;
}

.gs-footer-address {
  display: block;

  font-size: clamp(16px, 1.4vw, 24px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.5px;
}

.gs-footer-contact-value {
  display: block;

  font-size: clamp(20px, 1.8vw, 32px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -1.0px;
}

.gs-footer-contact-value>span {
  padding-bottom: 4px;

  text-decoration-line: underline;
  text-decoration-color: var(--gs-footer-green);
  text-decoration-thickness: 3px;
  text-underline-offset: 12px;
  text-decoration-skip-ink: none;

  overflow-wrap: anywhere;
}

.gs-footer-contact-icon {
  display: block;
  flex-shrink: 0;

  width: 40px;
  height: 40px;

  stroke: var(--gs-footer-ink);
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-linejoin: round;

  transition: transform 180ms ease;
}

.gs-footer-pin {
  width: 39px;
  height: 47px;
}

.gs-footer-contact-row:hover .gs-footer-contact-icon {
  transform: translate(3px, -3px);
}

.gs-footer-visit:hover .gs-footer-contact-icon {
  transform: translateY(-3px);
}

.gs-contact-footer a:focus-visible {
  outline: 2px solid #00ad69;
  outline-offset: 6px;
  border-radius: 3px;
}

/* ========================================
   DECORATIVE OUTLINE
======================================== */

.gs-footer-decoration {
  position: absolute;
  z-index: 0;
  left: -12px;
  bottom: -5px;

  width: clamp(170px, 13vw, 270px);
  height: auto;

  color: #def8ed;
  pointer-events: none;
}

/* ========================================
   LAPTOP
======================================== */

@media (max-width: 1440px) {
  .gs-contact-footer {
    padding: 48px 40px 25px;
  }

  .gs-contact-footer-inner {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 55px;
  }

  .gs-contact-footer h2 {
    margin-left: 0;
    margin-top: 10px;
    font-size: clamp(39px, 3.55vw, 51px);
    letter-spacing: -2.5px;
  }

  .gs-footer-description {
    margin-left: 0 !important;
    font-size: 18px;
  }

  .gs-footer-description-break {
    display: none;
  }

  .gs-footer-back-top {
    margin-left: 28px;
    margin-top: 43px;
  }

  .gs-footer-contact-row {
    min-height: 143px;
    padding-block: 28px;
  }

  .gs-footer-visit {
    min-height: 159px;
  }

  .gs-footer-address {
    font-size: 23px;
  }

  .gs-footer-contact-value {
    font-size: clamp(26px, 2.35vw, 34px);
    letter-spacing: -1px;
  }

  .gs-footer-contact-label {
    font-size: 15px;
  }
}

/* ========================================
   TABLET
======================================== */

@media (max-width: 1000px) {
  .gs-contact-footer {
    padding: 45px 30px 30px;
  }

  .gs-contact-footer-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .gs-footer-brand {
    font-size: 28px;
    gap: 16px;
  }

  .gs-footer-logo-symbol {
    width: 35px;
    height: 43px;
  }

  .gs-contact-footer h2 {
    margin-top: 10px;
    margin-bottom: 20px;

    font-size: clamp(42px, 6vw, 59px);
    line-height: 1.07;
    letter-spacing: -2.5px;
  }

  .gs-footer-description {
    max-width: 620px;
    font-size: 19px;
    line-height: 1.5;
  }

  .gs-footer-back-top {
    margin-left: 0;
    margin-top: 27px;
    font-size: 17px;
  }

  .gs-footer-contact-row,
  .gs-footer-visit {
    min-height: 136px;
    padding: 26px 8px;
  }

  .gs-footer-address {
    font-size: 24px;
  }

  .gs-footer-contact-value {
    font-size: 33px;
  }

  .gs-footer-decoration {
    width: 230px;
    opacity: 0.65;
  }
}

/* ========================================
   MOBILE
======================================== */

@media (max-width: 560px) {
  .gs-contact-footer {
    padding: 35px 22px 24px;
  }

  .gs-contact-footer-inner {
    gap: 33px;
  }

  .gs-footer-brand {
    gap: 13px;
    font-size: 25px;
    letter-spacing: -1.2px;
  }

  .gs-footer-logo-symbol {
    width: 31px;
    height: 38px;
  }

  .gs-contact-footer h2 {
    margin-top: 10px;
    margin-bottom: 18px;

    font-size: clamp(31px, 7.6vw, 42px);
    line-height: 1.09;
    letter-spacing: -1.65px;
  }

  .gs-footer-description {
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: -0.2px;
  }

  .gs-footer-back-top {
    margin-top: 24px;
    font-size: 15px;
    gap: 10px;
  }

  .gs-footer-back-top svg {
    width: 18px;
    height: 18px;
  }

  .gs-footer-contact-row,
  .gs-footer-visit {
    gap: 15px;
    min-height: 116px;
    padding: 23px 0 27px;
  }

  .gs-footer-contact-label {
    margin-bottom: 10px;
    font-size: 12px;
    letter-spacing: 0.9px;
  }

  .gs-footer-address {
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: -0.4px;
  }

  .gs-footer-address-break {
    display: none;
  }

  .gs-footer-contact-value {
    font-size: clamp(19px, 5.3vw, 29px);
    line-height: 1.4;
    letter-spacing: -0.65px;
  }

  .gs-footer-contact-value>span {
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
  }

  .gs-footer-contact-icon {
    width: 27px;
    height: 27px;
    stroke-width: 2.4;
  }

  .gs-footer-pin {
    width: 28px;
    height: 35px;
  }

  .gs-footer-decoration {
    width: 175px;
    opacity: 0.45;
  }
}

@media (prefers-reduced-motion: reduce) {

  .gs-footer-back-top svg,
  .gs-footer-contact-icon {
    transition: none;
  }
}

/* Gap between sections */
section+section,
section+.gs-contact-footer {
  margin-top: clamp(60px, 8vw, 120px);
}

/* =========================================================
   FREQUENTLY ASKED QUESTIONS (FAQ)
========================================================= */
.gs-faq-section {
  --faq-green: #00d977;
  --faq-green-dark: #00be68;
  --faq-deep-green: #06271e;
  --faq-dark: #071814;
  --faq-text: #5d6a66;
  --faq-border: #dce7e2;
  --faq-soft: #f3f8f5;
  --faq-white: #ffffff;

  position: relative;
  width: 100%;
  padding: 80px 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 20%, rgba(0, 217, 119, 0.05), transparent 25%),
    linear-gradient(135deg, #f8fbf9 0%, #ffffff 55%, #f5faf7 100%);
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.gs-faq-container {
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(440px, 1.18fr);
  gap: clamp(30px, 4.5vw, 70px);
  width: min(1300px, calc(100% - 96px));
  max-width: 1300px;
  margin: 0 auto;
}

.gs-faq-intro {
  position: relative;
  align-self: start;
  padding-top: 5px;
}

.gs-faq-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--faq-green-dark);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.18em;
}

.gs-faq-eyebrow::before {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--faq-green);
  content: "";
}

.gs-faq-intro h2 {
  max-width: 530px;
  margin: 0;
  color: var(--faq-deep-green);
  font-size: clamp(26px, 2.3vw, 36px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.04em;
}

.gs-faq-intro>p {
  max-width: 440px;
  margin: 14px 0 0;
  color: var(--faq-text);
  font-size: 14px;
  line-height: 1.6;
}

.gs-faq-contact {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  color: var(--faq-deep-green);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}

.gs-faq-contact:hover {
  color: var(--faq-green-dark);
}

.gs-faq-contact-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e6f7f0;
  color: var(--faq-green-dark);
}

.gs-faq-contact-icon svg {
  width: 16px;
  height: 16px;
}

.gs-faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.gs-faq-item {
  border: 1px solid var(--faq-border);
  border-radius: 12px;
  background: var(--faq-white);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
}

.gs-faq-item[open] {
  border-color: var(--faq-green-dark);
  box-shadow: 0 4px 20px rgba(0, 190, 104, 0.08);
}

.gs-faq-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--faq-deep-green);
  user-select: none;
}

.gs-faq-summary::-webkit-details-marker {
  display: none;
}

.gs-faq-number {
  font-size: 13px;
  font-weight: 700;
  color: var(--faq-green-dark);
  opacity: 0.8;
}

.gs-faq-question {
  flex: 1;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.4;
}

.gs-faq-toggle {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.gs-faq-toggle::before,
.gs-faq-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--faq-deep-green);
  transition: transform 0.2s ease;
}

.gs-faq-toggle::before {
  width: 12px;
  height: 2px;
  margin-top: -1px;
  margin-left: -6px;
}

.gs-faq-toggle::after {
  width: 2px;
  height: 12px;
  margin-top: -6px;
  margin-left: -1px;
}

.gs-faq-item[open] .gs-faq-toggle::after {
  transform: rotate(90deg);
  opacity: 0;
}

.gs-faq-answer {
  padding: 0 24px 20px 53px;
  color: var(--faq-text);
  font-size: 14.5px;
  line-height: 1.65;
}

.gs-faq-answer p {
  margin: 0;
}

@media (max-width: 900px) {
  .gs-faq-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* =========================================================
   SOFTWARE SERVICES — MOBILE POLISH (MOBILE APP DEVELOPMENT)
   Hero: showcase/phones/skyline/process curve removed, compact copy.
   Sections: full-width containers (16px gutters), consistent heading scale.
========================================================= */

@media (max-width: 700px) {

  /* ---------- Hero ---------- */
  .gs-app-showcase,
  .gs-app-showcase__skyline,
  .gs-app-side-note,
  .gs-app-flow,
  .gs-app-stage {
    display: none !important;
  }

  .gs-app-hero {
    min-height: 0 !important;
  }

  .gs-app-hero__inner {
    padding: 28px 16px 36px !important;
    max-width: 100% !important;
  }

  .gs-app-hero__intro {
    text-align: center;
  }

  .gs-app-hero__eyebrow {
    display: block;
    max-width: 100%;
    margin: 0 auto 12px !important;
    font-size: 10px !important;
    letter-spacing: 2px !important;
    line-height: 1.5;
  }

  .gs-app-hero h1 {
    font-size: clamp(24px, 7.2vw, 32px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.8px !important;
  }

  .gs-desktop-break,
  .gs-app-hero h1 br {
    display: none !important;
  }

  .gs-app-hero__description {
    max-width: 100% !important;
    margin: 14px auto 20px !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    text-align: center;
  }

  .gs-app-hero__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
  }

  .gs-app-btn {
    display: flex !important;
    width: 100% !important;
    max-width: 340px !important;
    min-width: 0 !important;
    min-height: 48px !important;
    margin-inline: auto !important;
    padding: 12px 20px !important;
    justify-content: space-between !important;
    font-size: 13.5px !important;
  }

  .gs-app-hero__features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 18px !important;
    margin-top: 24px !important;
    padding-top: 18px !important;
  }

  .gs-app-hero__features div {
    font-size: 11.5px !important;
    gap: 8px !important;
  }

  .gs-app-hero__features i {
    display: none !important;
  }

  /* ---------- Section containers: full width, 16px gutters ---------- */
  .gs-clients__inner,
  .gs-mobile-process__container,
  .gs-app-services__container,
  .gs-ux-container,
  .gs-integrations__container,
  .gs-build-process__container,
  .gs-tech-stack__container,
  .gs-industries__container,
  .gs-product-types__container,
  .gs-av-container,
  .gs-standard-container,
  .gs-work-container,
  .gs-investment-container,
  .gs-roadmap-container,
  .gs-quality-container,
  .gs-support-container,
  .gs-app-cta-container,
  .gs-faq-container {
    width: calc(100% - 32px) !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  /* ---------- Consistent section headings ---------- */
  .gs-clients h2,
  .gs-mobile-process h2,
  .gs-app-services h2,
  .gs-ux-section h2,
  .gs-integrations h2,
  .gs-build-process h2,
  .gs-tech-stack h2,
  .gs-industries h2,
  .gs-product-types h2,
  .gs-app-value h2,
  .gs-standard h2,
  .gs-work h2,
  .gs-investment h2,
  .gs-roadmap h2,
  .gs-quality h2,
  .gs-support h2,
  .gs-app-cta h2,
  .gs-faq-section h2 {
    font-size: clamp(24px, 6.8vw, 32px) !important;
    line-height: 1.16 !important;
    letter-spacing: -0.8px !important;
  }

  .gs-clients h2 br,
  .gs-mobile-process h2 br,
  .gs-app-services h2 br,
  .gs-ux-section h2 br,
  .gs-integrations h2 br,
  .gs-build-process h2 br,
  .gs-tech-stack h2 br,
  .gs-industries h2 br,
  .gs-product-types h2 br,
  .gs-app-value h2 br,
  .gs-standard h2 br,
  .gs-work h2 br,
  .gs-investment h2 br,
  .gs-roadmap h2 br,
  .gs-quality h2 br,
  .gs-support h2 br,
  .gs-app-cta h2 br,
  .gs-faq-section h2 br {
    display: none;
  }

  .gs-app-hero,
  .gs-clients,
  .gs-mobile-process,
  .gs-app-services,
  .gs-ux-section,
  .gs-integrations,
  .gs-build-process,
  .gs-tech-stack,
  .gs-industries,
  .gs-product-types,
  .gs-app-value,
  .gs-standard,
  .gs-work,
  .gs-investment,
  .gs-roadmap,
  .gs-quality,
  .gs-support,
  .gs-app-cta,
  .gs-faq-section {
    overflow-x: clip;
  }
}

@media (max-width: 390px) {
  .gs-clients__inner,
  .gs-mobile-process__container,
  .gs-app-services__container,
  .gs-ux-container,
  .gs-integrations__container,
  .gs-build-process__container,
  .gs-tech-stack__container,
  .gs-industries__container,
  .gs-product-types__container,
  .gs-av-container,
  .gs-standard-container,
  .gs-work-container,
  .gs-investment-container,
  .gs-roadmap-container,
  .gs-quality-container,
  .gs-support-container,
  .gs-app-cta-container,
  .gs-faq-container {
    width: calc(100% - 24px) !important;
  }
}