/* Learn Advisor — visual styling only. Structural rules belong in layout.css. */

:root {
    --color-primary: #1bbbb6;
    --color-primary-dark: #0aa19c;
    --color-primary-deep: #237471;
    --color-primary-soft: #eef2ff;
    --color-secondary: #4f46e5;
    --color-secondary-soft: #eef0ff;
    --color-accent: #133744;
    --color-accent-soft: #fff4ed;
    --color-heading: #0f172a;
    --color-text: #334155;
    --color-muted: #64748b;
    --color-background: #ffffff;
    --color-background-soft: #f6f7fb;
    --color-background-tint: #f0f3fa;
    --color-white: #ffffff;
    --color-border: #e2e8f0;
    --color-border-strong: #cbd5e1;
    --color-success: #0f766e;
    --color-success-soft: #ecfdf8;
    --color-error: #b91c1c;
    --color-error-soft: #fef2f2;
    --color-overlay: rgba(15, 23, 42, 0.55);
    --color-topbar-text: #dbe4f5;
    --color-cta-text: #dbe4f5;
    --color-cta-eyebrow: #49eee9;
    --color-cta-card: #fff8f2;
    --color-cta-card-border: #f0dcc8;
    --color-cta-card-heading: #581c10;
    --color-cta-card-text: #7d615c;
    --color-cta-card-eyebrow: #d18435;
    --color-cta-card-outline: #c04c16;
    --color-footer: #0b1224;
    --color-footer-text: #b8c3d9;
    --color-footer-muted: #8b9bb8;
    --color-accent-hover: #2b5f72;
    --color-card-hover-border: #c7d2fe;
    --color-star: #f5c518;
  
    --font-primary: "DM Sans", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-md: 1.0625rem;
    --text-card-title: clamp(1rem, 0.96rem + 0.2vw, 1.25rem);
    --text-card-body: 0.9375rem;
    --text-card-meta: 0.8125rem;
    --text-lg: clamp(1.125rem, 1rem + 0.4vw, 1.25rem);
    --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
    --text-3xl: clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem);
    --text-4xl: clamp(2.25rem, 1.5rem + 2.4vw, 3.25rem);
    --text-hero: clamp(2.15rem, 1.4rem + 3vw, 3.75rem);
  
    --leading-tight: 1.2;
    --leading-snug: 1.35;
    --leading-body: 1.65;
    --leading-relaxed: 1.75;
  
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
  
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4.5rem;
    --space-4xl: 6rem;
    --section-space: clamp(3.5rem, 6vw, 5.5rem);
  
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.75rem;
    --radius-full: 999px;
  
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 18px 40px rgba(30, 58, 138, 0.14);
    --shadow-focus: 0 0 0 3px rgba(79, 70, 229, 0.28);
  
    --transition-fast: 150ms ease;
    --transition: 220ms ease;
  
  }
  
  html {
    scroll-behavior: smooth;
  }
  
  button,
  input,
  textarea,
  select {
    font: inherit;
  }
  
  a {
    color: inherit;
    text-decoration: none;
  }
  
  button {
    cursor: pointer;
  }
  
  fieldset {
    border: 0;
  }
  
  summary {
    cursor: pointer;
    list-style: none;
  }
  
  summary::-webkit-details-marker {
    display: none;
  }
  
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
  
  .trust-bar {
    background:
      radial-gradient(900px 320px at 8% 0%, rgba(192, 76, 22, 0.22), transparent 58%),
      var(--color-accent);
    color: var(--color-cta-text);
  }
  
  body {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    line-height: var(--leading-body);
    color: var(--color-text);
    background: var(--color-background);
  }
  
  :focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 3px;
  }
  
  .skip-link {
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-sm);
    font-weight: var(--weight-semibold);
  }
  
  .skip-link:focus {
    top: var(--space-md);
  }
  
  .visually-hidden {
    clip: rect(0, 0, 0, 0);
    border: 0;
  }
  
  .eyebrow {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
  }
  
  h1,
  .h1,
  .hero__title {
    font-size: var(--text-hero);
    line-height: var(--leading-tight);
    font-weight: var(--weight-bold);
    color: var(--color-heading);
    letter-spacing: -0.03em;
  }
  
  h2,
  .h2 {
    font-size: var(--text-3xl);
    line-height: var(--leading-snug);
    font-weight: var(--weight-bold);
    color: var(--color-heading);
    letter-spacing: -0.025em;
  }
  
  h3,
  .h3 {
    font-size: var(--text-xl);
    line-height: var(--leading-snug);
    font-weight: var(--weight-semibold);
    color: var(--color-heading);
  }
  
  .card h3,
  .card__title,
  .card-article__title {
    font-size: var(--text-card-title);
    line-height: 1.35;
    letter-spacing: -0.02em;
    font-weight: var(--weight-semibold);
    color: var(--color-heading);
  }
  
  .card p {
    font-size: var(--text-card-body);
    color: var(--color-text);
  }
  
  .lead {
    font-size: var(--text-base);
    color: var(--color-text);
  }
  
  .default-page .lead {
    margin-top: 15px;
  }
  
  .muted {
    color: var(--color-muted);
  }
  
  .small {
    font-size: var(--text-sm);
    color: var(--color-muted);
  }
  
  .topbar {
    background: var(--color-accent);
    color: var(--color-topbar-text);
    font-size: var(--text-sm);
  }
  
  .topbar__heading {
    font-weight: var(--weight-semibold);
    color: var(--color-white);
  }
  
  .topbar a {
    color: var(--color-accent-soft);
    font-weight: var(--weight-semibold);
  }
  
  .topbar a:hover {
    color: var(--color-white);
    text-decoration: underline;
  }
  
  /* =========================================================
     HEADER
     ========================================================= */
  
  .header {
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid transparent;
    backdrop-filter: blur(12px);
    transition: border-color var(--transition), box-shadow var(--transition);
  }
  
  .header.is-scrolled {
    border-bottom-color: var(--color-border);
    box-shadow: var(--shadow-sm);
  }
  
  .brand__mark {
    color: var(--color-primary);
  }
  
  .brand__text {
    line-height: 1.15;
  }
  
  .brand__name {
    font-weight: var(--weight-bold);
    color: var(--color-heading);
    font-size: 1.05rem;
  }
  
  .brand__tag {
    font-size: 0.68rem;
    color: var(--color-muted);
    font-weight: var(--weight-medium);
  }
  
  .nav > ul > li > a {
    color: var(--color-heading);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    background: none;
    border: 0;
    text-decoration: none;
  }
  
  .nav__chevron {
    color: inherit;
    transition: transform var(--transition-fast);
  }
  
  .nav > ul > li > a:hover,
  .nav > ul > li > a[aria-current="page"],
  .nav > ul > li > a[aria-current="true"],
  .nav > ul > li:hover > a,
  .nav > ul > li:focus-within > a,
  .nav > ul > li > a[aria-expanded="true"] {
    background: none;
    color: var(--color-primary);
  }
  
  .nav > ul > li > a[aria-expanded="true"] > .nav__chevron {
    transform: rotate(180deg);
  }
  
  .nav > ul ul {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
  }
  
  .nav > ul ul::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 0.8rem;
  }
  
  .nav-item--mega > ul::before {
    height: 1.25rem;
  }
  
  .nav > ul ul a {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-heading);
    text-decoration: none;
  }
  
  .nav > ul ul a:hover,
  .nav > ul ul a:focus-visible {
    color: var(--color-primary);
  }
  
  .cancel-btn {
    background: var(--color-background-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-heading);
  }
  
  /* =========================================================
     BUTTONS
     ========================================================= */
  
  .btn {
    border-radius: var(--radius-full);
    border: 1px solid transparent;
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    transition: background-color var(--transition), color var(--transition), border-color var(--transition), transform var(--transition-fast), box-shadow var(--transition);
  }
  
  .btn:hover {
    transform: translateY(-1px);
  }
  
  .btn--primary {
    background: var(--color-primary);
    color: var(--color-white);
  }
  
  .btn--primary:hover {
    background: var(--color-primary-dark);
  }
  
  .btn--accent {
    background: var(--color-accent);
    color: var(--color-white);
  }
  
  .btn--accent:hover {
    background: var(--color-accent-hover);
  }
  
  .btn:active {
    transform: none;
  }
  
  .btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
  }
  
  .btn--ghost {
    background: transparent;
    color: var(--color-heading);
    border-color: var(--color-border-strong);
  }
  
  .btn--ghost:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-soft);
  }
  
  .btn--light {
    background: var(--color-white);
    color: var(--color-primary);
  }
  
  .menu-toggle {
    background: var(--color-background-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-heading);
  }
  
  /* =========================================================
     HERO
     ========================================================= */
  
  .hero {
    background:
      radial-gradient(1200px 480px at 85% -10%, rgba(79, 70, 229, 0.12), transparent 55%),
      linear-gradient(180deg, var(--color-background-tint) 0%, var(--color-background) 100%);
  }
  
  .hero__title span {
    color: var(--color-primary);
  }
  
  .hero .eyebrow {
    color: var(--color-accent);
  }
  
  .hero__checks {
    font-size: var(--text-sm);
    color: var(--color-text);
  }
  
  .search-card:not(.search_modal .search-card) {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
  }
  
  .search-card__tab {
    border: 0;
    background: transparent;
    color: var(--color-muted);
    border-radius: var(--radius-full);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
  }
  
  .search-card__tab[aria-selected="true"],
  .search-card__tab[aria-pressed="true"] {
    background: var(--color-primary-soft);
    color: var(--color-primary);
  }
  
  .search-card input,
  .search-card select {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-background-soft);
    color: var(--color-heading);
  }
  
  .search-results {
    border-top: 1px solid var(--color-border);
  }
  
  .search-results a {
    border-radius: var(--radius-sm);
  }
  
  .search-results a:hover,
  .search-results a:focus-visible,
  .search-results a.is-active {
    background: var(--color-primary-soft);
  }
  
  .badge {
    border-radius: var(--radius-full);
    font-size: 0.72rem;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.01em;
    background: var(--color-primary-soft);
    color: var(--color-primary);
  }
  
  .badge--accent {
    background: var(--color-accent-soft);
    color: var(--color-accent);
  }
  
  .badge--success {
    background: var(--color-success-soft);
    color: var(--color-success);
  }
  
  .badge--muted {
    background: var(--color-background-soft);
    color: var(--color-muted);
  }
  
  /* =========================================================
     CARDS
     ========================================================= */
  
  .card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  }
  
  a.card:hover,
  a.card:focus-visible,
  .card-article:hover,
  .card-article:focus-within {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-card-hover-border);
  }
  
  .card__icon {
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
    color: var(--color-primary);
  }
  
  .card__icon--accent {
    background: var(--color-accent-soft);
    color: var(--color-accent);
  }
  
  .card__icon--violet {
    background: var(--color-secondary-soft);
    color: var(--color-secondary);
  }
  
  .card__meta {
    font-size: var(--text-card-meta);
    color: var(--color-muted);
  }
  
  .card__footer {
    border-top: 1px solid var(--color-border);
  }
  
  .price {
    font-weight: var(--weight-semibold);
    color: var(--color-heading);
  }
  
  .link {
    color: var(--color-primary);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
  }
  
  .link:hover {
    text-decoration: underline;
  }
  
  .page-hero {
    background: linear-gradient(180deg, var(--color-background-tint), var(--color-background));
    border-bottom: 1px solid var(--color-border);
  }
  
  .breadcrumb {
    font-size: var(--text-sm);
    color: var(--color-muted);
  }
  
  .breadcrumb a:hover {
    color: var(--color-primary);
    text-decoration: underline;
  }
  
  .stat {
    background: none;
    border: 0;
    border-radius: 0;
  }
  
  .stat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 3rem;
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-50%);
  }
  
  .stat__icon {
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-white);
  }
  
  .stat__value {
    font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2.1rem);
    font-weight: var(--weight-bold);
    color: var(--color-white);
    letter-spacing: -0.03em;
    line-height: 1.15;
  }
  
  .stat .small {
    color: var(--color-cta-text);
  }
  
  .trust-note {
    background: none;
    border-radius: 0;
    color: var(--color-footer-text);
    font-size: var(--text-sm);
  }
  
  .trust-bar .link {
    color: var(--color-cta-eyebrow);
  }
  
  .trust-bar .link:hover {
    color: var(--color-white);
  }
  
  .logo-chip {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-white);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-heading);
  }
  
  .logo-chip--image {
    border-radius: var(--radius-md);
  }
  
  .step {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }
  
  .step__num {
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: var(--weight-bold);
  }
  
  .quote {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  }
  
  .quote:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-cta-card-border);
  }
  
  .quote::before {
    content: "“";
    position: absolute;
    top: 0.7rem;
    right: 1.2rem;
    font-size: 2.8rem;
    line-height: 1;
    color: var(--color-primary);
    opacity: 0.14;
    pointer-events: none;
  }
  
  .quote__stars {
    color: var(--color-star);
  }
  
  .quote__stars span {
    background: currentColor;
    clip-path: polygon(50% 4%, 61% 35%, 98% 38%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 38%, 39% 35%);
  }
  
  .quote p {
    font-size: var(--text-lg);
    color: var(--color-heading);
  }
  
  .quote footer {
    font-size: var(--text-sm);
    color: var(--color-muted);
  }
  
  .quote footer strong {
    color: var(--color-heading);
  }
  
  .quote__who span {
    color: var(--color-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
  }
  
  .cta-band {
    background: var(--color-primary-deep);
    color: var(--color-cta-text);
  }
  
  .cta-band h2,
  .cta-band .h2 {
    color: var(--color-white);
  }
  
  .cta-band .eyebrow {
    color: var(--color-cta-eyebrow);
  }
  
  .form-card {
    background: var(--color-white);
    color: var(--color-text);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
  }
  
  .field label,
  .field .label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-heading);
  }
  
  .field input,
  .field select,
  .field textarea {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-background-soft);
    color: var(--color-heading);
  }
  
  .field textarea {
    resize: vertical;
  }
  
  .field input:focus,
  .field select:focus,
  .field textarea:focus {
    outline: none;
    border-color: var(--color-secondary);
    box-shadow: var(--shadow-focus);
    background: var(--color-white);
  }
  
  .field.is-invalid input,
  .field.is-invalid select,
  .field.is-invalid textarea {
    border-color: var(--color-error);
    background: var(--color-error-soft);
  }
  
  .field-error {
    font-size: var(--text-xs);
    color: var(--color-error);
  }
  
  .form-success {
    background: var(--color-success-soft);
    color: var(--color-success);
    border-radius: var(--radius-md);
  }
  
  .form-success:focus {
    outline: 2px solid var(--color-success);
    outline-offset: 3px;
  }
  
  [data-filter-search] {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-background-soft);
    color: var(--color-heading);
  }
  
  .filter-chip {
    border: 1px solid var(--color-border);
    background: var(--color-white);
    color: var(--color-text);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
  }
  
  .filter-chip[aria-pressed="true"] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
  }
  
  .accordion__item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-white);
  }
  
  .accordion__trigger {
    background: none;
    border: 0;
    color: var(--color-heading);
    font-weight: var(--weight-semibold);
  }
  
  .accordion__trigger span {
    color: var(--color-muted);
  }
  
  .accordion__panel {
    color: var(--color-text);
  }
  
  .prose p,
  .prose li {
    color: var(--color-text);
  }
  
  .prose ul,
  .prose ol {
    list-style: disc;
  }
  
  .prose ol {
    list-style: decimal;
  }
  
  .icon-check {
    color: var(--color-success);
  }
  
  .aside-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
  }
  
  .kv div {
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-sm);
  }
  
  .kv dt {
    color: var(--color-muted);
  }
  
  .kv dd {
    font-weight: var(--weight-semibold);
    color: var(--color-heading);
  }
  
  /* =========================================================
     FOOTER
     ========================================================= */
  
  .footer {
    background:
      radial-gradient(720px 280px at 0% 0%, rgba(192, 76, 22, 0.16), transparent 55%),
      var(--color-accent);
    color: var(--color-footer-text);
  }
  
  .footer .brand__name {
    color: var(--color-white);
    font-size: var(--text-xl);
  }
  
  .footer .brand:hover .brand__name {
    color: var(--color-cta-eyebrow);
  }
  
  .footer__banner {
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background:
      radial-gradient(520px 200px at 100% 0%, rgba(192, 76, 22, 0.28), transparent 58%),
      rgba(255, 255, 255, 0.04);
  }
  
  .footer__banner .eyebrow {
    color: var(--color-cta-eyebrow);
  }
  
  .footer__banner-title {
    font-size: var(--text-2xl);
    line-height: var(--leading-snug);
    font-weight: var(--weight-bold);
    color: var(--color-white);
    letter-spacing: -0.03em;
  }
  
  .footer__banner-copy p:last-child {
    color: var(--color-footer-text);
    font-size: var(--text-base);
  }
  
  .footer__banner-secondary {
    background: transparent;
    color: var(--color-white);
    border: 1px solid rgba(219, 228, 245, 0.38);
  }
  
  .footer__banner-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-cta-eyebrow);
    border-color: var(--color-cta-eyebrow);
  }
  
  .footer__title {
    font-size: 0.8rem;
    font-weight: var(--weight-bold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-cta-eyebrow);
  }
  
  .footer__lead {
    font-size: var(--text-base);
    line-height: var(--leading-body);
    color: var(--color-footer-text);
  }
  
  .footer__partner {
    font-size: var(--text-sm);
    line-height: var(--leading-body);
    color: var(--color-footer-text);
  }
  
  .footer__disclosure {
    color: var(--color-cta-eyebrow);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
  }
  
  .footer__disclosure:hover {
    color: var(--color-white);
    text-decoration: underline;
  }
  
  .footer__links a {
    color: var(--color-footer-text);
    font-size: var(--text-base);
    border-bottom: 1px solid transparent;
  }
  
  .footer__links a:hover {
    color: var(--color-white);
    text-decoration: none;
    border-bottom-color: var(--color-cta-eyebrow);
  }
  
  .footer__contact a,
  .footer__contact span {
    color: var(--color-white);
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
  }
  
  .footer__contact a:hover {
    color: var(--color-cta-eyebrow);
    text-decoration: none;
  }
  
  .footer__contact-icon {
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-cta-eyebrow);
  }
  
  .footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: var(--text-sm);
    color: var(--color-footer-muted);
  }
  
  .legal-note {
    font-size: var(--text-xs);
    color: var(--color-footer-muted);
  }
  
  .back-top {
    border: 0;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-white);
    box-shadow: var(--shadow-md);
  }
  
  .overlay {
    background: var(--color-overlay);
  }
  
  .section--soft {
    background: var(--color-background-soft);
  }
  
  .why-section {
    background:
      radial-gradient(720px 280px at 8% 0%, rgba(192, 76, 22, 0.08), transparent 58%),
      radial-gradient(640px 240px at 96% 100%, rgba(30, 58, 138, 0.07), transparent 62%),
      var(--color-background-tint);
  }
  
  .why-section .eyebrow {
    color: var(--color-accent);
  }
  
  .why-section__intro p {
    color: var(--color-text);
  }
  
  /* .why-layout__media {
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    background: var(--color-primary-soft);
    box-shadow: var(--shadow-sm);
  } */
  
  .why-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  }
  
  .why-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-cta-card-border);
  }
  
  .why-card__icon {
    border-radius: var(--radius-full);
    background: var(--color-primary-soft);
    color: var(--color-primary);
  }
  
  .why-card__icon--violet {
    background: var(--color-secondary-soft);
    color: var(--color-secondary);
  }
  
  .why-card__icon--accent {
    background: var(--color-accent-soft);
    color: var(--color-accent);
  }
  
  .why-card__num {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.08em;
    color: var(--color-muted);
  }
  
  .why-card h3 {
    font-size: var(--text-lg);
  }
  
  .why-card p {
    font-size: var(--text-card-body);
    color: var(--color-text);
  }
  
  .why-card__tags {
    list-style: none;
  }
  
  .why-card__tags li {
    border-radius: var(--radius-full);
    background: var(--color-background-soft);
    color: var(--color-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
  }
  
  .why-card--accent {
    border-color: var(--color-cta-card-border);
  }
  
  /* =========================================================
     PROGRAMS / PATHS
     ========================================================= */
  
  .path-section {
    background:
      radial-gradient(720px 280px at 92% 0%, rgba(192, 76, 22, 0.1), transparent 58%),
      radial-gradient(640px 240px at 6% 100%, rgba(30, 58, 138, 0.08), transparent 62%),
      var(--color-background-tint);
  }
  
  .path-section__intro p {
    color: var(--color-text);
  }
  
  .path-card {
    text-decoration: none;
    color: inherit;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  }
  
  .path-card:hover,
  .path-card:focus-visible {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-cta-card-border);
  }
  
  .path-card__icon {
    border-radius: var(--radius-full);
    background: var(--color-primary-soft);
    color: var(--color-primary);
  }
  
  .path-card__icon--violet {
    background: var(--color-secondary-soft);
    color: var(--color-secondary);
  }
  
  .path-card__icon--accent {
    background: var(--color-accent-soft);
    color: var(--color-accent);
  }
  
  .path-card__index {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.08em;
    color: var(--color-muted);
  }
  
  .path-card__badge {
    border-radius: var(--radius-full);
    background: rgba(253, 186, 116, 0.18);
    color: var(--color-cta-eyebrow);
    font-size: 0.68rem;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  
  .path-card h3 {
    font-size: var(--text-lg);
  }
  
  .path-card p {
    font-size: var(--text-card-body);
    color: var(--color-text);
  }
  
  .path-card__tags {
    list-style: none;
  }
  
  .path-card__tags li {
    border-radius: var(--radius-full);
    background: var(--color-background-soft);
    color: var(--color-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
  }
  
  .path-card__cta {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-accent);
  }
  
  .path-card__cta::after {
    content: "";
    width: 0.42rem;
    height: 0.42rem;
    border-top: 1.7px solid currentColor;
    border-right: 1.7px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--transition-fast);
  }
  
  .path-card:hover .path-card__cta::after,
  .path-card:focus-visible .path-card__cta::after {
    transform: rotate(45deg) translate(0.08rem, -0.08rem);
  }
  
  .path-card--accent {
    border-color: var(--color-cta-card-border);
  }
  
  .catalog-section {
    background:
      radial-gradient(720px 280px at 8% 0%, rgba(192, 76, 22, 0.08), transparent 58%),
      radial-gradient(640px 240px at 96% 100%, rgba(30, 58, 138, 0.07), transparent 62%),
      var(--color-background-tint);
  }
  
  .catalog-section .eyebrow {
    color: var(--color-accent);
  }
  
  .catalog-section__intro p {
    color: var(--color-text);
  }
  
  .catalog-section .filter-chip[aria-pressed="true"] {
    background: var(--color-accent);
    border-color: var(--color-accent);
  }
  
  .program-card {
    text-decoration: none;
    color: inherit;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  }
  
  .program-card:hover,
  .program-card:focus-visible {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-cta-card-border);
  }
  
  .program-card__icon {
    border-radius: var(--radius-full);
    background: var(--color-primary-soft);
    color: var(--color-primary);
  }
  
  .program-card__icon--violet {
    background: var(--color-secondary-soft);
    color: var(--color-secondary);
  }
  
  .program-card__icon--accent {
    background: var(--color-accent-soft);
    color: var(--color-accent);
  }
  
  .program-card__badge,
  .program-card__tag {
    border-radius: var(--radius-full);
    font-size: 0.68rem;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  
  .program-card__badge {
    background: rgba(253, 186, 116, 0.18);
    color: var(--color-cta-eyebrow);
  }
  
  .program-card__tag {
    background: var(--color-background-soft);
    color: var(--color-muted);
  }
  
  .program-card h3 {
    font-size: var(--text-lg);
  }
  
  .program-card p {
    font-size: var(--text-card-body);
    color: var(--color-text);
  }
  
  .program-card__meta {
    font-size: var(--text-card-meta);
    color: var(--color-muted);
  }
  
  .program-card__footer {
    border-top: 1px solid var(--color-border);
  }
  
  .program-card__cta {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-accent);
  }
  
  .program-card__cta::after {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-top: 1.7px solid currentColor;
    border-right: 1.7px solid currentColor;
    transform: rotate(45deg);
  }
  
  .program-card--accent {
    border-color: var(--color-cta-card-border);
  }
  
  .catalog-section__empty {
    color: var(--color-muted);
  }
  
  .uni-section {
    background: var(--color-background);
  }
  
  .uni-section .eyebrow {
    color: var(--color-accent);
  }
  
  .uni-section__intro p {
    color: var(--color-text);
  }
  
  .uni-section .filter-chip[aria-pressed="true"] {
    background: var(--color-accent);
    border-color: var(--color-accent);
  }
  
  .uni-card {
    text-decoration: none;
    color: inherit;
    background: var(--color-white);
    border: 1px solid var(--color-border);
	width : 100%;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  }
  
  .uni-card:hover,
  .uni-card:focus-visible {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-cta-card-border);
  }
  
  .uni-card__mark {
    border-radius: var(--radius-full);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 0.7rem;
    font-weight: var(--weight-bold);
    letter-spacing: 0.04em;
  }
  
  .uni-card__mark:has(img) {
    background: var(--color-white);
  }
  
  .uni-card__mark--accent {
    background: var(--color-accent-soft);
    color: var(--color-accent);
  }
  
  .uni-card__mark--violet {
    background: var(--color-secondary-soft);
    color: var(--color-secondary);
  }
  
  .uni-card__badge,
  .uni-card__mode {
    border-radius: var(--radius-full);
    font-size: 0.68rem;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  
  .uni-card__badge {
    background: rgba(253, 186, 116, 0.18);
    color: var(--color-cta-eyebrow);
  }
  
  .uni-card__mode {
    background: var(--color-background-soft);
    color: var(--color-muted);
  }
  
  .uni-card h3 {
    font-size: var(--text-lg);
  }
  
  .uni-card__place {
    font-size: var(--text-card-meta);
    color: var(--color-muted);
  }
  
  .uni-card__place svg {
    color: inherit;
  }
  
  .uni-card .quote__stars span {
    background: none;
    clip-path: none;
  }
  
  .uni-card .quote__stars [data-half] {
    color: var(--color-border-strong);
  }
  
  .uni-card .quote__stars [data-half]::after {
    content: "★";
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    overflow: hidden;
    color: var(--color-star);
  }
  
  .uni-card__tags {
    list-style: none;
  }
  
  .uni-card__tags li {
    border-radius: var(--radius-full);
    background: var(--color-success-soft);
    color: var(--color-success);
    font-size: 0.68rem;
    font-weight: var(--weight-semibold);
  }
  
  .uni-card p {
    font-size: var(--text-card-body);
    color: var(--color-text);
  }
  
  .uni-card__footer {
    border-top: 1px solid var(--color-border);
  }
  
  .uni-card__cta {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-accent);
  }
  
  .uni-card__cta::after {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-top: 1.7px solid currentColor;
    border-right: 1.7px solid currentColor;
    transform: rotate(45deg);
  }
  
  .uni-section__empty {
    color: var(--color-muted);
  }
  
  .process-section {
    background: var(--color-background);
  }
  
  .process-section .eyebrow {
    color: var(--color-accent);
  }
  
  .process-section__intro p {
    color: var(--color-text);
  }
  
  .process-grid {
    list-style: none;
  }
  
  .process-step {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
  }
  
  .process-step__num {
    border-radius: var(--radius-full);
    background: var(--color-primary-deep);
    color: var(--color-white);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    box-shadow: 0 0 0 6px var(--color-primary-soft);
  }
  
  .process-step__icon {
    border-radius: var(--radius-full);
    background: var(--color-primary-soft);
    color: var(--color-primary);
  }
  
  .process-step__icon--violet {
    background: var(--color-secondary-soft);
    color: var(--color-secondary);
  }
  
  .process-step__icon--accent {
    background: var(--color-primary-soft);
    color: var(--color-accent);
  }
  
  .process-step h3 {
    font-size: var(--text-lg);
  }
  
  .process-step p {
    font-size: var(--text-card-body);
    color: var(--color-text);
  }
  
  .process-step__meta {
    border-radius: var(--radius-full);
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
  }
  
  .process-step--last {
    background:radial-gradient(220px 140px at 100% 0%, rgb(27 187 182 / 12%), transparent 64%), #fbfff8;
    border-color: var(--color-cta-card-border);
  }
  
  .process-step--last .process-step__num {
    background: var(--color-accent);
    box-shadow: 0 0 0 6px rgb(19 55 68 / 7%);
  }
  
  .process-note {
    border-radius: 2rem;
    background:radial-gradient(640px 220px at 50% -8%, rgba(192, 76, 22, 0.32), transparent 58%), var(--color-accent);
    color: var(--color-cta-text);
  }
  
  .process-note::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(rgba(253, 186, 116, 0.22) 1.1px, transparent 1.2px);
    background-size: 18px 18px;
    mask-image: radial-gradient(ellipse 75% 80% at 50% 40%, #000 20%, transparent 78%);
    pointer-events: none;
  }
  
  .process-note__eyebrow {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-cta-eyebrow);
  }
  
  .process-note__title {
    font-size: var(--text-2xl);
    line-height: var(--leading-snug);
    font-weight: var(--weight-bold);
    color: var(--color-white);
    letter-spacing: -0.03em;
  }
  
  .process-note__text {
    font-size: var(--text-base);
    line-height: var(--leading-body);
    color: var(--color-cta-text);
  }
  
  .process-note__cta {
    background: var(--color-accent);
    color: var(--color-white);
    border-color: transparent;
  }
  
  .process-note__cta:hover {
    background: var(--color-accent-hover);
    color: var(--color-white);
  }
  
  .process-note__cta svg {
    animation: process-cta-arrow 1.15s ease-in-out infinite;
  }
  
  .process-note__cta-secondary {
    background: transparent;
    color: var(--color-white);
    border-color: rgba(219, 228, 245, 0.38);
  }
  
  .process-note__cta-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-primary);
    border-color: var(--color-primary);
  }
  
  @keyframes process-cta-arrow {
    0%,
    100% { transform: translateX(0); }
    50% { transform: translateX(4px); }
  }
  
  .empty-state {
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-muted);
  }
  
  .illustration {
    border-radius: var(--radius-lg);
  }
  
  .hero-float__card {
    border: 1px solid #1bbbb61c;
    border-radius: var(--radius-full);
    background: var(--color-white);
    box-shadow: 0 8px 22px rgba(15, 30, 74, 0.12);
  }
  
  .hero-float__icon {
    border-radius: var(--radius-full);
    background: var(--color-primary-soft);
    color: var(--color-accent);
  }
  
  .hero-float__copy strong {
    color: var(--color-heading);
    font-size: 0.8125rem;
    font-weight: var(--weight-bold);
    line-height: 1.2;
  }
  
  .hero-float__copy span {
    color: var(--color-muted);
    font-size: 0.6875rem;
    line-height: 1.3;
  }
  
  @keyframes hero-card-in {
    from {
      opacity: 0;
      transform: translateY(14px) scale(0.96);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  
  @keyframes hero-float {
    0%,
    100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }
  
  .toc a {
    font-size: var(--text-sm);
    color: var(--color-muted);
  }
  
  .toc a:hover {
    color: var(--color-primary);
  }
  
  .article-meta {
    font-size: var(--text-sm);
    color: var(--color-muted);
  }
  
  .contact-tile {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-white);
  }
  
  .contact-tile a {
    color: var(--color-primary);
    font-weight: var(--weight-semibold);
  }
  
  .disclosure {
    background: var(--color-accent-soft);
    border-radius: var(--radius-md);
    color: var(--color-accent-hover);
    font-size: var(--text-sm);
  }
  
  .logo-marquee {
    border-block: 1px solid var(--color-border);
    background: var(--color-background);
  }
  
  .logo-marquee__note {
    color: var(--color-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-body);
  }
  
  .logo-marquee__viewport {
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  
  .logo-track {
    /* animation: logo-scroll 42s linear infinite; */
  }
  
  .logo-track:hover {
    animation-play-state: paused;
  }
  
  .stat__value {
    font-variant-numeric: tabular-nums;
  }
  
  .card-article {
    border-radius: var(--radius-md);
  }
  .img-placeholder,
  .card-article__media {
    background: var(--color-primary-soft);
  }
  .img-placeholder,
  .card-article__media img {
    transition: transform 420ms ease;
  }
  
  .card-article:hover .card-article__media img,
  .card-article:focus-within .card-article__media img {
    transform: scale(1.04);
  }
  
  .card-article .article-byline {
    font-size: var(--text-card-meta);
    color: var(--color-muted);
  }
  
  .card-article .article-byline a {
    color: inherit;
    font-weight: var(--weight-medium);
  }
  
  .card-article__title a {
    color: inherit;
  }
  
  .card-article__title a:hover,
  .card-article__title a:focus-visible {
    color: var(--color-primary-dark);
  }
  
  .card-article .badge:hover,
  .card-article .badge:focus-visible {
    background: var(--color-secondary-soft);
    color: var(--color-primary-deep);
  }
  
  .card-article .article-byline a:hover,
  .card-article .article-byline a:focus-visible {
    color: var(--color-accent);
    text-decoration: underline;
  }
  
  .quote__avatar {
    border-radius: var(--radius-full);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-weight: var(--weight-bold);
    font-size: var(--text-sm);
  }
  
  .quote__avatar--accent {
    background: var(--color-accent-soft);
    color: var(--color-accent);
  }
  
  .quote__avatar--violet {
    background: var(--color-secondary-soft);
    color: var(--color-secondary);
  }
  
  .quote p {
    font-size: 1rem;
    line-height: 1.6;
  }
  
  .testimonial-prev,
  .testimonial-next {
    border: 1px solid var(--color-border);
    background: var(--color-white);
    border-radius: var(--radius-full);
    color: var(--color-heading);
  }
  
  .testimonial-prev::before,
  .testimonial-next::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    display: block;
  }
  
  .testimonial-prev::before {
    transform: rotate(45deg);
    margin-left: 0.15rem;
  }
  
  .testimonial-next::before {
    transform: rotate(-135deg);
    margin-right: 0.15rem;
  }
  
  .testimonial-prev:hover,
  .testimonial-next:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
  }
  
  .testimonial-pagination .swiper-pagination-bullet {
    background: var(--color-border-strong);
    opacity: 1;
  }
  
  .testimonial-pagination .swiper-pagination-bullet-active {
    background: var(--color-primary);
  }
  
  :is(.faq-item, .accordion details) {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-white);
    transition: border-color var(--transition), box-shadow var(--transition);
  }
  
  :is(.faq-item[open], .accordion details[open]) {
    border-color: var(--color-cta-card-border);
    box-shadow: var(--shadow-sm);
  }
  
  :is(.faq-item, .accordion details) summary {
    font-weight: var(--weight-semibold);
    color: var(--color-heading);
  }
  
  :is(.faq-item, .accordion details) summary::after {
    content: "+";
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 1.15rem;
    line-height: 1;
  }
  
  :is(.faq-item[open], .accordion details[open]) summary::after {
    content: "−";
    background: var(--color-primary-soft);
    color: var(--color-primary-deep);
  }
  
  :is(.faq-answer, .accordion details .content) {
    color: var(--color-text);
    font-size: var(--text-card-body);
  }
  
  .faq-layout__media {
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    background: var(--color-primary-soft);
    box-shadow: var(--shadow-sm);
  }
  
  .faq-layout__caption {
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--color-cta-card-border);
    box-shadow: 0 8px 22px rgba(15, 30, 74, 0.12);
  }
  
  .faq-layout__caption strong {
    color: var(--color-heading);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
  }
  
  .faq-layout__caption span {
    color: var(--color-muted);
    font-size: var(--text-sm);
  }
  
  /* .faq-section .eyebrow {
    color: var(--color-accent);
  } */
  
  .counsel-panel {
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    background: var(--color-white);
    box-shadow: var(--shadow-lg);
  }
  
  .counsel-panel__copy {
    background:radial-gradient(520px 240px at 0% 0%, rgba(253, 186, 116, 0.2), transparent 58%), var(--color-accent);
    color: var(--color-cta-text);
  }
  
  .counsel-panel__copy :is(h2, .h2) {
    color: var(--color-white);
    font-size: var(--text-2xl);
  }
  
  .counsel-panel__copy .eyebrow {
    color: var(--color-cta-eyebrow);
  }
  
  .counsel-panel__copy .check-list {
    color: var(--color-white);
  }
  
  .counsel-points__icon {
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-cta-eyebrow);
  }
  
  .counsel-points__icon--accent {
    background: rgb(48 94 111);
    color: var(--color-white);
  }
  
  .counsel-panel__form {
    border-radius: 0;
    box-shadow: none;
    background: var(--color-white);
  }
  
  .counsel-form__head {
    border-bottom: 1px solid var(--color-border);
  }
  
  .counsel-form__badge {
    border-radius: var(--radius-full);
    background: var(--color-primary-soft);
    color: var(--color-accent);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.02em;
  }
  
  .counsel-panel__form h2,
  .counsel-panel__form .h3 {
    color: var(--color-heading);
  }
  
  .counsel-panel__form .small {
    color: var(--color-muted);
  }
  
  .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 500ms ease, transform 500ms ease;
  }
  
  .reveal.is-in {
    opacity: 1;
    transform: none;
  }
  
  @media (prefers-reduced-motion: reduce) {
    .logo-track {
      animation: none;
    }
  
    .logo-marquee__viewport {
      overflow: auto;
      mask-image: none;
    }
  
    .reveal,
    .reveal.is-in {
      opacity: 1;
      transform: none;
      transition: none;
    }
  
    .hero-float__card {
      animation: none;
    }
  
    .path-card:hover,
    .path-card:focus-visible,
    .program-card:hover,
    .program-card:focus-visible,
    .uni-card:hover,
    .uni-card:focus-visible,
    .why-card:hover,
    .quote:hover,
    .card-article:hover,
    .card-article:focus-within {
      transform: none;
    }
  
    .card-article:hover .card-article__media img,
    .card-article:focus-within .card-article__media img {
      transform: none;
    }
  
    .process-note__cta svg {
      animation: none;
    }
  }
  
  @keyframes logo-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }
  
  
  /* css add by karan */
  
  .course-hero .course-hero-content h1{
          font-size: 40px;
      }
  
      .course-hero .course-hero-content .hero-label :is(span ,a){
          padding: 2px 8px;
          border-radius: 4px;
          font-size: 14px;
          font-weight: 600;
          position: relative;
      }
  
      .course-hero .course-hero-content .hero-label span.active:after{
          position: absolute;
          height: 5px;
          width: 5px;
          border-radius: 50%;
          outline: 4px solid #5AEABA;
          content: '';
          left: 12px;
          top: 50%;
          transform: translateY(-50%);
      }
  
      .course-hero .course-hero-content .hero-label .blue{
          background: #B3CCFF
      }
  
      .course-hero .course-hero-content .hero-label .brownish{
          background: var(--color-primary);
      }
  
      .course-hero .course-hero-content .hero-label .green{
          background: #006D49;
          padding-left: 27px;
      }
  
      .course-hero .course-hero-content .hero-label .light{
          color: #000;
      }
  
      .course-hero .course-hero-content .hero-label .dark{
          color: #fff;
      }
  
      .course-hero .course-hero-content .course-meta > div{
          gap: 5px;
          color: #000;
      }
  
  /*     .course-hero .course-hero-content .course-meta a{
          color: var(--color-primary-deep);
          border-bottom: 1px solid var(--color-primary-deep);
      } */
  
      .yoast-breadcrumbs a{
          font-weight: 500;
          font-size: 14px;
          color: #323232;
      }
  
      .yoast-breadcrumbs .breadcrumb_last{
          color: var(--color-primary-deep);
          font-weight: 500;
          font-size: 14px;
      }
  
      .course-content-wrapper .hero-mid-card{
          background: #FFFFFF;
          border: 1px solid #E2E8F0;
          box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1);
          border-radius: 12px;
          overflow: hidden;
      }
  
      .course-content-wrapper .hero-mid-card .card-title{
          background: var(--color-primary-deep);
          color: var(--color-white);
          font-size: 16px;
          font-weight: 700;
      }
  
      .course-content-wrapper .hero-mid-card .mid-card-content > div:not(:first-child):after {
          content: '';
          position: absolute;
          height: 50px;
          width: 1px;
          background: #eee;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
      }
  
      .course-content-wrapper .hero-mid-card .mid-card-content > div span{
          font-size: 14px;
          color: #323232;
      }
  
      .course-content-wrapper .hero-mid-card .mid-card-content > div > div{
          font-size: 18px;
          color: #000;
          font-weight: 700;
      }
  
      .course-content-wrapper .courseTab{
          border-bottom: 1px solid #eee;
          background: #fff;
      }
  
      .course-content-wrapper .courseTab a {
          background: transparent;
          border: 0;
          padding: 10px;
          font-size: 16px;
          font-weight: 700;
          color: var(--color-primary-deep);
      }
  
      .course-content-wrapper .courseTab a.active{
          border-bottom: 1px solid var(--color-primary-deep);
      }
  
      .course-content-wrapper :is(.h3, h3){
          color: #000;
          font-weight: 700;
          margin-bottom: 15px;        
      }
  
      .elig-card:not(.card-article .elig-card){
          border: 1px solid #DBDBDB;
          border-radius: 12px;
          overflow: hidden;
      }
  
      .elig-card .card-head{
          font-size: 18px;
          font-weight: 700;
          color: #000;
      }
  
      .elig-card .card-head:not(.card-article .elig-card .card-head){
          border-bottom: 1px solid #DBDBDB;
          padding: 7px 20px;
      }
  
      .elig-card .data-strip:not(:last-child){
          border-bottom: 1px solid #DBDBDB;
      }
  
      .elig-card .data-strip span:last-child{
          color: #000;
          font-weight: 600;
		  text-align: right
      }

      .elig-card .data-strip .data-strip__disclaimer{
          display: block;
          margin-top: 2px;
          font-size: 12px;
          font-weight: 400;
          font-style: italic;
          color: #888;
          line-height: 1.35;
/*           max-width: 28ch; */
      }
  
      .program-data  .data-strip :is(div, span, strong){
          color: #000;
      }
  
      .category-wrap ul li a{
          background: #f5f5f5;
          border: 1px solid #DBDBDB;
          padding: 4px 14px;
          border-radius: 999px;
      }
  
      .course-sidebar-card .card-article :is(.img-placeholder, .img-placeholder img){
          border-radius: 12px;
      }
  
  .university-content-wrapper .dots-items{
          color: #006D49 !important;
          font-size: 14px;
          position: relative;	
          padding-left: 15px;
      }
  
      .university-content-wrapper .dots-items:after {
          content: '';
          position: absolute;
          left: 3px;
          top: 50%;
          transform: translatey(-50%);
          height: 5px;
          width: 5px;
          background: #006D49;
          border-radius: 50%;
  }
  
  .university-content-wrapper .details-wrapper{
          background: #F8FAFC;
          padding: 25px;
          border-radius: 16px;
          border: 1px solid #E2E8F0;
      }
  
      .university-content-wrapper .details-wrapper .grid-cols .detl-col{
          background: #fff;
          padding: 20px;
          border: 1px solid #E2E8F0;
          border-radius: 12px;
      }
  
      .university-content-wrapper .details-wrapper .grid-cols .detl-col > span{
          font-size: 14px;
          color: #323232;
      }
  
      .university-content-wrapper .details-wrapper .grid-cols .detl-col > div{
          font-weight: 600;
          font-size: 16px;
      }
  
  .gallery-container{
          background: #FFFFFF;
          border: 1px solid #E2E8F0;
          box-shadow: 0px 8px 24px -12px rgba(0, 0, 0, 0.0392157);
          border-radius: 16px;
      padding: 25px;
      }
  
  .university-content-wrapper .gallery-container .gallery-collection img{
      border-radius: 12px;
      cursor: pointer
  }
  
  .sidebar-items{
          padding: 12px 15px;
          border: 1px solid #E2E8F0;
          border-radius: 12px;
      }
  
      .sidebar-items .h3{
          font-size: 22px;
          border-bottom: 1px solid #d1d1d1;
          padding-bottom: 12px;
      }
  
      .sidebar-items .items-cols:not(:last-child){
          padding-bottom: 10px;
          margin-bottom: 10px;
      }
  
      .sidebar-items .items-cols > span{
          color: #323232;
      }
  
      .sidebar-items .items-cols > div{
          font-weight: 600;
          color: #000;
          margin-top: 5px;
      }
      
      .blue-container{
          background: #EAEFF7;
      }
  
      .blue-container .items-cols:not(:last-child){
          border-bottom: 1px solid #fff;
      }
  
      .light-sc-container{
          background: var(--color-primary-soft);
          box-shadow: 0px 8px 24px -12px rgba(0, 0, 0, 0.0392157);
      }
  
      .light-sc-container .items-cols:not(:last-child){
          border-bottom: 1px solid #E2E8F0;
      }
  
  .sidebar-cta .h3{
      color: #fff;
      margin-bottom: 0;
    }
  
  .sidebar-cta .btn{
          width: 100%;
      border-radius: 10px;
      font-size: 15px;
      margin-top: 10px;
  }
  
    #tableofcontent{
      background: #FFFFFF;
      border: 1px solid #E2E8F0;
      box-shadow: 0px 4px 20px rgba(15, 23, 42, 0.0392157);
      border-radius: 16px 16px 0 16px;
      margin-block: 30px;
    }
  
    #tableofcontent .head-th{
      background: #F8FAFC;
      border-bottom: 1px solid #E2E8F0;
      padding: 20px 25px 20px 75px;
      font-size: 18px;
      font-weight: 700;
      border-radius: 16px 16px 0 0;
      position: relative;
    }
  
    #tableofcontent .head-th:after{
      background: url('data:image/svg+xml,<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="36" height="36" rx="8" fill="%230f1e4a"/><path d="M12 13.333h.007M12 18h.007M12 22.667h.007m3.326-9.334H24M15.333 18H24m-8.667 4.667H24" stroke="%23fff" stroke-width="2" stroke-linecap="round"/></svg>') no-repeat;
      height: 36px;
      width: 36px;
      position: absolute;
      content: '';
      left: 25px;
      top: 50%;
      transform: translateY(-50%);
    }
  
    #tableofcontent ul li{
      list-style: disc;
    }
  
    #tableofcontent ul li a{
      font-size: 15px;
      font-weight: 500;
        color: rgba(30, 41, 59, 1);
    }
  
  #tableofcontent ul li a:hover{
      color: var(--color-accent)
  }
  
    #tableofcontent ul::-webkit-scrollbar {
      width: 5px;
  }
  
  #tableofcontent ul::-webkit-scrollbar-thumb {
      background: var(--color-primary);
  }
  
  #tableofcontent ul::-webkit-scrollbar-track {
      background: #f1f1f1;
  }
  
  .ath-container{
          background: #0F1E4A;
          border: 1px solid rgba(253, 253, 253, 0.2);
          border-radius: 8px;
          padding: 30px;
      }
  
      .ath-container .ath-head a{
          color: rgba(255, 255, 255, 1);
          font-size: 20px;
          font-weight: 700;
      }
  
      .ath-container ul li a{
          background: #fff;
          border-radius: 50%;
      }
  
      .ath-container p{
          color: #eaeaea;
      }
  
  .sidebar-form{
          border: 1px solid rgba(15, 30, 74, 1);
          border-radius: 16px;
          padding: 10px;
      }
  
      .sidebar-form .form-head{
          background: var(--color-accent);
          color: #fff;
          padding: 15px 10px;
          border-radius: 8px;
      }
  
      .sidebar-form .form-head .form-ttl{
          font-size: 24px;
          font-weight: 700;
      }
  
      .sidebar-form p{
          font-size: 14px;
      }
  
      .sidebar-form form{
          padding-inline: 15px;
      }
  
      .form-container form label{
          font-size: 16px;
          font-weight: 600;
          color: rgba(15, 23, 42, 1);
      }
  
      .form-container form :is(input, select, textarea){
          background: #F6F7FB;
          border: 1px solid #E2E8F0;
          border-radius: 8px;
          padding: 8px 15px;
          color: var(--color-muted);
      }
  
      .form-container form button{
          font-size: 16px;
          margin-top: 10px;
      }
  
  .single-blog .blog-hero .post-meta{
          background: #FFFFFF;
          border: 1px solid #E2E8F0;
          box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1);
          border-radius: 12px;
      }
  
      .post-meta .meta-item img{
          border-radius: 50%;
          border: 2px solid #323232;
      }
  
  .post-meta .meta-item:not(:last-child){
          border-right: 1px solid #ccc;
          padding-right: 50px;
      }
  
  .post-meta .meta-item > span{
      font-size: 14px;
      color: #323232;
      font-weight: 500;
  }
  
  :is(.single-blog .blog-content, .blog-hero .post-meta) a{
      color: var(--color-accent);
      font-weight: 600;
  }
  
      .social-media li a{
          border: 1px solid #323232;
          border-radius: 50%;
      }
  
  .single-blog .blog-content figure{
      border-radius: 10px;
  }
  
  .single-blog .blog-content figure table thead {
      background: var(--color-accent);
      color: #fff;
  }
  
  .single-blog .blog-content figure table :is(td, th){
      padding: 12px 15px !important;
      border: 1px solid rgba(226, 232, 240, 1) !important;
  }
  
  .single-blog .blog-content figure table tr td:first-child {
      font-weight: 700;
  }
  
  .single-blog .blog-content figure table tr:nth-child(even){
      background: rgba(248, 250, 252, 1)
  }
  
  .about-img img{
      object-fit: cover;
      border-radius: 12px
  }
  
  .sticky-container .sticky-content .sticky-items{
          background: #FFFFFF;
          border: 1px solid #E2E8F0;
          box-shadow: 0px 1px 2px rgba(15, 23, 42, 0.06);
          border-radius: 16px;
          padding: 20px 25px;
      }
  
      .sticky-container .sticky-content .sticky-items .card-title{
          font-size: 20px;
          font-weight: 600;
          color: #0F172A;
      }
  
  .sticky-container .sticky-content .sticky-items :is(.card-title, p){
          margin-bottom: 10px;	
  }
  
  .shutter-ath-wrapper .shutter-ath-item{
          background: #fff;
          border: 1px solid #DBDBDB;
          box-shadow: 0px 16px 32px rgba(0, 0, 0, 0.0392157);
          border-radius: 28px;
          padding: 30px;
      }
  
      .shutter-ath-wrapper .shutter-ath-item .ath-content .ath-name{
          font-size: 22px;
          font-weight: 700;
      }
  
      .shutter-ath-wrapper .shutter-ath-item .ath-content span{
          color: #C2410C;
          font-weight: 500;
      }
  
      .shutter-ath-wrapper .shutter-ath-item .ath-content p{
          font-size: 15px;
      }
  
      .shutter-ath-wrapper .shutter-ath-item .ath-content .btn{
          width: fit-content;
      }
  
      .contact-wrappper{
          border: 1px solid #ddd;
          border-radius: 20px;
      }
  
      .contact-wrappper .form-container{
          border: 0;
          padding: 30px 50px 30px 30px;
      }
  
      .contact-wrappper .contact-info{
          background: var(--color-primary-soft);
          padding: 30px;
      }
  
      .contact-wrappper .contact-info .form-head .h4{
          font-size: 24px;
          font-weight: 600;
          color: #000;
      }
  
      .contact-wrappper .contact-info .info-cols .info-detl strong{
          color: #000;
      }
  
  .middle-form .counsel-panel__form{
      background: #dddddd21;
      border-radius: 20px;
      border: 1px solid #ddd;
  }
  
  .bg-lighty{
      background: #1e3a8a05;
  }
  
  .openModal{
      cursor: pointer
  }
  
      .modal_form-wrapper .counsel-panel__form{
          border-radius: 20px
      }
  
  .pagination .nav-links{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-top: 30px;
      flex-wrap: wrap;
    }
  
    .pagination .nav-links :is(span, a){
      height: 35px;
      width: 35px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--color-primary);
      border-radius: 10px 0 10px 0;
      color: var(--color-white);
      font-weight: 600;
    }
  
    .pagination .nav-links a:hover{
      background:var(--color-primary-deep) !important;
      }
  
    .pagination .nav-links :is(span.current, span){
      background: var(--color-accent);
    }


.search_modal{
        background: var(--color-white);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        padding: 30px;
    }

    .search_modal .head-wrap .hero__title{
        font-size: 30px;
        margin-bottom: 10px;
    }

    .search_modal form{
        box-shadow: unset;
        padding: 0;
    }

    .search_modal form .search-card__tabs{
        width: fit-content;
        background: var(--color-background-soft);
        border-radius: 999px;
        margin-inline: auto;
    }

    .search_modal .past_searches span{
        background: #eef2ff;
        padding: 4px 14px;
        font-size: 14px;
        border: 1px solid #eee;
        border-radius: 999px;
    }

.search_overlay{
        position: fixed;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        background: #00000094;
        z-index: 99;
	display: none
    }

.search_overlay#show{
	display: block !important
}
  
    /* Comments — course & university (reference-adapted) */
    .comments-section {
      --cmt-ink: #0f2744;
      --cmt-muted: #7b8ca3;
      --cmt-teal: #14a3a8;
      --cmt-teal-soft: #e7f7f8;
      --cmt-teal-mid: #c7ecee;
      --cmt-panel: #f3fafb;
      --cmt-border: #d7e8eb;
      --cmt-star: #f5c518;
      width: 100%;
  }
  
  .comments-section .screen-reader-text {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
  }
  
  .comments-section.comment-sec {
      margin-top: 2rem;
      background: transparent;
      padding: 0;
      border: 0;
  }
  
  .comments-section .comments-panel,
  .comments-section .comment-form-container {
      background: var(--cmt-panel);
      border: 1px solid var(--cmt-border);
      border-radius: 16px;
      padding: 1.35rem 1.4rem 1.45rem;
  }
  
  .comments-section .comments-panel {
      margin-bottom: 1.25rem;
  }
  
  .comments-section .comment-h {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 0.75rem 1rem;
      border-bottom: 1px solid var(--cmt-border);
      padding-bottom: 0.9rem;
      margin-bottom: 1.35rem;
  }
  
  .comments-section .comment-h h2 {
      margin: 0;
      font-size: 1.35rem;
      font-weight: 700;
      color: var(--cmt-ink);
  }
  
  .comments-section .comments-average-rating {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.45rem 0.65rem;
  }
  
  .comments-section .comments-average-rating__text {
      font-size: 0.875rem;
      color: var(--cmt-muted);
  }
  
  .comments-section .star-rating {
      display: inline-flex;
      align-items: center;
      gap: 0.1rem;
      line-height: 1;
  }
  
  .comments-section .star-rating .star {
      font-size: 1rem;
      color: #d5dbe5;
  }
  
  .comments-section .star-rating .star.is-filled {
      color: var(--cmt-star);
  }
  
  .comments-section .comment-rating {
      margin: 0 0 0.4rem;
  }
  
  .comments-section :is(ul, ol) {
      list-style: none;
  }
  
  .comments-section ol.comment-list,
  .comments-section ul.comment-list {
      padding: 0;
      margin: 0;
  }
  
  .comments-section .comment-list>.comment {
      margin-bottom: 1.6rem;
  }
  
  .comments-section .comment-list>.comment:last-child {
      margin-bottom: 0;
  }
  
  .comments-section .comment-list-wrapper {
      display: flex;
      position: relative;
      gap: 0.85rem;
      align-items: flex-start;
  }
  
  .comments-section .comment-avatar-initials {
      flex: 0 0 48px;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--cmt-teal-mid);
      color: var(--cmt-ink);
      font-size: 0.8125rem;
      font-weight: 700;
      letter-spacing: 0.03em;
      line-height: 1;
      text-transform: uppercase;
      position: relative;
      z-index: 2;
  }
  
  .comments-section .comment-body {
      flex: 1;
      min-width: 0;
      padding-top: 0.15rem;
  }
  
  .comments-section .comment-list .comment-meta {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 0.35rem 1rem;
      margin-bottom: 0.3rem;
  }
  
  .comments-section .comment-author {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 0.35rem 0.55rem;
      min-width: 0;
  }
  
  .comments-section .comment-list .comment-author .fn,
  .comments-section .comment-list .comment-author .fn a {
      font-weight: 700;
      color: var(--cmt-ink);
      text-decoration: none;
      font-size: 0.95rem;
  }
  
  .comments-section .comment-list .comment-metadata,
  .comments-section .comment-list .comment-metadata a {
      font-size: 0.8125rem;
      color: var(--cmt-muted);
      font-weight: 500;
      text-decoration: none;
  }
  
  .comments-section .comment-content {
      color: var(--cmt-ink);
      line-height: 1.55;
      font-size: 0.9375rem;
  }
  
  .comments-section .comment-content p {
      margin: 0 0 0.35rem;
  }
  
  .comments-section .comment-content p:last-child {
      margin-bottom: 0;
  }
  
  .comments-section .comment-awaiting-moderation,
  .comments-section .comments-closed {
      font-size: 0.875rem;
      color: var(--cmt-muted);
      font-style: italic;
      margin: 0 0 0.45rem;
  }
  
  .comments-section .reply {
      margin-top: 0.55rem;
  }
  
  .comments-section .reply a {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--cmt-teal);
      text-decoration: none;
  }
  
  .comments-section .reply a:hover,
  .comments-section .reply a:focus-visible {
      color: #0e8589;
  }
  
  .comments-section .reply-icon {
      display: block;
  }
  
  .comments-section .comment.parent {
      --cmt-avatar: 48px;
      --cmt-reply-avatar: 40px;
      --cmt-spine: 24px;
      --cmt-branch: 3.25rem;
      --cmt-reply-pad: 0.85rem;
      position: relative;
  }
  
  .comments-section ol.children,
  .comments-section ul.children {
      list-style: none;
      margin: 0.85rem 0 0;
      padding: 0;
      position: relative;
  }
  
  .comments-section ol.children>.comment,
  .comments-section ul.children>.comment {
      position: relative;
      margin: 0 0 0.75rem;
      padding-left: calc(var(--cmt-branch) + var(--cmt-spine));
  }
  
  .comments-section ol.children>.comment:last-child,
  .comments-section ul.children>.comment:last-child {
      margin-bottom: 0;
  }
  
  .comments-section .comment.parent>.comment-list-wrapper::before {
      content: '';
      position: absolute;
      left: calc(var(--cmt-spine) - 1px);
      top: var(--cmt-avatar);
      bottom: -0.85rem;
      width: 2px;
      background: var(--cmt-teal);
      border-radius: 2px;
      z-index: 0;
      pointer-events: none;
  }
  
  .comments-section ol.children>.comment::before,
  .comments-section ul.children>.comment::before {
      content: '';
      position: absolute;
      left: calc(var(--cmt-spine) - 1px);
      top: 0;
      height: calc(var(--cmt-reply-pad) + var(--cmt-reply-avatar) / 2);
      width: 2px;
      background: var(--cmt-teal);
      z-index: 0;
      pointer-events: none;
  }
  
  .comments-section ol.children>.comment:not(:last-child)::after,
  .comments-section ul.children>.comment:not(:last-child)::after {
      content: '';
      position: absolute;
      left: calc(var(--cmt-spine) - 1px);
      top: calc(var(--cmt-reply-pad) + var(--cmt-reply-avatar) / 2);
      bottom: 0;
      width: 2px;
      background: var(--cmt-teal);
      z-index: 0;
      pointer-events: none;
  }
  
  .comments-section ol.children>.comment>.comment-list-wrapper::before,
  .comments-section ul.children>.comment>.comment-list-wrapper::before {
      content: '';
      position: absolute;
      left: calc(-1 * var(--cmt-branch));
      top: calc(var(--cmt-reply-pad) + var(--cmt-reply-avatar) / 2 - 1px);
      width: var(--cmt-branch);
      height: 2px;
      background: var(--cmt-teal);
      z-index: 0;
      pointer-events: none;
  }
  
  .comments-section ol.children>.comment>.comment-list-wrapper::after,
  .comments-section ul.children>.comment>.comment-list-wrapper::after {
      content: '';
      position: absolute;
      left: calc(-1 * var(--cmt-branch) - 5px);
      top: calc(var(--cmt-reply-pad) + var(--cmt-reply-avatar) / 2 - 5px);
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--cmt-teal);
      z-index: 2;
      pointer-events: none;
  }
  
  .comments-section ol.children>.comment>.comment-list-wrapper,
  .comments-section ul.children>.comment>.comment-list-wrapper {
      background: var(--cmt-teal-soft);
      border: 1px solid var(--cmt-border);
      border-radius: 14px;
      padding: var(--cmt-reply-pad) 1rem;
      gap: 0.75rem;
  }
  
  .comments-section ol.children .comment-avatar-initials,
  .comments-section ul.children .comment-avatar-initials {
      flex: 0 0 var(--cmt-reply-avatar);
      width: var(--cmt-reply-avatar);
      height: var(--cmt-reply-avatar);
      font-size: 0.75rem;
      background: var(--cmt-teal-mid);
      color: var(--cmt-ink);
  }
  
  .comments-section .comment-reply-to {
      font-size: 0.8125rem;
      font-weight: 500;
      color: var(--cmt-muted);
  }
  
  .comments-section .comment-reply-to a {
      color: var(--cmt-teal);
      font-weight: 700;
      text-decoration: none;
  }
  
  .comments-section .comment-form-container {
      margin-top: 0;
  }
  
  .comments-section #respond .comment-reply-title {
      font-size: 1.2rem;
      font-weight: 700;
      position: relative;
      margin: 0 0 0.3rem 3.5rem;
      color: var(--cmt-ink);
      line-height: 1.3;
  }
  
  .comments-section #respond .comment-reply-title::after {
      content: '';
      position: absolute;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      left: -3.5rem;
      top: -0.3rem;
      background-color: var(--cmt-teal);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7.5 18.5L4 21V7.8A2.8 2.8 0 016.8 5h10.4A2.8 2.8 0 0120 7.8v7.4a2.8 2.8 0 01-2.8 2.8H7.5z' stroke='%23ffffff' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M8.5 10h7M8.5 13.5h4.5' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-size: 55%;
      background-position: center;
  }
  
  .comments-section #respond .comment-reply-title small,
  .comments-section #respond .cancel-comment-reply {
      font-size: 0.875rem;
      font-weight: 500;
  }
  
  .comments-section #respond .cancel-comment-reply a {
      color: var(--cmt-teal);
  }
  
  .comments-section #respond form p.comment-notes {
      margin: 0 0 1.1rem 3.5rem;
      font-size: 0.875rem;
      color: var(--cmt-muted);
  }

	#respond p.logged-in-as{
		margin-block: 20px 15px
	}
  
  .comments-section .comment-form {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0 0.9rem;
  }
  
  .comments-section .comment-form .comment-form-comment,
  .comments-section .comment-form .comment-form-rating,
  .comments-section .comment-form .comment-form-cookies-consent,
  .comments-section .comment-form .form-submit,
  .comments-section .comment-form .logged-in-as,
  .comments-section .comment-form .comment-notes {
      grid-column: 1 / -1;
  }
  
  .comments-section .comment-form-rating {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.55rem 0.85rem;
      margin-bottom: 0.9rem;
  }
  
  .comments-section .comment-form-rating.is-hidden {
      display: none;
  }
  
  .comments-section .comment-form-rating__label {
      font-size: 0.9rem;
      font-weight: 700;
      color: var(--cmt-ink);
  }
  
  .comments-section .comment-form-rating__label .required {
      color: #e11d48;
  }
  
  .comments-section .star-rating-input {
      display: inline-flex;
      flex-direction: row-reverse;
      align-items: center;
      gap: 0.2rem;
  }
  
  .comments-section .star-rating-input input {
      position: absolute;
      opacity: 0;
      width: 1px;
      height: 1px;
      pointer-events: none;
  }
  
  .comments-section .star-rating-input label {
      cursor: pointer;
      font-size: 1.65rem;
      line-height: 1;
      color: #d0d7e2;
  }
  
  .comments-section .star-rating-input label::before {
      content: "★";
  }
  
  .comments-section .star-rating-input label:hover,
  .comments-section .star-rating-input label:hover~label,
  .comments-section .star-rating-input input:checked~label {
      color: var(--cmt-star);
  }
  
  .comments-section .comment-textarea-wrap {
      position: relative;
      display: block;
      margin-bottom: 0.85rem;
  }
  
  .comments-section .comment-form :is(input:not([type="checkbox"]):not([type="radio"]), textarea) {
      margin-bottom: 0.85rem;
      padding: 0.85rem 0.95rem;
      width: 100%;
      border: 1px solid var(--cmt-border);
      border-radius: 12px;
      background: #ffffff;
      color: var(--cmt-ink);
      font-size: 0.9rem;
  }
  
  .comments-section .comment-textarea-wrap textarea {
      margin-bottom: 0;
      min-height: 120px;
      resize: vertical;
      padding-bottom: 1.75rem;
  }
  
  .comments-section .comment-char-count {
      position: absolute;
      right: 0.85rem;
      bottom: 0.55rem;
      font-size: 0.75rem;
      color: var(--cmt-muted);
      pointer-events: none;
  }
  
  .comments-section .comment-form :is(input, textarea)::placeholder {
      color: var(--cmt-muted);
  }
  
  .comments-section .comment-form :is(input, textarea):focus {
      outline: none;
      border-color: var(--cmt-teal);
      box-shadow: 0 0 0 3px rgba(20, 163, 168, 0.15);
  }
  
  .comments-section form#commentform .comment-form-cookies-consent {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      line-height: 1.4;
      margin: 0.1rem 0 0;
  }
  
  .comments-section form#commentform .comment-form-cookies-consent>input {
      margin: 0;
      height: 16px;
      width: 16px;
      accent-color: var(--cmt-teal);
  }
  
  .comments-section form#commentform .comment-form-cookies-consent label {
      font-size: 0.875rem;
      color: var(--cmt-muted);
      font-weight: 400;
  }
  
  .comments-section form#commentform .form-submit {
      margin: 1.2rem 0 0 !important;
  }
  
  .comments-section .comment-submit {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.45rem;
      min-height: 46px;
      padding: 0.7rem 1.4rem;
      border: 0;
      border-radius: 999px;
      background: var(--color-primary);
      color: #ffffff;
      font-weight: 600;
      cursor: pointer;
  }
  
  .comments-section .comment-submit:hover,
  .comments-section .comment-submit:focus-visible {
      background: #0f2f59;
      color: #ffffff;
  }
  
  .comments-section .comment-submit svg {
      display: block;
  }
  
  .comments-section .comment-navigation {
      margin-top: 1rem;
  }
  
  @media (max-width: 640px) {
      .comments-section .comment-avatar-initials {
          flex-basis: 40px;
          width: 40px;
          height: 40px;
      }
  
      .comments-section .comment.parent {
          --cmt-avatar: 40px;
          --cmt-reply-avatar: 34px;
          --cmt-spine: 20px;
          --cmt-branch: 2.15rem;
      }
  
      .comments-section ol.children .comment-avatar-initials,
      .comments-section ul.children .comment-avatar-initials {
          flex-basis: var(--cmt-reply-avatar);
          width: var(--cmt-reply-avatar);
          height: var(--cmt-reply-avatar);
      }
  
      .comments-section .comment-form {
          grid-template-columns: 1fr;
      }
  
      .comments-section #respond .comment-reply-title,
      .comments-section #respond form p.comment-notes {
          margin-left: 3.25rem;
      }
  
      .comments-section #respond .comment-reply-title::after {
          width: 40px;
          height: 40px;
          left: -3.25rem;
      }
  }