html { scroll-behavior: smooth; }
html, body, .page-content { overflow: visible; }  /* adjust selector to your layout */

#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;
      margin-bottom: 0;
}

.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; }


/*Airtable */

/* Airtable-ish theme */
:root{
  --at-bg: #ffffff;
  --at-header-bg: #f6f7f9;
  --at-border: #dfe3e8;
  --at-border-soft: #edf0f3;
  --at-text: #1f2937;
  --at-text-muted: #6b7280;
  --at-hover: #f7f9fc;
  --at-focus: rgba(24, 119, 242, 0.18);
}

.col-sm { width: 110px; }
.col-md { width: 220px; }
.col-lg { width: 420px; }

/* container */
.table-wrap{
  width: 100%;
  max-width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--at-bg);
  border: 1px solid var(--at-border);
  border-radius: 8px;
}

/* table base */
.wide-table{
  border-collapse: separate; /* needed for sticky */
  border-spacing: 0;
  width: max-content;        /* wider than container */
  min-width: 100%;
  background: var(--at-bg);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.35;
  color: var(--at-text);
  border:none;
  margin-bottom:0;
    table-layout: fixed;

}

/* cells */
.wide-table th,
.wide-table td{
  height:87px;
  padding: 10px 12px;
  background: var(--at-bg);
  border: 1px solid var(--at-border-soft);
text-align: left; max-height: 120px;
  overflow: hidden;
  position: relative;
}

.wide-table td:hover {
  max-height: 600px;
  overflow: auto;
  z-index: 20;
  background: #fff;
}
/* remove outer double border on far edges */
.wide-table th:last-child,
.wide-table td:last-child{
  border-right: none;
}

/* header row */
.wide-table thead th{
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--at-header-bg);
  border-bottom: 1px solid var(--at-border);
  font-weight: 600;
  color: var(--at-text);
}

/* subtle header divider at top like Airtable */
.wide-table thead th{
  box-shadow: inset 0 -1px 0 var(--at-border);
}

/* row hover like Airtable */
.wide-table tbody tr:hover td{
  background: var(--at-hover);
}
.wide-table tbody tr:hover td.sticky-col{
  background: var(--at-hover);
}

/* sticky first column */
.wide-table .sticky-col{
  position: sticky;
  left: 0;
  z-index: 20;
  background: var(--at-bg);
  border-right: 1px solid var(--at-border);

  /* Airtable-ish sticky separation */
  box-shadow: 2px 0 0 rgba(0,0,0,0.02);
}
/* Sticky first column: wrap text + max width */
.wide-table td.sticky-col,
.wide-table th.sticky-col{
  max-width: 245px;
  white-space: normal;      /* allow wrapping */
  overflow-wrap: anywhere;  /* break long words if needed */
  word-break: break-word;
  line-height: 1.25;
}

/* top-left corner gets highest z so header sits above */
.wide-table thead .sticky-col{
  z-index: 40;
  background: var(--at-header-bg);
}

/* optional: nicer focus for keyboard users */
.wide-table td:focus-within,
.wide-table td:focus{
  outline: none;
  box-shadow: inset 0 0 0 2px var(--at-focus);
  border-radius: 4px;
}

/* optional: slightly tighter first column text wrapping if needed */
.wide-table td{
  max-width: 420px;
}

/* ---------- Mobile tweaks ---------- */
@media (max-width: 768px){

  .table-wrap{
    max-height: 72vh;               /* a little more room */
    border-radius: 10px;
  }

  .wide-table{
    font-size: 12px;                /* slightly smaller */
    line-height: 1.25;
  }

  .wide-table th,
  .wide-table td{
    height: auto;                   /* ditch 87px on mobile */
    padding: 8px 10px;              /* tighter */
    white-space: nowrap;
  }

  /* make the sticky first column easier to read */
  .wide-table .sticky-col{
    min-width: 180px;               /* adjust if needed */
    max-width: 240px;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  /* headers: keep readable but not huge */
  .wide-table thead th{
    padding: 10px 10px;
  }
}

/* Extra-small phones */
@media (max-width: 390px){
  .wide-table{
    font-size: 11px;
  }

  .wide-table .sticky-col{
    min-width: 160px;
    max-width: 210px;
  }
}
/* ---------- Column header wrapping so columns can be narrower ---------- */
.wide-table thead th{
  white-space: normal;     /* allow wrap */
  line-height: 1.15;
}

/* 3 width tiers (set by JS via [data-w]) */
:root{
  --col-narrow: 92px;      /* square-ish */
  --col-medium: 220px;     /* ~75% of your current Project Name feel */
  --col-wide: 420px;       /* like current Inverter Details */
}

.wide-table th[data-w="narrow"], .wide-table td[data-w="narrow"]{ width: var(--col-narrow); }
.wide-table th[data-w="medium"], .wide-table td[data-w="medium"]{ width: var(--col-medium); }
.wide-table th[data-w="wide"],   .wide-table td[data-w="wide"]  { width: var(--col-wide); }

/* Make first column bold everywhere */
.wide-table td.sticky-col{
  font-weight: 700;
}

/* Wrap + clamp long text to 4 lines (set by JS via [data-wrap="1"]) */
.wide-table td[data-wrap="1"]{
  max-width: var(--col-wide);
}

/* Allow wrapping + cap width on long-text columns */
.wide-table td[data-wrap="1"],
.wide-table th[data-wrap="1"]{
  max-width: 380px;      
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.25;
}

/* Brand link button for URL cells */
.wide-table td a.cell-link--auto{
  display: inline-block;
  padding: 4px 10px;
  color: #411E5B;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid #411E5B;
  border-radius: 6px;
  background: transparent;
}
.wide-table td a.cell-link--auto:hover{ background: rgba(242, 80, 100, 0.08); color:color: #411E5B;}
.wide-table td a.cell-link--auto:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px rgba(242, 80, 100, 0.25);
}


/* ---------- Airtable-style auto link button ---------- */
./* simple inline link button (brand matched) */
.wide-table td a.cell-link--auto{
  display: inline-block;
  padding: 4px 10px;

  color: #401e5b;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 6px;
  background: transparent;
}

/* hover */
.wide-table td a.cell-link--auto:hover{
  color:#401e5b;
  font-weight: 500;
}

/* keyboard focus */
.wide-table td a.cell-link--auto:focus-visible{
  outline: none;
}

/* keep sticky column text color */
.wide-table td.sticky-col a.cell-link--auto{
  color: var(--at-text);
  border-color: var(--at-border);
}






.airtable-toggle__btn {
  background-color: rgba(64, 30, 91, 1.0);
    border: 1px solid #401E5B;
    border-radius: 8px;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 300;
    font-family: 'Aktiv Grotesk';
    padding-top: 12px;
    padding-right: 35px;
    padding-bottom: 12px;
    padding-left: 35px;
    width: 100%;
  display: block;
    text-align: center;
    text-decoration: none;
  max-width:240px;
  margin-bottom: 25px;
}
.airtable-toggle__btn:hover {
    background-color: rgba(255, 255, 255, 1.0);
    border: 1px solid #401E5B;
    color: #401E5B;
 font-size: 18px;
    font-weight: 300;
    font-family: 'Aktiv Grotesk';
}

/* CLOSED state = View table = purple filled */
.airtable-toggle__btn[aria-expanded="false"] {
background-color: rgba(64, 30, 91, 1.0);
  color: #ffffff;
      font-weight: 300;
    font-family: 'Aktiv Grotesk';
}

/* OPEN state = Hide table = outline */
.airtable-toggle__btn[aria-expanded="true"] {
  background: transparent;
  color: #401E5B;
  font-size: 18px;
    font-weight: 300;
    font-family: 'Aktiv Grotesk';
}

@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; }
}