/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
    font-family: 'Fustat', sans-serif;
}

html, body { height: 100%; }

body {
  background: #ffffff;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Whole Page */
.stellar-page {
  width: 1440px;
  height: 2192px;
  background: #ffffff;
  position: relative;
  margin: 0 auto;
}

/* Background Section */
.stellar-background {
  width: 1440px;
  height: 2192px;
  background-color: #ffffff;
  position: relative;
}

/* Sticky Navbar Container */
/* Sticky Navbar Container – FINAL */
.stellar-navbar {
  width: 1344px;
  height: 87.8px;
  background: #fff;
  background-color: #ffffff;

  /* Sticky behavior */
  position: sticky;
  top: 32px;
  margin-left: 48px;
  margin-top: 32px;

  /* Border pill */
  border-radius: 999px;
  border: 1px solid #E9EBF1;

  /* Needed so children can use absolute top/left */
  position: relative;
  
  z-index: 100;

}

.stellar-navbar {
  position: sticky;
}
.stellar-navbar::before { content: ""; } /* keeps sticky stable in some layouts */
.stellar-navbar { position: sticky; }
.stellar-navbar { top: 32px; }
.stellar-navbar { position: sticky; }
.stellar-navbar { position: sticky; }

/* Actually make it relative for children while staying sticky */
.stellar-navbar {
  position: sticky;
  top: 32px;
  position: sticky;
}
.stellar-navbar {
  position: sticky;
  z-index: 100;
  top: 32px;
  position: relative; /* for absolute children */
}

/* Stellar link (left) */
.nav-stellar {
  width: 114px;
  height: 32px;

  position: absolute;
  top: 27.89px;
  left: 24px;

  display: inline-flex;
  align-items: center;
  justify-content: flex-start;

  text-decoration: none;
  color: #000; /* change if Figma has different text color */
  font-family: "Fustat", sans-serif; /* replace with your Figma font */
  font-size: 20px; /* replace with your Figma font-size */
  font-weight: 600; /* replace with your Figma weight */
}

/* Product button */
.nav-product {
  width: 83.18px;
  height: 39.9px;

  position: absolute;
  top: 24px;
  left: 451.91px;

  border-radius: 99px;
  background: #ffffff;           /* change if button has fill */
  border: 1px solid #ffffff;     /* change if Figma border differs */

  display: inline-flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  color: #000; /* change if Figma has different text color */
  font-family: "Fustat", sans-serif; /* replace with your Figma font */
  font-size: 14px; /* replace with your Figma font-size */
  font-weight: 500; /* replace with your Figma weight */
}
/* Base pill style (shared) */
.nav-product,
.nav-about,
.nav-pricing,
.nav-contact,
.nav-blog,
.nav-signin {
  position: absolute;
  top: 24px;

  height: 39.8px;
  border-radius: 99px;

  background: #ffffff;
  border: 1px solid transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  color: #000;                 /* update if Figma uses different */
  font-family: "Fustat", sans-serif; /* update to Figma font */
  font-size: 14px;             /* update to Figma font-size */
  font-weight: 500;            /* update to Figma weight */
}

/* About */
.nav-about {
  width: 71.05px;
  left: 551.09px;
}

/* Pricing */
.nav-pricing {
  width: 77.44px;
  left: 638.14px;
}

/* Contact */
.nav-contact {
  width: 83.36px;
  left: 731.58px;
}

/* Blog */
.nav-blog {
  width: 61.17px;
  left: 830.94px;
}

/* Sign in */
.nav-signin {
  width: 76.2px;
  left: 1095.03px;
}

/* Sign up for free */
.nav-signup {
  width: 132.79px;
  height: 39.8px;
  position: absolute;
  top: 24px;
  left: 1187.23px;

  border-radius: 999px;

  /* Background color */
  background: #ffffff;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  color: #000;                  
  font-family: "Fustat", sans-serif;
  font-size: 14px;               
  font-weight: 600;              

  /* 3 drop shadows */
  box-shadow:
    0px 0px 1px 0px rgba(102, 109, 128, 0.20),
    0px 3px 4px -2px #edeff2e9,
    0px 0px 0px 1.5px #e9ebf1;
}

/* pricing.css */

/* RESET */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body { background: #FFFFFF; overflow-x: hidden; }

/* PAGE CANVAS */
.pricing-page{
  width: 1440px;
  height: 2192px;
  margin: 0 auto;
  position: relative;
  background: #FFFFFF;
  overflow-y: auto;
}

/* ================= NAVBAR (same as landing) ================= */

.stellar-navbar{
  width: 1344px;
  height: 87.8px;
  background: #FFFFFF;
  border: 1px solid #E9EBF1;
  border-radius: 999px;

  position: sticky;
  top: 32px;
  margin-left: 48px;
  margin-top: 32px;
  z-index: 100;
}

.stellar-navbar-inner{ width: 100%; height: 100%; position: relative; }

.nav-stellar{
  width: 114px; height: 32px;
  position: absolute; top: 27.89px; left: 24px;
  display: inline-flex; align-items: center;
  text-decoration: none; color: #060B13;
  font-family: "Fustat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 20px; font-weight: 600;
}

.nav-product,.nav-about,.nav-pricing,.nav-contact,.nav-blog,.nav-signin{
  position: absolute;
  top: 24px;
  height: 39.8px;
  border-radius: 99px;
  background: #FFFFFF;
  border: 1px solid transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  color: #060B13;
  font-family: "Fustat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
}

.nav-product{ width: 83.18px; left: 451.91px; }
.nav-about{ width: 71.05px; left: 551.09px; }
.nav-pricing{ width: 77.44px; left: 638.14px; }
.nav-contact{ width: 83.36px; left: 731.58px; }
.nav-blog{ width: 61.17px; left: 830.94px; }
.nav-signin{ width: 76.2px; left: 1095.03px; }

.nav-signup{
  width: 132.79px;
  height: 39.8px;
  position: absolute;
  top: 24px;
  left: 1187.23px;

  border-radius: 999px;
  background: #ffffff;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  color: #060B13;
  font-family: "Fustat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;

  box-shadow:
    0px 0px 1px 0px rgba(102,109,128,0.20),
    0px 3px 4px -2px rgba(128,136,151,0.16),
    0px 0px 0px 1.5px #E9EBF1;
}

/* ================= PRICING BG SECTION ================= */

.pricing-bg{
  width: 1440px;
  height: 886px;
  background: #F7F8FA;
  position: relative;
}

/* MAIN CONTAINER */
.pricing-main{
  width: 1216px;
  height: 975.77px;
  position: absolute;
  top: 208.112px;
  left: 112px;
}

/* ================= BG UP & DOWN (behind cards) ================= */

.pricing-bg{
  position: relative; /* IMPORTANT */
  overflow: hidden;
}

/* BG UP */
.pricing-bg-up{
  width: 1440px;
  height: 886px;

  position: absolute;
  top: 0;
  left: 0;

  z-index: 0; /* behind everything */
  pointer-events: none;
}

.pricing-bg-up img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}



/* ================= HERO (592 x 273.98) ================= */

.pricing-hero{
  width: 592px;
  height: 273.98px;
  position: absolute;
  left: 312px;
  text-align: center;
}

.pricing-hero-label{
  width: 64.9px;
  height: 15px;
  position: absolute;
  top: 2px;
  left: 263.75px;

  font-family: "Fustat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 20.4px;
  letter-spacing: 0.01em;
  color: #6E51E0;
}

.pricing-h1-1{
  width: 547.66px;
  height: 77px;
  position: absolute;
  top: 32.39px;
  left: 22.27px;

  font-family: "Fustat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 500;
  font-size: 57.13px;
  line-height: 76.8px;
  letter-spacing: -1.61px;
  color: #060B13;
  margin: 0;
}

.pricing-h1-2{
  width: 215.17px;
  height: 77px;
  position: absolute;
  top: 113.19px;
  left: 46.09px;

  font-family: "Fustat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 500;
  font-size: 57.75px;
  line-height: 76.8px;
  letter-spacing: -1.61px;
  color: #060B13;
  margin: 0;
}

.save-badge {
  width: 116.59px;
  height: 27.8px;
  border-radius: 999px;

  position: absolute;
  top: 0px;        
  left: 0;

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

  background: #F7F8FA; 
  white-space: nowrap;
}
.save-badge--business {
  background: #F3F0FF;
}

.save-badge--business span {
  color: #3917C0;
}


/* BUSINESS PILL */

.pricing-pill {
  width: 272.85px;
  height: 84.79px;
  position: absolute;
  top: 109.19px;
  left: 273.06px;
  border-radius: 999px;

  /* light purple vertical gradient */
  background: linear-gradient(
    180deg,
    #9A8CF6 0%,
    #7A63E8 55%,
    #6E51E0 100%
  );

  /* soft glossy + floating look */
  box-shadow:
    0px 16px 48px rgba(110, 81, 224, 0.25),  /* soft bottom glow */
    inset 0px 1px 0px rgba(255, 255, 255, 0.35), /* top shine */
    0px 0px 0px 1px rgba(110, 81, 224, 0.6); /* thin outline */

  display: flex;
  align-items: center;
  justify-content: center;
}

.pricing-pill-text {
    width: 214px;
    height: 77px;
    top: 4px;
    left: 28.94;
  font-family: "Fustat", system-ui, sans-serif;
  font-weight: 500;
  font-size: 57.25px;
  line-height: 68.8px;
  letter-spacing: -1.61px;
  color: #FFFFFF;
  margin: 0;
}

.pricing-hero-line{
  font-family: "Fustat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 32px;
  letter-spacing: -0.18px;
  color: #363D4F;
  position: absolute;
  margin: 0;
}

.pricing-hero-line-1{
  width: 373.56px;
  height: 20px;
  top: 215.98px;
  left: 111.56px;
}

.pricing-hero-line-2{
  width: 360px;
  height: 20px;
  top: 247.98px;
  left: 116.17px;
}

/* ================= 4 CARDS ROW ================= */


.pricing-cards-row{
  width: 1216px;
  height: 637.78px;
  position: absolute;
  top: 337.98px;
  left: 0px;

  display: flex;
  gap: 32px; /* 280 + 32 = 312 step */
}

/* CARD OUTER (shadow + padding to reveal inner border) */
.pricing-card{
  width: 280px;
  height: 637.78px;
  border-radius: 12px;
  background: #FFFFFF;

  box-shadow:
  none;
}

/* CARD INNER (inner alignment border) */
.pricing-card-inner{
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px #E9EBF1;
  position: relative;
}

/* ========== TEXT BLOCKS INSIDE CARD (based on your offsets) ========== */

.plan-title{
  width: 120px;
  height: 24px;
  position: absolute;
  top: 32px;
  left: 32px;

  font-family: "Fustat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 500;
  font-size: 16.17px;
  line-height: 28.8px;
  letter-spacing: -0.26px;
  color: #060B13;
}

.plan-desc{
  width: 193.45px;
  height: 64.6px;
  position: absolute;
  top: 71.8px;
  left: 32px;

  font-family: "Fustat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 23.8px;
  letter-spacing: -0.09px;
  color: #363D4F;
}

.plan-desc-strong{
  font-weight: 500; /* matches your business/premium note */
  font-size: 16.25px;
  letter-spacing: -0.26px;
}

.plan-price{
  width: 216px;
  height: 83.8px;
  position: absolute;
  top: 172.19px;
  left: 32px;
}

.plan-price-amt{
  width: 140px;
  height: 48px;
  position: absolute;
  top: 35.8px;
  left: 0px;

  font-family: "Fustat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 500;
  font-size: 35.16px;
  line-height: 48px;
  letter-spacing: -0.89px;
  color: #060B13;
}

.plan-price-unit{
  width: 57.89px;
  height: 26px;
  position: absolute;
  top: 43.8px;
  left: 118.53px;

  font-family: "Fustat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 32px;
  letter-spacing: -0.18px;
  color: #979FB4;
}
.business-badge {
  width: 272.85px;
  height: 84.79px;
  border-radius: 999px;
  position: relative;
  overflow: hidden;

  /* Figma gradient fill */
  background: linear-gradient(
    180deg,
    #261455 0%,      /* dark top */
    #6E51E0 48%,     /* core violet */
    #7551F2 100%     /* glow bottom */
  );

  /* Figma shadows */
  box-shadow:
    0px 1px 0px rgba(38, 20, 85, 0.50),
    0px 0px 1.5px #6E51E0,
    0px 6px 8px -4px rgba(117, 81, 242, 0.30);

  /* inner border */
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0px 1px 0px rgba(38, 20, 85, 0.50),
    0px 0px 1.5px #6E51E0,
    0px 6px 8px -4px rgba(117, 81, 242, 0.30);

  display: flex;
  align-items: center;
  justify-content: center;
}

.business-badge span {
  font-family: "Fustat", sans-serif;
  font-weight: 500;
  font-size: 57.25px;
  line-height: 76.8px;
  letter-spacing: -1.61px;
  color: #FFFFFF;
}

/* CTA */
.plan-cta{
  width: 216px;
  height: 39.8px;
  position: absolute;
  top: 279.99px;
  left: 32px;

  border-radius: 99px;
  text-decoration: none;

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

  font-family: "Fustat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14px;
  line-height: 23.8px;
  letter-spacing: -0.18px;
}

.plan-cta-light{
  color: #060B13;
  background: linear-gradient(180deg, 0%, #ECEFF3 4%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0px 0.5px 1px rgba(102,109,128,0.20),
    0px 3px 4px -2px rgba(128,136,151,0.16),
    0px 0px 0px 1.5px #E9EBF1;
}

.plan-cta-violet{
  color: #FFFFFF;
  background: linear-gradient(180deg, #6E51E0 0%, #7F51F2 100%);
  box-shadow:
    0px 1px 0px rgba(38, 20, 85, 0.50),
    0px 0px 0px 1.5px rgba(110, 81, 224, 1),
    0px 6px 8px -4px rgba(117, 81, 242, 0.30);
}

/* DIVIDERS */
.plan-divider{
  width: 216px;
  height: 1px;
  position: absolute;
  left: 32px;
  background: #E9EBF1;
}
.plan-divider-1{ top: 351.79px; }
.plan-divider-2{ top: 476.79px; }

/* META (robot/24 rows) */
.plan-meta{
  width: 216px;
  position: absolute;
  left: 32px;
  top: 384.79px;
}
.plan-meta-row{
  width: 216px;
  height: 24px;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.plan-meta-ic{
  width: 24px;
  height: 24px;
  display: block;
}
.plan-meta-txt{
  margin-left: 10px;

  font-family: "Fustat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 23.8px;
  letter-spacing: -0.09px;
  color: #060B13;
}

/* FEATURES LIST (216 x 96 at top 509.79) */
.plan-features{
  width: 216px;
  height: 96px;
  position: absolute;
  top: 509.79px;
  left: 32px;
}

.plan-feature{
  width: 216px;
  height: 24px;
  display: flex;
  align-items: center;
}
.plan-feature + .plan-feature{ margin-top: 12px; }

.plan-tick{
  width: 24px;
  height: 24px;
  display: block;
}

.plan-feature-txt{
  margin-left: 10px;

  font-family: "Fustat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 23.8px;
  letter-spacing: -0.09px;
  color: #060B13;
}


/* Tick wrapper */
.plan-tick-wrap{
  width: 24px;
  height: 24px;
  position: relative;
  flex-shrink: 0;
}

/* Violet background (bottom layer) */
.plan-tick-bg{
  width: 24px;
  height: 24px;
  display: block;
}

/* Tick icon (top layer) */
.plan-tick-icon{
  width: 12px;
  height: 12px;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ================= SECTION 6 (TEMPLATE) ================= */

.s6{
  width: 1440px;
  height: 417.59px;
  top: 1274px;
  position: absolute;
  background: #F7F8FA;
}
.s6-bgup,
.s6-bgdown {
  width: 1440px;
  height: 192px;
  position: absolute;
  left: 0;
  overflow: hidden;
  pointer-events: none;
}

.s6-bgup { top: 0; }
.s6-bgdown { top: 225.59px; }

.s6-bgup img,
.s6-bgdown img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* LEFT CONTENT */
.s6-left{
  position: absolute;
  top: 140px;    /* label top */
  left: 112px;
  width: 520px;
}

/* Start building today! */
.s6-label{
  width: 132.48px;
  height: 20px;

  font-family: "Fustat", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: -0.18px;
  color: #6D50E0;

  display: flex;
  align-items: center;
}

/* Heading */
.s6-title{
  width: 490.64px;    /* you typed 4900.64, using realistic 490.64 */
  height: 58px;

  margin: 35px 0 0 0;

  font-family: "Fustat", sans-serif;
  font-weight: 500;
  font-size: 43.31px;
  line-height: 57.6px;
  letter-spacing: -1.25px;
  color: #060B13;
}

/* paragraph */
.s6-desc{
  width: 457.43px;
  height: 26px;

  margin: 12px 0 0 0;

  font-family: "Fustat", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 32px;
  letter-spacing: -0.18px;
  color: #363D4F;

  display: flex;
  align-items: center;
}

/* RIGHT MAIN CONTAINER */
.s6-right{
  width: 450px;
  height: 98px;

  position: absolute;
  top: 179.59px;
  left: 866px;
}

/* FORM (460 x 50) */
.s6-form{
  width: 460px;
  height: 50px;

  position: absolute;
  top: 0;
  left: 0;

  display: flex;
}

/* INPUT */
.s6-input{
  width: 273.3px;
  height: 50px;

  border-radius: 99px;
  background: #FFFFFF;

  /* inner shadow + map shadow */
  box-shadow:
    inset 0px 0px 0px 1px #E9EBF1,
    0px 0px 1px rgba(102, 109, 128, 0.20);

  position: relative;
}

/* placeholder text */
.s6-email{
  width: 129.37px;
  height: 17px;

  position: absolute;
  top: 16px;
  left: 16px;

  font-family: "Fustat", sans-serif;
  font-weight: 400;
  font-size: 15.5px;
  line-height: 100%;
  letter-spacing: 0;
  color: #979FB4;

  display: flex;
  align-items: center;
}

/* BUTTON */
.s6-btn{
  width: 170.7px;
  height: 50px;
  margin-left: 16px; /* 289.3 - 273.3 = 16px */

  border-radius: 99px;
  background: #6E51E0;

  border: none;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* button text */
.s6-btn-text{
  width: 141.55px;
  height: 20px;

  font-family: "Fustat", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 19.2px;
  letter-spacing: -0.18px;
  color: #FFFFFF;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* TICKS ROW */
.s6-ticks{
  width: 450px;
  height: 24px;

  position: absolute;
  top: 74px;
  left: 0;
}

/* tick item base */
.s6-tick-item{
  height: 24px;
  position: absolute;
  top: 0;

  display: flex;
  align-items: center;
  gap: 12px;
}

/* item 1: Free 7-day trail */
.s6-tick-item-1{ left: 0; }

/* item 2: No credit card required */
.s6-tick-item-2{ left: 174.34px; }

/* tick circle */
.s6-tick{
  width: 24px;
  height: 24px;
  border-radius: 999px;

  background: linear-gradient(
    180deg,
    #8F7AF4 0%,
    #6E51E0 100%
  );
  
  display: flex;
  align-items: center;
  justify-content: center;
}

/* tick icon inside circle */
.s6-tick-icon{
  width: 12px;
  height: 12px;
  display: block;
}

/* tick text */
.s6-tick-text{
  font-family: "Fustat", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 23.8px;
  letter-spacing: -0.18px;
  color: #060B13;

  display: flex;
  align-items: center;
}



/* ================= FOOTER (SECTION G) ================= */

.g-footer{
  width: 1440px;
  height: 500px;
  position: absolute;
  top: 1692px;
  left: 0;
  background: #FFFFFF;
}

.g-container{
  width: 1216px;
  height: 340px;
  position: absolute;
  top: 112px;
  left: 112px;
}

/* Left block */
.g-left{
  width: 312px;
  height: 103.59px;
  position: absolute;
  left: 0;
  top: 0;
}

.g-logo{
  width: 114px;
  height: 36px;
  position: absolute;
  top: -2px;
  left: 0;
  display: block;
}

.g-left-text{
  width: 292.47px;
  height: 40.8px;
  position: absolute;
  top: 59px;
  left: 0;

  font-family: "Fustat", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 23.8px;
  letter-spacing: -0.08px;
  color: #363D4F;
  margin: 0;
}

/* Columns base */
.g-col{
  width: 156px;
  height: 172px;
  position: absolute;
  top: 0;
}

.g-col-1{ left: 562px; }
.g-col-2{ left: 728px; }
.g-col-3{ left: 894px; }
.g-col-4{ left: 1060px; }

.g-col-title{
  width: auto;
  height: 20px;

  font-family: "Fustat", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 23.8px;
  letter-spacing: -0.18px;
  color: #979FB4;

  margin-bottom: 21px; /* gap to first link (t=55) */
}
/* ===== Exact link text sizes (W/H) + top offsets inside each column ===== */

.g-col { position: absolute; }
.g-col .g-link { position: absolute; left: 0; }

/* ---------- Column 1 (Stellar Page) ---------- */
.g-c1-home    { width: 38.88px; height: 17px; top: 55px; }
.g-c1-about   { width: 39.05px; height: 17px; top: 103px; }
.g-c1-pricing { width: 45.44px; height: 17px; top: 151px; }

/* ---------- Column 2 (Product) ---------- */
.g-c2-contact { width: 51.36px; height: 17px; top: 55px; }
.g-c2-blog    { width: 29.17px; height: 17px; top: 103px; }
.g-c2-product { width: 51.19px; height: 17px; top: 151px; }

/* ---------- Column 3 (Resources) ---------- */
.g-c3-integration { width: 70.02px; height: 17px; top: 55px; }
.g-c3-detail      { width: 110.88px; height: 17px; top: 103px; }
.g-c3-signup      { width: 51.53px; height: 17px; top: 151px; }

/* ---------- Column 4 (Company) ---------- */
.g-c4-login { width: 36.11px; height: 17px; top: 55px; }
.g-c4-404   { width: 26.66px; height: 17px; top: 103px; }
.g-c4-more  { width: 105.11px; height: 17px; top: 151px; }

/* (optional) lock column title heights too */
.g-col-title { height: 20px; }


.g-link{
  display: block;
  height: 17px;
  margin-bottom: 31px; /* 55->103->151 spacing */
  text-decoration: none;

  font-family: "Fustat", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;.stellar-bg-2 {
  width: 1440px;
  height: 494.19px;
  background: #FFFFFF;
  margin: 0 auto;
}

.stellar-bg-2-container {
  width: 1216px;
  margin: 96px auto 0;
  text-align: center;
}

/* Heading */
.stellar-mask-heading {
  width: 533.31px;
  height: 39px;
  margin: 0 auto 32px;

  font-family: "Fustat", sans-serif;
  font-weight: 500;
  font-size: 28.75px;
  line-height: 38.4px;
  letter-spacing: -0.69px;
  color: #060B13;
}

/* LOGOS IMAGE */
.trusted-logos {
  width: 1216px;
  height: 80px;
  margin: 0 auto 24px;
}

.trusted-logos img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Description text */
.stellar-bg-2-text {
  width: 547.19px;
  height: 32px;
  margin: 0 auto 24px;

  font-family: "Fustat", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 40px;
  letter-spacing: -0.33px;
  color: #363D4F;
}

/* CTA Button */
.stellar-bg-2-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 206.11px;
  height: 47.74px;
  border-radius: 999px;

  background: linear-gradient(180deg, #ECEFF3 0%, #ECEFF3 4%);
  text-decoration: none;

  font-family: "Fustat", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #060B13;

  box-shadow:
    0px 0.5px 1px rgba(102, 109, 128, 0.20),
    0px 3px 4px -2px rgba(128, 136, 151, 0.16),
    0px 0px 0px 1.5px #E9EBF1;
}

  letter-spacing: -0.09px;
  color: #363D4F;
}

.g-link:last-child{ margin-bottom: 0; }

/* Bottom bar */
.g-bottom-bar{
  width: 1216px;
  height: 88px;
  position: absolute;
  top: 252px;
  left: 0;

  border-top: 1px solid #E9EBF1;
}

/* Flowbase + copyright */
.g-flowbase{
  width: 71.96px;
  height: 15px;

  position: absolute;
  top: 59.8px; /* 311.8 - 252 */
  left: 0px;

  text-decoration: none;
  font-family: "Fustat", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 20.4px;
  letter-spacing: 0.01em;
  color: #363D4F;
}

.g-copyright{
  width: 103.67px;
  height: 15px;

  position: absolute;
  top: 59.8px;
  left: 103.31px;

  font-family: "Fustat", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 20.4px;
  letter-spacing: 0.01em;
  color: #505A71;
}

/* Social buttons */
.g-socials{
  position: absolute;
  top: 48px; /* 300 - 252 */
  left: 1072px;
  height: 40px;
}

.g-social{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid #E9EBF1;

  display: inline-flex;
  align-items: center;
  justify-content: center;

    text-decoration: none;
}

.g-social img{
  width: 24px;
  height: 24px;
  display: block;
}





.pricing-page{
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  overflow-x: hidden;
}




/* Desktop: unchanged */
.page-scale {
  width: 1440px;               /* Figma width */
  transform-origin: top left;
  margin: 0 auto;
}

/* Tablets */
@media (max-width: 1024px) {
  .page-scale {
    transform: scale(0.71);
  }
}

/* Large phones */
@media (max-width: 768px) {
  .page-scale {
    transform: scale(0.53);
  }
}

/* Small phones */
@media (max-width: 480px) {
  .page-scale {
    transform: scale(0.36);
  }
}

/* Prevent sideways scroll */
html, body {
  overflow-x: hidden;
}