/* 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);
    }

    /* Monthly plans tables (Student / Teacher / Parent) */
    .plans-block { margin-bottom: var(--space-10); }
    .plans-block:last-child { margin-bottom: 0; }
    .plans-block-label {
      font-size: var(--text-xl);
      font-weight: var(--font-semibold);
      color: var(--color-neutral-900);
      margin-bottom: var(--space-4);
    }
    .plans-table-wrap { overflow-x: auto; }

    /* Per-table conversion CTA — sits directly below each plans-table-wrap (#9320). */
    .plans-cta {
      margin-top: var(--space-5);
      text-align: center;
    }
    .plans-cta .btn { min-width: 240px; }
    .plans-cta-note {
      margin-top: var(--space-2);
      font-size: var(--text-xs);
      color: var(--color-neutral-600);
    }

    .plans-table {
      width: 100%;
      border-collapse: collapse;
      font-size: var(--text-sm);
    }
    .plans-table th,
    .plans-table td {
      padding: var(--space-4) var(--space-5);
      text-align: left;
      border-bottom: 1px solid var(--color-neutral-200);
      vertical-align: middle;
    }
    .plans-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);
    }
    .plans-table .price-col {
      text-align: right;
      width: 130px;
      white-space: nowrap;
    }
    .plans-table .tier-label {
      display: block;
      font-size: var(--text-base);
      font-weight: var(--font-semibold);
    }
    .plans-table th.featured {
      color: var(--color-primary-700);
      border-bottom-color: var(--color-primary);
      background-color: var(--color-primary-50);
    }
    .plans-table td.segment {
      font-weight: var(--font-medium);
      color: var(--color-neutral-900);
    }
    .plans-table td.segment small {
      display: block;
      font-size: var(--text-xs);
      color: var(--color-neutral-500);
      font-weight: var(--font-normal);
      margin-top: 2px;
    }
    .plans-table td.price {
      text-align: right;
      font-variant-numeric: tabular-nums;
      font-weight: var(--font-medium);
      white-space: nowrap;
    }
    .plans-table td.price.featured {
      background-color: var(--color-primary-50);
      color: var(--color-primary-700);
      font-weight: var(--font-semibold);
    }
    .plans-table td.price.free {
      color: var(--color-neutral-500);
      font-style: italic;
    }
    .plans-table td.price .currency {
      font-size: var(--text-xs);
      color: var(--color-neutral-500);
      margin-right: 4px;
    }
    .plans-table td.note {
      color: var(--color-neutral-600);
      font-size: var(--text-sm);
    }

    /* 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; }
      .plans-table { font-size: var(--text-xs); }
      .plans-table th,
      .plans-table td { padding: var(--space-3); }
      .plans-table .price-col { width: auto; }
    }

    /* Stacked-card layout for mobile (≤560px) — Sri Lankan mobile-first audience.
       Header row is hidden; each row collapses into a labelled card. */
    @media (max-width: 559px) {
      .plans-table-wrap { overflow-x: visible; }
      .plans-cta .btn { width: 100%; max-width: 320px; min-width: 0; }
      .plans-table thead { display: none; }
      .plans-table,
      .plans-table tbody { display: block; width: 100%; }
      .plans-table tr {
        display: block;
        border: 1px solid var(--color-neutral-200);
        border-radius: 8px;
        margin-bottom: var(--space-3);
        padding: var(--space-3);
        background: var(--color-neutral-0);
      }
      .plans-table td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        padding: var(--space-2) 0;
        border-bottom: 1px solid var(--color-neutral-100);
        text-align: left;
        white-space: normal;
      }
      .plans-table tr td:last-child { border-bottom: none; }
      .plans-table td.segment {
        font-size: var(--text-base);
        font-weight: var(--font-semibold);
        color: var(--color-neutral-900);
        display: block;
        border-bottom: 1px solid var(--color-neutral-200);
        margin-bottom: var(--space-2);
        padding-bottom: var(--space-2);
      }
      .plans-table td.price::before,
      .plans-table td.note::before {
        content: attr(data-label);
        font-weight: var(--font-medium);
        color: var(--color-neutral-600);
        font-size: var(--text-xs);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-right: var(--space-3);
      }
      .plans-table td.price.featured {
        background: var(--color-primary-50);
        border-radius: 4px;
        padding: var(--space-2) var(--space-3);
      }
    }