:root {
  /* Base Colors */
  --background-color: #F5F5F5;
  --background-color-panel: #FFF;
  --text-color: #161E26;
  --text-light-color: #f1f1f1;

  /* Headings */
  --header-color: #F1F1F1;
  --headline-color: #142644;
  --subheader-color: #3551A4;

  /* Accent Colors */
  --accent-light-blue: #CBE7FF;
  --accent-pastel-green: #E3FF66;
  --accent-off-white: #F7F8F1;
  --accent-sky-blue: #7CBCF4;
  --accent-dark-blue: #3551A4;
  --accent-darker-blue: #253872;
  --accent-error: #D32F2F;

  /* Font Families */
  --font-header: 'Anton', sans-serif;
  --font-subheader: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; 
  --font-body: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-button: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Font Weights */
  --fw-body: 400;
  --fw-subheader: 600;
  --fw-button: 700;
  --fw-display: 400;

  /* Hover shades */
  --accent-dark-blue-hover:#253872;
  --accent-pastel-green-hover:#c9f552;

  /* Typography scale */
  --fs-h1: 3rem;
  --fs-h1-mobile: 1.75rem;
  --fs-h1-tablet: 2.25rem;
  --fs-h2: 3rem;
  --fs-h2-mobile: 1.5rem;
  --fs-h3: 1rem;
  --fs-body: 1rem;
  --fs-subheader: 0.875rem;
  
  /* Breakpoints */
  --bp-tablet: 1024px;
  --bp-mobile: 768px;

  /* Line height */
  --lh-tight: 1.2;
  --lh-normal: 1.5;

  /* Spacing scale */
  --gutter-x: clamp(24px, 6vw, 100px);
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Layout */
  --container-max: 1280px;

  /* Buttons */
  --btn-padding: 0.75rem 1.5rem;
  --btn-font-size: 1rem;

  /* Shadows */
  --box-shadow-panel: 0 4px 12px rgba(0, 0, 0, 0.1);
}

@font-face {
  font-family: "Anton";
  src: url("/font/anton-regular-webfont.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("/font/Montserrat-VariableFont_wght.ttf") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

.progress-opacity {
  opacity: 0.5;
}

/* Tablet token adjustments */
@media (max-width: 950px) {
  :root {
    --fs-h1: 3rem;
    --fs-h2: 2.5rem;
    --fs-h3: 1.25rem;
    --fs-body: 0.9375rem;
    --fs-subheader: 0.8125rem;
    --fs-button: 0.875rem;
  }
}

/* Mobile token adjustments */
@media (max-width: 450px) {
  :root {
    --fs-h1: 1.95rem;
    --fs-h2: 1.95rem;
    --fs-h3: 0.875rem;
    --fs-h4: 0.875rem;
    --fs-body: 0.875rem;
    --fs-subheader: 0.75rem;
    --fs-button: 0.8125rem;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-color);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  font-weight: var(--fw-body)
}

h4,h3 { 
  letter-spacing: 0.1rem; 
  font-weight: var(--fw-subheader)
}

section { box-sizing: border-box; 
}

/* Hero Section */
.hero {
  position: relative;
  background-image:
    linear-gradient(to right, rgba(203, 231, 255), rgba(203, 231, 255, 1), rgba(203, 231, 255, 1), rgba(53, 81, 164, 0.4), rgba(255, 255, 255, 0.6)),
    url('/images/hero_bg.jpg');
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: top right;
  min-height: 65vh;
  text-align: left;
  display: flex;
  flex-direction: column;
}

/* Header */
.header {
  background-color: var(--header-color);
  box-shadow: var(--box-shadow-panel);
  border-radius: 4rem;
  padding: 0.15rem 1.5rem;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-wrap: wrap;
  width: calc(100% - 10rem);
  margin: 1rem auto 2rem auto;
  box-sizing: border-box;
}

.header-menu,
.header-close {
  display: none;
  position: absolute;
  right: 2rem;
  top: 3rem;
}

.logo img { height: 5rem; width: 10rem; }

.nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.header-link {
  color: var(--link-dark);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--fs-body);
  align-items: center;
  line-height: var(--lh-tight);
  gap: 0.25rem;
  justify-content: center;
  display: none;
}

.header-link:hover { text-decoration: underline; }

.sign-in { display: flex; }

/* Buttons */
.btn-primary,
.btn-border,
.btn-outline,
.btn-accent,
.levels-buttons .btn-primary,
.levels-buttons .btn-border,
.features-cta .btn-primary,
.features-cta .btn-border,
.newsletter-form button,
.free-trial-form button {
  font-weight: var(--fw-button);
}

.btn-outline {
  background-color: var(--header-bg-color);
  border: 2.5px solid var(--accent-dark-blue);
  border-radius: 2rem;
  padding: var(--btn-padding);
  cursor: pointer;
  font-weight: 600;
  font-size: var(--btn-font-size);
}

.btn-border,
.btn-primary {
  text-decoration: none;
  text-align: center;
}

.btn-primary {
  background-color: var(--accent-dark-blue);
  color: var(--accent-pastel-green);
  border: 3px solid var(--accent-dark-blue);
  border-radius: 2rem;
  padding: var(--btn-padding);
  cursor: pointer;
  font-size: var(--btn-font-size);
  font-weight: 600;
}

/* Responsive header */
@media (max-width: 950px) {
  .header {
    width: 100%;
    margin: 0;
    padding: var(--space-8) 1.5rem;
    border-radius: 0;
    align-items: center;
    justify-content: center;
    background: transparent;
    box-shadow: none;
  }
  .header.expanded { background: var(--background-color); box-shadow: var(--box-shadow-panel); }
  .header.expanded > .header-menu { display: none; }
  .header.expanded > .header-close { display: inline-block; }
  .header > .header-menu { display: inline-block; cursor: pointer; }
  .header > .header-close { display: none; cursor: pointer; }
  .nav {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    display: none;
  }
  .header-menu, .header-close { display: inline-block; width: 2.5rem; height: auto; }
  .logo { width: 100%; }
  .header-link {
    display: flex;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--text-color);
  }
  .header-link:last-of-type { border: none; }
}

/* Hero Content */
.hero-content {
  padding: 2rem 2rem 6rem 6rem;
  max-width: 35rem;
}

/* Hero responsive backgrounds */
@media (max-width: 950px) {
  .hero {
    padding: 0;
    background-image: linear-gradient(to top, rgba(203, 231, 255, 1), rgba(203, 231, 255, 1), rgba(203, 231, 255, 0.6), rgba(53, 81, 164, 0.4)),
     url('/images/hero_bg.jpg');
    background-size: fill;
    background-position: center top;
  }
  .hero-content { padding: 2rem 2rem 6rem 2rem; }
}
@media (max-width: 450px) {
  .hero {
    padding: 0;
    background-image: linear-gradient(to top, rgba(203, 231, 255, 1), rgba(203, 231, 255, 1), rgba(203, 231, 255, 1), rgba(53, 81, 164, 0.4)),
     url('/images/mobile_hero.jpg');
     background-size: contain;
  }
  .hero-content {
    padding: 2rem 2rem 6rem 2rem;
    max-width: fit-content;
  }
}

.tagline {
  color: var(--accent-dark-blue);
  text-transform: uppercase;
  font-size: var(--fs-subheader);
  margin: 0;
}

.headline {
  text-transform: uppercase;
  color: var(--headline-color);
  font-family: var(--font-header);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  margin: 0;
  font-weight: bold;
}

.tagline + .headline { margin-top: 0.5rem; }

.description {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-color);
}

marquee.attention-tape {
  position: absolute;
  bottom: 0;
  padding: 0.8rem 0;
  background: var(--accent-dark-blue);
  color: var(--accent-pastel-green);
  font-family: var(--font-subheader);
  font-weight: bold;
  text-transform: uppercase;
  white-space: nowrap;
  font-size: var(--fs-body);
  letter-spacing:0.1rem
}

marquee.attention-tape .delimiter {
  display: inline-block;
  margin: 0 4rem;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: var(--accent-pastel-green);
}

@media (max-width: 950px) {
  .cta-buttons { flex-direction: column; }
}

/* CTA Buttons */
.cta-buttons { display: flex; gap: 1rem; flex-wrap: wrap; }

.btn-accent {
  background-color: var(--accent-pastel-green);
  color: var(--accent-dark-blue);
  border: 6px solid var(--accent-pastel-green);
  border-radius: 2rem;
  padding: var(--btn-padding);
  font-weight: 700;
  font-size: var(--btn-font-size);
  cursor: pointer;
}

.btn-border {
  background: transparent;
  border: 3px solid var(--accent-dark-blue);
  border-radius: 2rem;
  padding: var(--btn-padding);
  font-weight: 700;
  font-size: var(--btn-font-size);
  cursor: pointer;
}

/* Features Section */
.features { padding: var(--space-16) 2rem; text-align: center; }

.features-subtitle {
  color: var(--accent-dark-blue);
  text-transform: uppercase;
  margin: 0;
  font-size: var(--fs-subheader);
}

.features-title {
  color: var(--text-color, #222);
  font-family: var(--font-header);
  text-transform: uppercase;
  font-size: var(--fs-h2);
  margin-bottom: var(--space-12);
  margin-top: 0.5rem;
  line-height: var(--lh-tight)
}

@media (max-width:450px) {
.features-title {
  text-align:left; }

.features-subtitle {
  text-align: left;}
}

.features-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  max-width: 1100px;
  margin: 0 auto var(--space-12) auto;
}

.feature-item {
  display: flex;
  flex: 1 1 280px;
  max-width: 340px;
  align-items: flex-start;
  gap: 1rem;
  text-align: left;
}

.feature-icon { font-size: var(--fs-h2); flex-shrink: 0; color: var(--accent-dark-blue); }

.feature-text h3 {
  font-size: var(--fs-body);
  margin: 0 0 0.5rem 0;
  font-weight: 800;
  color: var(--text-color);
  text-transform: uppercase;
}

.feature-text p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-color);
}

.features-cta { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }

.features-cta .btn-primary {
  background-color: var(--accent-dark-blue);
  color: var(--accent-pastel-green);
  border: none;
  border-radius: 2rem;
  padding: var(--btn-padding);
  font-weight: 700;
  cursor: pointer;
}

.features-cta .btn-border {
  background: transparent;
  border: 3px solid var(--accent-dark-blue);
  border-radius: 2rem;
  padding: var(--btn-padding);
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 950px) { .features-cta { flex-direction: column; } }

/* Demo Section */
.demo-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5rem;
  background-color: var(--accent-dark-blue);
  background-image: url('/images/demo_squiggle_bg.png');
  background-repeat: no-repeat;
  background-position: top left;
  background-size: cover;
  padding: var(--space-16) 1rem;
  color: var(--accent-off-white, #fff);
}

.video-embed {
  position: relative;
  width: 100%;
  max-width: 800px;     
  margin: 0 auto;       
  aspect-ratio: 16 / 9; 
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 12px; 
}

.demo-content { display: flex; flex-direction: column; gap: 0rem; max-width: 30%; }

.demo-subtitle {
  color: var(--accent-pastel-green);
  font-size: var(--fs-subheader);
  margin: 0;
  text-transform: uppercase;
}

.demo-title {
  color: var(--accent-off-white, #fff);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  margin: 0;
  font-family: var(--font-header);
  text-transform:uppercase
}

.demo-description {
  color: var(--accent-off-white, #fff);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  margin-bottom: 1.5rem;
  margin-top: auto;
  max-width: 75%;
}

.btn-demo {
  background: transparent;
  border: 3px solid var(--accent-pastel-green);
  color: var(--accent-pastel-green);
  border-radius: 2rem;
  padding: var(--btn-padding);
  font-weight: 700;
  cursor: pointer;
  align-self: flex-start;
  font-size: var(--btn-font-size);
}

@media (max-width: 950px) {
  .demo-content { 
    align-items: stretch; 
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    max-width: 60%;
  }

  .btn-demo { align-self: stretch; }

  .demo-section { 
    display: flex; 
    flex-direction:column; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    gap:2rem }

  .demo-video video { 
    width: 20rem; 
    height: auto; 
    border-radius: 1rem; 
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  }
}

@media (max-width:450px) {
  .demo-content {
  max-width: 90% }
}

.levels {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items:center;
  gap: 6rem;
  padding: var(--space-16) 2rem;
  margin: 0 auto;
}

.levels-left { 
  display: flex; 
  flex-direction: column; 
  align-items: left; 
  gap: 0.5rem; 
}

.levels-subtitle {
  color: var(--accent-dark-blue);
  text-transform: uppercase;
  font-size: var(--fs-subheader);
  margin: 0;
}

.levels-title {
  color: var(--text-color, #222);
  font-family: var(--font-header);
  text-transform: uppercase;
  line-height: var(--lh-tight);
  margin: 0;
  max-width: 35rem;
  font-size: var(--fs-h2);
}

.levels-description {
  color: var(--text-color);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  margin: 0 0 1rem 0;
  max-width: 28rem;
}

.levels-buttons { 
  display: flex; 
  gap: 1rem; 
  flex-wrap: wrap; 
}

.levels-buttons .btn-primary {
  background-color: var(--accent-dark-blue);
  color: var(--accent-pastel-green);
  border: 6px solid var(--accent-dark-blue);
  border-radius: 2rem;
  padding: var(--btn-padding);
  font-weight: 700;
  cursor: pointer;
}

.levels-buttons .btn-border {
  background: transparent;
  border: 3px solid var(--accent-dark-blue);
  border-radius: 2rem;
  padding: var(--btn-padding);
  font-weight: 700;
  cursor: pointer;
  color: var(--accent-dark-blue);
  font-size: var(--btn-font-size);
}

/* Right part */
.levels-right {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  position: relative;
  max-width: 20rem;
}

.level-item { display: flex; align-items: flex-start; gap: 1rem; }

.level-icon { color: var(--accent-dark-blue); position: relative; }

.level-icon::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 100%;
  border-left: 4px dotted var(--accent-dark-blue);
}
.level-item:last-child .level-icon::after { display: none; }

.level-icon { background: var(--accent-white, #fff); position: relative; z-index: 1; }

.level-text h3 {
  margin: 0 0 0.5rem 0;
  color: var(--text-color);
  font-size: var(--fs-body);
  text-transform: uppercase;
}

.level-text p {
  margin: 0;
  font-size: var(--fs-body);
  color: var(--text-color);
  line-height: var(--lh-normal);
  max-width: 65ch
}

/* Responsive */
@media (max-width: 950px) {
  .levels { flex-direction: column; align-items: center; gap: 2rem; }
  .levels-left { align-items: center; text-align:center; }
  .levels-right { flex-direction: row; align-items: center; max-width: 100%; padding-top: 2rem; }
  .level-item { flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; max-width: 13rem; }
  .levels-buttons { align-items: stretch; justify-content: center; flex-direction: column; width:100% }
  .level-icon::after { display: none; }
}
@media (max-width: 450px) {
  .levels { flex-direction: column; text-align: center; gap: 2rem; }
  .levels-left, .levels-right { align-items: center; text-align:center; }
  .levels-right { flex-direction: column; }
  .level-item { flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; max-width: 15rem; }
  .levels-buttons { align-items: stretch; justify-content: center; flex-direction: column; width:100% }
  .level-icon::after { display: none; }
}

/* Values */
.values {
  background: url('/images/values_bg.jpg') center/cover no-repeat;
  padding: var(--space-16) var(--space-16);
  text-align: center;
  color: var(--accent-white, #fff);
}

.values-subtitle {
  color: var(--accent-pastel-green);
  text-transform: uppercase;
  margin: 0 0 0.5rem 0;
  font-size: var(--fs-subheader);
}

.values-title {
  color: var(--accent-white, #fff);
  text-transform: uppercase;
  font-family: var(--font-header);
  font-size: var(--fs-h2);
  margin: 0 0 var(--space-12) 0;
  line-height: var(--lh-tight);
}

.values-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4rem 6rem;
  max-width: 1100px;
  margin: 0 auto;
}

.value-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  flex: 0 1 400px;
  max-width: 100%;
  text-align: left;
}

.value-icon { font-size: var(--fs-h2); flex: 0 0 40px; flex-shrink: 0; color: var(--accent-pastel-green); }

.value-text { flex: 1; }

.value-text h3 {
  margin: 0 0 0.5rem 0;
  font-size: var(--fs-body);
  color: var(--accent-white, #fff);
  text-transform: uppercase;
}

.value-text p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--accent-white, #fff);
  max-width: 65ch
}

@media (max-width: 950px) {
  .values { background: url('/images/mobile_foundation.jpg') center/cover no-repeat; }
  .value-item { flex: 1 1 100%; flex-direction: column; align-items: center; text-align: center; max-width: 20rem; }
  .value-icon { margin-bottom: 0.5rem; flex: 0 0 auto; }
}

/* Custom Plan */
.custom-plan {
  background: url('/images/lets_build_squiggle.png') top center no-repeat;
  background-size: 100% auto;
  padding: 4rem 2rem;
  text-align: center;
}

.custom-subtitle {
  color: var(--accent-dark-blue);
  text-transform: uppercase;
  font-size: var(--fs-subheader);
  margin: 0 0 0.5rem 0;
}

.custom-title {
  color: var(--text-color, #222);
  font-family: var(--font-header);
  font-size: var(--fs-h2);
  text-transform: uppercase;
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-12) 0;
}

.custom-panels { display: flex; gap: 2rem; justify-content: center; flex-wrap: wrap; }

.custom-panel {
  background-color: var(--accent-dark-blue);
  color: var(--accent-off-white, #fff);
  padding: 2rem;
  max-width: 350px;
  text-align: left;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.custom-panel h3 { margin: 0; font-size: var(--fs-h3); text-transform: uppercase; }

.custom-panel p { margin: 0 0 1rem 0; font-size: var(--fs-body); line-height: var(--lh-normal); }

.custom-panel .btn-solid {
  background-color: var(--accent-pastel-green);
  color: var(--accent-dark-blue);
  border: none;
  border-radius: 2rem;
  padding: var(--btn-padding);
  font-weight: 800;
  cursor: pointer;
  align-self: flex-start;
  font-size: var(--btn-font-size);
}

@media (max-width: 950px) {
  .custom-panels { flex-direction: column; align-items: center; }
  .custom-panel { min-width: 13rem; text-align: center; align-items: center; }
  .custom-panel .btn-solid { align-self: center; }
}

/* FAQ Section */
.faq { margin-top: var(--space-8); padding: 4rem 0rem 2rem 0rem; text-align: center; }

.faq-subtitle {
  color: var(--accent-dark-blue);
  text-transform: uppercase;
  font-size: var(--fs-subheader);
  margin: 0 0 0.5rem 0;
}

.faq-title {
  color: var(--text-color, #222);
  font-family: var(--font-header);
  text-transform: uppercase;
  font-size: var(--fs-h2);
  margin: 0 0 var(--space-12) 0;
  line-height: var(--lh-tight);
}

.faq-grid {
  display: flex;
  gap: 1.5rem 2rem;
  column-gap: 2rem;
  align-items: flex-start; 
}

.faq-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-grid details {
  display: block;
  border: 2px solid var(--accent-dark-blue);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  transition: all 0.3s ease;
  break-inside: avoid;
}

.faq-grid details p { overflow: hidden; }

.faq-grid details[open] { background: var(--background-color-panel); }

.faq-grid summary {
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--accent-dark-blue);
  list-style: none;
  cursor: pointer;
  outline: none;
  position: relative;
  padding-right: 1.5rem;
  align-items: center;
}

.faq-grid summary::-webkit-details-marker { display: none; }

.faq-grid summary::after {
  content: "›";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) translateY(-0.1rem) rotate(0deg);
  font-size: 1.2rem;
  transition: transform 0.3s ease;
  color: var(--accent-dark-blue);
}

.faq-grid details[open] summary::after {
  transform: translateY(-50%) rotate(90deg);
}

.faq-grid p {
  margin-top: 0.75rem;
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: #444;
}

#faq-cta {
  margin: 2rem 0 0rem;
}

@media (max-width: 950px) {
  .faq-grid {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  .faq {
    padding: 2rem 0;
  }
}

/* Free Trial */
.free-trial {
  background: url('/images/final_cta_bg.jpg') center/cover no-repeat;
  text-align: center;
  padding: var(--space-16) 2rem;
  color: var(--accent-white, #fff);
}

.free-trial-subtitle {
  color: var(--accent-pastel-green);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  font-size: var(--fs-subheader);
}

.free-trial-title {
  color: var(--accent-white, #fff);
  font-family: var(--font-header);
  text-transform: uppercase;
  font-size: var(--fs-h1);
  margin: 0 0 1rem 0;
  line-height: var(--lh-tight);
}

.free-trial-text {
  color: var(--accent-white, #fff);
  font-size: var(--fs-body);
  margin-bottom: 2rem;
  line-height: var(--lh-normal);
}

.free-trial-form {
  display: flex;
  justify-content: center;
  align-items: stretch;
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  background: transparent;
  border: 4px solid var(--accent-white, #fff);
  border-radius: 3rem;
  overflow: hidden;
  padding: 0.5rem;
}

.free-trial-form input {
  flex: 1;
  padding: 0.75rem 1.25rem;
  border: none;
  outline: none;
  font-size: var(--fs-body);
  background: transparent;
  color: var(--accent-white, #fff);
}

.free-trial-form input::placeholder { color: rgba(255, 255, 255, 0.8); }

.free-trial-form button {
  background: var(--accent-pastel-green);
  color: var(--accent-dark-blue);
  border: 6px solid var(--accent-pastel-green);
  padding: var(--btn-padding);
  font-weight: 700;
  font-size: var(--btn-font-size);
  cursor: pointer;
  border-radius: 2rem;
  transition: background 0.3s ease;
}

.free-trial-form button:hover { background: var(--accent-pastel-green-hover); }

@media (max-width: 950px) {
  .free-trial { background: url('/images/mobile_final_cta.jpg') center/cover no-repeat; }
 
  .free-trial-form { 
    flex-direction: column; 
    border: none; }
  
  .free-trial-form input { 
    border: 1px solid var(--accent-off-white); 
    border-radius: 2rem; 
    margin-bottom: 1rem; }
}

/* Newsletter */
.newsletter {
  padding: var(--space-12) 2rem;
  background: var(--accent-white, #fff);
  color: var(--text-color, #222);
  width: 100%;
}

.newsletter-part1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto var(--space-12) auto;
  flex-direction: row;
}

.newsletter-title {
  flex: 1 1 auto;
  font-size: 2.3rem;
  line-height: var(--lh-tight);
  margin: 0;
  color: var(--accent-dark-blue);
  font-family: var(--font-header);
  text-transform: uppercase;
  max-width: 50%;
}

@media (max-width: 950px) { 
  .newsletter-title { max-width: fit-content; }
}

.newsletter-form {
  display: flex;
  justify-content: center;
  align-items: stretch;
  max-width: 600px;
  width: 40%;
  border: 4px solid var(--accent-dark-blue);
  border-radius: 3rem;
  overflow: hidden;
  padding: 0.5rem;
  background: white;
}

.newsletter-form input {
  flex: 1;
  padding: 0.75rem 1.25rem;
  border: none;
  outline: none;
  font-size: var(--fs-body);
  background: transparent;
  color: var(--accent-dark-blue);
}

.newsletter-form input::placeholder { color: rgba(53, 81, 164, 0.6); }

.newsletter-form button {
  background: var(--accent-dark-blue);
  color: var(--accent-pastel-green);
  border: 6px solid var(--accent-dark-blue);
  padding: var(--btn-padding);
  font-weight: 700;
  font-size: var(--btn-font-size);
  cursor: pointer;
  border-radius: 2rem;
  transition: background 0.3s ease;
}

.newsletter-form button:hover {
  background: var(--accent-dark-blue-hover);
}

@media (max-width: 950px) {
  .newsletter-part1 { 
    flex-direction: column; 
    text-align: center; }

  .newsletter-form { 
    flex-direction: column; 
    border: none; 
    max-width: 600px; 
    width: 100%;
  }

  .newsletter-form input { 
    border: 1px solid var(--accent-dark-blue); 
    border-radius: 2rem; 
    margin-bottom: 1rem;
  }
}

/* Footer */
.newsletter-part2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0rem;
  max-width: 1200px;
  margin: 2rem auto var(--space-12) auto;
}

.footer-left { display: flex; flex-direction: column; gap: 1rem; align-items: center; }
.footer-logo { width: 15rem; height: auto; }
.footer-tagline { color: var(--accent-dark-blue); margin: 0; font-size: var(--fs-subheader); text-transform: uppercase; }
.footer-socials { display: flex; gap: 1rem; }
.footer-socials img { width: 2rem; height: 2rem; filter: grayscale(100%); transition: filter 0.3s ease; }
.footer-socials img:hover { filter: grayscale(0%); }
.footer-right { display: flex; gap: 4rem; flex-wrap: wrap; }
.footer-column { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-column b { color: var(--accent-dark-blue); font-size: var(--fs-subheader); }
.footer-column a { text-decoration: none; color: var(--text-color, #222); font-size: var(--fs-subheader); }
.footer-column a:hover { text-decoration: underline; }

.newsletter-part3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  max-width: 1200px;
  margin: 2rem auto 0 auto;
}
.footer-copy a, .footer-legal a {
  font-weight: bold;
  text-decoration: none;
  color: var(--text-color, #222);
  font-size: var(--fs-subheader);
  text-transform: uppercase;
}
.footer-legal { display: flex; gap: 1.5rem; }

@media (max-width: 950px) {
  .newsletter-part2 {
    flex-direction: row;
    flex-flow: row;
    gap: 2rem;
    align-items: center;
    text-align: left;
    margin: 1rem;
  }
  .footer-right { justify-content: center; }
  .newsletter-part3 { flex-direction: column; text-align: center; }
  .footer-legal { font-size: 0.0875rem; align-items: center; gap: 0.35rem; }
}

@media (max-width: 450px) { .newsletter-part2 { flex-direction: column; } }

/* Subscribe Section */
.subscribe-section {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6rem;
  flex-wrap: wrap;
  padding: var(--space-12) 2rem;
  margin: 0 auto;
}

.subscribe-left, .subscribe-right {
  display: flex;
  flex-direction: column;
  max-width: 45rem;
  gap: 0.5rem;
}

.subscribe-subtitle {
  color: var(--accent-dark-blue);
  text-transform: uppercase;
  font-size: var(--fs-subheader);
  margin: 0;
}

.subscribe-title {
  color: var(--text-color, #222);
  font-size: var(--fs-h2);
  font-family: var(--font-header);
  line-height: var(--lh-tight);
  margin: 0;
  text-transform:uppercase
}

.subscribe-intro { font-size: var(--fs-body); margin: 1rem 0 0.5rem 0; }

.subscribe-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }

.subscribe-list li {
  position: relative;
  padding-left: 2.5rem;
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-color, #222);
}

.subscribe-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  background: var(--accent-dark-blue);
  background-image: url("/images/checkmark.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.9rem 0.9rem;
}

@media (max-width: 950px) {
  .subscribe-section {
    text-align: left;
    align-items: center;
    gap: 3rem;
  }
  .subscribe-list li {
    text-align: left;
  }
  .subscribe-list {
    width: fit-content;
    align-self: center;
  }
  .subscribe-intro {
    text-align: left;
  }
}

/* Plan Box */
.plan-box {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border: 1px solid #ddd;
  border-radius: 12px;
  overflow: hidden;
  font-family: var(--font-body);
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  background: #fff;
  transition: box-shadow 0.2s ease;
  gap: 0;
  max-width: 350px;
}
.plan-box:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.1); }

/* First part */
.plan-box > div:first-child {
  display: flex; flex-direction: column; overflow: visible; flex: 0.75;
  background: #fff; padding: var(--space-8);
}

/* Tabs */
.plan-box > div:first-child > div:first-child {
  display: flex; gap: 0.5rem; margin-bottom: 1rem; width: 100%; justify-content: center;
}
.plan-box > div:first-child > div:first-child button {
  flex: 1; padding: 0.5rem 0.75rem; border: 1px solid #ccc; border-radius: 6px; background: #f9f9f9;
  cursor: pointer; font-weight: 600; font-size: var(--fs-subheader); transition: all 0.2s ease;
}
.plan-box > div:first-child > div:first-child button:hover,
.plan-box > div:first-child > div:first-child button.selected {
  background: var(--headline-color); border-color: var(--headline-color); color: var(--text-light-color);
}

/* Price */
.plan-box > div:first-child > div.price-per-period {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 1rem;
}
.plan-box > div:first-child > div.price-per-period > div:first-child span {
  font-size: 2.25rem; font-weight: bold; color: #222;
}
.plan-box > div:first-child > div.price-per-period > div:last-child {
  font-size: var(--fs-subheader); line-height: var(--lh-tight); color: #555;
}

/* Extra text */
.plan-box > div:first-child > div:nth-child(3) { font-size: var(--fs-subheader); margin: 0.75rem 0; color: var(--accent-darker-blue); text-align: center; }

/* Question */
.plan-box > div:first-child > div:nth-child(4) { margin: 0.75rem 0; font-weight: 600; color: #222; text-align: center; }

/* Counter */
.plan-box > div:first-child > div:nth-child(5) {
  display: flex; align-items: center; border: 1px solid var(--accent-darker-blue); border-radius: 6px; overflow: hidden; width: fit-content; margin: 0 auto;
}
.plan-box > div:first-child > div:nth-child(5) button {
  width: 2.2rem; height: 2.2rem; border: none; background: var(--headline-color); cursor: pointer; font-size: 1.2rem; font-weight: bold; color: var(--accent-off-white); transition: background 0.2s ease;
}
.plan-box > div:first-child > div:nth-child(5) button:hover { background: var(--accent-darker-blue); }
.plan-box > div:first-child > div:nth-child(5) input[type="number"] { width: 3rem; text-align: center; border: none; font-size: var(--fs-body); outline: none; height: 100%; }
.plan-box > div:first-child > div:nth-child(5) input::-webkit-outer-spin-button,
.plan-box > div:first-child > div:nth-child(5) input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Second part */
.plan-box > div:last-child { display: flex; flex: 1; flex-direction: column; background: var(--headline-color); color: var(--accent-off-white); }
.plan-box > div:last-child > div:first-child { background: white; width: 100%; height: 4rem; clip-path: polygon(0% -1%, 50% 100%, 100% -1%); }
.plan-box > div:last-child > div:last-child { display: flex; flex-direction: column; padding: var(--space-8); align-items: center; }
.plan-box > div:last-child > div:last-child > small { display: block; margin: 0.5rem 0; color: #555; }
.plan-box > div:last-child > div:last-child > big { font-size: var(--fs-h3); text-align: center; }
.plan-box > div:last-child > div:last-child > big + span { margin-top: 1rem; font-size: var(--fs-body); text-align: center; }

/* Price inside second part */
.plan-box > div:last-child > div:last-child > div.price-per-period {
  display: flex; align-items: center; gap: 0.5rem; margin: 1rem 0;
}
.plan-box > div:last-child > div:last-child > div.price-per-period > div:first-child span { font-size: 2.25rem; font-weight: bold; }
.plan-box > div:last-child > div:last-child > div.price-per-period > div:last-child { font-size: var(--fs-subheader); line-height: var(--lh-tight); }

/* shimmer */
.plan-box > div:last-child > div:last-child > div.proration-message-box:has(template) {
  position: relative; width: 90%; min-height: 4rem;
  background: linear-gradient(90deg,#e6f3ff 25%,#cce7ff 37%,#e6f3ff 63%); background-size: 400% 100%;
  animation: shimmer 20s ease infinite; border-radius: 8px;
}
@keyframes shimmer { 0% { background-position: -400% 0; } 100% { background-position: 400% 0; } }
.plan-box > div:last-child > div:last-child > div.proration-message-box:not(:has(template)) { background: none; animation: none; min-height: auto; }
.plan-box > div:last-child > div:last-child > div.proration-message-box:not(:has(template)) > div.proration-message {
  width: 100%; text-align: center; font-size: var(--fs-body); line-height: var(--lh-normal);
}

/* Discount flag */
.plan-box > div:last-child > div:last-child > div.discount-flag {
  clip-path: polygon(0 0,100% 0,100% calc(50% - 1rem),calc(100% - 1rem) 50%,100% calc(50% + 1rem),100% 100%,0 100%,0 calc(50% + 1rem),1rem 50%,0 calc(50% - 1rem));
  width: fit-content; padding: 0.5rem 2rem; background: var(--accent-pastel-green); color: var(--text-color); margin-bottom: 1rem;
}

/* Checkout button */
.plan-box > div:last-child > div:last-child > form > button {
  background-color: var(--accent-pastel-green); color: var(--accent-dark-blue);
  font-weight: 800; cursor: pointer; font-size: var(--btn-font-size);
  border: 6px solid var(--accent-pastel-green); border-radius: 2rem; padding: var(--btn-padding); margin: 1rem 0; width: 100%;
}
.plan-box > div:last-child > div:last-child button:hover { background: var(--accent-pastel-green-hover); box-shadow: var(--box-shadow-panel); }

.plan-box:has(.open-quote-modal) .plan-cta {
  display: none;
}

.plan-cta {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}

/* Studios */
.studios { margin: auto; text-align: center; background: var(--background-color);  }
.studios-content {margin: 2rem; text-align: center; }
.studios-subtitle { color: var(--accent-dark-blue); text-transform: uppercase; font-size: var(--fs-subheader); }
.studios-title { color: var(--text-color, #222); font-size: var(--fs-h2); margin: 0 0 1rem; font-family: var(--font-header); text-transform: uppercase; line-height: var(--lh-tight); }
.studios-description { font-size: var(--fs-body); line-height: var(--lh-normal); margin-bottom: 2rem; color: var(--text-color, #333);}

/* Search bar */
.studios-search {
  display: flex;
  align-items: center;
  border: 3px solid var(--accent-dark-blue);
  border-radius: 3rem;
  overflow: hidden;
  padding: 0.5rem 1rem;
  max-width: 600px;
  margin: 2rem auto 2rem auto;
}
.search-icon { font-size: var(--fs-subheader); margin-right: 0.5rem; color: var(--accent-dark-blue); }
.studios-search input { border: none; outline: none; flex: 1; font-size: var(--fs-body); background: transparent; color: var(--text-color, #222); }

/* Tag cloud - HIDDEN */
.studios-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: var(--space-12);
  margin-left: auto;
  margin-right: auto;
  max-width: 950px;
}
.tag {
  background: var(--accent-dark-blue);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  font-size: var(--fs-subheader);
  font-weight: 600;
  cursor: pointer;
  text-transform: capitalize;
}

/* Studios grid */
.studios-grid { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 2rem; 
  justify-content: center;
}
.studio-card {
  max-width: 200px;
  min-width: 200px;
  background: #fff; 
  border: 2px solid #eee; 
  border-radius: 1rem; 
  padding: var(--space-8);
  text-align: center; 
  box-shadow: 0 4px 12px rgba(0,0,0,0.08); 
  word-break: break-word;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.studio-logo { 
  width: 8rem; 
  height: auto; 
  margin-bottom: 1rem; 
  border-radius: 0.4rem;
}
.studio-name { 
  margin: 0 0 0.5rem; 
  font-size: var(--fs-h3); 
  color: var(--custom-accent-color, var(--accent-dark-blue)); 
}
.studio-skill { 
  font-size: var(--fs-subheader); 
  margin-bottom: 1.5rem;
  color: var(--text-color, #444); 
}
.studio-buttons { 
  display: flex; 
  gap: 1rem; 
  justify-content: center; 
  flex-direction: column; 
}
.studio-buttons > .btn-outline {
  background: transparent;
  border: 3px solid var(--accent-dark-blue);
  color: var(--accent-dark-blue);
  padding: var(--btn-padding);
  border-radius: 2rem;
  font-weight: 600;
  cursor: pointer;
  font-size: var(--btn-font-size);
}
.studio-buttons > .btn-solid {
  background: var(--custom-accent-color, var(--accent-dark-blue)); 
  border: 3px solid var(--custom-accent-color, var(--accent-dark-blue));
  color: #fff;
  padding: var(--btn-padding); 
  border-radius: 2rem; 
  font-weight: 600; 
  cursor: pointer; 
  font-size: var(--btn-font-size);
}
.studio-buttons > .btn-outline:hover,
.studio-buttons > .btn-solid:hover {
  opacity: 0.9;
}

@media (max-width: 900px) {
  .studios-search { max-width: 100%; }
  .studios-grid { flex-direction: column; align-items: center; }
}

/* Global Button Hovers */
.btn-primary:hover,
.features-cta .btn-primary:hover,
.levels-buttons .btn-primary:hover,
.newsletter-form button:hover {
  background-color: var(--accent-dark-blue-hover);
  color: var(--accent-pastel-green);
}
.btn-accent:hover,
.free-trial-form button:hover,
.custom-panel .btn-solid:hover {
  background-color: var(--accent-pastel-green-hover);
  border-color: var(--accent-pastel-green-hover);
  color: var(--accent-dark-blue);
}

.studio-buttons > .btn-solid:hover {
 background: color-mix(in srgb, var(--custom-accent-color, var(--_btn-outline-color)), black 20%);
}

/* Outlined buttons */
.btn-border,
.btn-outline,
.studio-buttons > .btn-outline,
.features-cta .btn-border,
.levels-buttons .btn-border,
.btn-demo {
  --_btn-outline-color: var(--accent-dark-blue);
  color: var(--custom-accent-color, var(--_btn-outline-color));
  border-color: var(--custom-accent-color, var(--_btn-outline-color));
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn-demo { --_btn-outline-color: var(--accent-pastel-green); }

.btn-border:hover,
.btn-outline:hover,
.studio-buttons > .btn-outline:hover,
.features-cta .btn-border:hover,
.levels-buttons .btn-border:hover,
.btn-demo:hover {
  background: color-mix(in srgb, var(--custom-accent-color, var(--_btn-outline-color)), black 20%);
  color: #fff;
}
/*.btn-demo:hover { color: var(--accent-dark-blue); }*/

@keyframes open { 0% { max-height: 0; } 100% { max-height: 500px } }
@keyframes close { 0% { max-height: 500px } 100% { max-height: 0; margin: 0; } }
details[open] p { animation: open 1s; }
details.closing p { animation: close .4s; }

/* Legal page */
.legal-page {
  max-width: 1200px;
  margin: 3rem auto;
  padding: 0rem;
  font-family: 'Montserrat', sans-serif;
  color: var(--text-color, #161e26);
}
.legal-page h4 {
  font-size: var(--fs-subheader, 0.875rem);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  margin-bottom: 0.5rem;
  margin-top: 0rem;
  color: var(--accent-dark-blue);
}
.legal-page h1 {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: var(--fs-h1, 2rem);
  margin-bottom: 1.5rem;
  color:var(--accent-white);
}
.legal-resource { 
  margin-bottom: 2.5rem; 
  padding-bottom: 2rem; 
  border-bottom: 1px solid #e0e0e0; 
}

.legal-resource h2 { 
  font-size: 1.5rem; 
  margin-bottom: 0.25rem; 
  color: var(--text-color); 
}

.legal-resource h2 a { 
  text-decoration: none; 
  color: inherit; 
}

.legal-resource h2 a:hover { 
  text-decoration: underline; 
  color: var(--subheader-color, #3551a4); 
}

.legal-resource em { 
  display: block; 
  font-style: italic; 
  color: var(--subheader-color, #3551a4); 
  margin-bottom: 0.5rem; 
}

.legal-resource p { 
  font-size: var(--fs-body, 1rem); 
  line-height: 1.6; 
  margin: 0 0 0.75rem; 
}

@media (max-width: 950px) {
  .legal-page h1 { font-size: 1.75rem; }
  .legal-resource h2 { font-size: 1.25rem; }
}

/* ===========================
   Modals — Base
   =========================== */
.modal {
  display: none;                 /* shown via JS */
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.6);
  justify-content: center;
  align-items: center;
  padding: 2rem;                 /* gutter so tall boxes have room */
}

.modal-content {
  position: relative;
  background: #fff;
  border-radius: 12px;
  width: 90%;
  text-align: center;
  max-width: 800px;              
  max-height: 70vh;              
  overflow: auto;                
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
  padding: 2rem;
}

.modal-content > iframe {
  display: block;
  margin: 1rem auto;
  border: none;
  width: 80%;         
  max-width: 640px;   
  height: 360px;      
  border-radius: 0.45rem;
}

@media (max-width: 768px) {
  .modal-content > iframe {
    width: 100%;
    height: 200px;
  }
}

.modal-content > img {
  display: block;
  margin: 1rem auto;
  width: 7rem;
  height: auto;
  border-radius: 0.45rem;
}

#learn-more-about-studio-modal .modal-content h3 {
  text-transform: uppercase;          
  letter-spacing: 0.1rem;             
  text-align: center;
  font-weight: 800;                
}

.modal .close {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  font-size: 2rem;
  font-weight: bold;
  color: #333;
  cursor: pointer;
}

body.modal-open {
  overflow: hidden;            
}

/* action buttons row inside the studio modal */
.studio-actions{
  display:flex;
  gap: 1rem;
  justify-content:center;
  flex-wrap:wrap;
  margin-top: 1rem;
}

/* tiny toast that appears in the modal corner */
.copy-toast{
  position:absolute;
  right:1rem;
  bottom:1rem;
  background:#142664;                 /* your dark blue */
  color:#e3ff66;                      /* pastel yellow-green */
  padding:.5rem .75rem;
  border-radius:.5rem;
  font: 500 0.875rem/1 var(--font-body, Montserrat, sans-serif);
  box-shadow:0 6px 20px rgba(0,0,0,.2);
  opacity:0;
  transform:translateY(6px);
  transition:opacity .15s ease, transform .15s ease;
  pointer-events:none;
}
.copy-toast.show{ opacity:1; transform:translateY(0); }

/* Demo modal iframe sizing */
#demoModal .modal-content iframe {
  width: 100%;
  height: 70vh;
  display: block;
  border: 0;
}

/* ===========================
   Contact + Quote Modals — Overrides
   =========================== */
#contactModal .modal-content,
#quoteModal  .modal-content {
  max-width: 600px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Shared headings */
#contactModal h4,
#quoteModal  h4 {
  font-family: var(--font-subheader);
  font-size: var(--fs-subheader);
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  color: var(--accent-dark-blue);
  margin: 0;
  text-align: center;
}

#contactModal h2,
#quoteModal  h2 {
  font-family: var(--font-header);
  font-size: var(--fs-h2);
  text-transform: uppercase;
  line-height: var(--lh-tight);
  margin: 0 0 1rem;
  color: var(--headline-color);
  text-align: center;
}

/* Shared form layout + fields */
.contact-form,
.quote-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: stretch;      /* prevent centering */
  text-align: left;          /* make all child text left-aligned */
}

.contact-form label,
.quote-form  label {
  font-family: var(--font-body);
  font-size: var(--fs-subheader);
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--text-color);
  text-align: left;          /* ensure labels stay left-aligned */
  display: block;            /* fixes inline alignment issues */
}

/* Required asterisk for both forms */
.contact-form label::after,
.quote-form  label::after {
  content: " *";
  color: red;
  font-weight: bold;
}

.contact-form input,
.contact-form select,
.contact-form textarea,
.quote-form   input,
.quote-form   select,
.quote-form   textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  font-family: var(--font-body);
  resize: vertical;              /* only allow vertical resize for textarea */
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus,
.quote-form   input:focus,
.quote-form   select:focus,
.quote-form   textarea:focus {
  border-color: var(--accent-dark-blue);
  outline: none;
  box-shadow: 0 0 0 2px rgba(53,81,164,0.2);
}

/* Submit buttons inherit .btn-primary tokens; keep full-width */
.contact-form button.btn-primary,
.quote-form   button.btn-primary {
  margin-top: 0.5rem;
  width: 100%;
}

/* ===========================
   Mobile tweaks
   =========================== */
@media (max-width: 950px) {
  .modal {
    padding: 0.75rem;
  }
  .modal-content {
    width: 100%;
    max-height: 95vh;
    border-radius: 10px;
    padding: 1.25rem;
  }
}
/* ================================
   Footer accordions (mobile-first)
   ================================ */

/* base */
.footer-accordion{
  border-top: 1px solid rgba(0,0,0,0.08);
  padding: .25rem 0;
}
.footer-accordion > summary{
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .75rem 0;
  cursor: pointer;
  color: var(--accent-dark-blue);
  font-family: var(--font-subheader, Montserrat, sans-serif);
  font-weight: 700;
  font-size: .875rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.footer-accordion > summary::-webkit-details-marker{ display:none; }

/* caret */
.footer-accordion > summary::after{
  content:"";
  inline-size: 10px;
  block-size: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .2s ease;
}
.footer-accordion[open] > summary::after{ transform: rotate(45deg); }

/* Footer link colors */
.footer-links a {
  display: block;
  padding: .35rem 0;
  color: var(--text-color);         
  text-decoration: none;
  font-weight: 500;                    
  font-size: 0.875rem;
  transition: color 0.2s ease, font-weight 0.2s ease;
}

.footer-links a:visited {
  color: var(--text-color);         
}

.footer-links a:hover {
  color: var(--accent-dark-blue);
}

/* Mobile / tablet (≤950px): stacked accordions */
@media (max-width: 950px){
  .footer-right{
    display: block;
    width: 100%;
  }
  .footer-accordion .footer-links{
    padding: 0 .25rem .75rem;
  }
}

/* Desktop (≥951px): 3 columns, non-toggling UI */
@media (min-width: 951px){
  .footer-right{
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 2rem;
    align-items: start;
  }

  /* remove borders/padding lines */
  .footer-accordion{
    border-top: 0;
    padding: 0;
  }

  /* headings look like section titles; no caret */
  .footer-accordion > summary{
    cursor: default;
    padding: 0 0 .5rem 0;
    font-size: 0.875rem;
  }
  .footer-accordion > summary::after{ display: none; }

  /* Ensure links are visible on desktop.
     (Best practice: mark each <details> with open in HTML for desktop.) */
  .footer-accordion .footer-links{
    display: block;
    padding: 0;
  }
}