/* =========================
GLOBAL COLORS & BODY DEFAULT
========================= */

/* color pallette */ 
:root {
    --pelGray: #F5F7F9;
    --pelOffWhite: #F7F7F7;
    --pelOffWhiteTwo: #F5F3F6;
    --pelOffBlack: #171718; 
    --pelChartGrey: #D9D9D9;
    --pelButtonGrey: #404040; 
    --Black: #000000; 
    --White: #FFFFFF;
}

/* default body formatting */
html, body {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    letter-spacing: 0em;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

/* ==============
LOGIN PAGE STYLES
================ */

/* black background */
.black-background {
    background-color: var(--Black); 
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
}

/* off-black div */
.off-grey-div {
    background-color: var(--pelOffBlack);
    width: fit-content;
    height: fit-content;
    padding-block: 50px;
    max-width: 1920px;
    text-align: center;
    justify-content: center;
}

/* Peloton for Business logo */
.logo {
    max-width: 713px;  
    height: 76px;
    padding-bottom: 50px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* white div with form */
.login-container {
    background-color: var(--pelOffWhite);
    color: var(--pelOffBlack);
    width: 1300px;          
    height: 680px;          
    margin: auto;           
    padding-top: 25px;
    padding-bottom: 5px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;
}

/* headings on login */
h2 {
  font-size: 38pt;
  margin: 0px 0px 1rem 0px;
}
h2 span {
  font-size: 29pt;
  font-weight: bold;
  display: block;
  margin-top: 0.25rem;
}

/* login form */
form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

input {
  padding: 0.75rem;
  padding-left: 1.5rem;
  margin-bottom: 30px;
  border: 1px solid var(--pelOffBlack);
  background-color: var(--pelOffWhite);
  border-radius: 0.25rem;
  font-size: 15pt;
  width: 506px;
}

button {
  width: 220px;
  padding: 12px 24px;
  margin-top: 20px;
  margin-bottom: 10px;
  background-color: var(--Black);
  color: var(--White);
  border: 1px solid var(--Black);
  border-radius: 4px;
  cursor: pointer;
  font-size: 18pt;
  font-weight: 700;
}
button:hover {
  background-color: var(--pelButtonGrey);
  color: var(--White);
}

/* "Don't have a login? Create one here" format */
.already-login {
  text-align: center;
  font-size: 14px;
  color: var(--pelOffBlack);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.already-login a {
  color: var(--Black);
  text-decoration: none;
  font-weight: 700;
}
.already-login a:hover {
  color: var(--pelButtonGrey);
  text-decoration: underline;
}

.login-container h2 {
    margin-top: 10px;
    margin-bottom: 110px;
}

.login-container button {
    margin-top: 132px;
}

.login-form {
  position: absolute;
  top: 260px;
  left: 50%;
  transform: translateX(-50%);
}

#login-form button {
  position: relative;
  top: -37px;
}

/* Resizing for tablet (≤1024px) */
@media (max-width: 1024px) {
  .logo {
    max-width: 500px;
    height: auto;
    padding-bottom: 30px;
  }

  .login-container {
    margin-left: auto;
    margin-right: auto;
    max-width: 700px;
    padding: 40px 20px;
  }

  input {
    width: 80%;
    max-width: 450px;
  }

  button {
    width: 60%;
    max-width: 200px;
  }
}

/* Resizing for mobile (≤768px) */
@media (max-width: 768px) {
  .off-grey-div {
    padding-top: 40px;
    padding-bottom: 120px;
  }

  .logo {
    max-width: 350px;
    padding-bottom: 25px;
  }

  .login-container {
    width: 90%;
    margin: 0 auto;
    padding: 30px 15px;
  }

  h2 {
    font-size: 26pt;
  }
  h2 span {
    font-size: 20pt;
    padding-bottom: 20px;
  }

  input {
    width: 100%;
    max-width: 380px;
    font-size: 14pt;
  }

  button {
    width: 70%;
    font-size: 16pt;
  }

  .already-login {
    font-size: 13pt;
  }
}

@media (max-width: 14400px) {
  .cartone .page-inner {
    transform: scale(0.5) translateX(-10%) !important;
  }
  .cartone .page-inner .main-intro, .cartone .page-inner .tier-options, .cartone .page-inner .equipment-inputs {
    transform: translateX(10%) !important;
  }
  .carttwo .page-inner {
    transform: scale(0.5) translateX(-10%) !important;
  }
  .carttwo .page-inner .main-intro, .cartone .page-inner .tier-options, .cartone .page-inner .equipment-inputs {
    transform: translateX(10%) !important;
  }
  .cartforms .page-inner {
    transform: scale(0.5) translateX(-10%) !important;
  }
  .cartforms .page-inner .main-intro, .cartone .page-inner .tier-options, .cartone .page-inner .equipment-inputs {
    transform: translateX(10%) !important;
  }
}

@media (max-width: 1000px) {
  .cartone .page-inner {
    transform: scale(0.4) translateX(-40%) !important;
  }
  .cartone .page-inner .main-intro, .cartone .page-inner .tier-options, .cartone .page-inner .equipment-inputs {
    transform: translateX(40%) !important;
  }
  .carttwo .page-inner {
    transform: scale(0.4) translateX(-40%) !important;
  }
  .carttwo .page-inner .main-intro, .cartone .page-inner .tier-options, .cartone .page-inner .equipment-inputs {
    transform: translateX(40%) !important;
  }
  .cartforms .page-inner {
    transform: scale(0.4) translateX(-10%) !important;
  }
  .cartforms .page-inner .main-intro, .cartone .page-inner .tier-options, .cartone .page-inner .equipment-inputs {
    transform: translateX(10%) !important;
  }
}

@media (max-width: 800px) {
  .cartone .page-inner {
    transform: scale(0.3) translateX(-80%) !important;
  }
  .cartone .page-inner .main-intro, .cartone .page-inner .tier-options, .cartone .page-inner .equipment-inputs {
    transform: translateX(80%) !important;
  }
  .carttwo .page-inner {
    transform: scale(0.3) translateX(-80%) !important;
  }
  .carttwo .page-inner .main-intro, .cartone .page-inner .tier-options, .cartone .page-inner .equipment-inputs {
    transform: translateX(80%) !important;
  }
  .cartforms .page-inner {
    transform: scale(0.25) translateX(-10%) !important;
  }
  .cartforms .page-inner .main-intro, .cartone .page-inner .tier-options, .cartone .page-inner .equipment-inputs {
    transform: translateX(10%) !important;
  }
}

@media (max-width: 500px) {
  .cartone .page-inner {
    transform: scale(0.2) translateX(-180%) !important;
  }
  .cartone .page-inner .main-intro, .cartone .page-inner .tier-options, .cartone .page-inner .equipment-inputs {
    transform: translateX(180%) !important;
  }
  .carttwo .page-inner {
    transform: scale(0.2) translateX(-180%) !important;
  }
  .carttwo .page-inner .main-intro, .cartone .page-inner .tier-options, .cartone .page-inner .equipment-inputs {
    transform: translateX(180%) !important;
  }
  .cartforms .page-inner {
    transform: scale(0.2) translateX(-10%) !important;
  }
  .cartforms .page-inner .main-intro, .cartone .page-inner .tier-options, .cartone .page-inner .equipment-inputs {
    transform: translateX(10%) !important;
  }
}

@media (max-width: 400px) {
  .carttwo .page-inner {
    transform: scale(0.15) translateX(-180%) !important;
  }
  .carttwo .page-inner .main-intro, .cartone .page-inner .tier-options, .cartone .page-inner .equipment-inputs {
    transform: translateX(180%) !important;
  }
  .cartforms .page-inner {
    transform: scale(0.15) translateX(-10%) !important;
  }
  .cartforms .page-inner .main-intro, .cartone .page-inner .tier-options, .cartone .page-inner .equipment-inputs {
    transform: translateX(10%) !important;
  }
}

/* Resizing small mobile (≤480px) */
@media (max-width: 480px) {
  .off-grey-div {
    padding-top: 30px;
    padding-bottom: 80px;
  }

  .logo {
    max-width: 250px;
    padding-bottom: 20px;
  }

  .login-container {
    width: 95%;
    padding: 20px 10px;
  }

  h2 {
    font-size: 20pt;
  }
  h2 span {
    font-size: 16pt;
    padding-bottom: 15px;
  }

  input {
    width: 100%;
    font-size: 12pt;
  }

  button {
    width: 80%;
    font-size: 14pt;
    padding: 0.75rem 1rem;
  }

  .already-login {
    font-size: 12pt;
  }
}

/* ==============
LAUNCH PAGE STYLES
================ */

body.launch-page {
  min-height: 100vh;
}

/* black background */
body.launch-page .black-background {
  background-color: var(--Black);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* off-black div */
body.launch-page .off-grey-div {
  background-color: var(--pelOffBlack);
  width: fit-content;
  max-width: 1920px;
  padding-inline: 50px;
  box-sizing: border-box;
  text-align: center;
  margin: auto;
  overflow: hidden;
}

/* Peloton for Business logo */
body.launch-page .off-grey-div .logo {
  max-width: 700px;
  height: auto;
  padding-bottom: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* white div containing forms */
body.launch-page .launch-container {
    background-color: var(--pelOffWhite);
    color: var(--pelOffBlack);
    width: 1300px;          
    height: fit-content;          
    margin: auto;           
    padding-top: 25px;
    padding-bottom: 5px;
    text-align: center;
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    justify-content: center; 
    overflow: hidden;       
}

body.launch-page .launch-container form {
  height: fit-content;
  padding: 100px; 
  padding-top: 10px;    
}

/* form info format */
body.launch-page .launch-container .info {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
  box-sizing: border-box;
  margin: 50px;
  margin-block: 20px;
}
body.launch-page .launch-container .personal,
body.launch-page .launch-container .company {
  flex: 0 1 48%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: auto;
}
body.launch-page .launch-container input,
body.launch-page .launch-container textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font-size: 14px;
}

body.launch-page .company-row {
  display: flex;
  gap: 12px;
}
body.launch-page .company-row input { flex: 1; }

/* "Personal" and "Company" labels */
body.launch-page .section-label {
  display: block;
  font-size: 25pt;
  font-weight: 700;
  margin-bottom: 30px;
  color: var(--pelOffBlack);
  line-height: 1;
}

/* submit button on launch page */
body.launch-page .form-cta {
  text-align: center;
  height: fit-content;
}
body.launch-page .form-cta button,
body.launch-page .launch-container button {
  width: 220px;
  padding: 12px 24px;
  margin: 6px 0;
  background-color: var(--Black);
  color: var(--White);
  border: 1px solid var(--Black);
  border-radius: 4px;
  cursor: pointer;
  font-size: 18pt;
  font-weight: 700;
}
body.launch-page .form-cta button:hover,
body.launch-page .launch-container button:hover {
  background-color: var(--pelButtonGrey);
  border-color: var(--pelButtonGrey);
}

/* "Already have a login? Log in here" formatting */
body.launch-page .already-login {
  margin-top: 25px;
  text-align: center;
  font-size: 15pt;
  color: var(--pelOffBlack);
}
body.launch-page .already-login a {
  color: var(--Black);
  text-decoration: none;
  font-weight: 700;
}
body.launch-page .already-login a:hover {
  color: var(--pelButtonGrey);
  text-decoration: underline;
}

/* registration success white container */
.success-container {
    background-color: var(--pelOffWhite);
    color: var(--pelOffBlack);
    width: 1250px;          
    height: 320px;          
    margin: auto;           
    padding-top: 25px;
    padding-bottom: 5px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;
    max-width: 90vw;
}

/* (≤1400px) */
@media (max-width: 1400px) {
  body.launch-page .off-grey-div .logo {
    max-width: 500px;
    padding-bottom: 15px;
  }

  body.launch-page .launch-container {
    max-width: 750px;
    padding: 20px 25px;
  }

  body.launch-page .section-label {
    font-size: 20pt;
    margin-bottom: 20px;
  }

  body.launch-page .launch-container input {
    font-size: 13pt;
    padding: 10px 12px;
  }

  body.launch-page .form-cta button {
    width: 200px;
    font-size: 16pt;
  }
}

/* (≤900px) */
@media (max-width: 900px) {
  body.launch-page .black-background {
    height: auto;
    min-height: 100vh;
    overflow: visible;
    align-items: flex-start;
  }

  body.launch-page .off-grey-div {
    padding-top: 30px;
    padding-bottom: 40px;
    max-height: none;
    overflow: visible;
  }

  body.launch-page .off-grey-div .logo {
    max-width: 350px;
    padding-bottom: 20px;
  }

  body.launch-page .launch-container {
    width: 90%;
    height: fit-content;
    padding: 20px 15px;
    max-height: none;
    overflow: visible;
  }

  body.launch-page .launch-container form {
    padding-inline: 30px;
  }

  body.launch-page .launch-container .info {
    flex-direction: column;
    gap: 30px;
  }

  body.launch-page .section-label {
    font-size: 18pt;
    margin-bottom: 15px;
  }

  body.launch-page .launch-container input {
    font-size: 13pt;
    padding: 10px;
  }

  body.launch-page .form-cta button {
    font-size: 15pt;
    padding: 10px 16px;
  }

  body.launch-page .already-login {
    font-size: 13pt;
  }

  body.launch-page .launch-container .info {
    margin: 0px;
  }
}

/* (≤550px) */
@media (max-width: 550px) {
  body.launch-page .black-background {
    height: auto;
    min-height: 100vh;
    overflow: visible;
    align-items: flex-start;
  }

  body.launch-page .off-grey-div {
    max-height: none;
    overflow: visible;
    padding-inline: 20px !important;
    max-width: 85vw;
    margin-inline: 30px;
  }

  body.launch-page .off-grey-div .logo {
    max-width: 250px;
    padding-bottom: 15px;
  }

  body.launch-page .launch-container {
    width: 95%;
    padding: 15px 10px;
    max-height: none;
    overflow: visible;
  }

  body.launch-page .section-label {
    font-size: 16pt;
    margin-bottom: 12px;
  }

  body.launch-page .launch-container input {
    font-size: 12pt;
    padding: 8px;
  }

  body.launch-page .company-row {
    flex-direction: column;
    gap: 10px;
  }

  body.launch-page .form-cta button {
    font-size: 14pt;
    padding: 8px 14px;
  }

  body.launch-page .already-login {
    font-size: 12pt;
    margin-top: 15px;
  }
}

/* ================================================================
SITE PAGE STYLES: landing styles + nav for all pages, footer, etc
================================================================ */

/* gap of room above hero image to prevent being hidden under nav bar */
body.site-page.landing {
  padding-top: 40px;
}

/* nav formatting */
.site-header {
  background-color: var(--pelOffBlack);
  padding: 12px 30px;
  position: fixed; 
  /* used fixed instead of sticky so stays on screen thru 
  scrolling and isnt confined to a section. */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

/* nav formatting */
.site-header .site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: none;
  margin: 0;
  position: relative;
}

.site-header .site-nav .brand {
  display: flex;
}

.site-header .site-nav .brand img {
  height: 28px;
}

/* nav page links: tiers, insp gallery, visid, merch guidelines, and build cart */
.site-header .nav-links {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 48px;
  list-style: none;
  margin: 0;
}

.site-header .nav-links li {
  display: flex;
}

.site-header .nav-links a {
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-header .nav-links a:hover {
  color: #ccc;
}

.nav-links a.active {
  font-weight: 800;
}

/* profile and cart icons */
.site-header .nav-icons {
  display: flex;
  gap: 16px;
  margin-right: 50px; /* shifted profile and cart icons left to avoid cutoff */
  align-items: center;
}

.site-header .nav-icons a {
  display: flex;
}

.site-header .nav-icons .icon {
  height: 28px;
  width: 28px;
  object-fit: contain;
}

/* profile dropdown container */
.profile-dropdown-wrapper {
  position: relative;
  display: inline-block;
}

#profile-toggle {
  display: none;
}

.profile-icon-label {
  cursor: pointer;
  display: flex;
}

.profile-dropdown {
  display: none;
  position: absolute;
  top: 40px;
  right: 0;
  width: 230px;
  height: 160px;
  background-color: var(--pelOffBlack);
  color: #fff;
  padding: 20px;
  box-sizing: border-box;
  z-index: 1001;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

#profile-toggle:checked + .profile-icon-label + .profile-dropdown {
  display: block;
}

.profile-dropdown strong {
  margin: 10px 0;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 20px;
}

.profile-dropdown a {
  margin: 10px 0;
  cursor: pointer;
  font-weight: 200;
  font-size: 18px;
  color: #fff;
}

.profile-dropdown a:hover {
  text-decoration: underline;
  color: #fff;
}

.landing-hero {
  position: relative;
  width: 100%;
  height: 793px; /* matches image size in wireframe */
  overflow: hidden;
}

.landing-hero .hero-image {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
}

/* text overlay on hero banner */
.landing-hero .hero-text {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: #fff;
  max-width: 1900px;
  padding: 0 20px;
}

.landing-hero .hero-text h1 {
  font-size: clamp(20px, 3vw, 40px);
  font-weight: 700;
  margin-bottom: 60px;
  white-space: nowrap;
}

.landing-hero .hero-text h2 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
}

/* landing - off black section */
body.site-page.landing .feature-strip {
  background-color: #181A1D;
  width: 100%;
  max-width: 1920px;
  height: 620px;
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.feature-strip-content {
  width: 100%;
  max-width: 1000px;
  text-align: center;
}

.feature-strip-text h2 {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 25px 0;
  color: var(--White);
}

.feature-strip-text h3 {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 60px 0;
  color: var(--White);
}

body.site-page.landing .feature-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 180px));
  gap: 20px;
  width: 100%;
  margin: 0 auto;
  justify-items: center;
  align-items: start;
}

.feature-strip img {
  width: 100%;
  max-width: 200px;  
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

body.site-page.landing .feature-icon {
  width: clamp(50px, 6vw, 100px);
  height: clamp(50px, 6vw, 100px);
  object-fit: contain;
  margin-bottom: 10px;
}

body.site-page.landing .feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 120px;
}

body.site-page.landing .feature h3 {
  font-size: clamp(10px, 1.2vw, 12px);
  font-weight: 600;
  min-height: 40px;
  margin-bottom: 8px;
  color: var(--White);
}

body.site-page.landing .feature p {
  font-size: clamp(8px, 1vw, 10px);
  font-weight: 400;
  min-height: 60px;
  color: var(--White);
}

body.site-page.landing .feature-icon {
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin-bottom: 16px;
}

/* landing off black banner - text below icons */
.feature-strip-bottom-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--White);
  text-align: center;
  margin-top: 30px;
  margin-bottom: 40px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.4;
}

body.site-page.landing .feature h3 {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--White);
}

body.site-page.landing .feature p {
  font-size: 10px;
  font-weight: 400;
  color: var(--White);
}

/* landing off-white text banner */
.getting-started {
  background-color: var(--pelOffWhiteTwo);
  width: 100%;
  max-width: 1920px;
  height: 300px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 55px;
  box-sizing: border-box;
}

.getting-started-content {
  text-align: center;
  max-width: 1000px;
  color: var(--pelOffBlack);
}

.getting-started h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 40px;
}

.getting-started p.intro {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 20px;
}

.getting-started p.highlight {
  font-size: 14px;
  font-weight: 700;
}

/* footer formattings */
.site-footer {
  background-color: #fff;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 10px 30px;
  box-sizing: border-box;
  color: var(--pelOffBlack);
  position: relative;
  border-top: 2px solid var(--pelChartGrey);
}

.site-footer .footer-inner {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

.site-footer .footer-col {
  flex: 1;
  min-width: 200px;
}

.site-footer .footer-logo {
  width: 245px; /* 70% of original size as requested */
  height: auto;
  margin-bottom: 6px;
  position: static;
}

.site-footer h4 {
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 10px;
}

.site-footer p,
.site-footer li,
.site-footer a {
  font-size: 10px;
  color: var(--pelOffBlack);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--pelButtonGrey);
}

.site-footer .tiny {
  font-size: 10px; /* 50% */
  color: #636363;
  margin-top: 10px;
  position: static;
}

/* request an update text box formatting */
.site-footer .footer-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 10px;
}

.site-footer .footer-textarea {
  width: 183px;
  height: 58px;
  padding: 5px;
  font-size: 8px;
  font-family: 'Inter', sans-serif;
  border: 1px solid var(--pelOffBlack);
  border-radius: 4px;
  resize: none;
  box-sizing: border-box;
  color: var(--pelOffBlack);
  margin-left: 0;
}

.site-footer .footer-form button {
  width: 58px;
  padding: 5px 0;
  font-size: 8px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  background-color: var(--pelOffBlack);
  color: #fff;
  border: none;
  border-radius: 4px;
  text-align: center;
  margin-left: 0;
}

.site-footer .footer-form button:hover {
  background-color: var(--pelButtonGrey);
}

/* Logo formatting */
.site-footer .footer-logo-col {
  flex: 0 0 auto;
  margin-left: 40px;
  margin-right: 100px;
}

/* resources column formatting */
.site-footer .footer-resources {
  flex: 1;
}

/* centering of req update column */
.site-footer .footer-request {
  flex: 1.2;
  text-align: left;
  margin-left: 0;
}

/* need support column formatting */
.site-footer .footer-support {
  flex: 1;
  margin-left: 0;
}

/* (≤1910px) */
@media (max-width: 1910px) {
  .site-header .nav-links {
    gap: clamp(16px, 2vw, 32px);
    flex-wrap: nowrap;
  }

  .site-header .nav-links li a {
    white-space: nowrap;
    font-size: clamp(12px, 1.5vw, 14px);
  }

  .site-header .site-nav .brand img {
    height: clamp(18px, 2vw, 22px);
    max-width: 200px;
    width: auto;
  }

  .site-header .nav-icons .icon {
    height: clamp(16px, 2vw, 24px);
    width: clamp(16px, 2vw, 24px);
  }

  body.site-page.landing .feature-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px; /* was 30px, -10 */
    flex-wrap: nowrap;
  }

  body.site-page.landing .feature .feature-icon {
    width: 100px;
    height: auto;
    display: block;
    margin: 0 auto 12px;
    object-fit: contain;
  }

  body.site-page.landing .feature h3,
  body.site-page.landing .feature p {
    width: 100px;
    max-width: 100px;
    margin-left: auto;
    margin-right: auto;
  }

  body.site-page.landing .feature h3 {
    font-size: 11px;
    font-weight: 600;
  }

  body.site-page.landing .feature p {
    font-size: 9px;
    font-weight: 400;
    line-height: 1.3;
  }

  .feature-strip-text h2 {
    font-size: 25px;
  }

  .feature-strip-text h3 {
    font-size: 13px;
  }

  .feature-strip-bottom-text {
    font-size: 12px;
    margin-top: 40px;
    padding: 0 12px 20px 12px;
  }
}

/* ≤1900px */
@media (max-width: 1900px) {
  .site-header .site-nav .brand img {
    height: clamp(16px, 2vw, 20px);
    max-width: 190px;
    width: auto;
  }

  .site-footer .footer-logo {
    width: 185px;
  }
}

/* ≤1600px */
@media (max-width: 1600px) {
  .site-footer .footer-logo {
    width: 150px;
  }

  body.site-page.landing .feature-row {
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 10px; /* was 30px/20px? -20 */
    flex-wrap: nowrap;
  }
}

/* (≤1440px) */
@media (max-width: 1440px) {
  body.site-page.landing {
    padding-top: 40px;
  }

  .landing-hero .hero-text h1 {
    padding-top: 20px;
  }

  body.site-page.landing .feature-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: nowrap;
    width: 70%;
    grid-template-columns: repeat(auto-fit, minmax(90px, 140px));
  }

  body.site-page.landing .feature {
    flex: 0 0 85px;
    max-width: 85px;
    text-align: center;
  }

  body.site-page.landing .feature .feature-icon {
    width: 85px;
    height: auto;
    display: block;
    margin: 0 auto 10px;
    object-fit: contain;
  }

  body.site-page.landing .feature h3,
  body.site-page.landing .feature p {
    width: 85px;
    max-width: 85px;
    margin: 0 auto;
  }

  body.site-page.landing .feature h3 {
    font-size: 12px;
    font-weight: 600;
  }

  body.site-page.landing .feature p {
    font-size: 10px;
    line-height: 1.3;
  }

  .feature-strip-text h2 {
    font-size: 22px;
  }
  .feature-strip-text h3 {
    font-size: 13px;
  }

  .feature-strip-bottom-text {
    font-size: 12px;
    margin-top: 20px;
    padding: 0 20px;
  }

  .profile-dropdown {
    width: 140px;
    height: 110px;
    padding: 8px 10px;
    font-size: 12px;
  }

  .profile-dropdown strong {
    font-size: 13px;
  }

  .profile-dropdown p a {
    font-size: 10px;
  }

  .landing-hero,
  .landing-hero .hero-image {
    height: clamp(280px, 45vh, 380px);
  }

  .landing-hero .hero-text {
    top: 10%;
    padding: 0 14px;
    transform: translateX(-50%);
  }

  .landing-hero .hero-text h1 {
    font-size: clamp(18px, 2.5vw, 35px);
    margin-bottom: 28px;
  }

  .landing-hero .hero-text h2 {
    font-size: clamp(16px, 2vw, 25px);
  }

  .site-header {
    height: 40px;
    padding: 0 20px;
  }

  .site-header .site-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
  }

  .site-header .nav-links {
    flex: 1 1 auto;
    justify-content: center;
    gap: clamp(10px, 1.5vw, 12px);
    flex-wrap: nowrap;
    margin-top: 0;
  }

  .site-header .nav-links li a {
    white-space: nowrap;
    font-size: clamp(10px, 1.5vw, 12px);
  }

  .site-header .site-nav .brand img {
    height: clamp(16px, 2vw, 18px);
    max-width: 170px;
    width: auto;
  }

  .site-header .nav-icons .icon {
    height: clamp(14px, 2vw, 22px);
    width: clamp(14px, 2vw, 22px);
  }

  body.site-page.landing .feature-strip {
    padding: 50px 20px;
  }

  .getting-started {
    padding: 50px 20px;
  }

  .getting-started h2 {
    font-size: 25px;
  }

  .getting-started p.intro,
  .getting-started p.highlight {
    font-size: 13px;
  }

  .site-footer .footer-inner {
    justify-content: space-around;
  }

  .site-footer .footer-logo-col {
    margin-left: 20px;
    margin-right: 60px;
  }

  .site-footer .footer-logo {
    width: 120px;
  }

  .site-footer .footer-col {
    flex: 1 1 auto;
    min-width: 160px;
  }
}

/* (≤1000px) */
@media (max-width: 1000px) {
  body.site-page.landing {
    padding-top: 40px;
  }

  body.site-page.landing .feature-row {
    transform: scale(0.9);
    transform-origin: top center;
  }

  .landing-hero .hero-text h1 {
    padding-top: 30px;
  }

  body.site-page.landing .feature-strip {
    padding: 20px 16px 30px;
    height: auto;
  }

  body.site-page.landing .feature-strip-content .feature-strip-text h2 {
    font-size: 22px;
  }

  body.site-page.landing .feature-strip-content .feature-strip-text h3 {
    font-size: 12px;
    margin-bottom: 20px;
  }

  body.site-page.landing .feature h3 {
    font-size: 12px;
  }

  body.site-page.landing .feature p {
    font-size: 10px;
  }

  .feature-strip-bottom-text {
    font-size: 11px;
    margin-top: 30px;
    padding: 0 12px;
  }

  body.site-page.landing .feature-row .feature .feature-icon {
    width: clamp(40px, 7vw, 70px);
    height: auto;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .getting-started {
    height: clamp(306px, 16vh, 326px);
  }

 .site-footer .footer-inner {
    flex-wrap: nowrap;             
    justify-content: space-evenly;
  }

  .site-footer .footer-logo-col {
    margin-left: 10px;
    margin-right: 30px;
  }

  .site-footer .footer-col {
    flex: 1 1 auto;
    min-width: 140px;
  }

  .site-footer h4 {
    font-size: 10px;
  }
  .site-footer p,
  .site-footer li,
  .site-footer a {
    font-size: 9px;
  }

  .site-footer .footer-logo {
    width: 100px;
  }

  .site-footer .tiny {
    font-size: 8px;
    margin-top: 6px;
  }

  .site-footer .footer-form {
    gap: 3px;
    margin-top: 5px;
  }

  .site-footer .footer-textarea {
    width: 150px;
    height: 45px;
    padding: 5px;
    font-size: 7px;
  }

  .site-footer .footer-form button {
    width: 50px;
    padding: 4px;
    font-size: 7px;
  }
}

/* (≤800px) */
@media (max-width: 800px) {
  body.site-page.landing {
    padding-top: 20px;
  }

  body.site-page.landing .feature-row {
    transform: scale(0.7);
    transform-origin: top center;
  }

  .profile-dropdown {
    width: 100px;
    height: 70px;
    padding: 4px 6px;
    font-size: 8px;
  }

  .profile-dropdown strong {
    font-size: 9px;
  }

  .profile-dropdown p a {
    font-size: 7px;
  }

  .landing-hero,
  .landing-hero .hero-image {
    height: clamp(180px, 35vh, 220px);
  }

  .landing-hero .hero-text {
    top: 5%;
    padding: 0;
    width: 95%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }

  .landing-hero .hero-text h1 {
    font-size: clamp(12px, 2vw, 18px);
    margin-bottom: 12px;
    padding-top: 50px;
  }

  .landing-hero .hero-text h2,
  .landing-hero .hero-text p {
    font-size: clamp(9px, 3vw, 12px);
  }

  .site-header {
    height: 35px;
    padding: 0 10px;
  }

  .site-header .nav-links {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    gap: clamp(4px, 0.8vw, 6px);
    margin-top: 0;
  }

  .site-header .nav-links li a {
    white-space: nowrap;
    font-size: clamp(8px, 1vw, 10px);
  }

  .site-header .site-nav .brand img {
    height: clamp(10px, 1vw, 13px);
    max-width: 110px;
  }

  .site-header .nav-icons {
    margin-left: auto;
    margin-right: 20px;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .site-header .nav-icons .icon {
    height: clamp(10px, 1.5vw, 16px);
    width: clamp(10px, 1.5vw, 16px);
  }

  .feature-strip-text h2 {
    font-size: clamp(14px, 2.5vw, 18px);
  }

  .feature-strip-text h3 {
    font-size: clamp(10px, 2vw, 13px);
  }

  .feature-strip-bottom-text {
    font-size: clamp(9px, 2vw, 12px);
    padding: 0 8px;
  }

  body.site-page.landing .feature {
    width: clamp(55px, 10vw, 70px);
    font-size: clamp(7px, 1.5vw, 9px);
    line-height: 1.2;
  }

  body.site-page.landing .feature-strip-content .feature-strip-text h2 {
    font-size: 20px;
  }

  body.site-page.landing .feature-strip-content .feature-strip-text h3 {
    font-size: 11px;
  }

  .getting-started h2 {
    font-size: clamp(14px, 2.5vw, 18px);
  }

  .getting-started p.intro,
  .getting-started p.highlight {
    font-size: clamp(10px, 2vw, 13px);
  }

  body.site-page.landing .feature-row .feature .feature-icon {
    width: clamp(30px, 6vw, 50px);
    height: auto;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .getting-started {
    height: clamp(230px, 12vh, 260px);
  }

  .site-footer .footer-inner {
    flex-wrap: nowrap;             
    justify-content: space-evenly;
  }

  .site-footer .footer-logo-col {
    margin: 0 0 0 0px;
  }

  .site-footer .footer-col {
    flex: 1 1 auto;
    min-width: 100px;
  }

  .site-footer h4 {
    font-size: 8px;
  }
  .site-footer p,
  .site-footer li,
  .site-footer a {
    font-size: 7px;
  }

  .site-footer .tiny {
    font-size: 6px;
    margin-top: 0px;
  }

  .site-footer .footer-textarea {
    width: 100px;
    height: 40px;
    padding: 5px;
    font-size: 7px;
  }

  .site-footer .footer-form button {
    width: 40px;
    padding: 4px;
    font-size: 7px;
  }
}

/* (≤500px) */
@media (max-width: 500px) {
  .site-header .nav-links li a {
    white-space: nowrap;
    font-size: 1.5vw;
  }
  .site-header .site-nav .brand img {
    height: 2vw;
    max-width: 110px;
  }
  .site-header {
    height: 24px;
    max-width: calc(100vw - 20px);
  }
  .site-header .nav-icons {
    margin-right: 0px;
  }
  .site-footer {
    padding: 10px 5px;
  }
  .site-footer .footer-logo {
    width: 20vw;
  }
  .site-footer .footer-col {
    min-width: fit-content;
  }
  .site-footer h4 {
    font-size: 6px;
    max-width: 64px;
    word-wrap: normal;
  }
  .site-footer p, .site-footer li, .site-footer a {
    font-size: 4px;
    max-width: 64px;
    word-wrap: break-word;
  }

  .site-footer .footer-textarea {
    max-width: 64px;
    height: 20px;
    padding: 4px;
    font-size: 4px;
  }
  
  body.site-page.landing .feature-row {
    width: 100%;
    gap: 3vw;
    transform: scale(1);
  }
  body.site-page.landing .feature {
    max-width: 15vw;
    width: 15vw;
    min-width: 0px;
  }
  body.site-page.landing .feature h3 {
    font-size: 8px;
    margin: 0px;
    max-width: 100%;
    min-height: 25px;
  }
  body.site-page.landing .feature p {
    font-size: 6px;
    margin: 0px;
    max-width: 100%;
  }
  body.site-page.landing .feature-row .feature .feature-icon {
    width: 20px;
    margin: 0px;
    max-width: 100%;
  }
  .getting-started {
    height: fit-content;
    padding: 20px 16px 30px;
  }
}

/* =======
TIERS PAGE
======== */

body.site-page.tiers {
  background-color: var(--pelOffWhite);
  -webkit-font-smoothing:antialiased; /* grayscale antialiasing */
  -moz-osx-font-smoothing:grayscale; /* grayscale antialiasing */
  padding-top: 40px;
}

/* hero banner */
body.site-page.tiers .hero-banner.tiers-hero {
  position: relative;
  width: 100%;
  height: 793px;
  overflow: hidden;
}
body.site-page.tiers .hero-banner.tiers-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.site-page.tiers .hero-banner.tiers-hero .hero-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--White);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  margin: 0;
}

/* paragraph above tiers */
body.site-page.tiers .tiers-intro {
  width: 1600px;
  height: 200px;
  text-align: center;
  margin: 60px auto 98px auto;
  font-size: 26px;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  line-height: 1.4;
  color: #000;
}

body.site-page.tiers .page-inner {
  max-width: 1920px;
  max-height: 1680px; /*added this line to fix page height for 50% adjustment*/
  margin: 0;
  padding: 28px 0 80px 0;
  box-sizing: border-box;
}

body.site-page.tiers .tiers-header {
  margin-left: calc(309px + (1300px - 972px)); /*adjust based on rest of chart resize*/
  width: 972px;
  height: 104px;
  display: flex;
  gap: 0;
  box-sizing: border-box;
  margin-top: 25px;
}

/* tier box widths */
body.site-page.tiers .tier-box {
  width: 324.66px;
  height: 103px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  font-size: 18px;
  font-weight: 800;
  text-align: center;
  padding: 0 45px;
}
body.site-page.tiers .tier-grey { background: rgba(217,217,217,0.4); }
body.site-page.tiers .tier-offwhite { background: var(--pelOffWhite); }

body.site-page.tiers .chart-section {
  margin-left: 309px;
  width: 1300px;
  box-sizing: border-box;
  margin-bottom: 42px;
}

/* chart heading - tiers page */
body.site-page.tiers .chart-heading {
  font-size: 44px;
  font-weight: 700;
  margin-left: 0px;
  margin-top: 75px;
  margin-bottom: 42px;
}

/* chart tables */
body.site-page.tiers .chart-table {
  width: 1300px;
  height: 420px;
  border-top: 0.5px solid #000;
  border-bottom: 0.5px solid #000;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

body.site-page.tiers .chart-row {
  display: flex;
  align-items: center;
  height: 84px;
  box-sizing: border-box;
  border-bottom: 0.5px solid #000;
}

body.site-page.tiers .chart-row:last-child {
  border-bottom: none; /* makes sure there isnt double bottom border line */
}

body.site-page.tiers .chart-subheading {
  width: 325px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: left;
  font-size: 30px; 
  font-weight: 800;
  text-align: left;
  box-sizing: border-box;
}

body.site-page.tiers .chart-cells {
  display: flex;
  width: calc(1300px - 325px);
  box-sizing: border-box;
}

body.site-page.tiers .chart-cell {
  width: 325px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  font-size: 19px;
  font-weight: 400;
  text-align: left;
  padding: 0 25px;
}

body.site-page.tiers .chart-cell.grey {
  background: rgba(217,217,217,0.4);
}

body.site-page.tiers .chart-row.single-col .chart-cells {
  width: 975px;
}

body.site-page.tiers .chart-row.single-col .chart-cell {
  width: 100%;
  background: transparent;
  padding: 0 25px;
}

body.site-page.tiers .ptc-chart-section {
  margin-left: 309px;
  width: 1300px;
  box-sizing: border-box;
  margin-bottom: 42px;
}

body.site-page.tiers .ptc-chart-heading {
  font-size: 44px;
  font-weight: 700;
  margin-left: 0px;
  margin-top: 75px;
  margin-bottom: 42px;
}

body.site-page.tiers .ptc-chart-table {
  width: 1300px;
  height: 252px;
  border-top: 0.5px solid #000;
  border-bottom: 0.5px solid #000;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

body.site-page.tiers .ptc-chart-row {
  display: flex;
  align-items: center;
  height: 120px;
  box-sizing: border-box;
  border-bottom: 0.5px solid #000;
}

body.site-page.tiers .ptc-chart-subheading {
  width: 310px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: left;
  font-size: 30px; 
  font-weight: 800;
  text-align: left;
  box-sizing: border-box;
}

body.site-page.tiers .ptc-chart-cells {
  display: flex;
  width: calc(1300px - 325px);
  box-sizing: border-box;
}

body.site-page.tiers .ptc-chart-cell {
  width: 325px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  font-size: 19px;
  font-weight: 400;
  text-align: left;
  padding: 0 25px;
}

body.site-page.tiers .ptc-chart-cell a {
  display: block;
  margin-top: 4px;
  word-break: break-word; /* keep url from overflow */
}

/* single-column variant for Product Tech chart */
body.site-page.tiers .ptc-chart-row.single-col .ptc-chart-cells {
  width: 975px;
}

body.site-page.tiers .ptc-chart-row.single-col .ptc-chart-cell {
  width: 100%;
  background: transparent;
  padding: 0 25px;
}

body.site-page.tiers .ptc-chart-row:last-child {
  border-bottom: none; /* remove extra bottom border */
}

body.site-page.tiers .ptc-chart-row.single-col.stack-link .ptc-chart-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  padding: 0 25px;
}

body.site-page.tiers .ptc-chart-cell .ptc-doc-link {
  display: inline-block;
  overflow-wrap: anywhere; /* allow URL to break if needed */
  margin-top: 0;
}

body.site-page.tiers .ead-chart-section {
  margin-left: 309px;
  width: 1300px;
  box-sizing: border-box;
  margin-bottom: 42px;
}

body.site-page.tiers .ead-chart-heading {
  font-size: 44px;
  font-weight: 700;
  margin-left: 0;
  margin-top: 75px;
  margin-bottom: 42px;
}

body.site-page.tiers .ead-chart-table {
  width: 1300px;
  height: 875px;
  border-top: 0.5px solid #000;
  border-bottom: 0.5px solid #000;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

body.site-page.tiers .ead-chart-row {
  display: flex;
  align-items: stretch;
  flex: 1;
  border-bottom: 0.5px solid #000;
}

body.site-page.tiers .ead-chart-row:last-child {
  border-bottom: none;
}

body.site-page.tiers .ead-chart-subheading {
  width: 325px;
  display: flex;
  align-items: center;
  justify-content: left;
  font-size: 30px;
  font-weight: 800;
  text-align: left;
  padding-left: 10px;
  box-sizing: border-box;
}

body.site-page.tiers .ead-chart-subheading {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-left: 10px;
}

body.site-page.tiers .ead-chart-subheading .ead-subtext {
  font-size: 19px;
  font-weight: 400;
  line-height: 1.3;
  margin-top: 10px;
  color: #000;
}

body.site-page.tiers .ead-chart-cells {
  display: flex;
  width: calc(1300px - 325px);
  box-sizing: border-box;
}

body.site-page.tiers .ead-chart-cell {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 19px;
  font-weight: 400;
  text-align: left;
  padding: 0 25px;
  line-height: 1.4;
  box-sizing: border-box;
  background-color: var(--pelOffWhite);
}

body.site-page.tiers .ead-chart-row.single-col .ead-chart-cells {
  width: 975px;
}

body.site-page.tiers .ead-chart-row.single-col .ead-chart-cell {
  width: 100%;
  background: transparent;
  padding: 0 25px;
}

body.site-page.tiers .ead-chart-cell.grey {
  background-color: rgba(217,217,217,0.4);
}

body.site-page.tiers .ead-chart-cell .subtext {
  font-size: 16px;
  font-style: italic;
}

body.site-page.tiers .ead-chart-row.double-height {
  flex: 2;
}

body.site-page.tiers .ead-chart-accessory-content {
  display: flex;
  flex-direction: column;
  justify-content: center;  
  height: 100%;
  padding-left: 25px;
  gap: 4px;
}

body.site-page.tiers .ead-chart-accessory-content .ead-accessory-top {
  font-size: 19px;
}

body.site-page.tiers .ead-chart-accessory-content .ead-accessory-sub {
  font-size: 17px;
}

body.site-page.tiers .ead-chart-row.accessory-packages .ead-chart-cells {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 25px;
  box-sizing: border-box;
}

body.site-page.tiers .ead-chart-row.accessory-packages .ead-top-line {
  font-size: 19px;
  font-weight: 400;
  font-family: 'Inter', sans-serif;
  padding-left: 0px;
}

body.site-page.tiers .ead-chart-row.accessory-packages .ead-sub-columns {
  display: flex;
  gap: 55px;
  justify-content: flex-start;
}

body.site-page.tiers .ead-chart-row.accessory-packages .ead-sub-columns .ead-sub-column {
  flex: 0 0 auto;
  font-size: 17px;
  line-height: 1.4;
}

body.site-page.tiers .est-graphics-chart-section {
  margin-left: 309px;
  width: 1300px;
  height: 125px;
  box-sizing: border-box;
  margin-bottom: 200px;
}

body.site-page.tiers .est-graphics-chart-heading {
  font-size: 44px;
  font-weight: 700;
  margin-left: 0;
  margin-top: 75px;
  margin-bottom: 20px;
}

body.site-page.tiers .est-graphics-chart-note {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 32px;
}

body.site-page.tiers .est-graphics-chart-table {
  width: 1300px;
  height: 125px;
  border-top: 0.5px solid #000;
  border-bottom: 0.5px solid #000;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body.site-page.tiers .est-graphics-chart-row {
  display: flex;
  align-items: stretch;
  flex: 1;
  border-bottom: 0.5px solid #000;
}

body.site-page.tiers .est-graphics-chart-row:last-child {
  border-bottom: none;
}

body.site-page.tiers .est-graphics-chart-subheading {
  width: 325px;
  display: flex;
  align-items: center;
  justify-content: left;
  font-size: 30px;
  font-weight: 800;
  text-align: left;
  padding-left: 10px;
  box-sizing: border-box;
}

body.site-page.tiers .est-graphics-chart-cells {
  display: flex;
  width: calc(1300px - 325px);
  box-sizing: border-box;
}

body.site-page.tiers .est-graphics-chart-cell {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 19px;
  font-weight: 400;
  text-align: left;
  padding: 0 25px;
  line-height: 1.4;
  box-sizing: border-box;
  background-color: var(--pelOffWhite);
}

body.site-page.tiers .est-graphics-chart-cell.grey {
  background-color: rgba(217,217,217,0.4);
}

body.site-page.tiers .admin-fees-chart-section {
  margin-left: 309px;
  width: 1300px;
  height: 125px;
  box-sizing: border-box;
  margin-bottom: 200px;
}

body.site-page.tiers .admin-fees-chart-heading {
  font-size: 44px;
  font-weight: 700;
  margin-left: 0;
  margin-top: 75px;
  margin-bottom: 20px;
}

body.site-page.tiers .admin-fees-chart-note {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 32px;
}

body.site-page.tiers .admin-fees-chart-table {
  width: 1300px;
  height: 125px;
  border-top: 0.5px solid #000;
  border-bottom: 0.5px solid #000;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body.site-page.tiers .admin-fees-chart-row {
  display: flex;
  align-items: stretch;
  flex: 1;
  border-bottom: 0.5px solid #000;
}

body.site-page.tiers .admin-fees-chart-row:last-child {
  border-bottom: none;
}

body.site-page.tiers .admin-fees-chart-subheading {
  width: 325px;
  display: flex;
  align-items: center;
  justify-content: left;
  font-size: 30px;
  font-weight: 800;
  text-align: left;
  padding-left: 10px;
  box-sizing: border-box;
}

body.site-page.tiers .admin-fees-chart-cells {
  display: flex;
  width: calc(1300px - 325px);
  box-sizing: border-box;
}

body.site-page.tiers .admin-fees-chart-cell {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 19px;
  font-weight: 400;
  text-align: left;
  padding: 0 25px;
  line-height: 1.4;
  box-sizing: border-box;
  background-color: var(--pelOffWhite);
}

body.site-page.tiers .admin-fees-chart-cell.grey {
  background-color: rgba(217,217,217,0.4);
}

/* resized page 50% as per google doc corrs*/
main.page-inner {
  transform: scale(0.5);
  transform-origin: top center;
}

/* tiers reformatting for smaller screens */
/* (≤1910px) */
@media (max-width: 1910px) {
  main.page-inner {
    transform: scale(0.45);
    transform-origin: top center;
  }

  body.site-page.tiers .page-inner {
    max-width: 1910px;
    max-height: 1500px;
    margin: 0 auto;
  }

  body.site-page.tiers .hero-banner.tiers-hero .hero-text {
    font-size: 35px;
    line-height: 1;
  }
}

/* (≤1440px) */
@media (max-width: 1440px) {
  body.site-page.tiers .hero-banner.tiers-hero .hero-text {
    font-size: 30px;
    line-height: 1;
  }

  body.site-page.tiers {
    padding-top: 40px;
  }

  body.site-page.tiers .hero-banner.tiers-hero,
  body.site-page.tiers .hero-banner.tiers-hero img {
    height: clamp(280px, 45vh, 380px);
  }

  .tiers-hero .hero-text {
    top: 10%;
    padding: 0 14px;
    transform: translateX(-50%);
    position: absolute;
    left: 50%;
    text-align: center;
    font-size: clamp(18px, 2.5vw, 35px);
  }

  main.page-inner {
    transform: scale(0.40) translateX(-30%);
    transform-origin: top center;
  }

  body.site-page.tiers .page-inner {
    max-height: 1350px;
    margin: 0 auto;
  }
}

/* (≤1000px) */
@media (max-width: 1000px) {
  body.site-page.tiers .hero-banner.tiers-hero .hero-text {
    font-size: 27px;
    line-height: 1;
  }

  body.site-page.tiers {
    padding-top: 40px;
  }

  .tiers-hero .hero-text {
    padding-top: 30px;
  }

  main.page-inner {
    transform: scale(0.35) translateX(-50%);
    transform-origin: top center;
  }

  body.site-page.tiers .page-inner {
    max-width: 1000px;
    max-height: 1190px;
    margin: 0 auto;
  }
}

/* (≤800px) */
@media (max-width: 800px) {
  body.site-page.tiers .hero-banner.tiers-hero .hero-text {
    font-size: 24px;
    line-height: 1;
  }

  body.site-page.tiers {
    padding-top: 20px;
  }

  body.site-page.tiers .hero-banner.tiers-hero,
  body.site-page.tiers .hero-banner.tiers-hero img {
    height: clamp(180px, 35vh, 220px);
  }

  .tiers-hero .hero-text {
    top: 5%;
    padding: 0;
    width: 95%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: clamp(12px, 2vw, 18px);
    margin-bottom: 12px;
    padding-top: 50px;
  }

  main.page-inner {
    transform: scale(0.25) translateX(-100%);
    transform-origin: top center;
    margin: 0 auto;
  }

  body.site-page.tiers .page-inner {
    max-width: 800px;
    max-height: 860px;
  }
}

@media (max-width: 500px) {
  .requirements-chart {
    transform: scale(0.20) translateX(calc(-620px / 0.20)) !important;
  }
  .power-connectivity h2 {
    transform: translateX(-630px) !important;
    font-size: 16px;
  }
}

/* (≤500px) */
@media (max-width: 500px) {
  main.page-inner {
    transform: scale(0.2) translateX(-200%);
    transform-origin: top center;
    margin: 0 auto;
  }

  body.site-page.tiers .page-inner {
    transform: scale(1);
    width: 100%;
    height: 1150px;
    max-height: 1150px;
  }
  body.site-page.tiers .tiers-intro {
    width: 100%;
    height: 100px;
    text-align: center;
    margin: 0px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
  }
  body.site-page.tiers .chart-section {
    transform-origin: top left;
    transform: scale(0.27);
    margin-left: 15px;
    height: 110px;
  }
  body.site-page.tiers .ptc-chart-section {
    transform-origin: top left;
    transform: scale(0.27);
    margin-left: 15px;
    height: 70px;
  }
  body.site-page.tiers .ead-chart-section {
    transform-origin: top left;
    transform: scale(0.27);
    margin-left: 15px;
    height: 235px;
  }
  body.site-page.tiers .est-graphics-chart-section {
    transform-origin: top left;
    transform: scale(0.27);
    margin-left: 15px;
    height: 50px;
    margin-bottom: 0px;
  }
  body.site-page.tiers .admin-fees-chart-section {
    transform-origin: top left;
    transform: scale(0.27);
    margin-left: 15px;
    height: 0px;
  }
  body.site-page.tiers .tiers-header {
    transform-origin: top left;
    transform: scale(0.27);
    margin-left: 105px;
    height: 0px;
    margin-bottom: 0px;
  }
}

/* ========================
CASES (Inspiration Gallery)
======================== */

body.site-page.cases {
  background-color: var(--pelOffWhite);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding-top: 40px;
}

/* hero banner */
body.site-page.cases .hero-banner.cases-hero {
  position: relative;
  width: 100%;
  height: 793px;
  overflow: hidden;
}

body.site-page.cases .hero-banner.cases-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.site-page.cases .hero-banner.cases-hero .hero-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--White);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  margin: 0;
}

/* intro paragraph */
body.site-page.cases .cases-intro {
  width: 900px;
  height: 30px;
  text-align: center;
  margin: 30px auto 50px auto;
  font-size: 11px;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  line-height: 1.4;
  color: #000;
}

body.site-page.cases .cases-intro-a {
  width: 900px;
  height: 120px;
  text-align: center;
  margin: 30px auto 0px auto;
  font-size: 11px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  line-height: 1.4;
  color: #000;
}

/* tier2 carousel */
.cases-carousel {
  width: 100%;
  max-width: 1100px;
  margin: 20px auto;
  position: relative;
  text-align: center;
  font-family: 'Inter', sans-serif;
}

.cases-carousel input[type="radio"] { display: none; }

.cases-carousel .carousel-wrapper {
  width: 100%;
  height: 670px;
  overflow: hidden;
  margin: 0 auto;
}

.cases-carousel .carousel-track {
  display: flex;
  width: 100%;
  transition: transform 0.4s ease-in-out;
  will-change: transform;
}

.cases-carousel .carousel-slide {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0;
}

.cases-carousel .carousel-slide img {
  width: 100%;
  height: auto;
  max-width: 1150px;
  max-height: 670px;
  object-fit: contain;
  display: block;
}

/* slide positions */
#case-slide1:checked  ~ .carousel-wrapper .carousel-track { transform: translateX(   0%); }
#case-slide2:checked  ~ .carousel-wrapper .carousel-track { transform: translateX( -100%); }
#case-slide3:checked  ~ .carousel-wrapper .carousel-track { transform: translateX( -200%); }
#case-slide4:checked  ~ .carousel-wrapper .carousel-track { transform: translateX( -300%); }
#case-slide5:checked  ~ .carousel-wrapper .carousel-track { transform: translateX( -400%); }
#case-slide6:checked  ~ .carousel-wrapper .carousel-track { transform: translateX( -500%); }
#case-slide7:checked  ~ .carousel-wrapper .carousel-track { transform: translateX( -600%); }
#case-slide8:checked  ~ .carousel-wrapper .carousel-track { transform: translateX( -700%); }
#case-slide9:checked  ~ .carousel-wrapper .carousel-track { transform: translateX( -800%); }
#case-slide10:checked ~ .carousel-wrapper .carousel-track { transform: translateX( -900%); }
#case-slide11:checked ~ .carousel-wrapper .carousel-track { transform: translateX(-1000%); }

.cases-carousel .carousel-arrows {
  position: absolute;
  top: -100px;
  right: 0;
  width: 154px;
  height: 31px;
  display: block;
  pointer-events: none;
}

.cases-carousel .carousel-arrows .arrow-art {
  width: 154px;
  height: auto;
  display: block;
  pointer-events: none;
}

.cases-carousel .carousel-arrows label.arrow {
  display: none;
  position: absolute;
  top: 110%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent; /* transparent circle */
  cursor: pointer;
  pointer-events: auto; /* enable clicking this circle */
  outline: none;
}

.cases-carousel .carousel-arrows label.prev { left: 15px; }
.cases-carousel .carousel-arrows label.next { right: 15px; }

#case-slide1:checked  ~ .carousel-arrows label.slide1,
#case-slide2:checked  ~ .carousel-arrows label.slide2,
#case-slide3:checked  ~ .carousel-arrows label.slide3,
#case-slide4:checked  ~ .carousel-arrows label.slide4,
#case-slide5:checked  ~ .carousel-arrows label.slide5,
#case-slide6:checked  ~ .carousel-arrows label.slide6,
#case-slide7:checked  ~ .carousel-arrows label.slide7,
#case-slide8:checked  ~ .carousel-arrows label.slide8,
#case-slide9:checked  ~ .carousel-arrows label.slide9,
#case-slide10:checked ~ .carousel-arrows label.slide10,
#case-slide11:checked ~ .carousel-arrows label.slide11 {
  display: block;
}

.cases-carousel .carousel-arrows label.arrow:focus {
  box-shadow: 0 0 0 3px rgba(0,0,0,0.12);
  border: 1px solid rgba(0,0,0,0.08);
}

/* dots centered below the carousel */
.cases-carousel .carousel-controls {
  display: flex;
  justify-content: center;
  gap: 8px;
  align-items: center;
  padding-bottom: 6px;
}

.cases-carousel .carousel-controls .dot {
  width: 12px;
  height: 12px;
  background: #ccc;
  border-radius: 50%;
  cursor: pointer;
  display: inline-block;
}

/* highlight active dot */
#case-slide1:checked  ~ .carousel-controls label[for="case-slide1"]  { background: #000; }
#case-slide2:checked  ~ .carousel-controls label[for="case-slide2"]  { background: #000; }
#case-slide3:checked  ~ .carousel-controls label[for="case-slide3"]  { background: #000; }
#case-slide4:checked  ~ .carousel-controls label[for="case-slide4"]  { background: #000; }
#case-slide5:checked  ~ .carousel-controls label[for="case-slide5"]  { background: #000; }
#case-slide6:checked  ~ .carousel-controls label[for="case-slide6"]  { background: #000; }
#case-slide7:checked  ~ .carousel-controls label[for="case-slide7"]  { background: #000; }
#case-slide8:checked  ~ .carousel-controls label[for="case-slide8"]  { background: #000; }
#case-slide9:checked  ~ .carousel-controls label[for="case-slide9"]  { background: #000; }
#case-slide10:checked ~ .carousel-controls label[for="case-slide10"] { background: #000; }
#case-slide11:checked ~ .carousel-controls label[for="case-slide11"] { background: #000; }

.cases-carousel-section {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  max-width: 1400px;
  margin: 60px auto;
  gap: 0px;
}

.cases-carousel-section .carousel-text {
  flex: 0 0 500px;
  font-size: 23px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  color: #000;
  line-height: 1.4;
  text-align: left;
}

.cases-carousel-section .carousel-text-a {
  flex: 0 0 500px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  color: #000;
  line-height: 1.4;
  text-align: left;
}

.cases-carousel-section .carousel-text-block {
  flex: 0 0 500px;
  position: relative;
  height: 670px;
}

.cases-carousel-section .carousel-text {
  position: absolute;
  bottom: 140px;
  left: 180px;
}

.cases-carousel-section .carousel-text-a {
  position: absolute;
  bottom: 115px;
  left: 180px;
}

/* tier3 carousel */
.tier3-carousel {
  width: 100%;
  max-width: 1100px;
  margin: 20px auto;
  position: relative;
  text-align: center;
  font-family: 'Inter', sans-serif;
}

.tier3-carousel input[type="radio"] { display: none; }

.tier3-carousel .carousel-wrapper {
  width: 100%;
  height: 670px;
  overflow: hidden;
  margin: 0 auto;
}

.tier3-carousel .carousel-track {
  display: flex;
  width: 100%;
  transition: transform 0.4s ease-in-out;
  will-change: transform;
}

.tier3-carousel .carousel-slide {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.tier3-carousel .carousel-slide img {
  width: 100%;
  height: auto;
  max-width: 1150px;
  max-height: 670px;
  object-fit: contain;
  display: block;
}

/* slide positions */
#tier3-slide1:checked  ~ .carousel-wrapper .carousel-track { transform: translateX(   0%); }
#tier3-slide2:checked  ~ .carousel-wrapper .carousel-track { transform: translateX( -100%); }
#tier3-slide3:checked  ~ .carousel-wrapper .carousel-track { transform: translateX( -200%); }
#tier3-slide4:checked  ~ .carousel-wrapper .carousel-track { transform: translateX( -300%); }
#tier3-slide5:checked  ~ .carousel-wrapper .carousel-track { transform: translateX( -400%); }
#tier3-slide6:checked  ~ .carousel-wrapper .carousel-track { transform: translateX( -500%); }
#tier3-slide7:checked  ~ .carousel-wrapper .carousel-track { transform: translateX( -600%); }
#tier3-slide8:checked  ~ .carousel-wrapper .carousel-track { transform: translateX( -700%); }
#tier3-slide9:checked  ~ .carousel-wrapper .carousel-track { transform: translateX( -800%); }
#tier3-slide10:checked ~ .carousel-wrapper .carousel-track { transform: translateX( -900%); }
#tier3-slide11:checked ~ .carousel-wrapper .carousel-track { transform: translateX(-1000%); }
#tier3-slide12:checked ~ .carousel-wrapper .carousel-track { transform: translateX(-1100%); }

/* arrows (same as tier2 carousel) */
.tier3-carousel .carousel-arrows {
  position: absolute;
  top: -120px;
  right: 0;
  width: 154px;
  height: 31px;
  pointer-events: none;
}

.tier3-carousel .carousel-arrows .arrow-art {
  width: 154px;
  height: auto;
  display: block;
  pointer-events: none;
}

.tier3-carousel .carousel-arrows label.arrow {
  display: none;
  position: absolute;
  top: 110%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}

.tier3-carousel .carousel-arrows label.prev { left: 15px; }
.tier3-carousel .carousel-arrows label.next { right: 15px; }

#tier3-slide1:checked  ~ .carousel-arrows label.slide1,
#tier3-slide2:checked  ~ .carousel-arrows label.slide2,
#tier3-slide3:checked  ~ .carousel-arrows label.slide3,
#tier3-slide4:checked  ~ .carousel-arrows label.slide4,
#tier3-slide5:checked  ~ .carousel-arrows label.slide5,
#tier3-slide6:checked  ~ .carousel-arrows label.slide6,
#tier3-slide7:checked  ~ .carousel-arrows label.slide7,
#tier3-slide8:checked  ~ .carousel-arrows label.slide8,
#tier3-slide9:checked  ~ .carousel-arrows label.slide9,
#tier3-slide10:checked ~ .carousel-arrows label.slide10,
#tier3-slide11:checked ~ .carousel-arrows label.slide11,
#tier3-slide12:checked ~ .carousel-arrows label.slide12 {
  display: block;
}

/* dots */
.tier3-carousel .carousel-controls {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.tier3-carousel .carousel-controls .dot {
  width: 12px;
  height: 12px;
  background: #ccc;
  border-radius: 50%;
  cursor: pointer;
}

#tier3-slide1:checked  ~ .carousel-controls label[for="tier3-slide1"]  { background: #000; }
#tier3-slide2:checked  ~ .carousel-controls label[for="tier3-slide2"]  { background: #000; }
#tier3-slide3:checked  ~ .carousel-controls label[for="tier3-slide3"]  { background: #000; }
#tier3-slide4:checked  ~ .carousel-controls label[for="tier3-slide4"]  { background: #000; }
#tier3-slide5:checked  ~ .carousel-controls label[for="tier3-slide5"]  { background: #000; }
#tier3-slide6:checked  ~ .carousel-controls label[for="tier3-slide6"]  { background: #000; }
#tier3-slide7:checked  ~ .carousel-controls label[for="tier3-slide7"]  { background: #000; }
#tier3-slide8:checked  ~ .carousel-controls label[for="tier3-slide8"]  { background: #000; }
#tier3-slide9:checked  ~ .carousel-controls label[for="tier3-slide9"]  { background: #000; }
#tier3-slide10:checked ~ .carousel-controls label[for="tier3-slide10"] { background: #000; }
#tier3-slide11:checked ~ .carousel-controls label[for="tier3-slide11"] { background: #000; }
#tier3-slide12:checked ~ .carousel-controls label[for="tier3-slide12"] { background: #000; }

.cases-carousel-section.tier3 .carousel-text-tier3 {
  flex: 0 0 500px;
  font-size: 23px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  color: #000;
  line-height: 1.4;
  text-align: left;
}

.cases-carousel-section.tier3 .carousel-text-tier3 {
  position: absolute;
  bottom: 95px;
  left: 180px;
}

.tier3-carousel .carousel-arrows label.arrow:focus {
  box-shadow: 0 0 0 3px rgba(0,0,0,0.12);
  border: 1px solid rgba(0,0,0,0.08);
}

/* 70% of orig size for carousels as requested */
.cases-carousel .carousel-wrapper {
  transform: scale(0.7) translateY(-220px);
  transform-origin: center center;
}

.tier3-carousel .carousel-wrapper {
  transform: scale(0.7) translateY(-370px);
  transform-origin: center center;
}

.cases-carousel .carousel-arrows {
  transform: translate(-130px, -80px);
}

.tier3-carousel .carousel-arrows {
  transform: translate(-130px, -150px);
}

.cases-carousel .carousel-controls {
  transform: translateY(-250px);
}

.tier3-carousel .carousel-controls {
  transform: translateY(-360px);
}

.cases-carousel-section .carousel-text-block {
  transform: translateY(-240px);
}

.cases-carousel-section.tier3 .carousel-text-block {
  transform: translateY(-360px);
}

body.site-page.cases {
  margin-bottom: -300px;
}

.page-inner-cases {
  height: 1650px;
  overflow: hidden;
}

/* (≤1910px) */ 
@media (max-width: 1910px) {
  body.site-page.cases .hero-banner.cases-hero .hero-text {
    font-size: 35px;
    line-height: 1;
  }

  .cases-carousel-section {
    margin-top: 0px;
  }
}

/* (≤1440px) */
@media (max-width: 1440px) {
  body.site-page.cases .hero-banner.cases-hero .hero-text {
    font-size: 30px;
    line-height: 1;
  }

  body.site-page.cases {
    padding-top: 40px;
  }

  body.site-page.cases .hero-banner.cases-hero,
  body.site-page.cases .hero-banner.cases-hero img {
    height: clamp(280px, 45vh, 380px);
  }

  .cases-hero .hero-text {
    top: 10%;
    padding: 0 14px;
    transform: translateX(-50%);
    position: absolute;
    left: 50%;
    text-align: center;
    font-size: clamp(18px, 2.5vw, 35px);
  }

  body.site-page.cases .cases-intro {
    width: 800px;
    height: 28px;
    margin: 25px auto 40px auto;
    font-size: 10px;
  }

  body.site-page.cases .cases-intro-a {
    width: 800px;
    height: 100px;
    text-align: center;
    margin: 20px auto 0px auto;
    font-size: 10px;
  }

  .cases-carousel-section .carousel-text,
  .cases-carousel-section.tier3 .carousel-text-tier3 {
    flex: 0 0 400px;
    font-size: 21px;
    left: 280px;
  }

  .cases-carousel-section .carousel-text-a {
    flex: 0 0 400px;
    font-size: 11px;
    left: 280px;
    bottom: 290px;
  }

  .cases-carousel-section .carousel-text {
    bottom: 310px;
  }

  .cases-carousel-section.tier3 .carousel-text-tier3 {
    bottom: 250px;
  }

  .cases-carousel {
    max-width: 600px;
    margin: 20px auto;
  }

  .tier3-carousel {
    max-width: 600px;
    margin: 20px auto;
  }

  .cases-carousel .carousel-slide img,
  .tier3-carousel .carousel-slide img {
    max-width: 600px;
    max-height: 400px;
  }

  .cases-carousel .carousel-arrows {
    top: -20px;
    right: -20px;
    width: 84px;
    height: 17px;
  }

  .tier3-carousel .carousel-arrows {
    top: -180px;
    right: -20px;
    width: 84px;
    height: 17px;
  }

  .cases-carousel .carousel-arrows .arrow-art,
  .tier3-carousel .carousel-arrows .arrow-art {
    width: 130px;
  }

  .cases-carousel .carousel-arrows label.arrow,
  .tier3-carousel .carousel-arrows label.arrow {
    top: 165%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
  }

  .cases-carousel .carousel-arrows label.prev { left: 11px; }
  .cases-carousel .carousel-arrows label.next { right: -35px; }

  .tier3-carousel .carousel-arrows label.prev { left: 11px; }
  .tier3-carousel .carousel-arrows label.next { right: -35px; }

  .cases-carousel-section,
  .cases-carousel-section.tier3 {
    transform: translateX(-100px);
  }

  .cases-carousel .carousel-controls .dot,
  .tier3-carousel .carousel-controls .dot {
    width: 10px;
    height: 10px;
  }

  .cases-carousel .carousel-controls {
    position: relative;
    bottom: 200px;
    margin-top: 0;
  }

  .tier3-carousel .carousel-controls {
    position: relative;
    bottom: 180px;
    margin-top: 0;
  }

  body.site-page.cases main.page-inner-cases {
    height: 1400px;
    overflow: hidden;
  }

  .cases-carousel-section {
    margin-top: 0px;
  }

  .cases-carousel-section.tier3 {
    margin-top: -200px;
  }

  .cases-carousel .carousel-wrapper {
    transform: scale(0.7) translateY(-180px);
    transform-origin: center center;
  }

  .tier3-carousel .carousel-wrapper {
    transform: scale(0.7) translateY(-520px);
    transform-origin: center center;
  }

  .cases-carousel .carousel-controls {
    transform: translateY(-210px);
  }

  .tier3-carousel .carousel-controls {
    transform: translateY(-470px);
  }

  .cases-carousel-section .carousel-text-block {
    transform: translateY(-220px);
  }

  .cases-carousel-section.tier3 .carousel-text-block {
    transform: translateY(-475px);
  }

  body.site-page.cases {
    margin-bottom: -300px;
  }

  .page-inner-cases {
    height: 1000px !important;
    overflow: hidden;
  }
}

/* (≤1000px) */
@media (max-width: 1000px) {
  body.site-page.cases .hero-banner.cases-hero .hero-text {
    font-size: 27px;
    line-height: 1;
  }

  body.site-page.cases {
    padding-top: 40px;
  }

  .cases-hero .hero-text {
    padding-top: 30px;
  }

  body.site-page.cases .cases-intro {
    width: 600px;
    height: 28px;
    margin: 20px auto 30px auto;
    font-size: 9px;
  }

  body.site-page.cases .cases-intro-a {
    width: 600px;
    height: 80px;
    text-align: center;
    margin: 15px auto 0px auto;
    font-size: 9px;
  }

  .cases-carousel-section .carousel-text,
  .cases-carousel-section.tier3 .carousel-text-tier3 {
    flex: 0 0 300px;
    font-size: 18px;
    left: 320px;
  }

  .cases-carousel-section .carousel-text-a {
    flex: 0 0 300px;
    font-size: 9px;
    left: 320px;
    bottom: 515px;
  }

  .cases-carousel-section .carousel-text {
    bottom: 530px;
  }

  .cases-carousel-section.tier3 .carousel-text-tier3 {
    bottom: 535px;
  }

  .cases-carousel {
    max-width: 300px;
    margin: 20px auto;
  }

  .tier3-carousel {
    max-width: 300px;
    margin: 20px auto;
  }

  .cases-carousel .carousel-slide img,
  .tier3-carousel .carousel-slide img {
    max-width: 300px;
    max-height: 200px;
  }

  .cases-carousel-section,
  .cases-carousel-section.tier3 {
    transform: translateX(-150px);
  }

  .cases-carousel .carousel-controls .dot,
  .tier3-carousel .carousel-controls .dot {
    width: 7px;
    height: 7px;
  }

  .cases-carousel .carousel-controls,
  .tier3-carousel .carousel-controls {
    position: relative;
    bottom: 440px;
    margin-top: 0;
  }

  body.site-page.cases main.page-inner-cases {
    height: 860px;
    overflow: hidden;
  }

  .cases-carousel-section {
    margin-top: 10px;
  }

  .cases-carousel-section.tier3 {
    margin-top: -450px;
  }

  .cases-carousel-section.tier3 {
    margin-top: -200px;
  }

  .cases-carousel .carousel-wrapper {
    transform: scale(0.7) translateY(-180px);
    transform-origin: center center;
  }

  .tier3-carousel .carousel-wrapper {
    transform: scale(0.7) translateY(-700px);
    transform-origin: center center;
  }

  .cases-carousel .carousel-controls {
    transform: translateY(-100px);
  }

  .tier3-carousel .carousel-controls {
    transform: translateY(-460px);
  }

  .cases-carousel-section .carousel-text-block {
    transform: translateY(-90px);
  }

  .cases-carousel-section.tier3 .carousel-text-block {
    transform: translateY(-430px);
  }

  .page-inner-cases {
    height: 700px !important;
    overflow: hidden;
  }

  .cases-carousel .carousel-arrows {
    top: -20px;
    right: -50px;
    width: 84px;
    height: 17px;
  }

  .tier3-carousel .carousel-arrows {
    top: -320px;
    right: -50px;
    width: 84px;
    height: 17px;
  }
}

/* (≤800px) */
@media (max-width: 800px) {
  body.site-page.cases .hero-banner.cases-hero .hero-text {
    font-size: 24px;
    line-height: 1;
  }

  body.site-page.cases {
    padding-top: 20px;
  }

  body.site-page.cases .hero-banner.cases-hero,
  body.site-page.cases .hero-banner.cases-hero img {
    height: clamp(180px, 35vh, 220px);
  }

  .cases-hero .hero-text {
    top: 5%;
    padding: 0;
    width: 95%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: clamp(12px, 2vw, 18px);
    margin-bottom: 12px;
    padding-top: 50px;
  }

  body.site-page.cases .cases-intro {
    width: 400px;
    height: 24px;
    margin: 15px auto 20px auto;
    font-size: 7px;
  }

  body.site-page.cases .cases-intro-a {
    width: 400px;
    height: 50px;
    text-align: center;
    margin: 10px auto 0px auto;
    font-size: 7px;
  }

  .cases-carousel-section .carousel-text,
  .cases-carousel-section.tier3 .carousel-text-tier3 {
    flex: 0 0 200px;
    font-size: 14px;
  }

  .cases-carousel-section .carousel-text-a {
    flex: 0 0 200px;
    font-size: 7px;
    bottom: 525px;
  }

  .cases-carousel-section .carousel-text {
    bottom: 540px;
  }

  .cases-carousel-section.tier3 .carousel-text-tier3 {
    bottom: 515px;
  }

  .cases-carousel {
    margin: 10px auto;
    min-width: 250px;
  }

  .tier3-carousel {
    margin: 10px auto;
    min-width: 250px;
  }

  .cases-carousel .carousel-controls .dot,
  .tier3-carousel .carousel-controls .dot {
    width: 4px;
    height: 4px;
  }

  .cases-carousel .carousel-controls,
  .tier3-carousel .carousel-controls {
    position: relative;
    bottom: 470px;
    margin-top: 0;
  }

  body.site-page.cases main.page-inner-cases {
    height: 760px;
    overflow: hidden;
  }

  .cases-carousel-section {
    margin-top: 50px;
  }

  .cases-carousel .carousel-controls {
    transform: translateY(-90px);
  }

  .tier3-carousel .carousel-controls {
    transform: translateY(-440px);
  }

  .page-inner-cases {
    height: 580px !important;
    overflow: hidden;
  }

  .tier3-carousel .carousel-arrows {
    top: -300px;
    right: -50px;
    width: 84px;
    height: 17px;
  }
}

@media (max-width: 500px) {
  body.site-page.cases .cases-intro, body.site-page.cases .cases-intro-a {
    width: 80vw;
  }
  .cases-carousel-section {
    transform: scale(0.6) translateX(-45%);
    transform-origin: top center;
  }
  .cases-carousel-section.tier3 {
    transform: scale(0.6) translateX(-45%) translateY(-40%);
    transform-origin: top center;
  }
}

/* ======
Visual ID
======= */

body.site-page.visid {
  background-color: var(--pelOffWhite);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding-top: 40px;
}

/* hero banner */
body.site-page.visid .hero-banner.visid-hero {
  position: relative;
  width: 100%;
  height: 793px;
  overflow: hidden;
}

body.site-page.visid .hero-banner.visid-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.site-page.visid .hero-banner.visid-hero .hero-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--White);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  margin: 0;
}

/* intro paragraph */
body.site-page.visid .visid-intro {
  width: 900px;
  height: 30px;
  text-align: center;
  margin: 30px auto 80px auto;
  font-size: 11px;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  line-height: 1.4;
  color: #000;
}

.site-page.visid .visid-section {
  width: 100%;
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
}

/* typography section */
.site-page.visid .typography {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 20px;
  align-items: start;
}

.site-page.visid .typography-text h2 {
  font-size: 23px;
  font-weight: 700;
  margin-bottom: 10px;
}

.site-page.visid .typography-text p {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
}

.site-page.visid .typography-images {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}

.site-page.visid .typography-images img:first-child {
  grid-column: span 2;
  width: 100%;
  height: auto;
  display: block;
}

.site-page.visid .typography-images img {
  width: 100%;
  height: auto;
  display: block;
}

/* color section */
.site-page.visid .color {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 20px;
  align-items: start;
}

.site-page.visid .color-text h2 {
  font-size: 23px;
  font-weight: 700;
  margin-bottom: 10px;
}

.site-page.visid .color-text p {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
}

.site-page.visid .color-image img {
  width: 100%;
  height: auto;
  max-width: 1085px;
  display: block;
}

/* sample graphics section */
.site-page.visid .graphics h2 {
  font-size: 23px;
  font-weight: 700;
  margin: 40px 0 20px 0;
  text-align: center;
}

.site-page.visid .graphics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px 40px;
}

.site-page.visid .graphic-card img {
  width: 100%;
  max-width: 722px;
  height: auto;
  display: block;
  margin-bottom: 10px;
}

.site-page.visid .graphic-text h3 {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 4px;
}

.site-page.visid .graphic-text h4 {
  font-size: 10px;
  font-weight: 700;
  margin-bottom: 4px;
}

.site-page.visid .graphic-text p {
  font-size: 10px;
  font-weight: 500;
  margin-bottom: 4px;
  line-height: 1.5;
}

.site-page.visid .graphic-text .disclaimer {
  font-size: 8px;
  font-weight: 500;
  color: #555;
  margin-top: 5px;
}

/* (≤1910px) */ 
@media (max-width: 1910px) {
  body.site-page.visid .hero-banner.visid-hero .hero-text {
    font-size: 35px;
    line-height: 1;
  }

  .page-inner-visid {
    transform: scale(0.955);
    transform-origin: top center;
  }

  body.site-page.visid main.page-inner-visid {
    height: 1600px;
    overflow: hidden;
  }
}

/* (≤1440px) */
@media (max-width: 1440px) {
  body.site-page.visid .hero-banner.visid-hero .hero-text {
    font-size: 30px;
    line-height: 1;
  }

  body.site-page.visid {
    padding-top: 40px;
  }

  body.site-page.visid .hero-banner.visid-hero,
  body.site-page.visid .hero-banner.visid-hero img {
    height: clamp(280px, 45vh, 380px);
  }

  .visid-hero .hero-text {
    top: 10%;
    padding: 0 14px;
    transform: translateX(-50%);
    position: absolute;
    left: 50%;
    text-align: center;
    font-size: clamp(18px, 2.5vw, 35px);
  }

  .page-inner-visid {
    transform: scale(0.88);
    transform-origin: top center;
  }

  body.site-page.visid main.page-inner-visid {
    height: 1440px;
    overflow: visible;
  }
}

/* (≤1000px) */
@media (max-width: 1000px) {
  body.site-page.visid .hero-banner.visid-hero .hero-text {
    font-size: 27px;
    line-height: 1;
  }

  body.site-page.visid {
    padding-top: 40px;
  }

  .visid-hero .hero-text {
    padding-top: 30px;
  }

  .page-inner-visid {
    transform: scale(0.78);
    transform-origin: top center;
  }

  body.site-page.visid .visid-intro {
    width: 800px;
    height: 28px;
    margin: 20px auto 60px auto;
  }

  body.site-page.visid main.page-inner-visid {
    height: 1240px;
    overflow: visible;
  }
}

@media (max-width: 900px) {
  body.site-page.visid main.page-inner-visid {
    height: 1200px;
    overflow: visible;
  }
}

/* (≤800px) */
@media (max-width: 800px) {
  body.site-page.visid .hero-banner.visid-hero .hero-text {
    font-size: 24px;
    line-height: 1;
  }

  body.site-page.visid {
    padding-top: 20px;
  }

  body.site-page.visid .hero-banner.visid-hero,
  body.site-page.visid .hero-banner.visid-hero img {
    height: clamp(180px, 35vh, 220px);
  }

  .visid-hero .hero-text {
    top: 5%;
    padding: 0;
    width: 95%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: clamp(12px, 2vw, 18px);
    margin-bottom: 12px;
    padding-top: 50px;
  }

  .page-inner-visid {
    transform: scale(0.70);
    transform-origin: top center;
  }

  body.site-page.visid .visid-intro {
    width: 540px;
    height: 28px;
    margin: 20px auto 50px auto;
  }

  body.site-page.visid main.page-inner-visid {
    height: 1000px;
    overflow: visible;
  }
}

@media (max-width: 700px) {
  body.site-page.visid main.page-inner-visid {
    height: 950px;
    overflow: visible;
  }
}

@media (max-width: 600px) {
  body.site-page.visid main.page-inner-visid {
    height: 850px;
    overflow: visible;
  }
}

/* ============== 
Design Guidelines
============== */ 

body.site-page.design { 
  background-color: var(--pelOffWhite); 
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale; 
  padding-top: 40px; 
}

/* hero banner */ 
body.site-page.design .hero-banner.design-hero { 
  position: relative; 
  width: 100%; 
  height: 793px; 
  overflow: hidden; 
} 

body.site-page.design .hero-banner.design-hero img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  display: block; 
} 

body.site-page.design .hero-banner.design-hero .hero-text { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  color: var(--White); 
  font-size: 40px; 
  font-weight: 700; 
  line-height: 1; 
  text-align: center; 
  margin: 0; 
} 

/* off-black section */ 
body.site-page.design .feature-strip-design { 
  background-color: #181A1D; 
  width: 100%; 
  max-width: 1920px; 
  min-height: 350px; 
  height: auto; 
  margin: 0 auto; 
  position: relative; 
  box-sizing: border-box; 
  padding-top: 70px; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
} 

.feature-strip-design-content { 
  width: 100%; 
  max-width: 1400px; 
  text-align: center; 
  margin-inline: 20px;
} 

.feature-strip-design-content .design-intro { 
  font-size: 11px; 
  font-weight: 500; 
  font-family: 'Inter', sans-serif; 
  color: #fff; 
  text-align: center; 
  line-height: 1.6; 
  max-width: 800px; 
  margin: 0 auto 80px auto; 
} 

.tabs { 
  width: 100%; 
  display: flex; 
  justify-content: center; 
  gap: 60px; 
  margin-inline: 5px;
} 

/* power & connectivity chart */ 
.power-connectivity { 
  width: 1500px; 
  margin: 0 auto 80px auto; 
  font-family: 'Inter', sans-serif; 
  text-align: center; 
} 

.power-connectivity h2 { 
  font-size: 23px; 
  font-weight: 700; 
  margin-bottom: 60px; 
} 

.requirements-chart { 
  display: grid; 
  grid-template-columns: 250px repeat(3, 1fr); 
  grid-template-rows: 540px 170px; 
  width: 1500px; 
  height: 710px; 
  border-top: 2px solid #000; 
  border-bottom: 2px solid #000; 
  margin: 0 auto; 
  box-sizing: border-box; 
  position: relative; 
} 

.requirements-chart {
  transform: scale(0.5);
  transform-origin: top center;
}

.requirements-chart::before { 
  content: ""; 
  position: absolute; 
  top: 540px; 
  left: 0; 
  width: 100%; 
  border-top: 2px solid #000; 
} 

.subheading { 
  font-size: 30px; 
  font-weight: 800; 
  color: #000; 
  display: flex; 
  align-items: flex-start; 
  justify-content: center; 
  text-align: left; 
  padding: 35px; 
  line-height: 1.2; 
} 

.col { 
  flex: 1; 
  padding: 20px 20px; 
  font-family: 'Inter', sans-serif; 
  font-size: 19px; 
  font-weight: 400; 
  color: #000; 
  text-align: left; 
  display: flex; 
  flex-direction: column; 
  justify-content: flex-start; 
  box-sizing: border-box; 
} 

.col.shaded { 
  background-color: rgba(217, 217, 217, 0.4); 
} 

.col ul { 
  margin: 0; 
  padding-left: 20px; 
} 

.col li { 
  margin-bottom: 10px; 
} 

.col.power-col { 
  grid-column: 2 / span 3; 
} 

/* layout ex tabs */ 
.tab-label { 
  display: inline-flex; 
  width: 182px; 
  height: 39px; 
  background-color: #fff; 
  color: #181A1D; 
  font-family: 'Inter', sans-serif; 
  font-weight: 500; 
  font-size: 11px; 
  justify-content: center; 
  align-items: center; 
  cursor: pointer; 
  border-radius: 2px; 
  transition: background 0.3s, color 0.3s; 
} 

#tab1:checked ~ .tabs label[for="tab1"], 
#tab2:checked ~ .tabs label[for="tab2"], 
#tab3:checked ~ .tabs label[for="tab3"], 
#tab4:checked ~ .tabs label[for="tab4"], 
#tab5:checked ~ .tabs label[for="tab5"] { 
  background-color: #404040; 
  color: #fff;
  font-weight: 700;
} 

.tab-contents { 
  width: 100vw; 
  position: relative; 
  left: 50%; 
  transform: translateX(-50%); 
  margin-top: 80px;
} 

.tab-content { 
  display: none; 
  background-color: #F5F7F9; 
  width: 100%; 
  padding: 50px; 
  box-sizing: border-box; 
  height: auto; 
} 

/* makes power and connectivity tab fixed height to match resize */
#content1 {
  height: 560px;
  overflow: hidden;
}

/* show tab content */ 
#tab1:checked ~ .tab-contents #content1, 
#tab2:checked ~ .tab-contents #content2, 
#tab3:checked ~ .tab-contents #content3, 
#tab4:checked ~ .tab-contents #content4, 
#tab5:checked ~ .tab-contents #content5 { 
  display: block; 
} 

.tab-content p { 
  color: #000; 
  font-size: 20px; 
} 

.layout-examples-intro { 
  width: 900px; 
  margin: 0 auto 60px auto; 
  text-align: center; 
  color: #000; 
  font-family: 'Inter', sans-serif; 
} 

.layout-examples-intro h2 { 
  font-size: 23px; 
  font-weight: 700; 
  margin-bottom: 40px; 
} 

.layout-examples-intro h3 { 
  font-size: 13px; 
  font-weight: 600; 
  margin-bottom: 20px; 
} 

.layout-examples-intro p { 
  font-size: 11px; 
  font-weight: 500; 
  line-height: 1.6; 
  margin-top: 10px; 
} 

/* hide checkbox */ 
.layout-toggle { 
  display: none; 
} 

.layout-rect { 
  width: 980px; 
  height: 74px; 
  background-color: #181A1D; 
  color: #fff; 
  font-family: 'Inter', sans-serif; 
  font-weight: 700; 
  font-size: 15px; 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  padding: 0 50px; 
  margin: 30px auto; 
  box-sizing: border-box; 
  cursor: pointer; 
  transition: background-color 0.2s ease; 
} 

.layout-rect:hover { 
  background-color: #222428; 
} 

.layout-icon { 
  font-size: 20px; 
  transition: transform 0.3s ease; 
} 

/* arrow rotate anim */ 
.layout-toggle:checked + .layout-rect .layout-icon { 
  transform: rotate(180deg); 
} 

.layout-dropdown { 
  width: 980px; 
  margin: 0 auto 20px auto; 
  padding: 20px 50px; 
  background-color: #000; 
  color: #ddd; 
  font-size: 9px; 
  font-family: 'Inter', sans-serif; 
  display: none; 
  box-sizing: border-box; 
} 

.layout-toggle:checked + .layout-rect + .layout-dropdown { 
  display: block; 
} 

/* equipment layouts dropdown */ 
.equip-layouts h3 { 
  font-family: 'Inter', sans-serif; 
  font-size: 13px; 
  font-weight: 600; 
  color: #fff; 
  margin-bottom: 50px; 
} 

.equip-layouts-sub { 
  display: flex; 
  justify-content: flex-start; 
  gap: 410px; 
  font-family: 'Inter', sans-serif; 
  font-size: 11px; 
  font-weight: 500; 
  color: #fff; 
  margin: 10px 0px 10px 90px; 
} 

.equip-layouts img { 
  width: 800px; 
  height: auto; 
  display: block; 
  margin: 0 auto; 
} 

/* tier 1-3 dropdown styles */ 
.tier-images { 
  display: flex; 
  justify-content: center; 
  align-items: flex-start; 
  gap: 40px; 
  margin-bottom: 40px; 
} 

.tier-images .tier-a { 
  width: 350px; 
  height: auto; 
} 

.tier-images .tier-b { 
  width: 350px; 
  height: auto; 
} 

.tier-divider { 
  width: 800px; 
  height: 2px; 
  background-color: #707070; 
  margin: 20px auto 40px auto; 
} 

.tier-stack { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  gap: 40px; 
  margin-bottom: 40px; 
} 

.tier-stack-img { 
  width: 700px; 
  height: auto; 
} 

/* cord mngmnt tab */ 
.cord-management { 
  width: 100%; 
  max-width: 1200px; 
  margin: 0 auto 10px auto; 
  font-family: 'Inter', sans-serif; 
  color: #000; 
  text-align: center; 
}

.cord-management h2 { 
  font-size: 23px; 
  font-weight: 700; 
  margin-bottom: 10px; 
} 

.cord-management p { 
  font-size: 12px; 
  font-weight: 400; 
  margin: 0 auto 40px auto; 
  max-width: 700px; 
  line-height: 1.6; 
  text-align: center; 
} 

.cord-images-row { 
  display: flex; 
  justify-content: center; 
  align-items: flex-start; 
  gap: 80px; 
} 

.cord-column { 
  display: flex; 
  flex-direction: column; 
  align-items: flex-start; 
  text-align: left; 
  width: 250px; 
} 

.cord-column img { 
  height: auto;
  max-height: 280px; 
  object-fit: contain; 
  display: block; 
  margin-bottom: 10px;
} 

.cord-column.double-column { 
  display: flex; 
  flex-direction: column; 
  align-items: flex-start; 
  width: 500px; 
  text-align: left; 
} 

.cord-column.double-column .cord-pair { 
  display: flex; 
  gap: 0; 
  width: 100%; 
  line-height: 0; 
  margin-bottom: 0; 
} 

.cord-column.double-column .cord-pair img { 
  width: 55.5%;
  height: auto;
  max-height: 560px;
  object-fit: contain;
  display: block;
  margin-bottom: 10px;
} 

.cord-column .cord-title, 
.cord-column.double-column .cord-title { 
  font-family: 'Inter', sans-serif; 
  font-weight: 700; 
  font-size: 12px; 
  margin: 0 0 5px 0; 
  padding: 0; 
  text-align: left; 
} 

.cord-column .cord-text, 
.cord-column.double-column .cord-text { 
  font-family: 'Inter', sans-serif; 
  font-weight: 500; 
  font-size: 10px; 
  margin: 0 0 0 0; 
  padding: 0; 
  text-align: left; 
} 

/* construct materials tab */ 
.construction-heading { 
  font-family: 'Inter', sans-serif; 
  font-size: 23px; 
  font-weight: 700; 
  color: #000; 
  line-height: 1.4; 
  margin-bottom: 40px; 
  text-align: center; 
} 

.construction-tab .construction-materials { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  gap: 20px; 
  margin-top: 20px; 
  text-align: left; 
} 

.construction-tab .materials-row { 
  display: flex; 
  justify-content: center; 
  gap: 75px; 
} 

.construction-tab .material-item { 
  display: flex; 
  flex-direction: column; 
  align-items: flex-start; 
  width: 600px; 
} 

.construction-tab .material-item img { 
  width: 600px; 
  height: 228px; 
  object-fit: cover; 
  display: block; 
} 

.construction-tab .material-subheading { 
  font-family: 'Inter', sans-serif; 
  font-weight: 700; 
  font-size: 12px; 
  color: #000; 
  margin-top: 10px; 
  margin-bottom: 5px; 
} 

.construction-tab .material-text-bold { 
  font-family: 'Inter', sans-serif; 
  font-weight: 700; 
  font-size: 10px; 
  color: #000; 
  margin-bottom: 0px; 
} 

.construction-tab .material-text-medium { 
  font-family: 'Inter', sans-serif; 
  font-weight: 500; 
  font-size: 10px; 
  color: #000; 
  margin-top: 0px; 
} 

.construction-tab .material-text-medium a {
  color: inherit;
  text-decoration: underline;
}

.construction-tab .material-text-medium a:hover {
  text-decoration: none;
}

.construction-tab .material-text-small { 
  font-family: 'Inter', sans-serif; 
  font-weight: 500; 
  font-size: 9px; 
  color: #000; 
  margin-top: 0px; 
}

.construction-tab .material-text-small a {
  color: inherit;
  text-decoration: underline;
}

.construction-tab .material-text-small a:hover {
  text-decoration: none;
}

/* fixt and furn tab */
.fixtures-furnishings { 
  max-width: 1400px; 
  margin: 0 auto; 
  overflow-x: auto; 
  padding: 0 10px; 
} 

.fixtures-heading { 
  font-family: 'Inter', sans-serif; 
  font-size: 23px; 
  font-weight: 700; 
  color: #000; 
  margin-bottom: 50px; 
} 

.fixtures-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0px 20px;
  justify-items: start;
  max-width: 1400px;
  margin: 0 auto;
}

.fixtures-col { 
  display: flex; 
  flex-direction: column; 
  align-items: flex-start; 
  text-align: left; 
} 

.fixtures-col img { 
  height: 250px; 
  width: auto; 
  max-width: 500px; 
  object-fit: contain; 
  margin-bottom: 5px; 
} 

.fixtures-col .fixtures-subtitle { 
  font-family: 'Inter', sans-serif; 
  font-size: 12px; 
  font-weight: 700; 
} 

.fixtures-col .fixtures-type { 
  font-family: 'Inter', sans-serif; 
  font-size: 10px; 
  font-weight: 700; 
  margin-bottom: 0; 
} 

.fixtures-col .fixtures-desc-a { 
  font-family: 'Inter', sans-serif; 
  font-size: 10px; 
  font-weight: 500; 
  line-height: 1.5; 
  margin: 0 0 0 0; 
  max-width: 450px; 
}

.fixtures-col .fixtures-desc { 
  font-family: 'Inter', sans-serif; 
  font-size: 10px; 
  font-weight: 500; 
  line-height: 1.5; 
  margin: 0 0 40px 0; 
  max-width: 450px; 
} 

.fixtures-desc a { 
  color: inherit; 
  font: inherit; 
  text-decoration: underline; 
} 

.fixtures-desc a:hover { 
  text-decoration: underline; 
}

/* (≤1910px) */ 
@media (max-width: 1910px) {
  body.site-page.design .hero-banner.design-hero .hero-text {
    font-size: 35px;
    line-height: 1;
  }
}

/* (≤1440px) */
@media (max-width: 1440px) {
  body.site-page.design .hero-banner.design-hero .hero-text {
    font-size: 30px;
    line-height: 1;
  }

  body.site-page.design {
    padding-top: 40px;
  }

  body.site-page.design .hero-banner.design-hero,
  body.site-page.design .hero-banner.design-hero img {
    height: clamp(280px, 45vh, 380px);
  }

  .design-hero .hero-text {
    top: 10%;
    padding: 0 14px;
    transform: translateX(-50%);
    position: absolute;
    left: 50%;
    text-align: center;
    font-size: clamp(18px, 2.5vw, 35px);
  }

  .feature-strip-design-content { 
    max-width: 1000px;
  } 

  .tab-label { 
    width: 190px; 
    height: 35px; 
    font-size: 10px;
  } 

  .tabs { 
    gap: 35px; 
  } 

  .power-connectivity h2 {
    transform: translateX(-200px);
    font-size: 21px;
  }

  .requirements-chart {
    transform: scale(0.45) translateX(calc(-240px / 0.45));
    transform-origin: top center;
  }

  #content1 {
    height: 530px;
    overflow: hidden;
  }

  .layout-examples-intro {
    width: 80%;
  }
  .layout-examples-intro h2 {
    font-size: 21px;
  }
  .layout-examples-intro h3 {
    font-size: 12px;
  }
  .layout-examples-intro p {
    font-size: 10px;
  }
  .layout-rect {
    width: 90%;
    font-size: 14px;
    padding: 0 40px;
  }
  .layout-dropdown {
    width: 90%;
    font-size: 8px;
    padding: 15px 40px;
  }
  .equip-layouts img {
    max-width: 700px;
  }
  .tier-images .tier-a,
  .tier-images .tier-b {
    width: 300px;
  }
  .tier-stack-img {
    max-width: 600px;
  }
  .tier-divider {
    width: 700px;
  }
  .equip-layouts-sub {
    gap: 300px;
  }

  .cord-management h2 {
    font-size: 20px;
  }
  .cord-management p {
    font-size: 11px;
  }

  .cord-column.double-column .cord-pair img { 
    width: 40%;
  } 

  .cord-column img { 
    width: 80%;
  } 

  .cord-images-row {  
    gap: 60px; 
  } 

  .cord-column .cord-title, 
  .cord-column.double-column .cord-title { 
    font-size: 11px; 
  } 

  .cord-column .cord-text, 
  .cord-column.double-column .cord-text {
    font-size: 9px;  
  } 

  .construction-materials {
    transform: scale(0.80)
  }

  #content4 .construction-materials {
    position: relative;
    top: -70px;
  }

  #content4 {
    max-height: 740px;
  }

  .construction-heading { 
    font-size: 21px;
    margin-bottom: 30px; 
  } 

   .fixtures-furnishings {
    padding: 0 8px;
  }

  .fixtures-heading {
    font-size: 20px;
    margin-bottom: 40px;
  }

  .fixtures-col img {
    height: 220px;
    max-width: 450px;
  }

  .fixtures-col .fixtures-subtitle {
    font-size: 11px;
  }

  .fixtures-col .fixtures-type,
  .fixtures-col .fixtures-desc-a,
  .fixtures-col .fixtures-desc {
    font-size: 9px;
  }
}

/* (≤1000px) */
@media (max-width: 1000px) {
  body.site-page.design .hero-banner.design-hero .hero-text {
    font-size: 27px;
    line-height: 1;
  }

  body.site-page.design {
    padding-top: 40px;
  }

  .visid-hero .hero-text {
    padding-top: 30px;
  }

  .feature-strip-design-content { 
    max-width: 700px;
  } 

  .feature-strip-design-content .design-intro { 
    font-size: 10px; 
    max-width: 700px; 
    margin: 0 auto 40px auto; 
  } 

  .tab-label { 
    width: 190px; 
    height: 28px; 
    font-size: 8px;
  } 

  .tabs { 
    gap: 30px; 
  } 

  .power-connectivity h2 {
    transform: translateX(-300px);
    font-size: 20px;
  }

  .requirements-chart {
    transform: scale(0.40) translateX(calc(-310px / 0.40));
    transform-origin: top center;
  }

  #content1 {
    height: 480px;
    overflow: hidden;
  }

  .layout-examples-intro {
    width: 90%;
  }
  .layout-examples-intro h2 {
    font-size: 20px;
  }
  .layout-examples-intro h3 {
    font-size: 11px;
  }
  .layout-examples-intro p {
    font-size: 9px;
  }
  .layout-rect {
    width: 95%;
    font-size: 13px;
    padding: 0 20px;
  }
  .layout-dropdown {
    width: 95%;
    font-size: 8px;
    padding: 15px 20px;
  }
  .equip-layouts img {
    max-width: 600px;
  }
  .tier-images .tier-a,
  .tier-images .tier-b {
    width: 250px;
  }
  .tier-stack-img {
    max-width: 500px;
  }
  .tier-divider {
    width: 600px;
  }
  .equip-layouts-sub {
    gap: 200px;
  }

  .cord-management h2 {
    font-size: 18px;
  }

  .cord-management p {
    font-size: 10px;
  }

  .cord-column.double-column .cord-pair img { 
    width: 40%;
  } 

  .cord-column img { 
    width: 80%;
  } 

  .cord-images-row {  
    gap: 40px; 
  } 

  .cord-column .cord-title, 
  .cord-column.double-column .cord-title { 
    font-size: 10px; 
  } 

  .cord-column .cord-text, 
  .cord-column.double-column .cord-text {
    font-size: 8px;  
  } 

  .construction-materials {
    transform: scale(0.65)
  }

  #content4 .construction-materials {
    position: relative;
    top: -110px;
  }

  #content4 {
    max-height: 600px;
  }

  .construction-heading { 
    font-size: 20px;
    margin-bottom: 0px; 
  } 

  .fixtures-furnishings {
    padding: 0 6px;
  }

  .fixtures-heading {
    font-size: 18px;
    margin-bottom: 35px;
  }

  .fixtures-grid {
    grid-template-columns: 1fr;
    gap: 0px 15px;
  }

  .fixtures-col img {
    height: 200px;
    max-width: 400px;
  }

  .fixtures-col .fixtures-subtitle {
    font-size: 10px;
  }

  .fixtures-col .fixtures-type,
  .fixtures-col .fixtures-desc-a,
  .fixtures-col .fixtures-desc {
    font-size: 8px;
  }
}

/* (≤800px) */
@media (max-width: 800px) {
  body.site-page.design .hero-banner.design-hero .hero-text {
    font-size: 24px;
    line-height: 1;
  }

  body.site-page.design {
    padding-top: 20px;
  }

  body.site-page.design .hero-banner.design-hero,
  body.site-page.design .hero-banner.design-hero img {
    height: clamp(180px, 35vh, 220px);
  }

  .design-hero .hero-text {
    top: 5%;
    padding: 0;
    width: 95%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: clamp(12px, 2vw, 18px);
    margin-bottom: 12px;
    padding-top: 50px;
  }

  .feature-strip-design-content { 
    max-width: 480px;
  } 

  .feature-strip-design-content .design-intro { 
    font-size: 8px; 
    max-width: 480px; 
    margin: 0 auto 20px auto; 
  } 

  body.site-page.design .feature-strip-design {
    min-height: auto;
    height: auto;
    padding-top: 40px;
  }

  .tab-content {
    height: auto !important;
    overflow: visible !important;
  }

  .tabs { 
    gap: 10px; 
  } 

  .tab-label { 
    width: 100px; 
    height: 22px; 
    font-size: 4px;
  } 

  .power-connectivity h2 {
    transform: translateX(-530px);
    font-size: 16px;
  }

  .requirements-chart {
    transform: scale(0.30) translateX(calc(-550px / 0.30));
    transform-origin: top center;
    width: auto;
    height: auto;
    margin-bottom: 0;
  }

  .power-connectivity {
    height: 350px;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  #content1 {
    padding-bottom: 0;
  }

  .layout-examples-intro {
    width: 95%;
  }
  .layout-examples-intro h2 {
    font-size: 18px;
  }
  .layout-examples-intro h3 {
    font-size: 10px;
  }
  .layout-examples-intro p {
    font-size: 9px;
  }
   .layout-rect {
    width: 95%;
    font-size: 12px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
  }
  .layout-icon {
    transform: none;
  }
  .layout-dropdown {
    width: 95%;
    font-size: 8px;
    padding: 10px 20px;
  }
  .equip-layouts-sub {
    flex-direction: column;
    gap: 10px;
    margin-left: 0;
  }
  .equip-layouts img {
    max-width: 100%;
  }
  .tier-images {
    flex-direction: column;
    gap: 20px;
  }
  .tier-images .tier-a,
  .tier-images .tier-b {
    width: 100%;
  }
  .tier-stack-img {
    max-width: 100%;
  }
  .tier-divider {
    width: 100%;
  }
  
  .cord-management h2 {
    font-size: 16px;
  }

  .cord-management p {
    font-size: 9px;
  }

  .cord-column.double-column .cord-pair img { 
    width: 40%;
  } 

  .cord-column img { 
    width: 80%;
  } 

  .cord-images-row {  
    gap: 20px; 
  } 

  .cord-column .cord-title, 
  .cord-column.double-column .cord-title { 
    font-size: 9px; 
  } 

  .cord-column .cord-text, 
  .cord-column.double-column .cord-text {
    font-size: 7px;  
  } 

  .construction-materials {
    transform: scale(0.45)
  }

  #content4 .construction-materials {
    position: relative;
  }

  #content4 {
    max-height: 480px;
  }

  .construction-tab .material-item {
    width: 300px; 
  } 

  .construction-tab .material-item img { 
    width: 300px; 
    height: 114px; 
  } 

  .construction-heading { 
    font-size: 16px;
    margin-bottom: 15px; 
  } 

  .fixtures-furnishings {
    padding: 0 4px;
  }

  .fixtures-heading {
    font-size: 16px;
    margin-bottom: 30px;
  }

  .fixtures-col img {
    height: 180px;
    max-width: 350px;
  }

  .fixtures-col .fixtures-subtitle {
    font-size: 9px;
  }

  .fixtures-col .fixtures-type,
  .fixtures-col .fixtures-desc-a,
  .fixtures-col .fixtures-desc {
    font-size: 7px;
  }
}

/* =======================
Build Your Cart - Required
======================== */ 

body.site-page.cartone {
  background-color: var(--pelOffWhite);
  -webkit-font-smoothing:antialiased; /* grayscale antialiasing */
  -moz-osx-font-smoothing:grayscale; /* grayscale antialiasing */
  padding-top: 40px;
}

body.site-page.cartone .page-inner {
  max-width: 1920px;
  max-height: 2190px;
  margin: 0;
  padding: 28px 0 80px 0;
  box-sizing: border-box;
}

.main-intro {
  margin-top: 60px;
  text-align: center;
}

.welcome-heading {
  font-family: 'Inter', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--pelBlack, #000);
  margin: 0;
}

.section-heading {
  font-family: 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: var(--pelBlack, #000);
  text-align: center;
  margin: 60px 40px;
}

.section-subtext {
  font-family: 'Inter', sans-serif;
  font-size: 19px;
  font-weight: 400;
  color: var(--pelBlack, #000);
  text-align: center;
  margin-top: 40px;
  line-height: 1.5;
}

.tier-options {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin-top: 40px;
}

.tier-btn {
  width: 180px;
  height: 80px;
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 400;
  color: #000;
  background-color: #fff;
  border: 2px solid #000;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.tier-btn:hover {
  background-color: #b8b8b8;
  color: #000;
}

.tier-btn.selected {
  background-color: #404040;
  color: #FFF;
}

.equipment-inputs {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 60px;
  margin-top: 40px;
}

.equipment-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.equipment-label {
  font-family: 'Inter', sans-serif;
  font-size: 25px;
  font-weight: 400;
  color: var(--pelBlack, #000);
  margin-bottom: 12px;
}

.equipment-box {
  width: 135px;
  height: 45px;
  background-color: #fff;
  border: 2px solid #000;
  border-radius: 6px;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 25px;
  font-weight: 400;
  color: #000;
}

.threecol-container {
  width: 1400px;
  height: 870px;
  background-color: #fff;
  border: 1px solid #707070;
  margin: 40px 50px 10px auto;
  border-radius: 4px;
}

.select-one-label {
  font-family: 'Inter', sans-serif;
  font-size: 23px;
  font-weight: 600;
  color: #000;
  position: relative;
  top: 20px;
  left: 40px;
  text-align: left;
  margin: 0;
}

.door-checkboxes {
  display: flex;
  margin-top: 40px;
  width: 100%;
}

.checkbox-column {
  flex: 1;
  display: flex;
  align-items: center;
  padding-left: 30px;
  position: relative;
  cursor: pointer;
}

.door-checkbox {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkmark {
  width: 36px;
  height: 36px;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 4px;
  display: inline-block;
  position: relative;
}

.checkmark::after {
  content: "";
  position: absolute;
  display: none;
  left: 10px;
  top: 4px;
  width: 10px;
  height: 18px;
  border: solid #000;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.door-checkbox:checked + .checkmark::after {
  display: block;
}

.door-text-columns {
  display: flex;
  width: 100%;
  margin-top: 40px;
}

.door-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 30px;
}

.door-header {
  font-family: 'Inter', sans-serif;
  font-size: 26px;
  font-weight: 600;
  color: #000;
  margin: 0 0 0 0;
}

.door-subheader {
  font-family: 'Inter', sans-serif;
  font-size: 23px;
  font-weight: 600;
  color: #000;
  margin: 5px 0 0 0;
}

.door-description {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #000;
  margin-top: 10px;
  line-height: 1.4;
}

.door-description .underline {
  text-decoration: underline;
}

.door-image-wrapper {
  text-align: center;
  margin-top: 20px;
}

.door-image {
  width: 100%;
  height: auto;
  display: block;  
}

.twocol-container {
  width: 1400px;
  height: 392px;
  margin: 40px 50px 0 auto;
  display: flex;
  border-radius: 4px;
  border: 1px solid #707070;
  gap: 0;
}

.twocol-column {
  flex: 1;
  background-color: #fff;
  position: relative;
  border: none;
}

.right-column {
  background-color: #000;
  flex: 1;
  position: relative;
  border: none;
}

.twocol-image {
  width: auto;
  height: 100%;
  display: block;
  margin-left: 25px;
}

.left-header {
  font-family: 'Inter', sans-serif;
  font-size: 26px;
  font-weight: 600;
  color: #000;
  position: absolute;
  top: 40px;
  left: 60px;
  margin: 0;
}

.left-subheader {
  font-family: 'Inter', sans-serif;
  font-size: 23px;
  font-weight: 600;
  color: #000;
  position: absolute;
  top: 70px;
  left: 60px;
  margin: 0;
}

.left-subtext {
  font-family: 'Inter', sans-serif;
  font-size: 21px;
  font-weight: 400;
  color: #000;
  position: absolute;
  top: 120px;
  left: 60px;
  margin: 0;
  line-height: 1.4;
}

.left-subtext .underline {
  text-decoration: underline;
}

.add-to-cart-btn {
  width: 260px;
  height: 53px;
  margin-top: 280px;
  margin-left: 60px;
  border: 2px solid #000;
  background-color: #fff;
  color: #000;
  font-family: 'Inter', sans-serif;
  font-size: 21px;
  font-weight: 400;
  cursor: pointer;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.2s, color 0.2s;
}

.add-to-cart-btn.active {
  background-color: #404040;
  color: #fff;
}

.quantity-box {
  width: 260px;
  height: 50px;
  border: 2px solid #000;
  display: flex;
  margin-top: 300px;
  margin-left: 60px;
  box-sizing: border-box;
}

.quantity-label {
  width: 150px;
  border-right: 2px solid #000;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Inter', sans-serif;
  font-size: 21px;
  font-weight: 400;
  color: #000;
  background-color: #fff;
}

.quantity-input {
  width: 110px;
  height: 100%;
  border: none;
  outline: none;
  font-family: 'Inter', sans-serif;
  font-size: 21px;
  font-weight: 400;
  color: #000;
  text-align: center;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0;
}

.quantity-input::placeholder {
  color: #707070;
}

.nextpage-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 60px;
  margin-right: 60px;
}

.nextpage-box {
  width: 216px;
  height: 95px;
  border: 2px solid #000;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  box-sizing: border-box;
  position: relative;
}

.nextpage-text {
  font-family: 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: #000;
  margin-left: 10px;
}

.nextpage-triangle {
  width: 0;
  height: 0;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 34px solid #000;
  transform: rotate(0deg);
  cursor: pointer;
  transition: border-left-color 0.2s;
  margin-right: 15px;
}

.nextpage-triangle:hover {
  border-left-color: #b8b8b8;
}

.project-name-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.project-name-label {
  font-family: "Inter", sans-serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--Black);
  margin-top: -30px;
}

.project-name-input {
  width: 500px;
  height: 45px;
  background-color: white;
  border: 1px solid black;
  padding: 8px 12px;
  font-family: "Inter", sans-serif;
  font-size: 22px;
  color: var(--Black);
}

/* =========================
Build Your Cart - A La Carte
========================= */ 

body.site-page.carttwo {
  background-color: var(--pelOffWhite);
  -webkit-font-smoothing:antialiased; /* grayscale antialiasing */
  -moz-osx-font-smoothing:grayscale; /* grayscale antialiasing */
  padding-top: 40px;
}

body.site-page.carttwo .page-inner {
  max-width: 1920px;
  max-height: 2380px;
  margin: 0;
  padding: 28px 0 80px 0;
  box-sizing: border-box;
}

.alacarte-container {
  width: 1714px;
  height: 1560px;
  background-color: #fff;
  border: 1px solid #000;
  margin: 60px auto 0;
  display: block;
}

.alacarte-heading {
  position: relative;
  top: 40px;
  left: 50px;
  font-family: 'Inter', sans-serif;
  font-size: 23px;
  font-weight: 600;
  color: #000;
  margin: 0;
}

.alacarte-columns {
  display: flex;
  justify-content: center;
  gap: 250px;
  margin: 80px 200px 0;
}

.alacarte-col {
  flex: 1.4;
  text-align: left;
}

.modality-title {
  font-family: 'Inter', sans-serif;
  font-size: 26px;
  font-weight: 600;
  color: #000;
  margin: 0 0 8px 0;
}

.modality-sub {
  font-family: 'Inter', sans-serif;
  font-size: 23px;
  font-weight: 600;
  color: #000;
  margin: 0 0 40px 0;
}

.modality-desc .desc-title {
  font-family: 'Inter', sans-serif;
  font-size: 21px;
  font-weight: 400;
  text-decoration: underline;
  margin: 0 0 8px 0;
}

.modality-desc .desc-text {
  font-family: 'Inter', sans-serif;
  font-size: 21px;
  font-weight: 400;
  margin: 0;
  color: #000;
}

.checkbox-label {
  display: flex;
  align-items: center;
  font-family: 'Inter', sans-serif;
  font-size: 21px;
  font-weight: 400;
  color: #000;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.custom-checkbox {
  width: 40px;
  height: 40px;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 4px;
  display: inline-block;
  position: relative;
  margin-right: 10px;
}

.custom-checkbox::after {
  content: "";
  position: absolute;
  display: none;
  left: 11px;
  top: 6px;
  width: 10px;
  height: 18px;
  border: solid #000;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.checkbox-label input[type="checkbox"]:checked + .custom-checkbox::after {
  display: block;
}

.modality-options {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  margin-top: 40px;
}

.or-text {
  font-family: 'Inter', sans-serif;
  font-size: 23px;
  font-weight: 700;
  text-decoration: underline;
  color: #000;
}

.alacarte-image {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

.alacarte-image img {
  max-width: 100%;
  height: auto;
  border: 1px solid #000;
}

.second-container {
  width: 1714px;
  height: 1220px;
  background-color: #fff;
  border: 1px solid #000;
  margin: 60px auto 0;
  position: relative;
}

.mirror-chart,
.mirror-chart * {
  box-sizing: border-box;
}

.mirror-chart {
  margin-top: 40px;
  margin-left: 50px;
  width: 817px;
  border: 1px solid #000;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  background-color: #fff;
}

.chart-header {
  display: flex;
  height: 104px;
  border-bottom: 1px solid #000;
  width: 100%;
}


.chart-header-left {
  width: 616px;
  background-color: #181A1D;
  color: #fff;
  font-size: 28px;
  display: flex;
  align-items: center;
  padding-left: 20px;
}

.chart-header-right {
  width: 201px;
  background-color: #404040;
  color: #fff;
  font-size: 28px;
  display: flex;
  align-items: center;
  padding-left: 20px;
}

.chart-body .chart-row {
  display: flex;
  height: 104px;
  border-bottom: 1px solid #000;
  width: 100%;
}

.chart-cell-left {
  width: 616px;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding-left: 20px;
  font-family: "Inter", sans-serif;
  font-size: 23px;
  font-weight: 600;
  color: #000;
  border-bottom: 1px solid #000;
}

.chart-cell-right {
  width: 201px;
  background-color: rgba(217, 217, 217, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.qty-input {
  width: 98px;
  height: 45px;
  border: 1px solid #000;
  text-align: center;
  font-size: 21px;
  font-family: "Inter", sans-serif;
  line-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 25px;
}

.mirror-side-title {
  font-family: "Inter", sans-serif;
  font-size: 29px;
  font-weight: 700;
  color: #000;
  text-align: left;
  margin-left: calc(817px + 120px);
  margin-top: -1130px;
  position: relative;
  width: fit-content;
}

.mirror-side-subtitle {
  font-family: "Inter", sans-serif;
  font-size: 26px;
  font-weight: 600;
  color: #000;
  text-align: left;
  margin-left: calc(817px + 120px);
  margin-top: -10px;
  position: relative;
  width: fit-content;
}

.mirror-side-desc {
  font-family: "Inter", sans-serif;
  font-size: 23px;
  font-weight: 400;
  color: #000;
  text-align: left;
  margin-left: calc(817px + 120px);
  margin-top: 20px;
  line-height: 1.5;
  white-space: normal;
  width: 500px;
}

.mirror-side-image {
  margin-left: calc(817px + 120px);
  margin-top: 40px;
  display: block;
  position: relative;
  width: 700px;
  height: auto;
  max-width: 700px;
  object-fit: contain;
  top: 5%;
}

.mirror-wall-image {
  margin-left: calc(817px + 120px);
  margin-top: 40px;
  display: block;
  position: relative;
  width: 700px;
  height: auto;
  max-width: 700px;
  object-fit: contain;
  top: 0%;
}

.page-buttons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 60px;
  margin-top: 60px;
  margin-right: 60px;
}

.backpage-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 60px;
  margin-right: calc(60px + 216px + 60px);
}

.backpage-box {
  width: 216px;
  height: 95px;
  border: 2px solid #000;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  box-sizing: border-box;
  position: relative;
}

.backpage-text {
  font-family: 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: #000;
  margin-right: 20px;
}

.backpage-triangle {
  width: 0;
  height: 0;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 34px solid #000;
  transform: rotate(180deg);
  cursor: pointer;
  transition: border-left-color 0.2s;
  margin-left: 15px;
}

.backpage-triangle:hover {
  border-left-color: #b8b8b8;
}

/* ====================
Build Your Cart - Forms
===================== */ 

body.site-page.cartforms {
  background-color: var(--pelOffWhite);
  -webkit-font-smoothing:antialiased; /* grayscale antialiasing */
  -moz-osx-font-smoothing:grayscale; /* grayscale antialiasing */
  padding-top: 40px;
}

body.site-page.cartforms .page-inner {
  max-width: 1920px;
  max-height: 910px;
  margin: 0;
  padding: 28px 0 80px 0;
  box-sizing: border-box;
}

.tabs-section {
  margin-top: 30px;
  margin-left: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tabs-bar-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  gap: 10px;
}

.tabs-arrow-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin-top: 22px;
}

.tabs-arrow-left,
.tabs-arrow-right {
  width: 0;
  height: 0;
  cursor: pointer;
}

.tabs-arrow-left {
  margin-right: 10px;
  border-top: 24px solid transparent;
  border-bottom: 24px solid transparent;
  border-right: 40px solid black;
}

.tabs-arrow-right {
  margin-left: 10px;
  border-top: 24px solid transparent;
  border-bottom: 24px solid transparent;
  border-left: 40px solid black;
}

.arrow-label {
  font-family: "Inter", sans-serif;
  font-size: 18px;
  color: #000;
  margin-top: 5px;
}

.tabs-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.tab-button {
  width: 208px;
  height: 55px;
  background-color: #fff;
  border: 2px solid #000;
  color: #000;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.tab-button:hover {
  background-color: #e6e6e6;
  color: #000;
}

.tab-button.active {
  background-color: #B8B8B8;
}

.tab-content-container {
  width: 1656px;
  height: 1110px;
  background-color: var(--pelOffWhite);
  margin-top: 60px;
  border: 2px solid #9D9D9D;
  border-radius: 8px;
  padding: 30px;
  box-sizing: border-box;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* tab 1 - design support */
.form-question-line {
  margin-top: -40px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.question-text {
  font-family: "Inter", sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: #000;
}

.required-text {
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #B8B8B8;
}

.form-description {
  width: 1256px;
  margin-top: 30px;
  margin-left: 120px;
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #000;
  line-height: 1.5;
}

.design-needed-options {
  margin-top: 50px;
  margin-left: -50px;
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 100px;
  font-family: "Inter", sans-serif;
}

.custom-checkbox {
  display: flex;
  align-items: center;
  gap: 20px;
  cursor: pointer;
}

.custom-checkbox input[type="checkbox"] {
  display: none;
}

.checkmark {
  width: 52px;
  height: 52px;
  background-color: #fff;
  border: 1px solid #000;
  position: relative;
  flex-shrink: 0;
}

.checkmark::after {
  content: "";
  position: absolute;
  display: none;
  left: 15px;
  top: 8px;
  width: 15px;
  height: 25px;
  border: solid #000;
  border-width: 0 4px 4px 0;
  transform: rotate(45deg);
}

.custom-checkbox input:checked + .checkmark::after {
  display: block;
}

.option-text {
  font-size: 26px;
  font-weight: 400;
  color: #000;
  user-select: none;
}

/* tab 1 - hidden field */
.design-hidden-field {
  margin-top: 60px;
  display: none;
  text-align: center;
  animation: fadeIn 0.3s ease;
  background-color: var(--pelOffWhite);
}

.upload-header-line {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.upload-text {
  font-family: "Inter", sans-serif;
  font-size: 28px;
  font-weight: 400;
  color: #000;
}

.required-text {
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #B8B8B8;
}

.design-hidden-field textarea {
  width: 800px;
  max-width: 90%;
  height: 120px;
  border: 1px solid #000;
  padding: 10px;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 400;
  resize: vertical;
}

.hidden-label {
  display: block;
  margin-bottom: 10px;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #000;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

.upload-subtext {
  margin-top: 20px;
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #000;
  line-height: 1.5;
}

.upload-columns {
  display: flex;
  justify-content: center;
  gap: 100px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.upload-column {
  flex: 1;
  min-width: 250px;
  max-width: 400px;
  text-align: center;
}

.column-text {
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #000;
  line-height: 1.4;
}

.column-text-container {
  min-height: 155px;
  display: flex;
  align-items: flex-start;
}

.upload-columns {
  display: flex;
  justify-content: center;
  gap: 80px;
  margin-top: 40px;
  align-items: flex-start;
}

/* file upload boxes */
.file-upload-container {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.file-dropzone {
  width: 320px;
  height: 412px;
  border: 2px dashed #000;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  position: relative;
  padding: 10px;
  box-sizing: border-box;
}

.file-dropzone.dragover {
  background-color: #f0f0f0;
}

.upload-btn {
  width: 100%;
  height: 62px;
  background-color: #000;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 20px;
  font-weight: 500;
  border: none;
  cursor: pointer;
}

.dropzone-text {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: #000;
  text-align: center;
  margin: 10px 0;
}

.file-input {
  display: none;
}

.file-preview-container {
  width: 95%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  max-height: 450px;
  overflow-y: auto;
}

.file-preview {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  font-family: "Inter", sans-serif;
  font-size: 20px;
  color: #000;
  padding: 2px 5px;
  border-top: 1px solid #ccc;
}

.delete-file {
  color: red;
  cursor: pointer;
  font-weight: bold;
  margin-left: 10px;
  font-size: 34px;
  line-height: 1;
}

/* tab 2 - site survey */
.site-survey-checkboxes {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 40px;
  margin-left: -50px;
  align-items: center;
  column-gap: 100px;
  font-family: "Inter", sans-serif;
}

.custom-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  font-family: "Inter", sans-serif;
  font-size: 26px;
  font-weight: 400;
  gap: 20px;
}

.custom-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkmark {
  width: 52px;
  height: 52px;
  background-color: #fff;
  border: 1px solid #000;
  display: inline-block;
  margin-right: 10px;
  position: relative;
}

.custom-checkbox input:checked + .checkmark::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 6px;
  width: 12px;
  height: 24px;
  border: solid #000;
  border-width: 0 4px 4px 0;
  transform: rotate(45deg);
}

.checkbox-label {
  display: inline-block;
}

.site-survey-hidden-field {
  display: none;
  margin-top: 40px;
  text-align: center;
  width: 1400px;
  height: 700px;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--pelOffWhite);
  padding: 10px;
  border: 1px solid var(--pelOffWhite);
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.site-survey-hidden-field.show {
  display: block;
  animation: fadeIn 0.3s ease forwards;
}

.upload-header-line {
  font-family: "Inter", sans-serif;
  font-size: 28px;
  font-weight: 400;
  margin-bottom: 20px;
}

.upload-header-line .required-text {
  font-size: 18px;
  color: #B8B8B8;
  margin-left: 10px;
}

.upload-subtext {
  margin-top: 20px;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 400;
  text-align: center;
}

.survey-headers {
  display: flex;
  justify-content: center;
  gap: 250px;
  margin-top: 40px;
  font-family: "Inter", sans-serif;
  font-size: 22px;
  font-weight: 400;
  margin-left: -160px;
}

.survey-columns {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  gap: 80px;
}

.survey-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.survey-input {
  width: 347px;
  height: 69px;
  background-color: #fff;
  border: 2px solid #000;
  font-family: "Inter", sans-serif;
  font-size: 20px;
  font-weight: 400;
  padding: 0 10px;
  box-sizing: border-box;
}

.state-zip-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  width: 347px;
}

.half-input {
  width: calc(50% - 5px);
}

.survey-additional-info {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 200px;
  margin-top: 40px;
  margin-left: 90px;
}

.survey-additional-label {
  width: 550px;
  font-family: "Inter", sans-serif;
  font-size: 22px;
  font-weight: 400;
  color: #000;
  text-align: left;
  line-height: 1.4;
}

.survey-additional-input {
  width: 500px;
  height: 120px;
  background-color: #fff;
  border: 2px solid #000;
  font-family: "Inter", sans-serif;
  font-size: 20px;
  font-weight: 400;
  padding: 10px;
  resize: none;
  margin-left: -160px;
  margin-top: -10px;
}

/* tab 3 - delivery */
.delivery-columns {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  gap: 80px;
}

.delivery-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.delivery-input {
  width: 347px;
  height: 69px;
  background-color: #fff;
  border: 2px solid #000;
  font-family: "Inter", sans-serif;
  font-size: 20px;
  font-weight: 400;
  padding: 0 10px;
  box-sizing: border-box;
}

.delivery-additional-input {
  width: 500px;
  height: 120px;
  background-color: #fff;
  border: 2px solid #000;
  font-family: "Inter", sans-serif;
  font-size: 20px;
  font-weight: 400;
  padding: 10px;
  resize: none;
  margin-left: -160px;
  margin-top: -10px;
}

.state-zip-row2 {
  display: flex;
  justify-content: space-between;
  width: 347px;
  gap: 10px;
}

.half-inputs2 {
  width: calc(50% - 5px);
}

.delivery-label {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  margin-top: 80px;
}

.delivery-title {
  font-family: "Inter", sans-serif;
  font-size: 22px;
  font-weight: 400;
  color: #000;
}

.delivery-title2 {
  font-family: "Inter", sans-serif;
  font-size: 22px;
  font-weight: 400;
  color: #000;
  margin-left: 110px;
}

.required-field,
.required-text {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: #B8B8B8;
}

/* tab 4 - installation */
.coi-checkbox-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
  margin: 40px 0 80px -270px;
  white-space: nowrap;
}

.coi-label {
  font-family: "Inter", sans-serif;
  font-size: 22px;
  font-weight: 400;
  color: #000;
}

.coi-box input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.coi-box .checkmark {
  width: 60px;
  height: 50px;
  background-color: #fff;
  border: 1px solid #000;
  position: relative;
  display: inline-block;
}

.coi-box input:checked + .checkmark::after {
  content: "";
  position: absolute;
  left: 18px;
  top: 7px;
  width: 12px;
  height: 24px;
  border: solid #000;
  border-width: 0 4px 4px 0;
  transform: rotate(45deg);
}

/* tab 5 - summary */

.summary-row {
  margin-top: -40px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-family: "Inter", sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: #000;
}

.tab5-columns {
  display: flex;
  justify-content: left;
  gap: 260px;
  margin-top: 60px;
}

.tab5-column {
  width: 300px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 40px;
}

.tab5-column3 {
  width: 300px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 50px;
}

.summary-row {
  display: flex;
  align-items: baseline;
  margin-top: -40px;
  white-space: nowrap;
}

.summary-label {
  font-family: "Inter", sans-serif;
  font-size: 26px;
  font-weight: 400;
  color: #000;
}

.summary-note {
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #B8B8B8;
  margin-left: 10px;
}

.total-estimate-text {
  font-family: "Inter", sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #000;
  text-align: center;
  width: 100%;
  margin-top: 40px;
  margin-left: -20px;
}

.total-cost-box {
  width: 268px;
  height: 64px;
  background-color: #fff;
  border: 2px solid #000;
  font-family: "Inter", sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30px 0 0 10px;
  box-sizing: border-box;
}

.submit-instructions {
  margin-top: 60px;
  font-family: "Inter", sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #000;
  text-align: center;
}

.submit-form-btn {
  display: block;
  width: 286px;
  height: 88px;
  background-color: #B8B8B8;
  border: 2px solid #000;
  color: #000;
  font-family: "Inter", sans-serif;
  font-size: 22px;
  font-weight: 400;
  margin: 30px auto 0 10px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.submit-form-btn:hover {
  background-color: #a5a5a5;
  transform: scale(1.02);
}

.submit-message {
  display: none;
  margin-top: 60px;
  font-family: "Inter", sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #000;
  text-align: center;
  line-height: 1.5;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.submit-message.show {
  display: block;
  opacity: 1;
}

.order-receipt-title {
  font-family: "Inter", sans-serif;
  font-size: 26px;
  font-weight: 400;
  color: #000;
  margin-top: -40px;
  margin-left: -100px;
  text-align: left;
  width: 500px;
}

.selected-items-box {
  width: 516px;
  height: 470px;
  background-color: #fff;
  border: 1px solid #000;
  margin-top: 40px;
  margin-bottom: 20px;
  margin-left: -100px;
  padding: 10px;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
  font-size: 20px;
  font-weight: 400;
  overflow-y: auto;
  position: relative;
}

.selected-items-placeholder {
  color: #000;
  opacity: 0.5;
}

.subtotal-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 40px;
  margin-top: 20px;
  font-family: "Inter", sans-serif;
}

.subtotal-label {
  width: 250px;
  font-size: 22px;
  font-weight: 400;
  color: #000;
  text-align: left;
  margin-left: -110px;
}

.subtotal-box {
  width: 220px;
  height: 44px;
  background-color: #fff;
  border: 1px solid #000;
  font-family: "Inter", sans-serif;
  font-size: 20px;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.subtotal-box2 {
  width: 220px;
  height: 44px;
  background-color: #fff;
  border: 1px solid #000;
  font-family: "Inter", sans-serif;
  font-size: 20px;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.subtotal-box3 {
  width: 220px;
  height: 44px;
  background-color: #fff;
  border: 1px solid #000;
  font-family: "Inter", sans-serif;
  font-size: 20px;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* ====
Payment
===== */ 

body.payment, 
body.payment html {
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body.site-page.payment {
  background-color: var(--pelOffWhite);
  -webkit-font-smoothing:antialiased; /* grayscale antialiasing */
  -moz-osx-font-smoothing:grayscale; /* grayscale antialiasing */
  padding-top: 40px;
}

body.site-page.payment .page-inner {
  max-width: 1920px;
  height: 900px;
  position: relative;
  margin: 0;
  padding: 28px 0 80px 0;
  box-sizing: border-box;
}

.payment-container {
  width: 1656px;
  height: 900px;
  margin-top: 100px;
  border: 1px solid #B4B4B4;
  background-color: #DFDFDF;
  border-radius: 4px;
  padding: 30px;
  box-sizing: border-box;
  position: relative;
}

.payment-header {
  width: 448px;
  height: 84px;
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid #AEAEAE;
  background-color: var(--pelGray);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.payment-header .header-text {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 24px;
  color: #000;
}

.amount-label {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 22px;
  color: #000;
  position: absolute;
  top: calc(20px + 84px + 40px);
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.total-box {
  width: 218px;
  height: 60px;
  border: 2px solid #000;
  background-color: #fff;
  border-radius: 4px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: #000;
  text-align: center;
  line-height: 60px;
  position: absolute;
  top: calc(20px + 84px + 40px + 22px + 20px);
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
}

.cc-label {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 22px;
  color: #000;
  position: absolute;
  top: calc(20px + 84px + 40px + 22px + 20px + 60px + 80px);
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.payment-row {
  display: flex;
  justify-content: center;
  position: absolute;
  top: calc(20px + 84px + 40px + 22px + 20px + 60px + 80px + 60px);
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}

.payment-info {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 100px;
  position: relative;
  width: 100%;
  height: 230px;
}

.column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.payment-input {
  width: 295px;
  height: 45px;
  border: 1px solid #000;
  border-radius: 4px;
  background-color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #000;
  padding: 0 10px;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.payment-input::placeholder {
  color: #000;
  opacity: 0.6;
  font-size: 15px;
  font-family: 'Inter', sans-serif;
}

.half-inputs {
  display: flex;
  justify-content: space-between;
  width: 295px;
}

.half-input {
  width: calc(50% - 5px);
}

.card-label {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 22px;
  color: #000;
  text-align: center;
}

.left-col,
.right-col {
  width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: 0;
}

.left-col {
  right: calc(50% + 50px);
  top: 0;
}

.right-col {
  left: calc(50% + 50px);
  top: 0;
}

.divider {
  width: 1px;
  height: 260px;
  background-color: #000;
  position: absolute;
  left: 48%;
  top: 0;
  transform: translateX(-50%);
}

.billing-label,
.card-label {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 22px;
  color: #000;
  text-align: center;
  margin-bottom: 35px;
}

.leftcol-cellswrapper {
  margin-top: 30px;
}

.billing-label {
  margin-right: 90px;
}

.payment-input.multi-line {
  height: 60px;
  resize: none;
  line-height: 1.2;
  padding: 10px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.submit-button {
  width: 300px;
  height: 90px;
  background-color: #B8B8B8;
  border: 2px solid #000;
  border-radius: 4px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: #000;
  cursor: pointer;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(
    20px + 84px + 40px + 22px + 20px + 60px + 80px + 60px + 230px + 30px + 60px
  );
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

@media (max-width: 500px) {
  body.site-page.payment .page-inner {
    transform: scale(0.2) translateX(-170%);
  }
}

/* ====
Complete
===== */ 
body.site-page.complete {
  background-color: var(--pelOffWhite);
  -webkit-font-smoothing:antialiased; /* grayscale antialiasing */
  -moz-osx-font-smoothing:grayscale; /* grayscale antialiasing */
  padding-top: 40px;
}

body.site-page.complete .page-inner {
  max-width: 1920px;
  height: 960px;
  position: relative;
  margin: 0;
  padding: 28px 0 80px 0;
  box-sizing: border-box;
}

.confirmation-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 80px;
}

.confirmation-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 45px;
  margin: 0;
}

.confirmation-subtitle {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 22px;
  margin-top: 60px;
  margin-bottom: 0;
}

.confirmation-text {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 20px;
  margin-top: 20px;
  width: 1330px;
  line-height: 1.5;
}

.confirmation-divider {
  width: 1385px;
  height: 1px;
  background-color: #707070;
  margin: 40px auto 40px auto;
}

.step-header {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 37px;
  color: #000;
  text-align: left;
  margin-left: 270px;
}

.step-text {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 22px;
  color: #000;
  margin-top: 20px;
  line-height: 1.5;
  margin-left: 300px;
  width: 1330px;
}

.step-text ul {
  margin-top: 10px;
  margin-bottom: 20px;
  padding-left: 40px;
}

.step-text li {
  margin-bottom: 10px;
}

.upload-wrapper {
  margin-top: 20px;
  margin-left: 300px;
}

.upload-box {
  display: flex;
  width: 300px;
  height: 56px;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  align-items: center;
  position: relative;
}

.upload-left {
  width: 124px;
  height: 40px;
  background-color: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  margin-left: 10px;
  border-radius: 4px;
}

.upload-right {
  width: 160px;
  height: 40px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 8px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

.upload-right span {
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
}

.remove-file {
  position: absolute;
  right: 10px;
  font-size: 40px;
  color: red;
  cursor: pointer;
  display: none;
}

@media (max-width: 1400px){
  body.site-page.complete .page-inner {
    transform: scale(0.5);
  }
  body.site-page.complete .page-inner div {
    margin-left: 0px;
  }
  .confirmation-divider {
    width: 100%;
  }
}

@media (max-width: 1000px){
  body.site-page.complete .page-inner {
    transform: scale(0.4) translateX(-40%);
  }
  body.site-page.complete .page-inner .confirmation-container {
    transform: translateX(40%);
  }
  body.site-page.complete .page-inner div {
    margin-left: 0px;
  }
}

@media (max-width: 800px){
  body.site-page.complete .page-inner {
    transform: scale(0.3) translateX(-70%);
  }
  body.site-page.complete .page-inner .confirmation-container {
    transform: translateX(70%);
  }
  body.site-page.complete .page-inner div {
    margin-left: 0px;
  }
}

@media (max-width: 500px){
  body.site-page.complete .page-inner {
    transform: scale(0.2) translateX(-110%);
  }
  body.site-page.complete .page-inner .confirmation-container {
    transform: translateX(110%);
  }
  body.site-page.complete .page-inner div {
    margin-left: 0px;
  }
}