/* CDS Journey design system. New public shell only. */

:root {
   /* =========================================
     BRAND / CORE
     ========================================= */

  --color-ink: #1D1D1F;
  --color-ink-hover: #000000;
  --color-white: #FFFFFF;


  /* =========================================
     TEXT
     ========================================= */

  --color-text-primary: #1D1D1F;
  --color-text-secondary: #6E6E73;
  --color-text-tertiary: #86868B;


  /* =========================================
     SURFACES
     ========================================= */

  --color-surface: #F5F5F7;
  --color-surface-brand: #F7F5FA;


  /* =========================================
     BORDERS
     ========================================= */

  --color-border: #E5E5E5;
  --color-border-strong: #D2D2D7;
  --color-border-lavender: #E5E1EA;


  /* =========================================
     LAVENDER
     ========================================= */

  --color-lavender: #8B7FB3;
  --color-lavender-bright: #6F5CC2;
  --color-lavender-deep: #51439A;
  --color-lavender-dark: #665B86;
  --color-lavender-soft: #F1EEF7;
  --color-lavender-subtle: #F7F5FA;


  /* =========================================
     BRASS
     ========================================= */

  --color-brass: #9C7F2E;
  --color-brass-soft: #F5F0DF;


  /* =========================================
     STATUS
     ========================================= */

  --color-live: #A73B2E;

    --font-display: "Fraunces", Georgia, serif;
    --font-body: "Inter", Arial, sans-serif;
    --font-ui: var(--font-body);
    --font-mono: "IBM Plex Mono", monospace;
    --font-hindi: "Noto Serif Devanagari", serif;
    --bs-font-sans-serif: var(--font-body);
    --bs-font-monospace: var(--font-mono);

    --text-display: 64px;
    --text-display-leading: 1.02;
    --text-display-tracking: -0.035em;

    --text-h1: 56px;
    --text-h1-leading: 1.05;
    --text-h1-tracking: -0.03em;

    --text-h2: 42px;
    --text-h2-leading: 1.1;
    --text-h2-tracking: -0.025em;

    --text-h3: 30px;
    --text-h3-leading: 1.2;
    --text-h3-tracking: -0.02em;

    --text-h4: 22px;
    --text-h4-leading: 1.3;
    --text-h4-tracking: -0.01em;

    --text-body-lg: 20px;
    --text-body-lg-leading: 1.55;

    --text-body: 16px;
    --text-body-leading: 1.6;

    --text-body-sm: 14px;
    --text-body-sm-leading: 1.5;

    --text-caption: 13px;
    --text-caption-leading: 1.4;

    --text-label: 12px;
    --text-label-leading: 1.3;
    --text-label-tracking: 0.08em;

    --text-mono: 12px;
    --text-mono-leading: 1.4;
    --text-mono-tracking: 0.04em;

    --text-hero: 64px;
    --text-hero-leading: 1.02;
    --text-hero-tracking: -0.035em;

    --text-hero-body: 18px;
    --text-hero-body-leading: 1.55;

    --text-hindi: 56px;
    --text-hindi-leading: 1.25;

    --text-nav: 14px;
    --text-btn: 14px;
    --text-card-title: 24px;
    --text-price: 22px;
    --text-stat: 32px;
    --text-mono-sm: 11px;

    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-56: 56px;
    --space-64: 64px;
    --space-80: 80px;
    --space-96: 96px;
    --space-120: 120px;
    --space-144: 144px;

    --section-y: var(--space-96);
    --section-y-large: var(--space-120);
    --section-y-hero-top: var(--space-80);
    --section-y-hero-bottom: var(--space-96);
    --section-y-compact: var(--space-64);

    --container-max: 1280px;
    --container-padding: var(--space-32);
    --container-gutter: var(--container-padding);
    --nav-gap: clamp(1.25rem, 1.95vw, 1.75rem);

    --nav-height: 72px;
    --nav-height-mobile: 56px;
    --nav-actions-gap: 16px;
    --logo-width: 200px;
    --z-header: 100;

    --btn-height: 44px;
    --btn-pad-x: 20px;
    --radius-pill: 999px;
    --radius-card: 16px;
    --radius-card-lg: 20px;
    --radius-image: 14px;

    --shadow-card: 0 8px 30px rgba(29, 29, 31, 0.06);
    --shadow-card-hover: 0 12px 36px rgba(29, 29, 31, 0.09);
    --shadow-dropdown: 0 16px 40px rgba(29, 29, 31, 0.1);

    --ease: 180ms ease;
}

@media (max-width: 1199.98px) {
    :root {
        --text-hero: 52px;
        --text-h1: 48px;
        --text-h2: 36px;
        --text-h3: 26px;
        --text-hindi: 48px;
    }
}

@media (max-width: 767.98px) {
    :root {
        --text-hero: 40px;
        --text-h1: 40px;
        --text-h2: 32px;
        --text-h3: 24px;
        --text-hindi: 40px;
        --text-body: 15px;
        --section-y: var(--space-64);
        --section-y-large: var(--space-80);
        --section-y-hero-top: var(--space-48);
        --section-y-hero-bottom: var(--space-64);
        --container-padding: var(--space-16);
        --container-gutter: var(--container-padding);
    }
}

html,
body {
    font-family: var(--font-body);
    color: var(--color-text-primary);
    background: var(--color-white);
}

.font-display {
    font-family: var(--font-display);
}

.font-body,
.font-ui {
    font-family: var(--font-body);
}

.font-hindi {
    font-family: var(--font-hindi);
}

.font-mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--text-mono-tracking);
}

.type-display {
    font-family: var(--font-display);
    font-size: var(--text-display);
    font-weight: 500;
    line-height: var(--text-display-leading);
    letter-spacing: var(--text-display-tracking);
    color: var(--color-ink);
}

.type-h1 {
    font-family: var(--font-display);
    font-size: var(--text-h1);
    font-weight: 500;
    line-height: var(--text-h1-leading);
    letter-spacing: var(--text-h1-tracking);
    color: var(--color-ink);
    max-width: 680px;
}

.type-h2 {
    font-family: var(--font-display);
    font-size: var(--text-h2);
    font-weight: 500;
    line-height: var(--text-h2-leading);
    letter-spacing: var(--text-h2-tracking);
    color: var(--color-ink);
}

.type-h3 {
    font-family: var(--font-display);
    font-size: var(--text-h3);
    font-weight: 500;
    line-height: var(--text-h3-leading);
    letter-spacing: var(--text-h3-tracking);
    color: var(--color-ink);
}

.type-h4 {
    font-family: var(--font-display);
    font-size: var(--text-h4);
    font-weight: 600;
    line-height: var(--text-h4-leading);
    letter-spacing: var(--text-h4-tracking);
    color: var(--color-ink);
}

.type-body-lg {
    font-family: var(--font-body);
    font-size: var(--text-body-lg);
    font-weight: 400;
    line-height: var(--text-body-lg-leading);
    color: var(--color-text-secondary);
    max-width: 620px;
}

.type-body {
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: 400;
    line-height: var(--text-body-leading);
    color: var(--color-text-primary);
}

.type-body-sm {
    font-family: var(--font-body);
    font-size: var(--text-body-sm);
    font-weight: 400;
    line-height: var(--text-body-sm-leading);
    color: var(--color-text-secondary);
}

.type-caption {
    font-family: var(--font-body);
    font-size: var(--text-caption);
    font-weight: 400;
    line-height: var(--text-caption-leading);
    color: var(--color-text-secondary);
}

.type-label {
    font-family: var(--font-body);
    font-size: var(--text-label);
    font-weight: 600;
    line-height: var(--text-label-leading);
    letter-spacing: var(--text-label-tracking);
    text-transform: uppercase;
    color: var(--color-lavender);
}

.type-mono {
    font-family: var(--font-mono);
    font-size: var(--text-mono);
    font-weight: 600;
    line-height: var(--text-mono-leading);
    letter-spacing: var(--text-mono-tracking);
    color: var(--color-lavender);
}

.type-hindi {
    font-family: var(--font-hindi);
    font-size: var(--text-hindi);
    font-weight: 600;
    line-height: var(--text-hindi-leading);
    color: var(--color-ink);
    max-width: 700px;
}

.type-hero-body {
    font-family: var(--font-body);
    font-size: var(--text-hero-body);
    font-weight: 400;
    line-height: var(--text-hero-body-leading);
    color: var(--color-text-secondary);
    max-width: 570px;
}

.eyebrow {
    margin: 0 0 var(--space-16);
    font-family: var(--font-mono);
    font-size: var(--text-label);
    font-weight: 600;
    line-height: var(--text-label-leading);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-lavender);
}

.ds-container {
    width: min(100% - (2 * var(--container-padding)), var(--container-max));
    max-width: var(--container-max);
    margin-inline: auto;
}

.section {
    padding-block: var(--section-y);
}

.section--large {
    padding-block: var(--section-y-large);
}

.section--hero {
    padding-top: var(--section-y-hero-top);
    padding-bottom: var(--section-y-hero-bottom);
}

.section--compact {
    padding-block: var(--section-y-compact);
}

.section-head {
    margin-bottom: var(--space-40);
}

.section-head--center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.section-head .type-h2,
.section-head .type-body-lg,
.section-head .type-body {
    margin: 0;
}

.section-head .type-body-lg,
.section-head .type-body {
    margin-top: var(--space-16);
}

.grid-exams,
.grid-series {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-16);
}

.grid-batches {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-24);
}

.grid-why {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

@media (max-width: 1199.98px) {
    .grid-exams,
    .grid-series,
    .grid-why {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-batches {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767.98px) {
    .grid-exams,
    .grid-series,
    .grid-batches,
    .grid-why {
        grid-template-columns: 1fr;
    }
}

.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--btn-height);
    padding: 0 var(--btn-pad-x);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: var(--text-btn);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.01em;
    text-decoration: none;
    cursor: pointer;
    gap: var(--space-8);
    transition: background var(--ease), color var(--ease), border-color var(--ease);
}

.ds-btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.ds-btn-primary {
    background: var(--color-ink);
    color: var(--color-white);
}

.ds-btn-primary:hover,
.ds-btn-primary:focus-visible {
    background: var(--color-ink-hover);
    color: var(--color-white);
}

.ds-btn-secondary {
    background: var(--color-white);
    color: var(--color-ink);
    border-color: var(--color-ink);
}

.ds-btn-secondary:hover,
.ds-btn-secondary:focus-visible {
    background: var(--color-surface);
    color: var(--color-ink);
}

.ds-btn-text {
    height: auto;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    font-family: var(--font-body);
    font-size: var(--text-body-sm);
    font-weight: 600;
    color: var(--color-lavender-bright);
}

.ds-btn-text:hover,
.ds-btn-text:focus-visible {
    color: var(--color-lavender-deep);
}

.ds-btn-added,
.ds-btn-added:disabled {
    background: var(--color-lavender-soft);
    color: var(--color-lavender-dark);
    border-color: #7C719F;
    opacity: 1;
    cursor: default;
}

.ds-btn-added:hover,
.ds-btn-added:focus-visible,
.ds-btn-added:disabled:hover {
    background: var(--color-lavender-soft);
    color: var(--color-lavender-dark);
    border-color: #7C719F;
}