.gst-dashboard-page {
  padding-top: 26px;
}

.gst-dashboard-page .section-inner {
  width: 100%;
}

.gst-dashboard-hero {
  position: relative;
  min-height: 650px;
  padding: 42px 42px 0;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(27, 29, 30, 0.16);
}

#dashboard_bg>canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.gst-dashboard-heading {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0 auto 34px;
  color: #0b202b;
  text-align: center;
}

.gst-dashboard-heading .section-kicker {
  color: #0b3b3b;
}

.gst-dashboard-heading h2 {
  margin-bottom: 13px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(26px, 3vw, 39px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.8px;
}

.gst-dashboard-heading p {
  max-width: 470px;
  margin: 0 auto;
  color: #173d4c;
  font-size: 14px;
  line-height: 1.55;
}

.gst-browser-frame {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
}

.gst-animation-ready .gst-dashboard-heading,
.gst-animation-ready .gst-browser-frame,
.gst-animation-ready .gst-feature-copy,
.gst-animation-ready .gst-feature-browser img,
.gst-animation-ready .gst-feature-row-media {
  opacity: 0;
}

.gst-animation-ready .gst-dashboard-heading {
  transform: translateY(24px);
}

.gst-animation-ready .gst-browser-frame {
  transform: translateY(72px);
}

.gst-animation-ready .gst-feature-browser img {
  transform: translateX(-70px);
}

.gst-animation-ready .gst-feature-copy {
  transform: translateX(-70px);
}

.gst-animation-ready .gst-feature-row-copy {
  transform: translateX(70px);
}

.gst-animation-ready .gst-feature-row-media {
  transform: translateX(-70px);
}

.gst-animation-ready .gst-feature-row-copy>h2,
.gst-animation-ready .gst-feature-row-copy>p,
.gst-animation-ready .gst-feature-row-copy>ul>li {
  opacity: 0;
  transform: translateX(34px);
}

.gst-animation-ready .gst-dashboard-features .gst-feature-copy>h2 {
  opacity: 0;
  transform: translateY(18px);
}

.gst-animation-visible.gst-browser-frame {
  animation: gstDashboardRise 1200ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.gst-animation-visible.gst-dashboard-heading {
  animation: gstHeadingReveal 850ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.gst-feature-browser img.gst-animation-visible {
  animation: gstFeatureFromLeft 1100ms 120ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.gst-feature-copy.gst-animation-visible {
  animation: gstFeatureFromLeft 1100ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.gst-dashboard-features .gst-feature-copy.gst-animation-visible>h2 {
  animation: gstFeatureHeadingLift 650ms 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.gst-feature-row-copy.gst-animation-visible {
  animation: gstFeatureFromRight 900ms 650ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.gst-feature-row-copy.gst-animation-visible>h2,
.gst-feature-row-copy.gst-animation-visible>p,
.gst-feature-row-copy.gst-animation-visible>ul>li {
  animation: gstFeatureTextFromRight 600ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.gst-feature-row-copy.gst-animation-visible>h2 {
  animation-delay: 950ms;
}

.gst-feature-row-copy.gst-animation-visible>p {
  animation-delay: 1100ms;
}

.gst-feature-row-copy.gst-animation-visible>ul>li:nth-child(1) {
  animation-delay: 1200ms;
}

.gst-feature-row-copy.gst-animation-visible>ul>li:nth-child(2) {
  animation-delay: 1420ms;
}

.gst-feature-row-copy.gst-animation-visible>ul>li:nth-child(3) {
  animation-delay: 1640ms;
}

.gst-feature-row-copy.gst-animation-visible>ul>li:nth-child(4) {
  animation-delay: 1860ms;
}

.gst-feature-row-copy.gst-animation-visible>ul>li:nth-child(5) {
  animation-delay: 2080ms;
}

.gst-feature-row-media.gst-animation-visible {
  animation: gstFeatureFromLeft 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.gst-feature-row:nth-of-type(2) .gst-feature-row-media {
  order: 2;
  transform: translateX(70px);
}

.gst-feature-row:nth-of-type(2) {
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
}

.gst-feature-row:nth-of-type(2) .gst-feature-row-copy {
  order: 1;
  transform: translateX(-70px);
}

.gst-feature-row:nth-of-type(2) .gst-feature-row-copy>h2,
.gst-feature-row:nth-of-type(2) .gst-feature-row-copy>p,
.gst-feature-row:nth-of-type(2) .gst-feature-row-copy>ul>li {
  transform: translateX(-34px);
}

.gst-feature-row:nth-of-type(2) .gst-feature-row-media.gst-animation-visible {
  animation-name: gstFeatureFromRight;
}

.gst-feature-row:nth-of-type(2) .gst-feature-row-copy.gst-animation-visible {
  animation-name: gstFeatureFromLeft;
}

.gst-feature-row:nth-of-type(2) .gst-feature-row-copy.gst-animation-visible>h2,
.gst-feature-row:nth-of-type(2) .gst-feature-row-copy.gst-animation-visible>p,
.gst-feature-row:nth-of-type(2) .gst-feature-row-copy.gst-animation-visible>ul>li {
  animation-name: gstFeatureTextFromLeft;
}

.gst-feature-card:nth-child(2) .gst-feature-browser img.gst-animation-visible {
  animation-delay: 260ms;
}

.gst-feature-card:nth-child(2) .gst-feature-copy.gst-animation-visible {
  animation-delay: 140ms;
}

@keyframes gstDashboardRise {
  from {
    opacity: 0;
    transform: translateY(72px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes gstHeadingReveal {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.gst-dashboard-image-wrap {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto 1px;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
  background: #ffffff;
}

.gst-dashboard-image-wrap img {
  display: block;
  width: 100%;
  max-width: 1100px;
  height: auto;
}

/* Dashboard screenshots stay still after their entrance animation. */
.gst-animation-visible .gst-dashboard-image-wrap img {
  animation: none;
  transform: none;
}

.gst-dashboard-page .gst-browser-frame img,
.gst-dashboard-page .gst-feature-browser img,
.gst-dashboard-page .gst-feature-row-media img {
  cursor: pointer;
}

/* Shared screenshot hint: blue pointer and rounded label. */
.gst-dashboard-page .gst-dashboard-image-wrap,
.gst-dashboard-page .gst-feature-browser,
.gst-dashboard-page .gst-feature-row-media { position: relative; }
.gst-view-cursor {
  position: fixed; top: 0; left: 0; z-index: 999;
  pointer-events: none; opacity: 0; visibility: hidden; will-change: transform;
}
.gst-view-cursor.is-visible { opacity: 1; visibility: visible; }
.gst-view-cursor svg { display: block; width:16px; height:18px; }
.gst-view-cursor span {
  position: absolute; top: 14px; left: 15px;
  padding: 4px 7px; border: 1px solid #ffffff70; border-radius: 6px;
  background: #009ee3; color: white; font-size: 10px; font-weight: 600;
  line-height: 1.2; white-space: nowrap; box-shadow: 0 2px 5px #08668b1a;
}
.gst-view-cursor.label-left span { left: auto; right: 8px; }
.gst-view-cursor.label-above span { top: auto; bottom: 8px; }
.gst-dashboard-page .gst-cursor-active,
.gst-dashboard-page .gst-cursor-active img { cursor: none; }
/* Keyboard keeps a stationary hint; touch uses the existing tap action. */
.gst-dashboard-page :is(.gst-dashboard-image-wrap, .gst-feature-browser, .gst-feature-row-media):has(img:focus-visible)::after {
  content: "Click to view"; position: absolute; bottom: 12px; right: 12px;
  padding: 4px 7px; border-radius: 6px; background: #009ee3; color: white;
  font-size: 10px; font-weight: 600; pointer-events: none; z-index: 3;
}

.gst-dashboard-page .gst-browser-frame img:focus-visible,
.gst-dashboard-page .gst-feature-browser img:focus-visible,
.gst-dashboard-page .gst-feature-row-media img:focus-visible {
  outline: 2px solid rgba(244, 122, 34, 0.85);
  outline-offset: 4px;
}

.gst-image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  /* Semi-transparent overlay jisse background website visible rahegi */
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  overflow: hidden;
}

.gst-image-lightbox img {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
  will-change: transform, opacity;
  transition: transform 0.9s ease-out, opacity 0.9s ease-out;
}

/* Grab & Grabbing Cursors */
.gst-image-lightbox img.is-zoomed {
  cursor: grab !important;
}

.gst-image-lightbox img.is-grabbing {
  cursor: grabbing !important;
}

.gst-image-lightbox.is-open {
  display: block;
  animation: gstLightboxFadeIn 500ms ease-out both;
}

.gst-image-lightbox.is-open img {
  animation: gstLightboxImageIn 500ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.gst-image-lightbox.is-closing {
  display: block;
  pointer-events: none;
  animation: gstLightboxFadeOut 500ms ease-in both;
}

.gst-image-lightbox.is-closing img {
  transform-origin: center center;
  animation: gstLightboxImageReturn 500ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes gstLightboxFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes gstLightboxFadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes gstLightboxImageIn {
  from {
    opacity: 0;
    transform:
      translate3d(var(--gst-return-x, 0), var(--gst-return-y, 0), 0) scale(var(--gst-return-scale-x, 0.2), var(--gst-return-scale-y, 0.2));
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes gstLightboxImageReturn {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    opacity: 1;
    transform:
      translate3d(var(--gst-return-x, 0), var(--gst-return-y, 0), 0) scale(var(--gst-return-scale-x, 0.2), var(--gst-return-scale-y, 0.2));
  }
}

.gst-image-lightbox-viewport {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.gst-image-lightbox-vertical {
  box-sizing: border-box;
  width: 100%;
  min-width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  overscroll-behavior: contain;
  padding: 24px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.gst-image-lightbox-vertical::-webkit-scrollbar,
.gst-image-lightbox-viewport::-webkit-scrollbar,
.gst-image-lightbox-viewport::-webkit-scrollbar:horizontal,
.gst-image-lightbox-viewport::-webkit-scrollbar:vertical {
  width: 0;
  height: 0;
  display: none;
}

.gst-image-lightbox img {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
  transition: transform 0.1s ease-out, opacity 180ms ease;
  will-change: transform, opacity;
}

.gst-image-lightbox img.is-zoomed {
  cursor: grab;
}

.gst-image-lightbox img.is-grabbing {
  cursor: grabbing !important;
  transition: none !important;
}

.gst-image-lightbox-actions {
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
}

.gst-image-lightbox-controls {
  display: none !important;
}

.gst-image-lightbox-controls button {
  background: none;
  border: none;
  color: #ffffff !important;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: opacity 160ms ease, background 160ms ease;
}

.gst-image-lightbox-controls button:hover,
.gst-image-lightbox-controls button:focus-visible {
  background: rgba(255, 255, 255, 0.2);
  outline: none;
}

.gst-image-lightbox-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(39, 43, 50, 0.94);
  color: #fff;
  cursor: pointer;
  font-size: 0;
  line-height: 1;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  transition: background 160ms ease, transform 160ms ease;
}

.gst-image-lightbox-button:hover,
.gst-image-lightbox-button:focus-visible {
  background: rgba(247, 3, 3, 0.96);
  color: #fff;
  transform: translateY(-1px);
}

.gst-image-lightbox-button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 3px;
}

.gst-image-lightbox-close::before,
.gst-image-lightbox-close::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 2px;
  border-radius: 999px;
  background: #fff;
}

.gst-image-lightbox-close::before {
  transform: rotate(45deg);
}

.gst-image-lightbox-close::after {
  transform: rotate(-45deg);
}

.gst-image-lightbox-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {

  .gst-image-lightbox.is-open,
  .gst-image-lightbox.is-closing,
  .gst-image-lightbox.is-closing img,
  .gst-image-lightbox.is-open img {
    animation: none;
  }
}

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

.gst-feature-card {
  min-width: 0;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 14px 35px rgba(27, 29, 30, 0.1);
}

@keyframes gstFeatureFromLeft {
  from {
    opacity: 0;
    transform: translateX(-70px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes gstFeatureFromRight {
  from {
    opacity: 0;
    transform: translateX(70px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes gstFeatureTextFromRight {
  from {
    opacity: 0;
    transform: translateX(34px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes gstFeatureTextFromLeft {
  from {
    opacity: 0;
    transform: translateX(-34px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes gstFeatureHeadingLift {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.gst-feature-card-orange {
  background: linear-gradient(to bottom, #ffffff, #ffa102);
}

.gst-feature-card-light {
  background: linear-gradient(to bottom, #ffffff, #068aee);
}

.gst-feature-copy {
  min-height: 214px;
  padding: 38px 44px 26px;
}

.gst-feature-copy h2 {
  margin-bottom: 16px;
  color: #0b3b3b;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(24px, 2.4vw, 31px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.5px;
}

.gst-feature-copy p {
  color: #050505;
  font-size: 16px;
  line-height: 1.65;
}

.gst-typing-ready {
  --gst-typing-start: 760ms;
}

.gst-feature-copy>p.gst-typing-ready .gst-typing-word {
  display: inline-block;
  transform-origin: left bottom;
  will-change: opacity, transform;
}

.gst-feature-copy>p.gst-typing-ready .gst-typing-keyword {
  padding: 2px 5px;
  border-radius: 4px;
  color: #08333f;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 -2px 0 rgba(244, 122, 34, 0.8);
}

.gst-feature-row-copy>p.gst-typing-ready .gst-typing-keyword {
  color: #08333f;
  background: rgba(255, 255, 255, 0.72);
}

.gst-animation-ready .gst-feature-copy>p.gst-typing-ready .gst-typing-word {
  opacity: 0;
}

.gst-feature-copy.gst-animation-visible>p.gst-typing-ready .gst-typing-word {
  animation: gstTypingWordIn 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--gst-typing-start) + var(--gst-word-delay, 0ms));
}

.gst-feature-copy.gst-animation-visible>p.gst-typing-ready .gst-typing-keyword {
  animation-name: gstTypingWordIn;
}

.gst-feature-row-copy>p.gst-typing-ready {
  --gst-typing-start: 1180ms;
}

@keyframes gstTypingWordIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.gst-feature-browser {
  width: auto;
  margin: 0 40px 30px 10px;
  overflow: hidden;
  border-radius: 5px 5px 0 0;
}

.gst-feature-browser img {
  display: block;
  width: 100%;
  height: auto;
}

.gst-feature-stack {
  display: grid;
  gap: 30px;
  margin-top: 30px;
}

.gst-feature-stack-heading {
  max-width: 680px;
  margin: 0 0 26px 54px;
}

.gst-feature-stack-heading h2 {
  margin-bottom: 20px;
  color: #050505;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 800;
  line-height: 1.08;
}

.gst-feature-stack-heading p {
  max-width: 600px;
  color: #5d5b57;
  font-size: 15px;
  line-height: 1.7;
}

.gst-feature-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  align-items: center;
  min-width: 0;
  overflow: hidden;
  border-radius: 16px;
  background: #d24e01;
}

.gst-feature-row:first-of-type {
  isolation: isolate;
  background: linear-gradient(135deg, #0570c4 0%, #068aee 55%, #0363ad 100%);
  box-shadow:
    0 30px 70px -15px rgba(14, 41, 51, 0.6),
    inset 0 0 34px rgba(255, 255, 255, 0.08);
}

.gst-motion-frame,
.gst-motion-frame>* {
  position: absolute;
  pointer-events: none;
}

.gst-motion-frame {
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
}

.gst-motion-frame>* {
  will-change: transform, opacity;
}

@keyframes gstMotionFloatSlow {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-15px) rotate(3deg);
  }
}

@keyframes gstMotionFloatMedium {

  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-20px) scale(1.05);
  }
}

@keyframes gstMotionFloatTriangle {

  0%,
  100% {
    transform: rotate(-14deg) translateY(0);
  }

  50% {
    transform: rotate(-10deg) translateY(-18px);
  }
}

@keyframes gstMotionFloatHeroCard {

  0%,
  100% {
    transform: rotate(23deg) translateY(0);
  }

  50% {
    transform: rotate(20deg) translateY(-16px);
  }
}

@keyframes gstMotionFloatMidRect {

  0%,
  100% {
    transform: rotate(12deg) translateY(0);
  }

  50% {
    transform: rotate(15deg) translateY(-12px);
  }
}

@keyframes gstMotionPulseGlow {

  0%,
  100% {
    opacity: 0.6;
    transform: scale(1);
  }

  50% {
    opacity: 0.9;
    transform: scale(1.1);
  }
}

.gst-motion-glow-sky-top,
.gst-motion-glow-orange-bottom {
  display: none;
}

.gst-motion-orb-1 {
  top: 40px;
  right: 140px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7dd3fc 0%, #38bdf8 50%, #0284c7 100%);
  box-shadow: 0 12px 24px rgba(56, 189, 248, 0.35);
  animation: gstMotionFloatMedium 5s infinite ease-in-out;
}

.gst-motion-orb-2 {
  top: 180px;
  right: 80px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: linear-gradient(135deg, #bae6fd, #38bdf8);
  box-shadow: 0 8px 16px rgba(56, 189, 248, 0.25);
  animation: gstMotionFloatSlow 7s infinite ease-in-out;
}

.gst-motion-triangle {
  top: 20px;
  left: 90px;
  width: 0;
  height: 0;
  border-right: 140px solid transparent;
  border-bottom: 290px solid rgba(125, 211, 252, 0.55);
  border-left: 140px solid transparent;
  filter: drop-shadow(0 20px 30px rgba(14, 165, 233, 0.3));
  animation: gstMotionFloatTriangle 6s infinite ease-in-out;
}

.gst-motion-small-circle-1 {
  top: 130px;
  left: 38%;
  width: 95px;
  height: 95px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 60%, #fdba74 100%);
  box-shadow: 0 10px 25px rgba(251, 146, 60, 0.25);
  animation: gstMotionFloatMedium 6.5s infinite ease-in-out;
}

.gst-motion-small-circle-2 {
  top: 60px;
  left: 33%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffedd5, #fed7aa);
  box-shadow: 0 6px 14px rgba(251, 146, 60, 0.18);
  animation: gstMotionFloatSlow 4.5s infinite ease-in-out;
}

.gst-motion-circle-main {
  bottom: -90px;
  left: -50px;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: linear-gradient(135deg, #38bdf8 0%, #0284c7 45%, #0369a1 80%, #075985 100%);
  box-shadow: 0 30px 50px rgba(2, 132, 199, 0.4), inset 0 10px 20px rgba(255, 255, 255, 0.3);
  animation: gstMotionFloatSlow 8s infinite ease-in-out;
}

.gst-motion-rect-mid {
  right: 50px;
  bottom: -30px;
  width: 230px;
  height: 300px;
  border-radius: 32px;
  background: linear-gradient(135deg, #fed7aa 0%, #fb923c 50%, #f97316 100%);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.28);
  animation: gstMotionFloatMidRect 7s infinite ease-in-out;
}

.gst-motion-card-hero {
  right: 14%;
  bottom: -55px;
  width: 260px;
  height: 370px;
  border-radius: 38px;
  background: linear-gradient(145deg, #ff7849 0%, #ff5216 35%, #ea580c 70%, #9a3412 100%);
  box-shadow:
    -18px 30px 45px rgba(0, 0, 0, 0.38),
    inset -5px -5px 15px rgba(0, 0, 0, 0.2),
    inset 5px 5px 15px rgba(255, 255, 255, 0.25);
  animation: gstMotionFloatHeroCard 5.5s infinite ease-in-out;
}

.gst-feature-row:first-of-type .gst-motion-card-hero {
  background: linear-gradient(145deg, #ff8a00 0%, #ff7f00 50%, #e86b00 100%);
  box-shadow:
    -18px 30px 45px rgba(0, 0, 0, 0.38),
    inset -5px -5px 15px rgba(0, 0, 0, 0.2),
    inset 5px 5px 15px rgba(255, 255, 255, 0.25);
}

.gst-feature-row:first-of-type .gst-motion-rect-mid {
  background: linear-gradient(135deg, #6d82d9 0%, #596dc6 45%, #4057b4 100%);
  box-shadow:
    0 15px 35px rgba(0, 0, 0, 0.28);
}

.gst-feature-row:first-of-type .gst-motion-triangle {
  border-bottom-color: rgba(125, 211, 252, 0.55);
  filter: drop-shadow(0 20px 30px rgba(14, 165, 233, 0.3));
}

.gst-feature-row:nth-of-type(2) .gst-motion-triangle {
  border-bottom-color: #38bdf8;
  filter: none;
}

.gst-feature-row:first-of-type .gst-motion-small-circle-1 {
  background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 60%, #fdba74 100%);
  box-shadow: 0 10px 25px rgba(251, 146, 60, 0.25);
}

.gst-feature-row:first-of-type .gst-motion-small-circle-2 {
  background: linear-gradient(135deg, #ffedd5, #fed7aa);
  box-shadow: 0 6px 14px rgba(251, 146, 60, 0.18);
}

.gst-feature-row:first-of-type .gst-motion-circle-main {
  background: linear-gradient(135deg, #38bdf8 0%, #0284c7 45%, #0369a1 80%, #075985 100%);
  box-shadow: 0 30px 50px rgba(2, 132, 199, 0.4), inset 0 10px 20px rgba(255, 255, 255, 0.3);
}

.gst-feature-row> :not(.gst-motion-frame) {
  position: relative;
  z-index: 1;
}

.gst-feature-row:nth-of-type(2) {
  background: linear-gradient(135deg, #99140c 0%, #b51b11 55%, #800e07 100%);
  box-shadow:
    0 30px 70px -15px rgba(14, 41, 51, 0.6),
    inset 0 0 34px rgba(255, 255, 255, 0.08);
}

.gst-feature-row:nth-of-type(2) .gst-feature-row-media {
  padding: 20px 30px 20px 5px;
}

.gst-feature-row:nth-of-type(2) .gst-feature-row-media img {
  margin: 0;
}

.gst-feature-row:nth-of-type(3) {
  background: linear-gradient(135deg, #1f3bbd 0%, #2c4ee6 55%, #173099 100%);
  box-shadow:
    0 30px 70px -15px rgba(14, 41, 51, 0.6),
    inset 0 0 34px rgba(255, 255, 255, 0.08);
}

.gst-feature-row-media {
  min-width: 0;
  padding: 20px 15px 20px 30px;
  margin: 10px 0;
  overflow: hidden;
  border-radius: 16px;
  background: transparent;
}

.gst-feature-row-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  overflow: hidden;
  border-radius: 5px 5px 0 0;
  image-rendering: auto;
}

.gst-feature-row-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
  padding: 34px 38px;
}

.gst-feature-row:first-of-type .gst-feature-row-copy {
  padding: 34px 40px 34px 28px;
}

.gst-feature-row:nth-of-type(2) .gst-feature-row-copy {
  padding: 34px 28px 34px 40px;
}

.gst-feature-row:nth-of-type(3) .gst-feature-row-copy {
  padding: 34px 40px 34px 28px;
}

.gst-feature-row-copy h2 {
  width: 100%;
  margin-bottom: 12px;
  color: #ffffff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.4px;
  white-space: normal;
  overflow-wrap: anywhere;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.gst-feature-row-copy p {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
  color: #ffffff;
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.65;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
}

.gst-feature-row-copy ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}

@keyframes gstSleekFadeIn {
  from {
    opacity: 0.4;
    transform: scale(0.98);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes gstOrbFloat {
  0% {
    transform: translateY(0px) scale(1);
  }

  50% {
    transform: translateY(-12px) scale(1.04);
  }

  100% {
    transform: translateY(0px) scale(1);
  }
}

.gst-motion-orb-1,
.gst-motion-orb-2,
.gst-motion-glow-sky-top,
.gst-motion-glow-orange-bottom {
  animation: gstOrbFloat 7s ease-in-out infinite;
}

.gst-feature-row-copy li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 20px 13px 16px;
  border-radius: 14px;
  color: #ffffff;
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.4;
  letter-spacing: 0.15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.14) 0%,
      rgba(255, 255, 255, 0.05) 100%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    0 10px 30px -5px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.7),
    0 2px 10px rgba(0, 0, 0, 0.45);
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
              background 240ms ease,
              border-color 240ms ease,
              box-shadow 240ms ease;
  z-index: 1;
}


.gst-feature-row-copy li::before {
  content: "✓";
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00e685 0%, #00ab60 100%);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 2px 10px rgba(0, 230, 133, 0.45);
  flex-shrink: 0;
  transition: transform 240ms ease, box-shadow 240ms ease;
}


@media (prefers-reduced-motion: reduce) {

  .gst-animation-ready .gst-dashboard-heading,
  .gst-animation-ready .gst-browser-frame,
  .gst-animation-ready .gst-feature-copy,
  .gst-animation-ready .gst-feature-browser img,
  .gst-animation-ready .gst-feature-row-media,
  .gst-animation-ready .gst-dashboard-features .gst-feature-copy>h2,
  .gst-animation-ready .gst-feature-row-copy>h2,
  .gst-animation-ready .gst-feature-row-copy>p,
  .gst-animation-ready .gst-feature-row-copy>ul>li {
    opacity: 1;
    transform: none;
  }

  .gst-animation-visible.gst-dashboard-heading,
  .gst-animation-visible.gst-browser-frame,
  .gst-feature-copy.gst-animation-visible,
  .gst-dashboard-features .gst-feature-copy.gst-animation-visible>h2,
  .gst-feature-browser img.gst-animation-visible,
  .gst-feature-row-copy.gst-animation-visible>h2,
  .gst-feature-row-copy.gst-animation-visible>p,
  .gst-feature-row-copy.gst-animation-visible>ul>li,
  .gst-animation-visible .gst-dashboard-image-wrap img {
    animation: none;
  }

  .gst-animation-ready .gst-feature-copy>p.gst-typing-ready .gst-typing-word {
    opacity: 1;
  }

  .gst-feature-copy.gst-animation-visible>p.gst-typing-ready .gst-typing-word {
    animation: none;
  }

  .gst-feature-row .gst-motion-frame>* {
    animation: none;
  }

}

@media (max-width: 640px) {
  .gst-dashboard-page {
    padding: 26px 10px 34px;
  }

  .gst-dashboard-hero {
    min-height: 0;
    padding: 30px 18px 18px;
  }

  .gst-dashboard-heading {
    margin-bottom: 24px;
  }

  .gst-dashboard-heading h2 {
    font-size: 27px;
  }

  .gst-dashboard-heading p {
    font-size: 12px;
  }

  .gst-dashboard-features {
    grid-template-columns: 1fr;
  }

  .gst-feature-copy {
    min-height: 180px;
    padding: 20px 26px;
  }

  .gst-feature-copy h2 {
    font-size: 25px;
  }

  .gst-feature-browser {
    margin: 0 16px;
  }

  .gst-feature-row {
    grid-template-columns: 1fr;
  }

  .gst-feature-row:nth-of-type(even) .gst-feature-row-media,
  .gst-feature-row:nth-of-type(even) .gst-feature-row-copy {
    order: initial;
  }

  .gst-feature-row:nth-of-type(2) .gst-feature-row-media,
  .gst-feature-row:nth-of-type(2) .gst-feature-row-copy {
    transform: translateX(0);
  }

  .gst-feature-row:nth-of-type(2) {
    grid-template-columns: 1fr;
  }

  .gst-feature-row:nth-of-type(2) .gst-feature-row-media.gst-animation-visible {
    animation-name: gstFeatureFromLeft;
  }

  .gst-feature-row:nth-of-type(2) .gst-feature-row-copy.gst-animation-visible {
    animation-name: gstFeatureFromRight;
  }

  .gst-feature-row:nth-of-type(2) .gst-feature-row-copy>h2,
  .gst-feature-row:nth-of-type(2) .gst-feature-row-copy>p,
  .gst-feature-row:nth-of-type(2) .gst-feature-row-copy>ul>li {
    transform: translateX(34px);
  }

  .gst-feature-row:nth-of-type(2) .gst-feature-row-copy.gst-animation-visible>h2,
  .gst-feature-row:nth-of-type(2) .gst-feature-row-copy.gst-animation-visible>p,
  .gst-feature-row:nth-of-type(2) .gst-feature-row-copy.gst-animation-visible>ul>li {
    animation-name: gstFeatureTextFromRight;
  }

  .gst-feature-row-media,
  .gst-feature-row-copy {
    min-height: 0;
    height: auto;
  }

  .gst-feature-row-media {
    aspect-ratio: 16 / 9;
    padding: 16px;
    height: auto;
  }

  .gst-feature-row-copy {
    min-height: 0;
    padding: 22px 20px 28px !important;
  }

  .gst-feature-stack {
    margin-top: 54px;
  }

  .gst-feature-stack-heading {
    margin: 0 18px 12px;
  }

  .gst-feature-stack-heading h2 {
    font-size: 32px;
  }

  .gst-feature-stack-heading p {
    font-size: 13px;
  }
}

/* GST introduction: interactive office workspace. */
.gst-dashboard-page .section-inner > .gst-intro-hero,
.gst-dashboard-page .section-inner > .gst-dashboard-hero {
  box-sizing: border-box; width: 100%; max-width: none; margin-inline: 0; border-radius: 8px;
}
.gst-intro-hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; gap: 30px; padding: 36px 32px; margin-bottom: 24px; overflow: hidden;
  border: 1px solid #d9eaf2; color: #082f49;
  background: radial-gradient(ellipse at 90% 80%, #fff0df 0%, transparent 45%), linear-gradient(120deg, #fff 30%, #eff9fe);
  box-shadow: 0 18px 48px #0b304414;
}
.gst-intro-copy { position: relative; z-index: 2; min-width: 0; }
.gst-intro-eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px; margin-bottom: 18px; border-radius: 30px; border: 1px solid #c7e9f9; background: #eaf7fe; color: #0369a1; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.gst-intro-eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #f97316; }
.gst-intro-copy h1 { margin: 0 0 18px; font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-size: clamp(42px, 4.9vw, 72px); font-weight: 800; line-height: 1.08; letter-spacing: -.045em; }
.gst-intro-brand, .gst-intro-product { display: block; }
.gst-intro-brand { color: #f47a22; background: linear-gradient(90deg, #f97316, #fb923c); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.gst-intro-product { color: #082f49; }
.gst-dashboard-page .gst-intro-description { margin: 0 0 18px; padding-left: 14px; border-left: 4px solid #f97316; color: #0369a1; font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-size: clamp(24px, 2.4vw, 34px); font-weight: 800; line-height: 1.3; letter-spacing: -.025em; }
.gst-dashboard-page .gst-intro-supporting { margin: 0 0 22px; max-width: 560px; color: #496779; font-size: 15px; line-height: 1.7; }
.gst-intro-highlights { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 26px; }
.gst-intro-highlights > li { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 8px 10px; background: #fff; border: 1px solid #dbeaf2; border-radius: 30px; color: #0c4a6e; font-size: 11px; font-weight: 700; }
.gst-intro-highlights > li::before { content: '✓'; color: #ea580c; font-weight: 900; }
.gst-intro-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; }
.gst-intro-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; text-decoration: none; font-size: 14px; font-weight: 700; transition: transform .2s ease; }
.gst-intro-button-primary { padding: 14px 24px; border-radius: 30px; color: #fff; background: linear-gradient(135deg, #0284c7, #0369a1); box-shadow: 0 8px 20px #0284c72b; }
.gst-intro-button-link { color: #0c4a6e; }
.gst-intro-button:hover { transform: translateY(-2px); }
.gst-intro-button-primary:hover { color: #fff; }
.gst-intro-button-link:hover { color: #ea580c; }
/* Architectural glass, desk accessories and monitor use CSS, with no heavy hero image. */
.gst-office-preview { position: relative; isolation: isolate; min-width: 0; width: 100%; max-width: 610px; justify-self: center; padding: 34px 18px 72px; }
.gst-office-windows { position: absolute; z-index: -2; inset: 0 0 62px; border: 1px solid #fff; border-radius: 22px 22px 0 0; background: repeating-linear-gradient(90deg, transparent 0%, transparent 31%, #c4dce575 31.3%, #ffffffd9 32%, transparent 32.5%), linear-gradient(155deg, #deeff8, #ffffff8c 65%, #d6e9f0); box-shadow: inset 0 1px 0 #fff; }
.gst-office-desk { position: absolute; z-index: -1; height: 74px; bottom: 0; left: -10px; right: -10px; border-top: 2px solid #fff; border-radius: 8px 8px 18px 18px; background: linear-gradient(175deg, #f4e5d3, #fff5e9 46%, #ddc7b0); box-shadow: 0 16px 22px #47697a15; }
.gst-workstation { position: relative; background: #ffffffed; border: 5px solid #fff; border-radius: 16px; box-shadow: 0 22px 38px #244e7424, 0 0 0 1px #cedfe9; }
.gst-workstation::after { content: ''; position: absolute; top: calc(100% + 5px); left: 38%; width: 24%; height: 40px; z-index: -1; background: linear-gradient(90deg, #b9cbd4, #ecf4f7 50%, #b9cbd4); clip-path: polygon(27% 0,73% 0,80% 78%,100% 90%,100% 100%,0 100%,0 90%,20% 78%); }
.gst-workspace-header { display: flex; align-items: center; gap: 9px; padding: 14px 12px; border-bottom: 1px solid #e3edf3; background: linear-gradient(110deg, #f7fbff, #fff); border-radius: 11px 11px 0 0; }
.gst-workspace-header img { object-fit: contain; flex-shrink: 0; }
.gst-workspace-header strong { display: block; color: #163c54; font-size: 14px; }
.gst-workspace-header div > span { display: block; color: #657f8f; font-size: 9px; margin-top: 2px; }
.gst-preview-label { margin-left: auto; color: #9a4c12; border: 1px solid #f9d7b9; background: #fff5eb; padding: 5px 7px; border-radius: 20px; font-size: 9px; white-space: nowrap; }
.gst-workspace-body { padding: 18px 14px 10px; }
.gst-workspace-title h2 { font-size: clamp(16px, 1.5vw, 21px); line-height: 1.3; margin: 0 0 4px; color: #153c55; letter-spacing: -.025em; }
.gst-workspace-title > span { color: #6d8291; font-size: 10px; }
.gst-preview-tabs { display: flex; gap: 3px; background: #edf5f9; border-radius: 9px; padding: 4px; margin: 16px 0; }
.gst-preview-tabs button { flex: 1; min-width: 0; min-height: 40px; border: 0; border-radius: 7px; background: transparent; color: #486677; font: inherit; font-size: 10px; font-weight: 700; padding: 7px 5px; cursor: pointer; transition: background-color .2s, color .2s, transform .2s; }
.gst-preview-tabs button[aria-selected="true"] { background: #fff; color: #0369a1; box-shadow: 0 2px 7px #1f547418; }
.gst-preview-tabs button:hover { color: #c0520b; transform: translateY(-2px); }
.gst-preview-panel[hidden] { display: none; }
.gst-preview-metric { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gst-preview-metric div > span { display: block; color: #5f7a8c; font-size: 11px; }
.gst-preview-metric strong { display: block; color: #123d57; font-size: 33px; line-height: 1.3; letter-spacing: -.04em; }
.gst-preview-metric small { color: #8097a5; font-size: 16px; font-weight: 500; }
.gst-preview-status { padding: 6px 8px; border-radius: 20px; background: #e9f7ef; color: #20734a; font-size: 9px; white-space: nowrap; }
.gst-status-review { color: #9a4c12; background: #fff2e6; }
.gst-preview-progress { height: 5px; border-radius: 5px; background: #e7eff4; margin: 12px 0; overflow: hidden; }
.gst-preview-progress > span { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, #0284c7, #38bdf8); }
.gst-preview-steps { padding: 0; margin: 0 0 13px; list-style: none; }
.gst-preview-steps li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; margin: 0; border-bottom: 1px solid #ecf1f5; color: #486677; font-size: 11px; }
.gst-preview-steps b { color: #20734a; font-size: 10px; font-weight: 600; }
.gst-preview-steps b.gst-step-next { color: #b65612; }
.gst-preview-detail { display: flex; justify-content: space-between; padding: 10px 12px; border-radius: 8px; text-decoration: none; background: #eaf6fd; color: #0369a1; font-size: 11px; font-weight: 700; transition: transform .2s, background-color .2s; }
.gst-preview-detail:hover { background: #d8effd; transform: translateY(-2px); }
.gst-dashboard-page .gst-preview-note { color: #617a89; font-size: 9px; line-height: 1.4; margin: 10px 0 0; text-align: center; }
.gst-office-files { position: absolute; right: 0; top: 20px; display: flex; align-items: end; gap: 3px; z-index: -1; }
.gst-office-files i { display: block; width: 15px; height: 85px; border-radius: 3px; background: linear-gradient(#fff 12%, #91b4ca 13%, #cde1ed 70%, #91b4ca); transform: rotate(8deg); }
.gst-office-files i:nth-child(2) { height: 96px; background: linear-gradient(#fff 12%, #e8b085 13%, #f3d5b9 70%, #e8b085); }
.gst-office-keyboard { position: absolute; bottom: 19px; left: 25%; width: 44%; height: 21px; transform: skewX(-14deg); border: 4px solid #dce6eb; border-radius: 5px; background: repeating-linear-gradient(90deg, #b5c8d3 0 3px, #edf3f6 3px 11px); box-shadow: 0 4px 0 #b5c8d3; }
.gst-office-cup { position: absolute; bottom: 22px; right: 6%; width: 29px; height: 35px; border-radius: 3px 3px 12px 12px; background: linear-gradient(90deg, #d4e5ed, #fff); border-top: 4px solid #9cb1b8; box-shadow: 0 4px 6px #526f8024; }
.gst-office-cup::after { content: ''; position: absolute; top: 4px; right: -10px; width: 14px; height: 18px; border: 4px solid #d6e7ef; border-radius: 50%; z-index: -1; }
.gst-intro-hero :is(a, button, [tabindex]):focus-visible { outline: 3px solid #f97316; outline-offset: 4px; }
.gst-office-preview.is-entering .gst-workstation { animation: gstWorkspaceEnter .65s cubic-bezier(.16,1,.3,1) both; }
.gst-preview-panel.is-switching { animation: gstPanelEnter .25s ease both; }
@keyframes gstWorkspaceEnter { from { opacity: 0; transform: translateY(16px) scale(1.025); } to { opacity: 1; transform: none; } }
@keyframes gstPanelEnter { from { opacity: .5; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (max-width: 1000px) {
 .gst-intro-hero { gap: 16px; padding: 28px 22px; }
 .gst-office-preview { padding-inline: 5px; }
 .gst-intro-copy h1 { font-size: clamp(38px, 5vw, 54px); }
 .gst-intro-actions { gap: 14px; }
}
@media (max-width: 767px) {
 .gst-intro-hero { grid-template-columns: minmax(0, 1fr); padding: 28px 18px 18px; gap: 18px; }
 .gst-intro-copy { text-align: center; }
 .gst-intro-copy h1 { font-size: clamp(40px, 9vw, 60px); }
 .gst-dashboard-page .gst-intro-description { border: 0; padding: 0; font-size: 26px; }
 .gst-intro-actions, .gst-intro-highlights { justify-content: center; }
 .gst-dashboard-page .gst-intro-supporting { margin-inline: auto; }
 .gst-office-preview { max-width: 510px; padding: 24px 10px 65px; }
}
@media (max-width: 380px) {
 .gst-intro-hero { padding-inline: 12px; }
 .gst-workspace-body { padding-inline: 9px; }
 .gst-workspace-header { padding-inline: 8px; gap: 6px; }
 .gst-workspace-header strong { font-size: 12px; }
 .gst-workspace-header div > span { font-size: 8px; }
 .gst-preview-label { font-size: 8px; padding: 4px; }
 .gst-preview-tabs button { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
 .gst-office-preview *, .gst-intro-button { animation: none !important; transition: none !important; }
}
/* Office hero refinement and interactive workflow shortcuts. */
.gst-intro-hero { gap: 24px 36px; background: radial-gradient(ellipse at 85% 35%, #dff3ff 0%, transparent 46%), radial-gradient(ellipse at 8% 100%, #fff0df, transparent 42%), #fcfeff; }
.gst-intro-hero::before { content: ''; position: absolute; top: 0; inset-inline: 0; height: 3px; background: linear-gradient(90deg, #fb923c, #f97316 25%, #38bdf8 65%, #0284c7); }
.gst-office-preview { --workspace-accent: #0284c7; --workspace-tint: #eaf6fd; perspective: 1000px; padding-top: 24px; padding-bottom: 85px; }
.gst-office-preview[data-workflow="itc"] { --workspace-accent: #0e7490; --workspace-tint: #e5f7fa; }
.gst-office-preview[data-workflow="invoice"] { --workspace-accent: #c65a10; --workspace-tint: #fff1e5; }
.gst-workstation { border-color: #ffffff; box-shadow: 0 24px 42px #244e742b, 0 3px 8px #244e7414, 0 0 0 1px #c5dce8; }
.gst-workspace-header { background: linear-gradient(110deg, #fff 20%, var(--workspace-tint)); }
.gst-workspace-title > span { display: inline-flex; align-items: center; gap: 5px; }
.gst-sample-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--workspace-accent); }
.gst-preview-tabs button[aria-selected="true"] { color: var(--workspace-accent); box-shadow: 0 2px 7px #1f547418, inset 0 -2px var(--workspace-accent); }
.gst-preview-metric { padding: 12px; border: 1px solid #e4eef4; border-radius: 10px; background: linear-gradient(120deg, #fff, var(--workspace-tint)); }
.gst-preview-progress > span { background: linear-gradient(90deg, var(--workspace-accent), #74c9ed); transform-origin: left; }
.gst-preview-panel.is-switching .gst-preview-progress > span { animation: gstProgressFill .55s cubic-bezier(.16,1,.3,1) both; }
.gst-preview-detail { background: var(--workspace-tint); color: var(--workspace-accent); }
.gst-workspace-caption { position: absolute; bottom: 58px; left: 0; right: 0; color: #526f80; font-size: 9px; font-weight: 600; text-align: center; }
.gst-workspace-caption > span { color: #e37828; margin-right: 3px; }
.gst-sample-details { margin-bottom: 12px; border: 1px solid #e1ecf3; border-radius: 8px; background: #fff; }
.gst-sample-details summary { display: flex; align-items: center; justify-content: space-between; min-height: 36px; padding: 8px 10px; cursor: pointer; list-style: none; color: #406176; font-size: 10px; font-weight: 700; }
.gst-sample-details summary::-webkit-details-marker { display: none; }
.gst-sample-details summary > span { font-size: 17px; color: var(--workspace-accent); transition: transform .2s; }
.gst-sample-details[open] summary > span { transform: rotate(45deg); }
.gst-sample-details summary:hover { background: var(--workspace-tint); border-radius: 8px; }
.gst-sample-table-wrap { overflow-x: auto; padding: 0 8px 8px; }
.gst-sample-details table { width: 100%; border-collapse: collapse; text-align: left; font-size: 9px; color: #486677; }
.gst-sample-details caption { padding: 3px 0 6px; text-align: left; font-size: 9px; color: #637c8b; }
.gst-sample-details :is(th,td) { padding: 7px 4px; border-bottom: 1px solid #edf2f5; }
.gst-sample-details th { font-weight: 700; color: #31566a; }
.gst-record-ok { color: #20734a; }
.gst-record-review { color: #ac5010; }
.gst-workflow-shortcuts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid #d9e8f1; }
.gst-workflow-shortcut { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 15px; text-align: left; border: 1px solid #dce8ef; border-radius: 12px; background: linear-gradient(135deg,#ffffff,#f6fbfe); color: #244a62; cursor: pointer; font: inherit; transition: transform .22s, box-shadow .22s, border-color .22s; }
.gst-workflow-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 11px; color: #0284c7; background: #e2f3fe; }
.gst-workflow-icon svg { width: 22px; height: 22px; }
.gst-workflow-shortcut:nth-child(2) .gst-workflow-icon { color: #0e7490; background: #e0f4f7; }
.gst-workflow-shortcut:nth-child(3) .gst-workflow-icon { color: #c65a10; background: #fff0e1; }
.gst-workflow-shortcut strong { display: block; font-size: 13px; font-weight: 750; line-height: 1.3; }
.gst-workflow-shortcut small { display: block; margin-top: 4px; color: #647e8f; font-size: 10px; line-height: 1.5; }
.gst-workflow-arrow { margin-left: auto; color: #7e9daf; font-size: 18px; }
.gst-workflow-shortcut[aria-pressed="true"] { border-color: #69bce7; box-shadow: 0 5px 16px #0284c710; background: #f0f9ff; }
.gst-workflow-shortcut:nth-child(2)[aria-pressed="true"] { border-color: #5ab6c5; background: #effbfd; }
.gst-workflow-shortcut:nth-child(3)[aria-pressed="true"] { border-color: #f0b586; background: #fff8f1; }
.gst-intro-hero summary:focus-visible { outline: 3px solid #f97316; outline-offset: 3px; border-radius: 8px; }
@media (hover: hover) and (pointer: fine) {
 .gst-workflow-shortcut:hover { transform: translateY(-4px); box-shadow: 0 12px 24px #315c7514; border-color: #95c9e4; }
 .gst-workflow-shortcut:hover .gst-workflow-arrow { color: #e37828; }
}
@keyframes gstProgressFill { from { transform: scaleX(.1); } to { transform: scaleX(1); } }
@media (max-width: 1000px) {
 .gst-workflow-shortcut { gap: 8px; padding: 12px; }
 .gst-workflow-icon { width: 32px; height: 32px; flex-basis: 32px; }
 .gst-workflow-shortcut strong { font-size: 12px; }
 .gst-workflow-arrow { display: none; }
}
@media (max-width: 600px) {
 .gst-workflow-shortcuts { grid-template-columns: 1fr; gap: 8px; padding-top: 12px; }
 .gst-workflow-shortcut { padding: 12px 14px; }
 .gst-workflow-shortcut strong { font-size: 13px; }
 .gst-workflow-arrow { display: block; }
}
@media (prefers-reduced-motion: reduce) {
 .gst-workflow-shortcut { transition: none; }
 .gst-workflow-shortcut:hover { transform: none; }
}

/* Compact feature introduction with in-page workflow navigation. */
.gst-feature-stack-heading {
  position: relative; display: grid; grid-template-columns: minmax(0, 65fr) minmax(0, 35fr);
  align-items: center; gap: 24px; max-width: none; margin: 0 0 18px; padding: 26px 40px;
  border-bottom: 1px solid #dbe9f1;
  /* Opaque base hides the global moving squares only behind this heading. */
  background: radial-gradient(ellipse at 5% 45%, #fff1e3b3, transparent 52%), radial-gradient(ellipse at 95% 55%, #dff3fdb3, transparent 45%), #f8fbfd;
}
.gst-feature-stack-heading::after { content: ''; position: absolute; bottom: -1px; left: 40px; width: 100px; height: 3px; border-radius: 3px; background: linear-gradient(90deg,#f47a22,#38bdf8); }
.gst-features-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; color: #557082; font-size: 10px; line-height: 1.5; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.gst-features-kicker::before { content: ''; width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: #f47a22; box-shadow: 0 0 0 4px #f47a2215; }
.gst-feature-stack-heading h2 { margin: 0 0 12px; color: #12364c; font-size: clamp(30px,3.4vw,46px); font-weight: 800; line-height: 1.13; letter-spacing: -.035em; }
.gst-features-orange { color: #e56912; }
.gst-features-blue { color: #0284c7; }
.gst-feature-stack-heading p { max-width: 600px; margin: 0; color: #587080; font-size: 14px; line-height: 1.65; }
.gst-features-nav { display: flex; flex-direction: column; min-width: 0; padding-left: 24px; border-left: 1px solid #d6e6ef; }
.gst-features-nav-label { margin: 0 0 8px 10px; color: #667d8b; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.gst-features-nav a { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 10px; border-bottom: 1px solid #dceaf2; border-radius: 6px; color: #244b63; text-decoration: none; transition: color .2s, background-color .2s; }
.gst-features-nav a:last-child { border-bottom-color: transparent; }
.gst-features-link-icon { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; color: #0284c7; background: #e2f2fb; border-radius: 9px; }
.gst-features-link-icon svg { display: block; width: 20px; height: 20px; }
.gst-features-nav a:nth-of-type(2) .gst-features-link-icon { color: #087c94; background: #e1f3f5; }
.gst-features-nav a:nth-of-type(3) .gst-features-link-icon { color: #c66119; background: #fff0e1; }
.gst-features-link-copy { min-width: 0; }
.gst-features-link-copy strong { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; }
.gst-features-link-copy small { display: block; margin-top: 3px; font-size: 11px; line-height: 1.4; color: #617c8d; }
.gst-features-link-arrow { margin-left: auto; color: #0284c7; font-size: 17px; transition: color .2s, transform .2s; }
.gst-features-nav a:hover, .gst-features-nav a:focus-visible { color: #124964; background: #e8f4fc; }
.gst-features-nav a:hover .gst-features-link-arrow, .gst-features-nav a:focus-visible .gst-features-link-arrow { color: #e56912; transform: translate(2px,-2px); }
.gst-features-nav a:focus-visible { outline: 2px solid #f47a22; outline-offset: 3px; }
.gst-feature-row:is(#gst-return, #gst-reports, #gst-filing-status) { scroll-margin-top: 100px; }
@media (max-width: 767px) {
  .gst-feature-stack-heading { grid-template-columns: 1fr; gap: 20px; padding: 22px 18px; margin-bottom: 12px; }
  .gst-feature-stack-heading::after { left: 18px; }
  .gst-feature-stack-heading h2 { font-size: clamp(29px,5.5vw,38px); }
  .gst-features-nav { border-left: 0; border-top: 1px solid #d6e6ef; padding: 16px 0 0; }
  .gst-features-nav-label { margin-left: 0; }
  .gst-features-nav a { padding-inline: 0; }
  .gst-features-nav a:hover { padding-inline: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gst-features-nav a, .gst-features-link-arrow { transition: none; }
  .gst-features-nav a:hover .gst-features-link-arrow, .gst-features-nav a:focus-visible .gst-features-link-arrow { transform: none; }
}

/* Repository image backgrounds for the three GST feature frames. */
:is(#gst-return, #gst-reports, #gst-filing-status).gst-feature-row {
  background-color: #f5f9fc;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: none;
}
/* Aqua and sky blue, scoped to the first GST feature only. */
#gst-return.gst-feature-row {
  background-color: #B5DFFF;
  background-image: url("../asset/frms_bg/gst-returns-periwinkle.svg?v=20260930"),
    linear-gradient(115deg, #B5DFFF 0%, #9DE4F7 48%, #85E8EF 100%);
  background-size: 100% 100%, cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.8);
}
/* Soft yellow and sky blue report frame, with a cream transition. */
#gst-reports.gst-feature-row {
 background-color:#FFF0AD;
 background-image:url("../asset/frms_bg/gst-reports-yellow-sky.svg?v=20260930"),
 linear-gradient(110deg,#FFF0AD 0%,#FFF8E7 48%,#B9E3FF 100%);
 background-size:100% 100%,cover;
 background-position:center;
 background-repeat:no-repeat;
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.8);
}
/* Fresh mint and turquoise filing status frame. */
#gst-filing-status.gst-feature-row {
 background-color:#78DDD5;
 background-image:url("../asset/frms_bg/gst-filing-mint-tracker.svg?v=20260930"),
 linear-gradient(115deg,#78DDD5 0%,#9BE9D3 50%,#B8F2D0 100%);
 background-size:100% 100%,cover;
 background-position:center;
 background-repeat:no-repeat;
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.8);
}
#gst-filing-status .gst-feature-row-copy > ul {
 background:url("../asset/frms_bg/gst-filing-status-tracker.svg?v=20260930") center / contain no-repeat;
}
:is(#gst-return, #gst-reports, #gst-filing-status) > .gst-motion-frame {
  display: none;
}
:is(#gst-return, #gst-reports, #gst-filing-status) .gst-feature-row-copy :is(h2, p, li) {
  color: #12364c;
  text-shadow: none;
}

/* Frosted bullet points: keep the full text column transparent. */
:is(#gst-return, #gst-reports, #gst-filing-status) .gst-feature-row-copy li {
  background: transparent;
  border-color: rgba(255, 255, 255, .65);
  box-shadow: 0 8px 24px rgba(18, 54, 76, .12), inset 0 1px 0 rgba(255, 255, 255, .7);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :is(#gst-return, #gst-reports, #gst-filing-status) .gst-feature-row-copy li {
    -webkit-backdrop-filter: blur(40px) saturate(150%);
    backdrop-filter: blur(40px) saturate(150%);
  }
}

/* Release the copy's opacity animation layer after entry so bullet backdrops
   can sample the frame image instead of an isolated transparent ancestor. */
:is(#gst-return, #gst-reports, #gst-filing-status) .gst-feature-row-copy.gst-animation-visible {
  opacity: 1;
  transform: none;
  animation-fill-mode: backwards;
}

/* Billing frame: reference-style copy; preserve existing media and background. */
#gst-billing {
  border-radius: 14px;
}
#gst-billing .gst-feature-row-copy {
  padding-block: 52px;
}
#gst-billing .gst-feature-row-copy h2 {
  margin: 0 0 22px;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.035em;
  text-shadow: none;
}
#gst-billing .gst-feature-row-copy p {
  margin: 0 0 24px;
  color: #fff;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  text-shadow: none;
}
#gst-billing .gst-typing-keyword {
  padding: 0;
  color: inherit;
  font-weight: inherit;
  background: transparent;
  box-shadow: none;
}
#gst-billing .gst-billing-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 28px;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
}
#gst-billing .gst-billing-button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 5px;
}

/* Layered vector return sheets behind the first feature's bullet list. */
#gst-return .gst-feature-row-copy > ul {
  background: url("../asset/frms_bg/gst-returns-layered-sheets.svg?v=20260930") center / contain no-repeat;
}

/* Shared sharp copy on the bright Returns and Reports frames. */
:is(#gst-return, #gst-reports, #gst-filing-status) .gst-feature-row-copy :is(h2, p, li) {
  color: #17382e;
  text-shadow: none;
}
:is(#gst-return, #gst-reports, #gst-filing-status) .gst-feature-row-copy p {
  color: #284536;
}
:is(#gst-return, #gst-reports, #gst-filing-status) .gst-feature-row-copy li {
  color: #17382e;
  background: transparent;
  border-color: rgba(235, 255, 247, .3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  font-weight: 650;
  letter-spacing: 0;
}
:is(#gst-return, #gst-reports, #gst-filing-status) .gst-typing-keyword {
  padding: 2px 5px;
  border-radius: 4px;
  color: #17382e;
  font-weight: 800;
  background: rgba(255, 255, 255, .8);
  box-shadow: inset 0 -2px 0 rgba(244, 122, 34, .8);
}

/* Return paragraph to normal text rendering after its entrance animation. */
:is(#gst-return, #gst-reports, #gst-filing-status) .gst-feature-row-copy > p {
  color: #18372e;
  font-size: 16px;
  font-weight: 600;
  text-shadow: none;
}
:is(#gst-return, #gst-reports, #gst-filing-status) .gst-feature-row-copy > p.gst-typing-ready .gst-typing-word {
  will-change: auto;
}
:is(#gst-return, #gst-reports, #gst-filing-status) .gst-feature-row-copy.gst-animation-visible > p,
:is(#gst-return, #gst-reports, #gst-filing-status) .gst-feature-row-copy.gst-animation-visible > p.gst-typing-ready .gst-typing-word {
  opacity: 1;
  transform: none;
  animation-fill-mode: backwards;
}

/* Let a little of the Returns artwork show through the existing glass. */
:is(#gst-return, #gst-reports, #gst-filing-status) .gst-feature-row-copy li {
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
}

/* Full transparent Reports illustration; contain preserves the entire platform. */
#gst-reports .gst-feature-row-copy > ul {
  background-image: url("../asset/frms_bg/gst-reports-layered-charts.svg?v=20260930");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

/* Preserve the full screenshots at tablet and desktop sizes. */
@media (min-width: 641px) {
  :is(#gst-return, #gst-reports, #gst-filing-status) .gst-feature-row-media img {
    height: auto;
  }
}

/* Compact desktop frames for laptop viewports; never crop the content. */
@media (min-width: 901px) and (max-width: 1500px), (min-width: 901px) and (max-height: 820px) {
  #gst-return.gst-feature-row { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  #gst-reports.gst-feature-row { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  :is(#gst-return, #gst-reports, #gst-filing-status) .gst-feature-row-copy { padding: 20px 24px; }
  :is(#gst-return, #gst-reports, #gst-filing-status) .gst-feature-row-copy h2 {
    font-size: clamp(24px, 2.05vw, 30px);
    line-height: 1.15;
    margin-bottom: 10px;
  }
  :is(#gst-return, #gst-reports, #gst-filing-status) .gst-feature-row-copy > p {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 14px;
  }
  :is(#gst-return, #gst-reports, #gst-filing-status) .gst-feature-row-copy ul { gap: 8px; }
  :is(#gst-return, #gst-reports, #gst-filing-status) .gst-feature-row-copy li {
    padding: 9px 12px;
    gap: 10px;
    font-size: 14px;
    line-height: 1.4;
  }
  :is(#gst-return, #gst-reports, #gst-filing-status) .gst-feature-row-copy li::before {
    width: 22px;
    height: 22px;
    min-width: 22px;
  }
  :is(#gst-return, #gst-reports, #gst-filing-status) .gst-feature-row-media {
    padding: 16px;
    margin: 0;
  }
  :is(#gst-return, #gst-reports, #gst-filing-status) .gst-feature-row-media img {
    height: auto;
    max-height: max(260px, calc(100dvh - 150px));
    object-fit: contain;
  }
}
/* Narrow windows stack naturally instead of squeezing the text column. */
@media (min-width: 641px) and (max-width: 900px) {
  :is(#gst-return, #gst-reports, #gst-filing-status).gst-feature-row { grid-template-columns: minmax(0, 1fr); }
  :is(#gst-return, #gst-reports, #gst-filing-status) .gst-feature-row-media {
    order: 0;
    padding: 18px;
    margin: 0;
  }
  :is(#gst-return, #gst-reports, #gst-filing-status) .gst-feature-row-copy {
    order: 1;
    padding: 20px 24px 28px;
  }
}

/* Desktop baseline: grow naturally whenever the screenshot or copy needs space. */
:is(#gst-return, #gst-reports, #gst-filing-status).gst-feature-row {
  height: auto;
  min-height: 530px;
}
@media (max-width: 900px) {
  :is(#gst-return, #gst-reports, #gst-filing-status).gst-feature-row {
    min-height: 0;
  }
}


/* Consistent feature titles and crisp bullet text. */
:is(#gst-return, #gst-reports, #gst-filing-status) .gst-feature-row-copy h2 {
  position: relative;
  color: #0b3b3b;
  font-weight: 800;
  letter-spacing: -.025em;
  text-shadow: none;
  padding-bottom: 12px;
}
:is(#gst-return, #gst-reports, #gst-filing-status) .gst-feature-row-copy h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 52px;
  height: 3px;
  border-radius: 3px;
  background: #0b3b3b;
  opacity: .65;
}
:is(#gst-return, #gst-reports, #gst-filing-status) .gst-feature-row-copy li {
  color: #17382e;
}

/* Consistent content-sized glass bullets with visible outlines across all GST frames. */
:is(#gst-return, #gst-reports, #gst-filing-status) .gst-feature-row-copy > ul > li {
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid rgba(11, 59, 59, .38);
}

/* Decorative workflow illustrations for the feature introduction only. */
.gst-feature-stack-heading {
  isolation: isolate;
  overflow: hidden;
}
.gst-feature-stack-heading::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("../asset/frms_bg/gst-features-intro-illustrations.svg?v=20260924") center / 100% 100% no-repeat;
}
.gst-feature-stack-heading > .gst-features-intro,
.gst-feature-stack-heading > .gst-features-nav {
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) {
  .gst-feature-stack-heading::before {
    background-size: auto 100%;
    opacity: .4;
  }
}

/* Corner-only reconciliation artwork; all existing layout and backgrounds stay intact. */
:is(#gst-einvoice, #gst-itc).gst-feature-card {
  position: relative;
  isolation: isolate;
}
#gst-einvoice.gst-feature-card { --reconciliation-art: url("../asset/frms_bg/gst-invoice-match-corner.svg"); }
#gst-itc.gst-feature-card { --reconciliation-art: url("../asset/frms_bg/gst-itc-match-corner.svg"); }
:is(#gst-einvoice, #gst-itc).gst-feature-card::before,
:is(#gst-einvoice, #gst-itc).gst-feature-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background: var(--reconciliation-art) center / contain no-repeat;
}
:is(#gst-einvoice, #gst-itc).gst-feature-card::before {
  width: 52px;
  height: 45px;
  top: -12px;
  left: -14px;
  opacity: .28;
  transform: rotate(-12deg);
}
:is(#gst-einvoice, #gst-itc).gst-feature-card::after {
  width: clamp(76px, 8vw, 116px);
  height: 100px;
  top: -12px;
  right: -8px;
  opacity: .4;
}
:is(#gst-einvoice, #gst-itc).gst-feature-card > .gst-feature-copy,
:is(#gst-einvoice, #gst-itc).gst-feature-card > .gst-feature-browser {
  position: relative;
  z-index: 1;
}
@media (max-width: 600px) {
  :is(#gst-einvoice, #gst-itc).gst-feature-card::after {
    width: 76px;
    height: 66px;
    opacity: .24;
  }
}

/* Billing introduction shares the GST product introduction layout. */
.gst-billing-intro { margin-top: 32px; scroll-margin-top: 110px; }
.gst-billing-intro .gst-intro-copy h2 {
  margin: 0 0 18px;
  font-family: 'Plus Jakarta Sans', Arial, sans-serif;
  font-size: clamp(42px, 4.9vw, 72px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.045em;
}
.gst-billing-intro .gst-intro-product { color: #0b3b3b; }
.gst-billing-intro-visual {
  min-width: 0;
  padding: clamp(16px, 2vw, 26px);
  border: 1px solid #c9e5ef;
  border-radius: 24px;
  background: linear-gradient(145deg, #ffffffeb, #eaf8ffbd);
  box-shadow: 0 16px 36px #174e6510;
}
.gst-billing-visual-label { display: flex; align-items: center; gap: 10px; color: #0b3b3b; font-size: 15px; }
.gst-billing-visual-label img { flex-shrink: 0; }
.gst-billing-illustration { display: block; width: 100%; height: auto; margin-block: 14px; }
.gst-billing-journey { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gst-billing-journey > span { display: flex; flex-direction: column; gap: 7px; padding: 12px 6px; border: 1px solid #d5e8ef; border-radius: 12px; background: #ffffffdb; color: #315565; text-align: center; font-size: 12px; font-weight: 600; }
.gst-billing-journey b { color: #0284c7; font-size: 11px; letter-spacing: .08em; }
.gst-billing-journey > span:last-child b { color: #c45f14; }
@media (max-width: 1000px) {
  .gst-billing-intro .gst-intro-copy h2 { font-size: clamp(38px, 5vw, 54px); }
}
@media (max-width: 760px) {
  .gst-billing-intro { grid-template-columns: minmax(0, 1fr); }
  .gst-billing-intro .gst-intro-copy h2 { font-size: clamp(38px, 9vw, 60px); }
  .gst-billing-intro-visual { width: 100%; max-width: 540px; margin-inline: auto; box-sizing: border-box; }
}

/* A tap-friendly truck adds motion without replacing the billing documents. */
.gst-billing-truck-caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; color: #315565; font-size: 11px; font-weight: 700; }
.gst-billing-truck-caption span { color: #617f8f; font-weight: 400; }
.gst-billing-truck-lane { position: relative; display: block; width: 100%; height: 72px; margin: 4px 0 16px; padding: 0; overflow: hidden; border: 0; border-bottom: 2px solid #b7dce8; border-radius: 8px; background: linear-gradient(0deg, #e5f4f9, transparent 70%); cursor: pointer; touch-action: manipulation; }
.gst-billing-truck { position: absolute; left: 4px; bottom: 1px; width: 104px; height: 65px; pointer-events: none; transform-origin: center; }
.gst-billing-truck-lane:focus-visible { outline: 3px solid #f97316; outline-offset: 3px; }
@media (hover: hover) { .gst-billing-truck-lane:hover { background-color: #eaf7fc; } }

/* The document cards travel out of the illustration and into the truck below. */
.gst-billing-illustration { overflow: visible; }
.gst-billing-load-card { transform-box: fill-box; transform-origin: center; pointer-events: none; }
.gst-billing-truck-lane[aria-busy="true"] { cursor: progress; }

/* A running engine and a quiet visual horn while the truck is parked. */
.gst-billing-truck { overflow: visible; }
.gst-truck-engine { transform-box: fill-box; transform-origin: 50% 85%; }
.gst-billing-truck-lane:not([aria-busy="true"]) .gst-truck-engine { animation: gst-engine-idle .32s linear infinite; }
.gst-truck-horn { opacity: 0; }
.gst-billing-truck-lane:not([aria-busy="true"]) .gst-truck-horn { animation: gst-horn-pulse 3.6s ease-out infinite; }
@keyframes gst-engine-idle {
  0%,100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-1.5px) rotate(-.35deg); }
  50% { transform: translateY(.5px) rotate(.2deg); }
  75% { transform: translateY(-1px) rotate(.35deg); }
}
@keyframes gst-horn-pulse {
  0%,65%,100% { opacity: 0; transform: translateX(0); }
  70% { opacity: .9; transform: translateX(0); }
  78% { opacity: 0; transform: translateX(7px); }
  81% { opacity: .75; transform: translateX(0); }
  91% { opacity: 0; transform: translateX(10px); }
}
@media(prefers-reduced-motion:reduce) {
  .gst-billing-truck-lane .gst-truck-engine,.gst-billing-truck-lane .gst-truck-horn { animation: none !important; }
}

/* Readable matching glass and blue checks for this frame only. */
#gst-return .gst-feature-row-copy :is(h2, p, li),
#gst-return .gst-typing-keyword { color: #0B3B3B; }
#gst-return .gst-feature-row-copy > ul > li {
  background: rgba(255,255,255,.46);
  border-color: #8FA8CC;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}
#gst-return .gst-feature-row-copy > ul > li::before {
  background: #5271D6;
  box-shadow: 0 2px 8px rgba(82,113,214,.25);
}

/* Matching report-frame glass; preserve content-sized bullets and layout. */
#gst-reports .gst-feature-row-copy :is(h2,p,li),
#gst-reports .gst-typing-keyword { color:#0B3B3B; }
#gst-reports .gst-feature-row-copy > ul > li {
 background:rgba(255,255,255,.46);
 border-color:#A2B8CB;
 -webkit-backdrop-filter:blur(2px);
 backdrop-filter:blur(2px);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
}
#gst-reports .gst-feature-row-copy > ul > li::before {
 background:#438BC4;
 box-shadow:0 2px 8px rgba(67,139,196,.25);
}

/* Desktop: place the top report card to the right of the heading. */
@media (min-width: 901px) {
 #gst-reports.gst-feature-row {
  background-image:url("../asset/frms_bg/gst-reports-yellow-sky-desktop.svg?v=20260930"),
   linear-gradient(110deg,#FFF0AD 0%,#FFF8E7 48%,#B9E3FF 100%);
 }
}

/* Teal glass details for the third GST feature only. */
#gst-filing-status .gst-feature-row-copy :is(h2,p,li),
#gst-filing-status .gst-typing-keyword { color:#0B3B3B; }
#gst-filing-status .gst-feature-row-copy > ul > li {
 background:rgba(255,255,255,.46); border-color:#70B5A6;
 -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
}
#gst-filing-status .gst-feature-row-copy > ul > li::before {
 background:#168C89; box-shadow:0 2px 8px rgba(22,140,137,.25);
}