html { scroll-behavior: smooth; }
html, body, .page-content { overflow: visible; }  /* adjust selector to your layout */
window.addEventListener("load", () => {
  window.scrollTo(0, 0);
});

#summary,
#customers,
#methodology,
#preview {
  scroll-margin-top: 380px; /* matches header height */
}


/* ---------- Header ---------- */

.sticky_header{
  position:fixed;
  width:100%;
  top: 0;
  height: 300px;
  align-content: end;
  z-index:100;
}

.landing-page-header {
  max-width:1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0px;
    padding: 0 40px;
}

.landing-page-header h1 {
  margin: 0 0 1rem;
  font-variant-numeric: lining-nums proportional-nums;
  font-size: 64px;
  font-style: normal;
  font-weight: 700;
  line-height: 64px;
  letter-spacing: 0.3px;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
}

.header-tabs { display: flex; gap: 2rem; }

.header-tabs a {
  text-decoration: none;
  font-weight: 200;
  border-bottom: 5px solid transparent;
  font-size: 18px;
  font-style: normal;
  line-height: 36px;
  letter-spacing: 0.38px;
    transition: color .25s ease, opacity .25s ease;
}
.header-tabs a.active {
  font-weight: 200;
}
.header-tabs a:hover { }

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  padding-bottom: 22px;
}
.cta span {
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.3px;
  width: 200px;
  text-align: right;
}
.cta button {
  border: none;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  border-radius: 6px;
  cursor: pointer;
}

/* ---------- Summary Row (left/right) ---------- */
.summary-row {
  display: flex;
  gap: 20px;
  align-items: stretch;
  padding-top: 150px;
}
.summary-left  { flex: 0 1 58%; min-width: 520px; display: flex; flex-direction: column; }
.summary-right { flex: 1 1 42%; min-width: 440px; display: flex; flex-direction: column; }

.headline-box {
  border-radius: 10px;
  padding: 10px 20px;
  background: var(--headline-gradient);
  flex: 1;
  display: flex;
  align-items: flex-start;
  margin-bottom: 17px;
}
.headline-box h2{
  font-size: 36px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  letter-spacing: 0.38px;
  color: #4A4052;
}

/* Stats */
.stats-row { display: flex; gap: 20px; flex-wrap: wrap; }

.stat-box {
  flex: 1 1 0;
  min-width: 240px;
  min-height: 240px;
  background: var(--card-bg);
  border-radius: 10px;
  padding: 11px 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.stat-box h4 {
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 25.805px; /* 161.282% */
letter-spacing: 0.484px;
    color: #4A4052;

}
.stat-box p {
  margin: 0;
  font-size: 32px;
  line-height: 1.1;
  color: var(--stat-number);
}

/* Right column / chart */
.chart-box {
  background: var(--card-bg);
  border-radius: 10px;
  flex: 1;
  display: flex;
}
.chart-box img { width: 100%; height: 100%; object-fit: contain; }

@media (max-width: 1100px) {
  .summary-row { flex-direction: column; }
  .summary-left, .summary-right { min-width: 0; flex: 1 1 auto; }
}

/* ---------- “Data Methodology” subtitle ---------- */
.data-type-subtitle {}
.data-type-subtitle h2 {
  border-bottom: 1px dashed var(--rule-color);
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: 60px;
  letter-spacing: 0.38px;
  margin-bottom: 25px;
}
.data-type-subtitle p {
  font-size: 24px;
    line-height: 32px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.38px;
}

/* ---------- Customer cards ---------- */
.customer-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}
.customer-card {
  background:linear-gradient(180deg, #EDEBEB 0%, #F8F8F8 100%); 
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  min-height:330px;
}
.customer-card p {
font-size: 24px;
font-style: normal;
font-weight: 300;
line-height: 36px; /* 150% */
letter-spacing: 0.38px;
}
.customer-card .role {
  color: var(--accent-rose);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.38px;
}
/* turn on the icon style only when container has .icon-cards */
.icon-cards .customer-card{
  /* soft gradient card like your mock */
  background: linear-gradient(180deg, #EDEBEB 0%, #F8F8F8 100%);
  border-radius: 14px;
  padding: 20px;
  gap: 20px;
}

/* top bar: label left, icon right */
.icon-cards .card-top{
  align-items: center;
  justify-content: space-between;
}

.icon-cards .label{
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #9B96A3;         /* subtle gray like screenshot */
}

/* icons */
.icon-cards .icon{
  width: 28px;
  height: 28px;
  color: #9B96A3;
  flex: 0 0 auto;
}

/* body text style in the card */
.icon-cards .card-text{
  font-size: 22px;
  line-height: 1.35;
  color: #2F1F4A;         /* deep purple text */
  margin: 0;
}

/* hide the old role line when using icon style */
.icon-cards .role{ display: none; }

/* optional: make the grid look more like your mock */
.icon-cards{
  grid-template-columns: repeat(4, minmax(260px, 1fr));
  gap: 24px;
}
@media (max-width: 1100px){
  .icon-cards{ grid-template-columns: repeat(2, minmax(260px, 1fr)); }
}
@media (max-width: 640px){
  .icon-cards{ grid-template-columns: 1fr; }
}


/* ---------- Cards grid (images/badges) ---------- */
.grid-container { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.card {
  position: relative;
  width: 100%;
  height: 350px;
  border-radius: 12px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--text-on-card);
}
.badge {
  position: absolute;
  top: 0; right: 0;
  background: var(--badge-yellow);
  padding: 0.3rem 0.6rem;
  font-size: 16px;
  font-weight: 500;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  z-index: 2;
}
.badge.coming-soon { background: var(--badge-gray); color: var(--text-default); font-weight: 500; }

.card-content {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 1.5rem; z-index: 1;
}
.card-content h2 { font-weight: 200; font-size: 40px; line-height: 44px; margin: 0 0 .5rem 0; color: var(--text-on-card); }
.card-content p  { font-weight: 200; font-size: 24px; margin: .5rem 0; }
.card-content p strong { font-weight: 700; }
.data-text p { font-weight: 300; }

/* ---------- Buttons ---------- */
button{
  font-size: 20px;
  font-weight: 600;
  padding: 15px 45px;
  border: 1px solid var(--button-border);
  border-radius: 6.83px;
  background: transparent;
  color: var(--button-text);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  transition: background .2s, color .2s;
}
.buttons{ padding-top:16px; display:flex; flex-wrap: row; }
button:hover, .card-content a.button-link:hover {
  background: var(--button-bg-hover);
  color: var(--button-text-hover);
  border: 1px solid var(--button-border);
}

/* ---------- Tables ---------- */
.dataProductTable{
  background-color: var(--card-bg);
  border: 1px dashed var(--table-border);
}
.table-header { display: flex; align-items: baseline; gap: .5rem; }
.table-header-h2 {
  color: var(--text-primary);
  font-size: 28px; font-style: normal; font-weight: 700; line-height: 36px; letter-spacing: .38px;
  margin-bottom: 15px;
}
.table-header-sub {
  color: var(--text-primary);
  font-size: 20px; font-style: normal; font-weight: 400; line-height: 36px; letter-spacing: .38px;
}
.dataProductTable p { margin: 0; }
.dataProductTable td { border: 1px dashed var(--table-border); vertical-align: middle; }
.table-header-row {
  background-color: var(--panel-muted);
  vertical-align: bottom;
  color: var(--text-primary);
  font-size: 12px; font-style: normal; font-weight: 200; line-height: 16px;
}
.table-header td { vertical-align: bottom; }

/* ---------- CTA ---------- */
.cta-wrap{ border-radius: 10px; background-color: var(--cta-bg); }
.cta-card{ padding: 100px 20px 30px 20px; }
.cta-title{
  color: var(--cta-title);
 font-size: 28px;
font-style: normal;
font-weight: 400;
line-height: 36px; /* 128.571% */
letter-spacing: 0.38px;
}

/* ---------- Form bits ---------- */
form{ width: unset; gap: unset; }
form .hsfc-Step__Content{ padding: 0 !important; }
form a, form a:focus, form a:hover {
  color: var(--link-muted);
  font-family: "Aktiv Grotesk";
  font-weight: 700;
}
form > div:nth-child(1), form > div:nth-child(2), form > div:nth-child(3), form > div:nth-child(4){ flex-grow: unset; width: unset; }
form .hs-form-field { padding: 0 10px; }
.hs-fieldtype-textarea{ width: 100%; }
.hs-fieldtype-textarea .input{ width: 100%; max-width: 630px; }
form .input{ min-width: 225px; width: unset; }
form .hs-fieldtype-text { min-width: 250px; }
form .hs-submit{ width: 100%; }
form .hs-field-desc { color: var(--cta-title); font-style: italic; }
form .hs-error-msgs { background: transparent; }
form .hs_error_rollup{ margin: auto; }
.info-form-title{
  font-size: 40px; font-weight: 100; line-height: 48px; color: var(--cta-title);
}

/* ---------- Responsive tweaks ---------- */
@media screen and (max-width: 768px) {
  .header-tabs{ display: none; }
  .cta span { text-align: left; }
  .stat-box { min-height: 120px; }
  .cta-module { flex-direction: column; align-items: center; text-align: center; padding: 20px; }
  .cta-module .main-text { flex-direction: column; flex-basis: 100%; max-width: 100%; min-width: unset; align-items: center; }
  .cta-module .side-text { flex-basis: 100%; margin-top: 20px; text-align: center; }
  .side-text p { padding: 10px 0; }
  .main-text #button-one, .main-text #button-two { width: 80%; max-width: 300px; margin: 10px 0; }
  
.landing-page-header h1 {
  font-size: 48px;
  line-height: 48px;
}
  .sticky_header{
  position:unset;
  }
  .summary-row {
    padding-top: 50px;
}
  
  .hero-wrapper { flex-direction: column; align-items: center; text-align: center; padding: 20px; }
  .main-text { flex-basis: 100%; max-width: 100%; min-width: unset; }
  .side-text { flex-basis: 100%; margin-top: 20px; text-align: center; }
  .main-text h1 { font-size: 36px; }
  .main-text p { font-size: 14px; }

  form label{ padding: 0; }
  form .hs-form-field { margin-bottom: 10px; }

  .grid-container { grid-template-columns: auto; }
  .card { width: 100%; }
  .card-content h2 { font-size: 28px; line-height: 40px; }
  .card-content p { font-size: 18px; line-height: 1.5; }
  .card-content p strong { font-size: 18px; font-weight: 700; }
  .buttons button, .buttons a { font-size: 16px; padding: 6px 10px; }
}

@media screen and (max-width: 480px) {
  .cta-module { padding: 10px; }
  .main-text #button-one, .main-text #button-two { width: 90%; max-width: 280px; }
  .hero-wrapper { padding: 10px; }
  .main-text p { font-size: 12px; }
}