:root {
  --brand-light-blue: #96d3ea;
  --brand-light-blue-rgb: 150, 211, 234;
  --brand-medium-blue: #33aad3;
  --brand-medium-blue-rgb: 51, 170, 211;
  --brand-dark-blue: #0173a3;
  --brand-dark-blue-rgb: 1, 115, 163;
  --brand-orange: #fcb247;
  --brand-orange-rgb: 252, 178, 71;
  --brand-orange-hover: #e89f32;
  --white: #ffffff;
  --black: #000000;
  --dark-grey: #3B3B3B;
  --off-black: #1f1f1f;
  --mid-grey: #2a2a2a; 
}

/* background colours */
.capit-bg-black { background-color: var(--black); }
.capit-bg-dark-grey { background-color: var(--dark-grey); }
.capit-bg-mid-grey { background-color: var(--mid-grey); } 
.capit-bg-off-black { background-color: var(--off-black); } 

/* default white text */
.capit-bg-dark-grey, .capit-bg-mid-grey, .capit-bg-off-black {
  color: var(--white);
}

/* ----------------------------------------
   Responsive Typography: Base Elements
---------------------------------------- */
.capit-mobile-text-spacer {
  margin-top: 1rem;
}

h1 {
  font-size: clamp(2rem, 6vw, 4rem);
  font-weight: 700;
}

h2 {
  font-size: clamp(1.capit-75rem, 5vw, 3rem);
  font-weight: 600;
}

h3 {
  font-size: clamp(1.capit-5rem, 4vw, 2.25rem);
  font-weight: 600;
}

h4 {
  font-size: clamp(1.capit-25rem, 3.capit-5vw, 1.75rem);
  font-weight: 600;
}

p {
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.6;
}

/* ----------------------------------------
   Title Section Styling
---------------------------------------- */
.capit-title-section {
  margin-bottom: 2rem;
}

.capit-responsive-title {
  font-size: clamp(2.capit-5rem, 6vw, 4rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--white);
  margin-bottom: 0;
}

.capit-title-line {
  display: inline-block;
  white-space: nowrap;
}

.capit-title-section {
  margin-bottom: 2rem;
  text-align: center; /* Default for small screens */
}

@media (min-width: 992px) {
  .capit-title-section {
    text-align: left;
  }
}


@media (max-width: 768px) {
  .capit-responsive-title {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .capit-title-line + .capit-title-line {
    margin-top: 0;
  }
}



/* ----------------------------------------
   Utility / Semantic Classes
---------------------------------------- */

.capit-hero-title {
  font-size: clamp(2.capit-4rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 2rem;
}

.capit-hero-subhead {
  font-size: clamp(1.capit-25rem, 3vw, 2.5rem);
  font-weight: 600;
  max-width: 800px; 
  color: var(--white);
}

.capit-hero-intro {
  font-size: clamp(1.capit-2rem, 3vw, 2.4rem);
  font-weight: 500;
  max-width: 800px; 
  color: var(--white);
}

.capit-intro-text {
  font-size: clamp(1.capit-2rem, 3vw, 1.6rem);  /* ~17.capit-6px to ~25.capit-6px */
  color: var(--white);
  line-height: 1.5;
}


.capit-lead {
  font-size: clamp(1.capit-125rem, 2.capit-5vw, 1.5rem);
  font-weight: 400;
}

@media (max-width: 991.98px) {
  .capit-hero-section-mobile-trim {
    padding-bottom: 1.5rem; /* or try 1rem or even 0.capit-5rem */
  }
}

.capit-hero-title span {
  display: inline-block;
  margin-right: 0.5rem;
  white-space: nowrap; /* prevents word breaking mid-span */
}

.capit-hero-subhead {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.capit-hero-subhead,
.capit-lead {
  line-height: 1.5;
}

/* Used for emphasis, such as key stats or marketing statements */
.capit-callout {
  font-size: clamp(1.capit-5rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--brand-light-blue);
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
}


/* General Text and Layout */
body {
  /* background-color: var(--black); */
  background-color: var(--black);
  margin: 0;
  font-family: sans-serif;
}

/* Logo */
.capit-logo {
  height: 2.5rem;
  object-fit: contain;
}

/* Buttons */
.capit-btn-create-account {
  background-color: transparent;
  color: var(--brand-orange);
  border: 2px solid var(--brand-orange);
  font-weight: 500;
}

.capit-btn-create-account:hover {
  background-color: var(--brand-orange-hover);
  color: var(--white);
}

.capit-btn-sign-in {
  background-color: transparent;
  color: var(--brand-light-blue);
  border: 2px solid var(--brand-light-blue);
  font-weight: 500;
}

.capit-btn-sign-in:hover {
  background-color: var(--brand-light-blue);
  color: var(--black);
}


/* Tap feedback for custom action buttons */
.capit-btn-sign-in:active,
.capit-btn-create-account:active,
.btn-primary:active,
.btn-outline-light:active,
.btn-outline-warning:active {
  transform: scale(0.96);
  filter: brightness(1.15);
}

.btn {
  transition: transform 0.capit-2s ease, filter 0.capit-2s ease;
}

/* Navbar link styles */
.navbar-dark .capit-navbar-nav .nav-link {
  color: var(--white) !important;
  font-size: 1rem;
}

.navbar-dark .capit-navbar-nav .nav-link:hover {
  color: var(--brand-light-blue) !important;
}

/* =====================================
   Animation styles
   ===================================== */

/* Keyframes */
@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeLeft {
  0% { opacity: 0; transform: translateX(-40px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes fadeRight {
  0% { opacity: 0; transform: translateX(40px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* Fade animation base settings */
.fade-up,
.fade-left,
.fade-right {
  opacity: 0;
  animation-play-state: paused;
  animation-fill-mode: forwards;
}

/* Animation declarations */
.fade-up { animation: fadeUp 1s ease-out; }
.fade-left { animation: fadeLeft 0.8s ease-out; }
.fade-right { animation: fadeRight 0.8s ease-out; }

/* Fade delays */
.capit-fade-delay-1 { animation-delay: 0.4s; }
.capit-fade-delay-2 { animation-delay: 0.8s; }
.capit-fade-delay-3 { animation-delay: 1.2s; }
.capit-fade-delay-4 { animation-delay: 1.6s; }
.capit-fade-delay-5 { animation-delay: 2.0s; }

/* =====================================
   About section styles
   ===================================== */
@media (min-width: 992px) {
  .capit-shift-about-up {
    margin-top: -6.5rem; /* tweak this value if needed */
  }
}

/* =====================================
   Summary Table Styles (refactored)
   ===================================== */

/* Container & layout */
.capit-summary-table-container {
  max-width: 350px; /* reduced for desktop alignment */
  width: 100%;
  margin: 2rem auto;
  padding: 1rem;
  color: var(--white);
}

@media (min-width: 992px) {
  .capit-summary-table-container {
    margin-top: 1.5rem;
  }
}

@media (max-width: 991.98px) {
  .capit-summary-table-container {
    margin-top: 6rem;
  }
}

/* Card background */
.capit-summary-card {
  background-color: var(--off-black);
  border-radius: 1rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  padding: 1.5rem;
}

/* Title & footnote */
.capit-summary-card-title,
.capit-summary-table-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--brand-light-blue);
  text-align: center;
  margin-bottom: 1rem;
}

.capit-summary-table-note {
  font-size: 0.9rem;
  color: var(--white);
  opacity: 0.85;
  margin-top: 0.5rem;
  text-align: center;
}

/* Table */
.capit-capped-rates-summary-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 1rem;
  background-color: transparent;
}

.capit-capped-rates-summary-table th,
.capit-capped-rates-summary-table td {
  padding: 0.5rem;
  font-weight: 400;
  word-break: break-word;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.capit-capped-rates-summary-table thead th {
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.capit-capped-rates-summary-table th:nth-child(2),
.capit-capped-rates-summary-table td:nth-child(2) {
  color: var(--brand-light-blue);
  text-align: right;
  padding-right: 0.25rem;
  font-weight: 500;
}

.capit-capped-rates-summary-table th:nth-child(3),
.capit-capped-rates-summary-table td:nth-child(3) {
  color: var(--brand-orange);
  text-align: right;
  padding-right: .25rem;
}

/* Gridline options */
.capit-capped-rates-summary-table tr.capit-border-light td {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.capit-capped-rates-summary-table tr.capit-border-blue td {
  border-top: 1px solid var(--brand-light-blue);
}

.capit-capped-rates-summary-table tr.capit-border-orange td {
  border-top: 1px solid var(--brand-orange);
}

.capit-capped-rates-summary-table tr.capit-border-none td {
  border-top: none;
}

.capit-capped-rates-summary-table tr.capit-border-orange-semi-transparent td {
  border-top: 0.capit-5px solid rgba(var(--brand-orange-rgb), 0.2);
}

.capit-capped-rates-summary-table tr.capit-border-light-blue-semi-transparent td {
  border-top: 0.capit-5px solid rgba(var(--brand-light-blue-rgb), 0.2);
}

/* Match adviser card size and alignment */
.capit-summary-card {
  max-width: 440px;          /* Match adviser card */
  margin-left: auto;         /* Align right in parent column */
  margin-right: 0;
}

/* Ensure white text in first column */
.capit-capped-rates-summary-table td:first-child {
  color: var(--white);
  white-space: nowrap;
}

/* Prevent header text wrapping */
.capit-capped-rates-summary-table th {
  white-space: nowrap;
}

/* Responsive scroll (optional) */
.table-scroll-wrapper {
  overflow-x: auto;
}


/* =====================================
   Action Button Styles
   ===================================== */

.capit-btn-primary-action {
  background-color: var(--brand-orange);
  color: var(--black);
  border: none;
  font-weight: 600;
  padding: 0.capit-5rem 1.25rem;
  border-radius: 0.375rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.capit-btn-primary-action:hover {
  background-color: var(--brand-orange-hover);
  color: var(--white);
}

.capit-btn-secondary-action {
  background-color: transparent;
  color: var(--brand-light-blue);
  border: 2px solid var(--brand-light-blue);
  font-weight: 600;
  padding: 0.capit-5rem 1.25rem;
  border-radius: 0.375rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.capit-btn-secondary-action:hover {
  background-color: var(--brand-light-blue);
  color: var(--black);
}

/* Button layout container */
.capit-button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  max-width: 600px;
}

/* Mobile-friendly stacking */
@media (max-width: 768px) {
  .capit-button-group {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .capit-button-group .btn {
    width: 100%;
    max-width: 400px;
  }
}

@media (min-width: 992px) {
  .capit-button-wrapper {
    position: relative;
    min-height: 0px; /* creates a "zone" for the button to float in */
  }

  .capit-shift-up-on-desktop {
    position: absolute;
    top: -70px;       /* adjust this to control vertical position - negative pushes up*/
    left: 0;
    z-index: 2;
  }
}




/* =====================================
   Client Cards Styles
   ===================================== */

.capit-card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.capit-card-grid {
  align-items: stretch;
}

.capit-client-card {
  background: transparent;
  border-radius: 0.5rem;
  border: 2px solid var(--white);
  padding: 1rem;
  color: var(--white);
  flex: 1 1 calc(33.333% - 1rem);
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.capit-client-card h4 {
  margin-bottom: 0.5rem;
}

.capit-client-card p {
  font-size: 0.95rem;
  flex-grow: 1;
  margin-bottom: 0.5rem;
}

.capit-client-card a {
  font-weight: bold;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid transparent;
}

.capit-client-card a:hover {
  border-bottom: 1px solid currentColor;
}

/* Card colour themes */
.capit-card-borrowers {
  border-color: var(--brand-light-blue);
  color: var(--brand-light-blue);
}

.capit-card-lenders {
  border-color: var(--white);
  color: var(--white);
}

.capit-card-advisors {
  border-color: var(--brand-orange);
  color: var(--brand-orange);
}

/* Responsive layout */
@media (max-width: 768px) {
  .capit-client-card {
    flex: 1 1 100%;
  }
}

/* Orange highlighted text */
.capit-highlight-orange {
  color: var(--brand-orange);
  font-weight: 700;
  font-size: 1.25rem;
}

/* Light blue highlighted text */
.capit-highlight-light-blue {
  color: var(--brand-light-blue);
  font-weight: 700;
  font-size: 1.25rem;
}

/* White highlighted text */
.capit-highlight-white {
  color: var(--white);
  font-weight: 700;
  font-size: 1.25rem;
}

/* White text while keeping max width at 700px */
.capit-text-white-limited {
  color: var(--white);
  max-width: 700px;
}

.capit-text-light-blue { color: var(--brand-light-blue); }
.capit-text-orange { color: var(--brand-orange); }

/* Extra spacing utility */
.capit-extra-vertical-space {
  margin-bottom: 3rem;
}

@media (min-width: 992px) {
  .capit-section-spacing-top { margin-top: 80px; }

  .capit-push-cards-down {
    margin-top: 2rem; /* Adjust value as needed */
  }
}

.capit-card-white:hover {
  background-color: var(--white);
  color: var(--black);
  transform: scale(1.03);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
}

.capit-card-orange:hover {
  background-color: var(--brand-orange);
  color: var(--black);
  transform: scale(1.03);
  box-shadow: 0 0 12px rgba(var(--brand-orange-rgb), 0.4);
}

.capit-card-light-blue:hover {
  transform: scale(1.03);
  background-color: var(--brand-light-blue);
  color: var(--dark-grey);
  box-shadow: 0 0 12px rgba(var(--brand-light-blue-rgb), 0.5);
}


.capit-client-card {
  transition: transform 0.capit-3s ease, box-shadow 0.capit-3s ease, background-color 0.capit-3s, color 0.capit-3s, filter 0.2s;
  cursor: pointer;
}

.capit-card-borrowers:hover {
  transform: scale(1.03);
  background-color: var(--brand-light-blue);
  color: var(--off-black);
  box-shadow: 0 0 12px rgba(var(--brand-light-blue-rgb), 0.5);
}

.capit-card-lenders:hover {
  transform: scale(1.03);
  background-color: var(--white);
  color: var(--off-black);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
}

.capit-card-advisors:hover {
  transform: scale(1.03);
  background-color: var(--brand-orange);
  color: var(--off-black);
  box-shadow: 0 0 12px rgba(var(--brand-orange-rgb), 0.4);
}

.capit-card-borrowers:active,
.capit-card-lenders:active,
.capit-card-advisors:active {
  transform: scale(0.97);
  filter: brightness(1.1);
}



/* =====================================
   Benefit Cards Styles (amended copy of client-card)
   ===================================== */

.capit-benefit-card {
  background: transparent;
  border-radius: 0.5rem;
  border: 2px solid var(--white);
  padding: 1rem;
  color: var(--white);
  flex: 1 1 calc(50% - 1rem);
  min-height: 160px; /* ↓ reduced from 200px */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Chevron-style indicator using pseudo-element */
.capit-section-how-to .accordion-button::after,
.capit-section-current-rates .accordion-button::after {
  content: "▾";
  font-size: 1.25rem;
  transform: rotate(0deg);
  transition: transform 0.capit-3s ease;
  margin-left: auto;
}

/* Rotate the chevron when expanded */
.capit-section-how-to .accordion-button:not(.collapsed)::after,
.capit-section-current-rates .accordion-button:not(.collapsed)::after {
  transform: rotate(180deg);
}


.capit-benefit-card h4 {
  margin-bottom: 0.5rem;
}

.capit-benefit-card p {
  font-size: 0.95rem;
  flex-grow: 1;
  margin-bottom: 0rem;
}

.capit-benefit-card a {
  font-weight: bold;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid transparent;
}

.capit-benefit-card a:hover {
  border-bottom: 1px solid currentColor;
}

/* Card colour themes */
.capit-card-light-blue {
  border-color: var(--brand-light-blue);
  color: var(--brand-light-blue);
}

.capit-card-white {
  border-color: var(--white);
  color: var(--white);
}

.capit-card-orange {
  border-color: var(--brand-orange);
  color: var(--brand-orange);
}

/* hover themes */
.capit-benefit-card.capit-card-light-blue:hover {
  background-color: var(--brand-light-blue);
  color: var(--dark-grey);
  box-shadow: 0 0 12px rgba(var(--brand-light-blue-rgb), 0.4);
}

.capit-benefit-card.capit-card-white:hover {
  background-color: var(--white);
  color: var(--dark-grey);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
}

.capit-benefit-card.capit-card-orange:hover {
  background-color: var(--brand-orange);
  color: var(--dark-grey);
  box-shadow: 0 0 12px rgba(var(--brand-orange-rgb), 0.4);
}


/* Responsive layout */
@media (max-width: 1024px) {
  .capit-benefit-card {
    flex: 1 1 100%;
  }
}


.capit-benefit-card {
  transition: transform 0.capit-3s ease, box-shadow 0.capit-3s ease, background-color 0.capit-3s, color 0.3s;
  cursor: pointer;
  border-radius: 0.5rem;
}

.capit-benefit-card:hover {
  transform: scale(1.03);
  /* background-color, color and box-shadow now handled per theme */
}

/*
.capit-benefit-card:hover {
  transform: scale(1.03);
  background-color: var(--brand-light-blue);
  color: var(--dark-grey);
  box-shadow: 0 0 12px rgba(var(--brand-light-blue-rgb), 0.4);
}
*/

.capit-benefit-extra {
  max-height: 0;
  overflow: hidden;
  padding-top: 0;
  opacity: 0;
  transition: max-height 0.5s ease, padding 0.5s ease, opacity 0.5s ease;
}

.capit-benefit-card.capit-expanded .capit-benefit-extra {
  max-height: 500px; /* Or adjust based on content */
  padding-top: 0.75rem;
  opacity: 1;
}

.capit-benefit-toggle {
  background: none;
  border: none;
  color: inherit;
  font-weight: bold;
  cursor: pointer;
  padding: 0;
  margin-top: 0.25rem;
  text-decoration: underline;
}

.capit-benefit-card {
  position: relative; /* enable absolute positioning inside */
}

.capit-benefit-caret {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  font-size: 1.25rem;
  cursor: pointer;
  transition: transform 0.capit-3s ease;
  user-select: none;
}

.capit-benefit-card.capit-expanded .capit-benefit-caret {
  transform: rotate(180deg);
}

/* Optional: Prevent selection glitch on double-click
   To improve the feel on mobile or fast clickers */
.capit-benefit-card {
  user-select: none;
}

/* -------------------------------
   HOW TO + CURRENT RATES SECTIONS styles
   ------------------------------- */

.capit-section-how-to .accordion-button,
.capit-section-current-rates .accordion-button {
  background-color: #1f1f1f;
  color: var(--brand-light-blue);
  font-weight: 600;
  border: none;
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
}

.capit-section-how-to .accordion-button:not(.collapsed),
.capit-section-current-rates .accordion-button:not(.collapsed) {
  background-color: var(--brand-dark-blue);
  color: white;
  box-shadow: inset 0 -2px 0 var(--brand-light-blue);
}

.capit-section-how-to .accordion-body,
.capit-section-current-rates .accordion-body {
  background-color: #2a2a2a;
  color: white;
  border-radius: 0 0 0.capit-5rem 0.5rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.capit-section-how-to .accordion-item,
.capit-section-current-rates .accordion-item {
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 1rem;
  background-color: #1a1a1a;
  border-radius: 0.5rem;
}

/* =====================================
   FAQ Section Styles
   ===================================== */

/*
.capit-faq-section .accordion-button {
  background-color: transparent;
  color: var(--white);
  font-weight: 600;
}
*/

.capit-faq-section .accordion-button {
  background-color: #1f1f1f; /* slightly lighter than body */
  color: var(--brand-light-blue); /* consistent with branding */
  font-weight: 600;
  border: none;
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
}

/*
.capit-faq-section .accordion-button:not(.collapsed) {
  background-color: var(--brand-dark-blue);
  color: var(--white);
}
*/

.capit-faq-section .accordion-button:not(.collapsed) {
  background-color: var(--brand-dark-blue); /* strong accent */
  color: white;
  box-shadow: inset 0 -2px 0 var(--brand-light-blue);
}

/*
.capit-faq-section .accordion-body {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--white);
}
*/

.capit-faq-section .accordion-body {
  background-color: #2a2a2a; /* slightly lighter for contrast */
  color: white;
  border-radius: 0 0 0.capit-5rem 0.5rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/*
.capit-faq-section .accordion-item {
  border: 1px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 0.75rem;
  border-radius: 0.375rem;
}
*/

.capit-faq-section .accordion-item {
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 1rem;
  background-color: #1a1a1a;
  border-radius: 0.5rem;
}