/* Pricing page — supplemental styles */
    .hero-compact { padding: var(--space-16) 0 var(--space-12); }
    .hero-compact h1 { margin-bottom: var(--space-4); }

    .tuition-badge {
      display: inline-block;
      background-color: rgba(255,255,255,0.15);
      border: 1px solid rgba(255,255,255,0.25);
      color: rgba(255,255,255,0.9);
      padding: var(--space-2) var(--space-4);
      border-radius: var(--radius-full);
      font-size: var(--text-sm);
      font-weight: var(--font-semibold);
      margin-bottom: var(--space-6);
      letter-spacing: var(--tracking-wide);
    }

    .price-daily {
      font-size: var(--text-4xl);
      font-weight: var(--font-extrabold);
      color: var(--color-neutral-900);
      line-height: var(--leading-tight);
    }
    .price-daily .currency {
      font-size: var(--text-xl);
      font-weight: var(--font-semibold);
    }
    .price-daily .per-day {
      font-size: var(--text-lg);
      font-weight: var(--font-medium);
      color: var(--color-neutral-500);
    }
    .price-monthly {
      font-size: var(--text-sm);
      color: var(--color-neutral-500);
      margin-top: var(--space-1);
    }
    .price-note {
      font-size: var(--text-xs);
      color: var(--color-neutral-500);
      margin-top: var(--space-1);
    }

    .pricing-card h3 {
      font-size: var(--text-xl);
      font-weight: var(--font-bold);
      color: var(--color-neutral-900);
      margin-bottom: var(--space-1);
    }
    .pricing-card .tagline {
      font-size: var(--text-sm);
      color: var(--color-neutral-500);
      margin-bottom: var(--space-6);
    }
    .pricing-card .pricing-features {
      margin-bottom: var(--space-6);
    }
    .pricing-card .btn {
      width: 100%;
      justify-content: center;
    }
    .pricing-card .tea-note {
      font-size: var(--text-xs);
      color: var(--color-neutral-500);
      margin-top: var(--space-3);
      text-align: center;
    }

    .pricing-card-popular {
      border-color: var(--color-primary);
      box-shadow: var(--shadow-lg);
      transform: scale(1.03);
    }
    @media (max-width: 767px) {
      .pricing-card-popular { transform: none; }
    }

    .starter-footnote {
      text-align: center;
      margin-top: var(--space-8);
      font-size: var(--text-sm);
      color: var(--color-neutral-600);
      max-width: 640px;
      margin-left: auto;
      margin-right: auto;
    }

    .annual-banner {
      margin-top: var(--space-8);
      background-color: var(--color-primary-50);
      border: 1px solid var(--color-primary-200);
      border-radius: var(--radius-lg);
      padding: var(--space-5) var(--space-6);
      text-align: center;
      font-size: var(--text-sm);
      color: var(--color-neutral-700);
    }
    .annual-banner strong {
      color: var(--color-primary-700);
    }

    /* Comparison table */
    .comparison-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: var(--space-8);
      font-size: var(--text-sm);
    }
    .comparison-table th,
    .comparison-table td {
      padding: var(--space-4) var(--space-5);
      text-align: left;
      border-bottom: 1px solid var(--color-neutral-200);
      vertical-align: top;
    }
    .comparison-table thead th {
      font-weight: var(--font-semibold);
      color: var(--color-neutral-900);
      font-size: var(--text-base);
      border-bottom: 2px solid var(--color-neutral-300);
    }
    .comparison-table thead th:first-child {
      width: 30%;
    }
    .comparison-table .col-tuition {
      color: var(--color-neutral-600);
    }
    .comparison-table .col-idasara {
      color: var(--color-primary-700);
      font-weight: var(--font-medium);
      background-color: var(--color-primary-50);
    }
    .comparison-table thead .col-idasara {
      background-color: var(--color-primary-100);
    }
    .comparison-table .row-label {
      font-weight: var(--font-semibold);
      color: var(--color-neutral-800);
    }

    /* Parent section */
    .parent-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-6);
      margin-top: var(--space-8);
    }
    @media (max-width: 767px) {
      .parent-grid { grid-template-columns: 1fr; }
    }
    .parent-card {
      background-color: var(--color-neutral-0);
      border: 2px solid var(--color-neutral-200);
      border-radius: var(--radius-xl);
      padding: var(--space-8);
    }
    .parent-card h3 {
      font-size: var(--text-lg);
      font-weight: var(--font-bold);
      color: var(--color-neutral-900);
      margin-bottom: var(--space-4);
    }
    .parent-card-popular {
      border-color: var(--color-primary);
      box-shadow: var(--shadow-md);
    }
    .parent-card ul {
      margin-top: var(--space-3);
    }
    .parent-card li {
      padding: var(--space-2) 0;
      font-size: var(--text-sm);
      color: var(--color-neutral-700);
      display: flex;
      align-items: flex-start;
      gap: var(--space-2);
    }
    .parent-card li::before {
      content: '\2713';
      color: var(--color-accent);
      font-weight: var(--font-bold);
      flex-shrink: 0;
    }
    .parent-intro {
      font-size: var(--text-base);
      color: var(--color-neutral-700);
      max-width: 720px;
      line-height: var(--leading-relaxed);
    }
    .multi-child-discount {
      margin-top: var(--space-8);
      text-align: center;
    }
    .multi-child-discount h3 {
      font-size: var(--text-lg);
      font-weight: var(--font-semibold);
      color: var(--color-neutral-900);
      margin-bottom: var(--space-2);
    }
    .multi-child-discount p {
      font-size: var(--text-sm);
      color: var(--color-neutral-700);
    }
    .discount-chips {
      display: flex;
      justify-content: center;
      gap: var(--space-4);
      margin-top: var(--space-4);
      flex-wrap: wrap;
    }
    .discount-chip {
      background-color: var(--color-accent-50);
      color: var(--color-accent-700);
      padding: var(--space-2) var(--space-4);
      border-radius: var(--radius);
      font-size: var(--text-sm);
      font-weight: var(--font-semibold);
    }

    /* Teacher section */
    .teacher-details {
      margin-top: var(--space-8);
    }
    .teacher-details summary {
      cursor: pointer;
      list-style: none;
      display: flex;
      align-items: center;
      gap: var(--space-3);
    }
    .teacher-details summary::-webkit-details-marker { display: none; }
    .teacher-details summary::before {
      content: '+';
      display: flex;
      align-items: center;
      justify-content: center;
      width: 1.5rem;
      height: 1.5rem;
      border-radius: var(--radius-full);
      background-color: var(--color-neutral-100);
      color: var(--color-neutral-600);
      font-weight: var(--font-bold);
      font-size: var(--text-base);
      flex-shrink: 0;
      transition: transform var(--transition);
    }
    .teacher-details[open] summary::before {
      content: '\2212';
    }
    .teacher-details summary h2 {
      font-size: var(--text-2xl);
      font-weight: var(--font-bold);
      color: var(--color-neutral-900);
      display: inline;
      margin: 0;
    }
    .teacher-details .summary-note {
      font-size: var(--text-sm);
      color: var(--color-neutral-500);
      margin-left: var(--space-2);
    }
    .teacher-content {
      margin-top: var(--space-6);
      padding-left: calc(1.5rem + var(--space-3));
    }
    .teacher-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: var(--space-4);
      font-size: var(--text-sm);
    }
    .teacher-table th,
    .teacher-table td {
      padding: var(--space-3) var(--space-4);
      text-align: left;
      border-bottom: 1px solid var(--color-neutral-200);
    }
    .teacher-table th {
      font-weight: var(--font-semibold);
      color: var(--color-neutral-900);
      background-color: var(--color-neutral-50);
    }
    .teacher-table td {
      color: var(--color-neutral-700);
    }

    /* Grade-level selector tabs */
    .grade-selector {
      display: flex;
      justify-content: center;
      gap: var(--space-2);
      margin-bottom: var(--space-8);
      flex-wrap: wrap;
    }
    .grade-tab {
      padding: var(--space-2) var(--space-5);
      border: 2px solid var(--color-neutral-200);
      border-radius: var(--radius-full);
      background: var(--color-neutral-0);
      color: var(--color-neutral-600);
      font-size: var(--text-sm);
      font-weight: var(--font-semibold);
      cursor: pointer;
      transition: all var(--transition);
    }
    .grade-tab:hover {
      border-color: var(--color-primary-300);
      color: var(--color-primary-700);
    }
    .grade-tab.active {
      background-color: var(--color-primary);
      border-color: var(--color-primary);
      color: var(--color-neutral-0);
    }

    /* Grade-level price table */
    .grade-table-wrapper {
      margin-top: var(--space-8);
    }
    .grade-table-wrapper h3 {
      font-size: var(--text-base);
      font-weight: var(--font-semibold);
      color: var(--color-neutral-700);
      margin-bottom: var(--space-3);
      text-align: center;
    }

    /* CTA section adjustments */
    .cta-subtitle {
      font-size: var(--text-base);
      color: rgba(255,255,255,0.75);
      margin-bottom: var(--space-8);
      max-width: 560px;
      margin-left: auto;
      margin-right: auto;
    }
    .cta-actions {
      display: flex;
      justify-content: center;
      gap: var(--space-4);
      flex-wrap: wrap;
    }
    .btn-white {
      background-color: var(--color-neutral-0);
      color: var(--color-primary);
      border-color: var(--color-neutral-0);
    }
    .btn-white:hover {
      background-color: var(--color-neutral-100);
      border-color: var(--color-neutral-100);
      color: var(--color-primary-700);
      box-shadow: var(--shadow-lg);
    }

    @media (max-width: 767px) {
      .comparison-table { font-size: var(--text-xs); }
      .comparison-table th,
      .comparison-table td { padding: var(--space-3); }
      .teacher-content { padding-left: 0; }
      .cta-actions { flex-direction: column; align-items: center; }
      .cta-actions .btn { width: 100%; max-width: 320px; }
    }