/* =============================================
       CSS VARIABLES
    ============================================= */
    :root {
      --gold: #d4af37;
      --gold-light: #f4c95d;
      --gold-dark: #b8962f;
      --primary: #1a1a2e;
      --text-dark: #2d2d2d;
      --text-muted: #6b7280;
      --bg-light: #f9fafb;
      --bg-white: #ffffff;
      --border-light: #e5e7eb;
      --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
      --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
      --radius: 12px;
      --radius-lg: 16px;
      --transition: all 0.3s ease;
      --green: #10b981;
      --green-light: #d1fae5;
    }

/* =============================================
       RESET & BASE STYLES
    ============================================= */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

html {
      scroll-behavior: smooth;
    }

body {
      font-family: 'Poppins', sans-serif;
      font-size: 16px;
      line-height: 1.6;
      color: var(--text-dark);
      background-color: var(--bg-light);
      min-height: 100vh;
    }

h1, h2, h3, h4, h5, h6 {
      font-family: 'Playfair Display', serif;
      font-weight: 600;
      line-height: 1.3;
    }

img {
      max-width: 100%;
      height: auto;
    }

a {
      text-decoration: none;
      color: inherit;
    }

button {
      cursor: pointer;
      font-family: inherit;
    }

/* =============================================
       CONTAINER
    ============================================= */
    .container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }

/* =============================================
       HEADER
    ============================================= */
    .header {
      background: var(--bg-white);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
      position: sticky;
      top: 0;
      z-index: 1000;
    }

.header__inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 0;
    }

.logo {
      font-family: 'Playfair Display', serif;
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--primary);
    }

.logo span {
      color: var(--gold);
    }

.nav {
      display: none;
    }

.nav--active {
      display: flex;
      flex-direction: column;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: var(--bg-white);
      box-shadow: var(--shadow);
      padding: 20px;
      gap: 16px;
    }

.nav__link {
      font-size: 0.95rem;
      font-weight: 500;
      color: var(--text-dark);
      padding: 8px 0;
      transition: var(--transition);
    }

.nav__link:hover {
      color: var(--gold);
    }

.hamburger {
      display: flex;
      flex-direction: column;
      gap: 5px;
      background: none;
      border: none;
      padding: 8px;
    }

.hamburger__line {
      width: 24px;
      height: 2px;
      background: var(--text-dark);
      border-radius: 2px;
      transition: var(--transition);
    }

.hamburger--active .hamburger__line:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px);
    }

.hamburger--active .hamburger__line:nth-child(2) {
      opacity: 0;
    }

.hamburger--active .hamburger__line:nth-child(3) {
      transform: rotate(-45deg) translate(5px, -5px);
    }

/* =============================================
       HERO SECTION
    ============================================= */
    .hero {
      background: linear-gradient(135deg, #ffffff 0%, #f9f3dd 50%, rgba(244, 201, 93, 0.12) 100%);
      padding: 40px 0 60px;
      position: relative;
      overflow: hidden;
    }

.hero::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -20%;
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 70%);
      border-radius: 50%;
    }

.hero__inner {
      display: flex;
      flex-direction: column;
      gap: 40px;
      position: relative;
      z-index: 1;
    }

.hero__content {
      text-align: center;
    }

.hero__badge {
      display: inline-block;
      background: linear-gradient(135deg, var(--gold), var(--gold-light));
      color: var(--bg-white);
      font-size: 0.75rem;
      font-weight: 600;
      padding: 6px 16px;
      border-radius: 50px;
      margin-bottom: 20px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

.hero__title {
      font-size: 2rem;
      color: var(--primary);
      margin-bottom: 16px;
    }

.hero__subtitle {
      font-size: 1rem;
      color: var(--text-muted);
      max-width: 500px;
      margin: 0 auto 24px;
    }

.hero__cta {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: linear-gradient(135deg, var(--gold), var(--gold-dark));
      color: var(--bg-white);
      font-size: 0.95rem;
      font-weight: 600;
      padding: 14px 28px;
      border-radius: 50px;
      border: none;
      box-shadow: 0 4px 14px rgba(212, 175, 55, 0.4);
      transition: var(--transition);
    }

.hero__cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(212, 175, 55, 0.5);
    }

.hero__cta svg {
      width: 20px;
      height: 20px;
    }

/* =============================================
       INFO CARD
    ============================================= */
    .info-card {
      background: var(--bg-white);
      border-radius: var(--radius-lg);
      padding: 24px;
      box-shadow: var(--shadow);
      border: 1px solid var(--border-light);
      margin-bottom: 30px;
    }

.info-card__header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px;
    }

.info-card__icon {
      width: 40px;
      height: 40px;
      background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.05));
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--gold);
    }

.info-card__title {
      font-size: 1.1rem;
      color: var(--primary);
    }

.info-card__list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

.info-card__item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 0.9rem;
      color: var(--text-muted);
    }

.info-card__item::before {
      content: '✓';
      color: var(--gold);
      font-weight: 700;
      flex-shrink: 0;
    }
/* =============================================
   STEP PROGRESS INDICATOR
============================================= */
.step-progress {
  margin-bottom: 24px;
  padding: 0 4px;
}

.step-progress__bar {
  height: 4px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 16px;
}

.step-progress__fill {
  height: 100%;
  width: 25%;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  border-radius: 4px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.step-progress__steps {
  display: flex;
  justify-content: space-between;
}

.step-progress__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0.4;
  transition: all 0.3s ease;
}

.step-progress__step--active,
.step-progress__step--completed {
  opacity: 1;
}

.step-progress__step--completed .step-progress__number {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: #fff;
  border-color: var(--gold);
}

.step-progress__number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #e5e7eb;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: all 0.3s ease;
}

.step-progress__step--active .step-progress__number {
  border-color: var(--gold);
  color: var(--gold-dark);
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.15);
}

.step-progress__label {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-muted);
  text-align: center;
}

.step-progress__step--active .step-progress__label {
  color: var(--gold-dark);
  font-weight: 600;
}

/* =============================================
   FORM STEP VISIBILITY
============================================= */
.form-step {
  display: block;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.form-step--hidden {
  display: none;
  opacity: 0;
  transform: translateY(20px);
}

.form-step--entering {
  display: block;
  animation: stepSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes stepSlideIn {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* =============================================
   FORM STEP VISIBILITY
============================================= */
.form-step {
  display: block;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.form-step--hidden {
  display: none;
  opacity: 0;
  transform: translateY(20px);
}

.form-step--entering {
  display: block;
  animation: stepSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.form-step--exiting {
  animation: stepSlideOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes stepSlideIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes stepSlideOut {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}
/* =============================================
   STEP NAVIGATION
============================================= */
.step-nav {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.step-next-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.35);
  transition: all 0.3s ease;
}

.step-next-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.45);
}

.step-next-btn:hover svg {
  transform: translateX(4px);
}

.step-next-btn svg {
  transition: transform 0.3s ease;
}

.step-back-btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--text-muted);
  background: #f3f3f3;
  border: 2px solid #e1e1e1;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.step-back-btn:hover {
  background: #eaeaea;
  color: var(--text-dark);
}

.step-back-btn:hover svg {
  transform: translateX(-4px);
}

.step-back-btn svg {
  transition: transform 0.3s ease;
}

.step-nav .step-next-btn,
.step-nav .btn-calculate {
  flex: 1;
}

/* =============================================
   ERROR SHAKE
============================================= */
@keyframes errorShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.form-group--error {
  animation: errorShake 0.5s ease;
}

.form-group--error .pill-selector {
  padding: 4px;
  border-radius: 44px;
  border: 2px solid #ef4444;
  margin: -4px;
}

/* =============================================
   MOBILE RESPONSIVE
============================================= */
@media (max-width: 480px) {
  .step-progress__label {
    font-size: 0.6rem;
  }

.step-progress__number {
    width: 26px;
    height: 26px;
    font-size: 0.7rem;
  }

.pill-selector--3col .pill-btn,
  .pill-selector--4col .pill-btn {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    padding: 12px 10px;
    font-size: 0.75rem;
  }

.pill-btn {
    padding: 12px 14px;
    font-size: 0.8rem;
  }

.step-nav {
    flex-direction: column-reverse;
  }

.step-back-btn {
    width: 100%;
    justify-content: center;
  }
}
/* =============================================
       CALCULATOR CARD
    ============================================= */
    .calculator {
      background: var(--bg-white);
      border-radius: var(--radius-lg);
      padding: 28px 24px;
      box-shadow: var(--shadow-xl);
      border: 1px solid var(--border-light);
    }

.calculator__title {
      font-size: 1.4rem;
      color: var(--primary);
      margin-bottom: 24px;
      text-align: center;
    }

/* =============================================
   FORM CARD
============================================= */
.form-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 4px 24px rgba(0, 0, 0, 0.04);
  margin-bottom: 20px;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.08);
}

.form-card__header {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  padding: 16px 22px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.form-card__icon {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

.form-card__title {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

.form-card__body {
  padding: 22px;
}
/* =============================================
   FORM INPUTS
============================================= */
.form-group {
  margin-bottom: 20px;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 10px;
}

.form-label span {
  color: #ef4444;
}

.input-wrapper {
  position: relative;
  display: flex;
}

.input-prefix {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gold-dark);
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(212, 175, 55, 0.05));
  border-radius: 12px 0 0 12px;
  border: 2px solid #e1e1e1;
  border-right: none;
}

.form-input,
.form-select {
  width: 100%;
  padding: 14px 16px;
  font-size: 1rem;
  font-family: inherit;
  font-weight: 500;
  color: var(--text-dark);
  background: #fff;
  border: 2px solid #e1e1e1;
  border-radius: 12px;
  transition: all 0.25s ease;
  appearance: none;
}

.form-input--prefixed {
  padding-left: 70px;
}

.form-input--uppercase {
  text-transform: uppercase;
}

.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.12);
}

.form-input:disabled,
.form-select:disabled {
  background: #f3f3f3;
  cursor: not-allowed;
  opacity: 0.7;
}

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 50px;
  cursor: pointer;
}

.form-help {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 8px;
}

.form-error {
  font-size: 0.8rem;
  color: #ef4444;
  margin-top: 8px;
  display: none;
  padding: 8px 12px;
  background: rgba(239, 68, 68, 0.08);
  border-radius: 8px;
}

.form-error--visible {
  display: block;
}

.form-input--error,
.form-select--error {
  border-color: #ef4444 !important;
}

/* =============================================
   ROAD TAX CARD STYLING
============================================= */
.roadtax-card {
  border: 2px solid rgba(212, 175, 55, 0.2);
}

.roadtax-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.roadtax-card__header-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.roadtax-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* =============================================
   ROAD TAX INFO BANNER
============================================= */
.roadtax-info-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.08) 0%, rgba(212, 175, 55, 0.02) 100%);
  border: 2px solid rgba(212, 175, 55, 0.15);
  border-radius: 14px;
  margin-bottom: 24px;
}

.roadtax-info-banner__icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

.roadtax-info-banner__content {
  flex: 1;
}

.roadtax-info-banner__rate {
  text-align: right;
}

.roadtax-info-banner__label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.roadtax-info-banner__value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-dark);
}

.roadtax-info-banner__value--gold {
  color: var(--gold-dark);
  font-size: 1.5rem;
}

/* =============================================
   PILL SELECTOR BUTTONS
============================================= */
.pill-selector {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.pill-selector--3col .pill-btn {
  flex: 1 1 calc(33.333% - 8px);
  min-width: 100px;
}

.pill-selector--4col .pill-btn {
  flex: 1 1 calc(25% - 9px);
  min-width: 80px;
}

.pill-btn {
  flex: 1;
  min-width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 16px;
  background: #f3f3f3;
  border: 2px solid #e1e1e1;
  border-radius: 40px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--text-muted);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.pill-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.6;
  transition: all 0.3s ease;
}

.pill-btn:hover {
  border-color: var(--gold-light);
  background: rgba(212, 175, 55, 0.08);
  color: var(--gold-dark);
  transform: translateY(-2px);
}

.pill-btn:hover svg {
  opacity: 0.9;
  color: var(--gold);
}

.pill-btn.active {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  border-color: var(--gold);
  color: #fff;
  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.4);
}

.pill-btn.active svg {
  opacity: 1;
  color: #fff;
}

/* Pill Group (Radio Style) */
.pill-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.pill-option {
  flex: 1;
  min-width: 140px;
}

.pill-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.pill-option label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  background: #f3f3f3;
  border: 2px solid #e1e1e1;
  border-radius: 40px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: all 0.3s ease;
}

.pill-option input:checked + label {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  border-color: var(--gold);
  color: #fff;
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.35);
}

.pill-option input:checked + label svg {
  color: #fff;
}

/* =============================================
   PILL BUTTON VARIANTS FOR ROAD TAX
============================================= */
.pill-btn--large {
  flex-direction: column;
  padding: 18px 16px;
  gap: 4px;
}

.pill-btn--large .pill-btn__main {
  font-size: 0.95rem;
  font-weight: 700;
}

.pill-btn--large .pill-btn__sub {
  font-size: 0.7rem;
  font-weight: 500;
  opacity: 0.7;
}

.pill-btn--muted {
  background: #f0f0f0;
  border-color: #ddd;
}

.pill-btn--muted:hover {
  background: #e8e8e8;
}

.pill-btn__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.pill-btn__main {
  font-weight: 600;
  font-size: 0.9rem;
}

.pill-btn__sub {
  font-size: 0.7rem;
  opacity: 0.7;
}

.pill-btn__sub--fee {
  color: var(--gold-dark);
  font-weight: 600;
  opacity: 1;
}

.pill-btn.active .pill-btn__sub--fee {
  color: #fff;
}

/* =============================================
   ROAD TAX SUMMARY CARD
============================================= */
.roadtax-summary {
  background: #fff;
  border: 2px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
  margin-top: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.roadtax-summary__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
}

.roadtax-summary__body {
  padding: 20px;
}

.roadtax-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.roadtax-summary__row:first-child {
  padding-top: 0;
}

.roadtax-summary__label {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.roadtax-summary__value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-dark);
}

.roadtax-summary__divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, #e5e7eb, transparent);
  margin: 12px 0;
}

.roadtax-summary__row--total {
  padding-top: 12px;
  padding-bottom: 0;
}

.roadtax-summary__row--total .roadtax-summary__label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
}

.roadtax-summary__value--total {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--gold-dark);
}

.roadtax-summary__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  background: #fef3cd;
  color: #856404;
  font-size: 0.85rem;
  font-weight: 500;
}

.roadtax-summary--skipped {
  opacity: 0.6;
}

.roadtax-summary--skipped .roadtax-summary__header {
  background: #9ca3af;
}

/* Hidden state for optional rows */
.roadtax-summary__row--hidden {
  display: none;
}

/* =============================================
   TOGGLE CARD
============================================= */
.toggle-card {
  margin-bottom: 16px;
}

.toggle-card:last-of-type {
  margin-bottom: 0;
}

.toggle-card__input {
  position: absolute;
  opacity: 0;
}

.toggle-card__label {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: #f3f3f3;
  border: 2px solid #e1e1e1;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.toggle-card__label:hover {
  border-color: var(--gold-light);
}

.toggle-card__input:checked + .toggle-card__label {
  background: rgba(212, 175, 55, 0.05);
  border-color: var(--gold);
}

.toggle-card__icon {
  width: 48px;
  height: 48px;
  background: rgba(212, 175, 55, 0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.toggle-card__input:checked + .toggle-card__label .toggle-card__icon {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: #fff;
}

.toggle-card__content {
  flex: 1;
}

.toggle-card__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 4px;
}

.toggle-card__desc {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.toggle-card__switch-track {
  display: block;
  width: 52px;
  height: 28px;
  background: #e1e1e1;
  border-radius: 50px;
  position: relative;
  transition: all 0.3s ease;
}

.toggle-card__switch-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.toggle-card__input:checked + .toggle-card__label .toggle-card__switch-track {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
}

.toggle-card__input:checked + .toggle-card__label .toggle-card__switch-track::after {
  transform: translateX(24px);
}

/* =============================================
   COLLAPSIBLE FIELD
============================================= */
.collapsible-field {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.4s ease;
}

.collapsible-field--visible {
  max-height: 200px;
  opacity: 1;
  margin-top: 16px;
  padding: 16px;
  background: rgba(212, 175, 55, 0.04);
  border-radius: 12px;
  border: 1px dashed rgba(212, 175, 55, 0.3);
}

/* =============================================
   CALCULATE BUTTON (Enhanced)
============================================= */
.btn-calculate {
  width: 100%;
  padding: 18px 28px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--bg-white);
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  border: none;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: 8px;
}

.btn-calculate svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.btn-calculate:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(212, 175, 55, 0.5);
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
}

.btn-calculate:active:not(:disabled) {
  transform: translateY(-1px);
}

.btn-calculate:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* =============================================
   ADDON SECTION (For Collapsible State)
============================================= */
.addon-section {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.addon-section__title {
  display: none;
}

/* =============================================
   CHECKBOX OPTION (Legacy Support)
============================================= */
.checkbox-option {
  display: none;
}

.checkbox-option--active {
  display: none;
}

/* =============================================
   RADIO GROUP (Legacy Support - Hidden)
============================================= */
.radio-group {
  display: none;
}

/* =============================================
   MOBILE RESPONSIVE
============================================= */
@media (max-width: 480px) {
  .form-card__body {
    padding: 18px 16px;
  }

.form-card__header {
    padding: 14px 16px;
  }

.form-card__icon {
    width: 36px;
    height: 36px;
  }

.form-card__title {
    font-size: 0.9rem;
  }

.pill-group,
  .pill-selector {
    flex-direction: column;
  }

.pill-option,
  .pill-btn {
    min-width: 100%;
  }

.pill-option label,
  .pill-btn {
    padding: 14px 16px;
    font-size: 0.85rem;
  }

.toggle-card__label {
    padding: 14px 16px;
    gap: 12px;
  }

.toggle-card__icon {
    width: 42px;
    height: 42px;
  }

.toggle-card__icon svg {
    width: 20px;
    height: 20px;
  }

.toggle-card__title {
    font-size: 0.9rem;
  }

.toggle-card__desc {
    font-size: 0.75rem;
  }

.toggle-card__switch-track {
    width: 46px;
    height: 24px;
  }

.toggle-card__switch-track::after {
    width: 18px;
    height: 18px;
  }

.toggle-card__input:checked + .toggle-card__label .toggle-card__switch-track::after {
    transform: translateX(22px);
  }

.form-input,
  .form-select {
    padding: 14px 16px;
    font-size: 0.95rem;
  }

.form-input--prefixed {
    padding-left: 65px;
  }

.input-prefix {
    padding: 0 14px;
    font-size: 0.85rem;
  }

.btn-calculate {
    padding: 16px 24px;
    font-size: 1rem;
  }

.collapsible-field--visible {
    padding: 14px;
    margin-top: 14px;
  }
}

@media (min-width: 768px) {
  .form-card__body {
    padding: 24px 22px;
  }

.form-card__header {
    padding: 18px 22px;
  }

.form-card__title {
    font-size: 1.05rem;
  }

.form-input,
  .form-select {
    padding: 16px 18px;
  }

.form-input--prefixed {
    padding-left: 75px;
  }
}

/* =============================================
   MOBILE RESPONSIVE FOR ROAD TAX
============================================= */
@media (max-width: 480px) {
  .roadtax-info-banner {
    flex-direction: column;
    text-align: center;
    gap: 12px;
    padding: 16px;
  }

.roadtax-info-banner__rate {
    text-align: center;
    width: 100%;
    padding-top: 12px;
    border-top: 1px dashed rgba(212, 175, 55, 0.3);
  }

.roadtax-info-banner__value--gold {
    font-size: 1.3rem;
  }

.pill-btn--large {
    padding: 14px 12px;
  }

.pill-btn--large .pill-btn__main {
    font-size: 0.85rem;
  }

.roadtax-summary__value--total {
    font-size: 1.2rem;
  }

.roadtax-badge {
    font-size: 0.6rem;
    padding: 3px 8px;
  }
}

/* =============================================
       RESULT PANEL
    ============================================= */
    .result {
      margin-top: 24px;
      padding-top: 24px;
      border-top: 1px dashed var(--border-light);
    }

.result__placeholder {
      text-align: center;
      padding: 30px 20px;
      color: var(--text-muted);
      font-size: 0.9rem;
    }

.result__placeholder svg {
      width: 48px;
      height: 48px;
      color: var(--border-light);
      margin-bottom: 12px;
    }

.result__content {
      display: none;
    }

.result__content--visible {
      display: block;
      animation: fadeIn 0.4s ease;
    }

@keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

.result__title {
      font-size: 1.1rem;
      color: var(--primary);
      margin-bottom: 16px;
      text-align: center;
    }

.result__section {
      margin-bottom: 16px;
    }

.result__section-title {
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 8px;
      padding-bottom: 6px;
      border-bottom: 1px solid var(--border-light);
    }

.result__row {
      display: flex;
      justify-content: space-between;
      padding: 8px 0;
      font-size: 0.9rem;
    }

.result__label {
      color: var(--text-muted);
    }

.result__value {
      font-weight: 500;
      color: var(--text-dark);
    }

.result__value--discount {
      color: var(--green);
    }

.result__value--addon {
      color: var(--gold-dark);
    }

.result__total {
      background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(212, 175, 55, 0.05));
      border-radius: var(--radius);
      padding: 20px;
      margin: 20px 0;
      text-align: center;
    }

.result__total-label {
      font-size: 0.85rem;
      color: var(--text-muted);
      margin-bottom: 4px;
    }

.result__total-value {
      font-family: 'Playfair Display', serif;
      font-size: 2rem;
      font-weight: 700;
      color: var(--gold-dark);
    }

.result__monthly {
      text-align: center;
      font-size: 0.95rem;
      color: var(--text-dark);
      margin-bottom: 16px;
    }

.result__monthly strong {
      color: var(--gold-dark);
    }

.result__coverage-info {
      background: var(--bg-light);
      border-radius: var(--radius);
      padding: 12px 16px;
      margin-bottom: 16px;
    }

.result__coverage-row {
      display: flex;
      justify-content: space-between;
      font-size: 0.85rem;
      padding: 4px 0;
    }

.result__coverage-label {
      color: var(--text-muted);
    }

.result__coverage-value {
      font-weight: 500;
      color: var(--text-dark);
    }

.result__disclaimer {
      font-size: 0.75rem;
      color: var(--text-muted);
      text-align: center;
      padding: 12px;
      background: var(--bg-light);
      border-radius: var(--radius);
      line-height: 1.5;
    }

.result__cta {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      margin-top: 20px;
      padding: 14px 24px;
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--bg-white);
      background: #25d366;
      border: none;
      border-radius: var(--radius);
      transition: var(--transition);
    }

.result__cta:hover {
      background: #20bd5a;
      transform: translateY(-2px);
    }

.result__cta svg {
      width: 20px;
      height: 20px;
    }

.collapsible {
  border-bottom: 1px solid #ddd;
  margin-bottom: 12px;
}

.collapsible-header {
  width: 100%;
  background: #f6f6f6;
  padding: 12px 14px;
  border: none;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  border-radius: 6px;
}

.collapsible-header .arrow {
  transition: transform 0.25s ease;
  display: inline-block;
}

.collapsible-header.active .arrow {
  transform: rotate(90deg);
}

.collapsible-body {
  display: none;
  padding: 10px 14px;
  background: #ffffff;
}

/* =============================================
       BENEFITS SECTION
    ============================================= */
    .benefits {
      padding: 60px 0;
      background: var(--bg-white);
    }

.benefits__title {
      font-size: 1.75rem;
      color: var(--primary);
      text-align: center;
      margin-bottom: 40px;
    }

.benefits__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
    }

.benefit-card {
      background: var(--bg-light);
      border-radius: var(--radius-lg);
      padding: 28px 24px;
      text-align: center;
      transition: var(--transition);
      border: 1px solid transparent;
    }

.benefit-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-lg);
      border-color: rgba(212, 175, 55, 0.2);
    }

.benefit-card__icon {
      width: 60px;
      height: 60px;
      background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.05));
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 16px;
      font-size: 1.75rem;
    }

.benefit-card__title {
      font-size: 1.1rem;
      color: var(--primary);
      margin-bottom: 8px;
    }

.benefit-card__desc {
      font-size: 0.9rem;
      color: var(--text-muted);
      line-height: 1.6;
    }

/* =============================================
       FOOTER
    ============================================= */
    .footer {
      background: var(--bg-white);
      border-top: 1px solid var(--border-light);
      padding: 30px 0;
    }

.footer__inner {
      text-align: center;
    }

.footer__copyright {
      font-size: 0.875rem;
      color: var(--text-dark);
      margin-bottom: 8px;
    }

.footer__disclaimer {
      font-size: 0.75rem;
      color: var(--text-muted);
      margin-bottom: 16px;
    }

.footer__links {
      display: flex;
      justify-content: center;
      gap: 24px;
    }

.footer__link {
      font-size: 0.8rem;
      color: var(--text-muted);
      transition: var(--transition);
    }

.footer__link:hover {
      color: var(--gold);
    }

/* =============================================
       MEDIA QUERIES
    ============================================= */
    @media (min-width: 640px) {
      .benefits__grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

@media (min-width: 768px) {
      .hero {
        padding: 60px 0 80px;
      }

.hero__title {
        font-size: 2.5rem;
      }

.hero__subtitle {
        font-size: 1.1rem;
      }

.calculator {
        padding: 36px 32px;
      }

.benefits__title {
        font-size: 2rem;
      }
    }

@media (min-width: 1024px) {
      .nav {
        display: flex;
        gap: 32px;
      }

.hamburger {
        display: none;
      }

.hero__inner {
        flex-direction: row;
        align-items: flex-start;
        gap: 60px;
      }

.hero__content {
        flex: 1;
        text-align: left;
        position: sticky;
        top: 100px;
      }

.hero__subtitle {
        margin: 0 0 24px 0;
      }

.hero__calculator {
        flex: 1;
        max-width: 520px;
      }

.hero__title {
        font-size: 2.75rem;
      }

.benefits__grid {
        grid-template-columns: repeat(4, 1fr);
      }

.benefit-card {
        padding: 32px 20px;
      }
    }

@media (min-width: 1200px) {
      .hero__title {
        font-size: 3rem;
      }
    }
/* =====================================================================
   KALKULATOR JULAT (rq-*) — Sep 2026
   Menggantikan wizard lima langkah. Borang pendek, satu jalur julat,
   dan satu jalan keluar untuk pelanggan yang rasa harga terlalu tinggi.
   ===================================================================== */

.rq-field{margin-bottom:18px}
.rq-field[hidden]{display:none!important}
.rq-label{display:block;font-size:.8rem;font-weight:700;letter-spacing:.02em;
  color:var(--text-dark);margin-bottom:8px}
.rq-opt{font-weight:500;color:var(--text-muted)}

.rq-row{display:flex;gap:14px;flex-wrap:wrap}
.rq-row > .rq-field{flex:1;min-width:min(200px,100%)}

.rq-input{width:100%;padding:13px 14px;border:1.5px solid var(--border-light);
  border-radius:var(--radius);font-size:1rem;font-family:inherit;color:var(--text-dark);
  background:var(--bg-white);transition:var(--transition);-webkit-appearance:none}
.rq-input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,175,55,.16)}
/* Select dan kotak taip berkongsi satu medan Model. Yang tidak digunakan
   kena betul-betul hilang, bukan sekadar tidak nampak: .rq-input tidak
   menetapkan display, tetapi menulisnya di sini menghalang mana-mana
   peraturan kemudian daripada menghidupkannya semula. */
.rq-input[hidden]{display:none!important}
.rq-select:not([hidden]) + .rq-lain{margin-top:8px}
.rq-input--area{resize:vertical;min-height:84px}

.rq-hint{display:block;margin-top:6px;font-size:.76rem;color:var(--text-muted)}
.rq-hint[hidden]{display:none!important}
.rq-err{display:none;margin-top:6px;font-size:.78rem;color:#c0392b;font-weight:600}
.rq-err--on{display:block}
/* Borang minta harga panjang. Bingkai merah tunjuk medan MANA yang salah,
   bukan sekadar teks di bawahnya yang mudah terlepas pandang. */
.rq-input[aria-invalid="true"]{border-color:#c0392b}

/* Pil pilihan. Sasaran sentuh 44px supaya boleh ditekan dengan ibu jari. */
.rq-pills{display:flex;gap:10px;flex-wrap:wrap}
.rq-pills--stack{flex-direction:column}
.rq-pill{flex:1;min-width:min(140px,100%);min-height:46px;padding:11px 16px;
  border:1.5px solid var(--border-light);border-radius:var(--radius);background:var(--bg-white);
  font-family:inherit;font-size:.92rem;font-weight:600;color:var(--text-dark);
  cursor:pointer;transition:var(--transition);text-align:left;display:flex;
  flex-direction:column;justify-content:center;gap:2px}
.rq-pills:not(.rq-pills--stack) .rq-pill{text-align:center;align-items:center}
.rq-pill:hover{border-color:var(--gold-light)}
.rq-pill--on{border-color:var(--gold);background:rgba(212,175,55,.09);
  box-shadow:0 0 0 2px rgba(212,175,55,.14) inset}
.rq-pill-sub{font-size:.72rem;font-weight:500;color:var(--text-muted);line-height:1.3}

.rq-go{width:100%;min-height:52px;margin-top:6px;padding:15px 22px;border:none;
  border-radius:var(--radius);background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  color:#1a1a2e;font-family:inherit;font-size:1rem;font-weight:800;letter-spacing:.01em;
  cursor:pointer;transition:var(--transition);box-shadow:var(--shadow)}
.rq-go:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg)}
.rq-go:disabled{opacity:.6;cursor:default;transform:none}

/* --- jalur julat --- */
.rq-band{padding:22px 20px;border-radius:var(--radius-lg);text-align:center;
  background:linear-gradient(160deg,#1a1a2e,#26263f);color:#fff;margin-bottom:18px}
.rq-band__cap{margin:0 0 6px;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.62);font-weight:700}
.rq-band__range{margin:0;display:flex;align-items:baseline;justify-content:center;
  gap:10px;flex-wrap:wrap;font-size:1.72rem;font-weight:800;color:var(--gold-light);line-height:1.2}
.rq-band__range i{font-style:normal;font-size:.8rem;font-weight:600;color:rgba(255,255,255,.55)}
.rq-band__scale{margin:16px auto 10px;max-width:280px}
.rq-band__track{position:relative;height:6px;border-radius:999px;
  background:linear-gradient(90deg,rgba(212,175,55,.25),var(--gold),rgba(212,175,55,.25))}
.rq-band__dot{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;
  background:#fff;border:3px solid var(--gold);transform:translate(-50%,-50%);transition:left .4s ease}
.rq-band__mid{margin:0;font-size:.9rem;color:rgba(255,255,255,.85)}
.rq-band__mid strong{color:#fff}
.rq-band__src{margin:12px 0 0;font-size:.76rem;line-height:1.55;color:rgba(255,255,255,.6)}
.rq-band--none .rq-band__range{font-size:1.2rem;color:rgba(255,255,255,.8)}
.rq-band--none .rq-band__scale,.rq-band--none .rq-band__mid{display:none}

.rq-lines{border:1px solid var(--border-light);border-radius:var(--radius);overflow:hidden;margin-bottom:16px}
.rq-line{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:13px 16px;font-size:.92rem;color:var(--text-dark)}
.rq-line + .rq-line{border-top:1px solid var(--border-light)}
.rq-line--total{background:var(--bg-light);font-weight:800}
.rq-line--total strong{color:var(--gold-dark);font-size:1.1rem}

.rq-note{margin:0 0 16px;padding:13px 15px;border-radius:var(--radius);
  background:var(--bg-light);font-size:.83rem;line-height:1.6;color:var(--text-muted)}

.rq-cta-custom{width:100%;min-height:50px;margin-bottom:12px;padding:14px 20px;
  border:1.5px dashed var(--gold);border-radius:var(--radius);background:rgba(212,175,55,.07);
  font-family:inherit;font-size:.95rem;font-weight:700;color:var(--gold-dark);
  cursor:pointer;transition:var(--transition)}
.rq-cta-custom:hover{background:rgba(212,175,55,.14);border-style:solid}

/* --- PANEL ---
   Tiga panel berkongsi satu .mye__wrap. Hanya satu kelihatan pada satu masa,
   dan stepper di kepala halaman kekal di luar mereka semua. */
.mye-panel[hidden]{display:none!important}
.mye-panel{animation:myePanelIn .22s ease-out}
@keyframes myePanelIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.mye-panel{animation:none}}

/* Butang undur duduk DI ATAS tajuk, bukan melayang di penjuru kad. Dalam
   aliran berlangkah dia perlu tahu jalan balik sebelum membaca apa-apa. */
.mye-back{display:inline-flex;align-items:center;gap:7px;margin:0 0 14px;
  min-height:38px;padding:8px 14px;border:1.5px solid var(--border-light);
  border-radius:999px;background:var(--bg-white);font-family:inherit;
  font-size:.82rem;font-weight:700;color:var(--text-muted);cursor:pointer;
  transition:var(--transition)}
.mye-back:hover{border-color:var(--gold);color:var(--gold-dark)}

/* --- borang harga custom, kini kandungan kad biasa --- */
.rqm__title{margin:0 0 8px;font-size:1.12rem;font-weight:800;color:var(--primary)}
.rqm__lead{margin:0 0 16px;font-size:.88rem;line-height:1.6;color:var(--text-muted)}
.rqm__recap{border:1px solid var(--border-light);border-radius:var(--radius);
  padding:12px 14px;margin-bottom:18px;background:var(--bg-light)}
.rqm__recap-row{display:flex;justify-content:space-between;gap:12px;font-size:.84rem;padding:3px 0}
.rqm__recap-row span{color:var(--text-muted)}
.rqm__row{display:flex;gap:14px;flex-wrap:wrap}
.rqm__f{flex:1;min-width:min(200px,100%);margin-bottom:16px}
.rqm__err{margin:0 0 14px;padding:11px 14px;border-radius:var(--radius);
  background:#fdecea;border:1px solid #f5c6c2;color:#9b2c22;font-size:.84rem;font-weight:600}
.rqm__err[hidden]{display:none!important}
.rqm__err a{color:#9b2c22;font-weight:800}
.rqm__fine{margin:12px 0 0;font-size:.75rem;line-height:1.55;color:var(--text-muted);text-align:center}
.rqm__done{margin-top:18px;padding:20px 16px;border-radius:var(--radius);
  background:var(--green-light);text-align:center}
.rqm__done[hidden]{display:none!important}
.rqm__done-tick{width:46px;height:46px;margin:0 auto 10px;border-radius:50%;
  background:var(--green);color:#fff;font-size:1.5rem;line-height:46px;font-weight:800}
.rqm__done h4{margin:0 0 6px;font-size:1.05rem;color:#065f46}
.rqm__done p{margin:0 0 14px;font-size:.85rem;line-height:1.6;color:#047857}
.rqm__done-wa{display:inline-block;padding:11px 20px;border-radius:999px;
  background:#25D366;color:#fff;font-weight:700;font-size:.9rem;text-decoration:none}

@media (max-width:560px){
  .rq-band__range{font-size:1.42rem}
  .rqm__box{padding:22px 16px}
  .rq-pill{min-width:100%}
}

/* =====================================================================
   SUSUN ATUR GAYA MyEG (mye-*) — Sep 2026
   Stepper di atas, kandungan di tengah, satu kad borang dua lajur.
   Warna kekal jenama MUHAZU (emas), bukan merah MyEG, supaya halaman
   ini masih kelihatan sebahagian daripada laman yang sama.
   ===================================================================== */

/* Navbar laman ialah position:fixed setinggi 68px (.navbar-inner) dan
   tidak menolak kandungan ke bawah. Tanpa ruang ini, stepper duduk TERUS
   di belakang navbar: label kelihatan bertindih dan bulatan hilang
   sepenuhnya. Ditemui melalui syot skrin, bukan melalui pembacaan kod. */
.mye-steps{background:var(--bg-white);border-bottom:1px solid var(--border-light);
  padding:90px 0 14px}
/* Bekas skrol dan track DIPISAHKAN. Rel diposisi pada track yang
   berkongsi min-width dengan senarai, jadi rel dan bulatan sentiasa
   sejajar walaupun stepper menatal pada skrin sempit. */
.mye-steps__inner{max-width:1180px;margin:0 auto;padding:0 20px;
  overflow-x:auto;-webkit-overflow-scrolling:touch}
.mye-steps__track{position:relative;min-width:520px}
.mye-steps__rail{position:absolute;left:0;right:0;top:9px;height:5px;
  border-radius:999px;background:var(--border-light)}
.mye-steps__fill{display:block;height:100%;width:calc(12.5% + 10px);
  border-radius:999px;background:var(--gold)}
.mye-steps__list{position:relative;display:flex;list-style:none;margin:0;padding:0}
.mye-step{flex:1;text-align:center;display:flex;flex-direction:column;align-items:center;gap:9px}
.mye-step__dot{width:19px;height:19px;border-radius:50%;background:var(--border-light);
  border:3px solid var(--bg-white);box-shadow:0 0 0 1px var(--border-light)}
.mye-step--on .mye-step__dot{background:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.mye-step__lbl{font-size:.78rem;font-weight:600;color:var(--text-muted);line-height:1.35;padding:0 6px}
.mye-step--on .mye-step__lbl{color:var(--primary);font-weight:700}
/* Langkah semasa dapat gelang; langkah yang sudah lepas dapat tanda betul.
   Tanpa perbezaan ini keempat-empat bulatan emas nampak sama dan stepper
   berhenti memberitahu dia BERADA DI MANA. */
.mye-step--now .mye-step__dot{box-shadow:0 0 0 1px var(--gold),0 0 0 6px rgba(212,175,55,.22)}
.mye-step--done .mye-step__dot{background:var(--gold);position:relative}
.mye-step--done .mye-step__dot::after{content:'';position:absolute;left:50%;top:46%;
  width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;
  transform:translate(-50%,-50%) rotate(45deg)}
.mye-steps__fill{transition:width .45s cubic-bezier(.4,0,.2,1)}

.mye{background:var(--bg-light);padding:38px 0 56px}
/* Had lebar duduk pada PANEL, bukan pada wrap. Borang mahu sempit dan senang
   dibaca; halaman keputusan mahu melebar supaya empat kad muat sebaris. Kalau
   had itu pada wrap, panel keputusan terpaksa pecah keluar dengan jidak negatif
   dan setiap perubahan pelapik kemudian akan memecahkannya. */
.mye__wrap{max-width:none;margin:0 auto;padding:0 20px}
.mye-panel{max-width:820px;margin:0 auto}
.mye-panel--lebar{max-width:1240px}
.mye__h1{margin:0 0 8px;text-align:center;font-size:1.5rem;line-height:1.35;
  font-weight:800;color:var(--primary)}
.mye__sub{margin:0 0 26px;text-align:center;font-size:.92rem;line-height:1.6;color:var(--text-muted)}

.mye-card--sempit{max-width:760px}
.mye-card{max-width:760px;margin:0 auto;background:var(--bg-white);
  border:1px solid var(--border-light);border-radius:var(--radius-lg);
  padding:26px 26px 22px;box-shadow:var(--shadow)}

/* Tab pil di kepala kad. Tidak melar penuh seperti pil borang lain. */
.mye-tabs{justify-content:center;gap:12px;margin-bottom:24px;flex-wrap:wrap}
.mye-tabs .mye-tab{flex:0 0 auto;min-width:0;border-radius:999px;padding:10px 22px;
  flex-direction:row;align-items:center;gap:9px;font-size:.95rem}
.mye-tabs .mye-tab svg{width:24px;height:24px;flex:0 0 24px;color:var(--gold-dark)}
.mye-tabs .rq-pill--on svg{color:var(--gold-dark)}

.mye-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 18px}
.mye-grid > .rq-field{margin-bottom:16px}
.rq-field--full{grid-column:1 / -1}

/* Select asli dengan anak panah sendiri. appearance:none membuang gaya
   lalai pelayar, jadi anak panah mesti dilukis semula atau ia hilang. */
.rq-select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:42px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8962f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:17px}

.mye-fine{margin:16px 0 0;text-align:center;font-size:.76rem;line-height:1.7;color:var(--text-muted)}

.mye-how{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  max-width:760px;margin:26px auto 0;padding:0}
.mye-how li{display:flex;gap:10px;align-items:flex-start;font-size:.8rem;line-height:1.5;
  color:var(--text-muted)}
.mye-how strong{flex:0 0 24px;width:24px;height:24px;border-radius:50%;
  background:var(--gold);color:#1a1a2e;font-size:.76rem;font-weight:800;
  display:flex;align-items:center;justify-content:center}


@media (max-width:760px){
  .mye-how{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  /* Stepper mesti MUAT, bukan menatal. Track 520px bermakna bulatan
     langkah terakhir duduk di luar pandangan pada telefon 400px, dan
     tiada apa memberitahu pengguna bahawa ia ada di sana. Diukur, bukan
     diagak: mye-step__dot berada pada left=466 dalam viewport 400px. */
  .mye-steps{padding:84px 0 12px}
  .mye-steps__track{min-width:0}
  .mye-steps__inner{padding:0 12px}
  .mye-step__lbl{font-size:.6rem;padding:0 3px;letter-spacing:-.01em}
  .mye-step__dot{width:15px;height:15px;border-width:2px}
  .mye-steps__rail{top:7px;height:4px}
  .mye-grid{grid-template-columns:1fr}
  .mye__h1{font-size:1.24rem}
  .mye-card{padding:20px 16px 18px}
  .mye{padding:26px 0 40px}
  .mye-how{grid-template-columns:1fr;gap:11px}
  .mye-tabs .mye-tab{flex:1 1 auto;justify-content:center}
}

/* =====================================================================
   BAR RINGKASAN + KAD SEBUT HARGA (gaya MyEG) — Sep 2026
   ===================================================================== */

.mye-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.mye-sum__box{border:1px solid var(--border-light);border-radius:var(--radius);
  padding:13px 15px;background:var(--bg-white);min-width:0}
.mye-sum__k{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:5px}
.mye-sum__v{font-size:1.02rem;font-weight:800;color:var(--primary);line-height:1.3;
  overflow-wrap:anywhere}
.mye-sum__s{margin-top:3px;font-size:.74rem;line-height:1.45;color:var(--text-muted);
  overflow-wrap:anywhere}

.mye-q__h{margin:26px 0 6px;font-size:1.06rem;font-weight:800;color:var(--primary)}
.mye-q__lead{margin:0 0 16px;font-size:.8rem;line-height:1.65;color:var(--text-muted)}

/* Empat sebaris pada desktop, seperti halaman sebut harga MyEG. auto-fit dengan
   minmax bermakna bilangan lajur mengikut ruang yang ada, bukan titik putus yang
   ditala tangan: 4 pada skrin lebar, 3, kemudian 2, kemudian 1 dengan sendirinya. */
.mye-quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
  gap:18px;margin-bottom:26px;align-items:stretch}
.mye-q{display:flex;flex-direction:column;background:var(--bg-white);
  border:1px solid var(--border-light);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:0 1px 2px rgba(15,15,25,.04);transition:var(--transition)}
.mye-q:hover{box-shadow:0 6px 18px rgba(15,15,25,.09);border-color:#d8dbe2}

.mye-q__top{background:var(--green);color:#fff;font-size:.72rem;font-weight:700;
  letter-spacing:.02em;text-align:center;padding:9px 12px}

.mye-q__body{flex:1;display:flex;flex-direction:column;padding:16px 16px 14px}

/* Logo kiri, harga kanan, sebaris. Slot logo tinggi tetap supaya empat kad
   sejajar walaupun nisbah keempat-empat logo berbeza. */
.mye-q__head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mye-q__logo{flex:0 0 auto;max-width:96px;max-height:30px;width:auto;height:auto;
  object-fit:contain;object-position:left center}
.mye-q__prices{flex:1;min-width:0;text-align:right}
.mye-q__price{font-size:1.06rem;font-weight:800;color:var(--text-dark);line-height:1.2;
  white-space:nowrap}
.mye-q__note{margin-top:2px;font-size:.66rem;line-height:1.3;color:var(--text-muted)}

.mye-q__name{margin-top:12px;font-size:.95rem;font-weight:700;color:var(--text-dark);
  line-height:1.35}

/* Pautan buka tutup, bukan butang tebal: ia sokongan, bukan tindakan utama. */
.mye-q__more{margin:8px 0 0;padding:0;border:none;background:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:.8rem;
  font-weight:600;font-style:italic;color:var(--gold-dark)}
.mye-q__more:hover{text-decoration:underline}
.mye-q__chev{width:9px;height:9px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);
  transition:transform .18s ease}
.mye-q--buka .mye-q__chev{transform:rotate(-135deg) translate(-2px,-2px)}

.mye-q__bens{list-style:none;margin:12px 0 0;padding:0;display:flex;
  flex-direction:column;gap:9px}
.mye-q__ben{display:flex;align-items:flex-start;gap:9px;font-size:.79rem;
  line-height:1.5;color:var(--text-dark)}
.mye-q__ben--lebih{display:none}
.mye-q--buka .mye-q__ben--lebih{display:flex}

/* Tanda semak dilukis dengan CSS, bukan aksara. Aksara ✓ berubah rupa dan
   kedudukan garis dasar mengikut fon peranti, dan ia tidak boleh dibulatkan
   dengan kemas. */
.mye-q__tick{flex:0 0 16px;width:16px;height:16px;margin-top:2px;border-radius:50%;
  background:var(--green);position:relative}
.mye-q__tick::after{content:'';position:absolute;left:50%;top:47%;width:3.5px;height:7px;
  border:solid #fff;border-width:0 2px 2px 0;
  transform:translate(-50%,-50%) rotate(45deg)}

/* margin-top:auto menolak baris ini ke dasar badan kad, jadi butang Pilih
   keempat-empat kad sejajar walaupun bilangan manfaat berbeza. Ia hanya
   berkesan kalau kad diregang ke tinggi baris grid, sebab itu grid guna
   align-items:stretch dan bukan start. */
.mye-q__agent{margin-top:auto;padding-top:14px;font-size:.68rem;line-height:1.45;
  color:var(--text-muted)}

.mye-q__btn{margin:0;border:none;border-top:1px solid var(--border-light);
  background:var(--gold);color:#1a1a2e;font-family:inherit;font-size:.88rem;font-weight:800;
  padding:13px 12px;min-height:46px;cursor:pointer;transition:var(--transition)}
.mye-q__btn:hover{background:var(--gold-dark);color:#fff}

@media (max-width:760px){
  .mye-sum{grid-template-columns:1fr}
  /* .mye-quotes tidak disebut di sini dengan sengaja: auto-fit sudah runtuh
     sendiri dari 4 lajur ke 1 mengikut ruang. Memaksa 1fr pada 760px membuang
     susun atur 2 lajur yang muat elok pada tablet. */
}