/* ============================================================
   EasyApply — Combined Stylesheet (all pages)
   Ported 1:1 from React/Tailwind source. Bootstrap 5.3.2 is loaded
   via CDN in each HTML file; these are the original component styles,
   namespaced per-page exactly as in the source (eaz-root, pt-root,
   exp-root, cmp-root, ma-root, rw-root, sf-root).
   ============================================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  max-width: 100%;
  overflow-x: hidden;
}
body {
  max-width: 100%;
}
.page-shell {
  min-height: 700px;
}
.mt-30 {
  margin-top: 30px;
}
/* ============================================================
   PAGE: index.html (hero landing page — EasyApply application-cost hero)
   Ported from the inline <style> block in index.html, kept separate
   and unmodified below.
   ============================================================ */ :root {
  /* --bg: #F5F1EA;
    --ink: #1E1B16;
    --accent: #E15A2D;
    --accent-dark:#C94A20;
    --card-bg: #FFFFFF;
    --muted: #7A7469;
    --green: #1F7A4D;
    --line: #E7E1D6; */
  --red: #E84B2A;
  --red-d: #C93A1F;
  --red-lt: #FFF0EC;
  --red-md: #FDDDD5;
  --green: #1E6B4A;
  --green-lt: #E8F5EE;
  --green-md: #B8DDC8;
  --gold: #B8760A;
  --gold-lt: #FFF8E6;
  --gold-md: #F0D090;
  --ink: #1A1208;
  --body: #4B4237;
  --muted: #9B8E84;
  --faint: #C8BFB8;
  --bg: #F9F6F3;
  --card: #FFFFFF;
  --border: #EDE7E0;
  --border-dk: #D8D0C8;
  --purple: #6B3FE7;
  --purple-lt: #F0ECFF;
  --accent: #E15A2D;
  --line: #E7E1D6;
  /* --green:#1B4332; */
  /*  --green-mid:#2D6A4F;*/
  --mint: #52B788;
  --radius: 14px;
  --radius-sm: 8px;
}





/* ---------- Button container ---------- */
  .app-buttons {
    position: fixed;    /* stays visible on screen while scrolling */
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    z-index: 100;
  }

  /* Responsive: smaller buttons + tighter spacing on small screens */
  @media (max-width: 600px) {
    .app-buttons {
      right: 12px;
      gap: 10px;
    }

    .app-btn {
      width: 44px;
      height: 44px;
    }

    .app-btn svg {
      width: 18px;
      height: 18px;
    }

    /* Tooltip label would overflow small screens, hide it there */
    .app-btn::after {
      display: none;
    }
  }

  /* ---------- Circular icon-only buttons ---------- */
  @keyframes floatIn {
    from {
      opacity: 0;
      transform: translateX(24px) scale(0.85);
    }
    to {
      opacity: 1;
      transform: translateX(0) scale(1);
    }
  }

  /* Continuous gentle up/down bob once the button has settled in.
     Applied to a wrapper div so it doesn't fight with the button's
     own hover transform. */
  @keyframes floatIdle {
    0%, 100% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-8px);
    }
  }

  .float-wrap {
    display: inline-block;
    animation: floatIdle 3.2s ease-in-out infinite;
  }

  .float-wrap.ios-wrap { animation-delay: 0s; }
  .float-wrap.android-wrap { animation-delay: 1.1s; } /* offset so both don't bob in sync */

  /* Pause the idle bob while hovering so it doesn't fight the hover lift */
  .float-wrap:hover {
    animation-play-state: paused;
  }

  .app-btn {
    position: relative;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    background: linear-gradient(145deg, #232326, #131315);
    box-shadow:
      0 4px 10px rgba(0, 0, 0, 0.28),
      0 1px 2px rgba(0, 0, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    animation: floatIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    transition:
      transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
      box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
      background 0.35s ease,
      border-color 0.35s ease;
    will-change: transform;
  }

  .app-buttons .ios-btn { animation-delay: 0.05s; }
  .app-buttons .android-btn { animation-delay: 0.15s; }

  /* Soft glowing ring that expands on hover */
  .app-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.15);
    transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
  }

  .app-btn:hover::before {
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.06);
  }

  .app-btn svg {
    width: 22px;
    height: 22px;
    fill: #fff;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  }


  .android-btn svg{
        width: 36px;
    height: 36px;
  }

  .app-btn:hover {
    transform: translateY(-4px) scale(1.08);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow:
      0 10px 22px rgba(0, 0, 0, 0.38),
      0 3px 6px rgba(0, 0, 0, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }

  .app-btn:hover svg {
    transform: scale(1.1) rotate(-4deg);
  }

  .app-btn:active {
    transform: translateY(-1px) scale(0.94);
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.6, 1);
  }

  .ios-btn:hover {
    background: linear-gradient(145deg, #2b2b2e, #1a1a1c);
  }

  .android-btn:hover {
    background: linear-gradient(145deg, #1e2a20, #0f1710);
  }

  /* Small tooltip label on hover -- buttons stay icon-only by default */
  .app-btn::after {
    content: attr(data-label);
    position: absolute;
    right: 62px;
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    background: #1c1c1e;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .app-btn:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }







/* ───── HERO ───── */
.hero-section {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  overflow-x: hidden;
  padding: 52px 0;
}
.exam-actions i.fa.fa-check-square {
    padding: 0px 3px;
}

p.ptx {
    background-color: #edebeb;
    display: inline-flex;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px #dfdedd solid;
    margin: 15px 0px 0px;
}
.live-dot1 {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #2ecc40;
  border-radius: 50%;
  border: solid 1px #525252;
  animation: blink 1.2s infinite ease-in-out;
  box-shadow: 0 0 8px rgba(46, 204, 64, 0.7);
}
@keyframes blink {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 8px rgba(46, 204, 64, 0.8);
  }
  50% {
    opacity: 0.2;
    transform: scale(0.9);
    box-shadow: 0 0 2px rgba(46, 204, 64, 0.2);
  }
}
.hero {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 50px;
  align-items: flex-start
}
.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
}
.hero-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border-radius: 99px;
  border: 1.5px solid var(--grey, #ddd);
  background: var(--card, #fff);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  cursor: default;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--red-lt);
  border: 1px solid var(--red-md);
  color: var(--red);
  border-radius: 99px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 22px
}
.hero-badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  animation: pulse 2s infinite
}
@keyframes pulse {
  0%, 100% {
    opacity: 1
  }
  50% {
    opacity: .35
  }
}
.hero h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 50px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.4px;
  color: var(--ink);
  margin-bottom: 18px
}
.hero h1 em {
  font-style: italic;
  color: var(--red)
}
.hero-sub {
  font-size: 16px;
  color: var(--body);
  line-height: 1.72;
  margin-bottom: 14px;
  max-width: 480px
}
.hero-sub strong {
  color: var(--ink);
  font-weight: 700
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 12px;
  border: none;
  background: var(--red);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 4px 22px rgba(232, 75, 42, .35);
  transition: transform .2s, box-shadow .2s
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(232, 75, 42, .42)
}
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 22px;
  border-radius: 12px;
  border: 1.5px solid var(--border-dk);
  background: transparent;
  color: var(--body);
  font-size: 15px;
  font-weight: 600;
  transition: border-color .15s, color .15s
}
.btn-outline:hover {
  border-color: var(--red);
  color: var(--red)
}
/* Hero visual card */
.savings-widget {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 20px 24px;
  box-shadow: 0 8px 48px rgba(26, 18, 8, .09);
  animation:floaty 5.5s ease-in-out infinite;
}

  @keyframes floaty{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-10px); }
  }



.sw-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px
}

.hero-feat-wrap{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:12px
}



.hero-feat {
display: flex;
gap: 13px;
padding: 11px 12px;
}
.hero-feat .hf-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  color: #ffd679;
}
.hf-icon i.fa.fa-coins {
  color: #382ebd;
}
.hf-icon i.fa.fa-folder {
  color: #f05736;
}
.hf-icon i.fa-solid.fa-bell {
  color: #0E0E0E;
}
.hf-icon i.fa-solid.fa-wifi {
  color: #e4512a;
}
.hf-icon i.fa-solid.fa-user-graduate {
  color: #e84b2a;
}
.hero-feat strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px
}
.hero-feat span {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5
}
.display-serif {
  font-family: Georgia, 'Times New Roman', serif;
}


.saving-bottom{
  display:flex;
  gap:8px;
  align-items:center;
  padding:10px 14px;
  background:var(--bg);
  border-radius:14px;
  border:1px solid var(--border)
}
.saving-inner{
  display:flex;margin-right:4px
}

.saving-inner span{

}

.saving-box1{
width:28px;height:28px;border-radius:50%;background:#E84B2A;border:2px solid #fff;display:flex;align-items:center;justify-content:center;font-size:12px;margin-right:-8px;z-index:3; color: #fff;
}


.saving-box2{
width:28px;height:28px;border-radius:50%;background:#1E6B4A;border:2px solid #fff;display:flex;align-items:center;justify-content:center;font-size:12px;margin-right:-8px;z-index:2; color: #fff;
}

.saving-box3{
  width:28px;height:28px;border-radius:50%;background:#B8760A;border:2px solid #fff;display:flex;align-items:center;justify-content:center;font-size:12px;z-index:1; color: #fff;
}



/* ---------- Entrance animations ---------- */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes floatCard {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
@keyframes pulseDot {
  0% {
    box-shadow: 0 0 0 0 rgba(31, 122, 77, .5);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(31, 122, 77, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(31, 122, 77, 0);
  }
}
@keyframes shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: 200px 0;
  }
}
.reveal {
  opacity: 0;
  animation: fadeUp .7s ease forwards;
}
.reveal-1 {
  animation-delay: .05s
}
.reveal-2 {
  animation-delay: .15s
}
.reveal-3 {
  animation-delay: .25s
}
.reveal-4 {
  animation-delay: .35s
}
.reveal-5 {
  animation-delay: .45s
}
.reveal-card {
  animation-delay: .3s
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .info-card, .live-dot {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
/* ---------- Eyebrow badge ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #FBEAE3;
  color: var(--accent-dark);
  font-size: .78rem;
  font-weight: 600;
  padding: .4rem .9rem;
  border-radius: 999px;
  border: 1px solid #F3D4C4;
}
.eyebrow .bi-dot {
  font-size: 1.4rem;
  line-height: 0;
  color: var(--accent);
}
h1.headline {
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
}
h1.headline em {
  font-style: italic;
  color: var(--accent);
  font-family: Georgia, serif;
}
.lede {
  color: #4A453D;
  font-size: 1.05rem;
  max-width: 560px;
}
.lede b {
  color: var(--ink);
}
.lede .link {
  color: #3355CC;
  font-weight: 600;
}
/* ---------- Buttons ---------- */
.btn-cta {
  background: var(--accent);
  border: none;
  color: #fff;
  font-weight: 600;
  padding: .85rem 1.6rem;
  border-radius: .6rem;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: 0 6px 18px rgba(225, 90, 45, .28);
}
.btn-cta:hover {
  background: var(--accent-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(225, 90, 45, .38);
}
.btn-cta i {
  transition: transform .2s ease;
  display: inline-block;
}
.btn-cta:hover i {
  transform: translateX(4px);
}
.btn-outline-soft {
  background: #fff;
  border: 1px solid #DCD5C7;
  color: var(--ink);
  font-weight: 600;
  padding: .85rem 1.5rem;
  border-radius: .6rem;
  transition: all .2s ease;
}
.btn-outline-soft:hover {
  border-color: var(--ink);
  background: #fff;
  color: var(--ink);
  transform: translateY(-2px);
}
/* ---------- Info Card ---------- */
.info-card {
  background: var(--card-bg);
  border-radius: 1.1rem;
  padding: 1.6rem 1.7rem;
  box-shadow: 0 20px 45px rgba(30, 27, 22, .09);
  /* fade/slide in first, then start the gentle float loop */
  animation:
    fadeUp .7s ease forwards .3s, floatCard 6s ease-in-out infinite 1.1s;
  opacity: 0;
}
.info-card .kicker {
  font-size: .72rem;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
}
.feature-row {
  display: flex;
  gap: .85rem;
  padding: .65rem 0;
  border-radius: .6rem;
  transition: background .2s ease, transform .2s ease;
}
.feature-row:hover {
  background: #FBF9F4;
  transform: translateX(3px);
}
.feature-icon {
  width: 34px;
  height: 34px;
  border-radius: .55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
}
.feature-title {
  font-weight: 700;
  font-size: .92rem;
  margin-bottom: .05rem;
}
.feature-sub {
  font-size: .8rem;
  color: var(--muted);
}
.avatar-stack {
  display: flex;
}
.avatar-stack span {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;
  font-weight: 700;
  color: #fff;
  border: 2px solid #fff;
  margin-left: -8px;
}
.avatar-stack span:first-child {
  margin-left: 0;
}
.social-proof-box {
  background: #FAF7F0;
  border-radius: .7rem;
  padding: .7rem .9rem;
}
/* ---------- Ticker strip ---------- */
.ticker-strip {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: .8rem;
    padding: 4px 3px;
    box-shadow: 0 8px 22px rgba(30, 27, 22, .05);
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    position: relative;
    margin-top: 30px;
}
.ticker-strip::-webkit-scrollbar {
  display: none;
}
.ticker-segment {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 0;
    min-width: max-content;
    white-space: nowrap;
    padding: 2px;
}
.ticker-divider {
  width: 1px;
  align-self: stretch;
  background: var(--line);
  margin: 0 .5rem;
  flex-shrink: 0;
}
.ticker-text {
    font-size: 11px;
    white-space: nowrap;
}
.pill {
  font-size: .7rem;
  font-weight: 700;
  padding: .25rem .55rem;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.pill-upcoming {
  background: #FDF2DC;
  color: #946600;
}
.pill-live {
  background: #E7F5EC;
  color: var(--green);
}
.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  display: inline-block;
  animation: pulseDot 1.6s infinite;
}
.btn-mini-outline {
    border: 1px solid var(--accent);
    color: var(--accent);
    font-weight: 700;
    font-size: .78rem;
    padding: 2px 3px;
    border-radius: .5rem;
    background: #fff;
    transition: all .2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none;
}
.btn-mini-outline:hover {
  background: var(--accent);
  color: #fff;
}
.btn-mini-solid {
    background: #1E6B4A;
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: .5rem;
    border: none;
    transition: all .2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none;
    display: inline-block;
}

.btn-mini-solid:hover {
  background: #457219;
  color: #fff;
  transform: translateY(-1px);
}
/* ---------- Stats bar ---------- */
.stats-bar {
  background: #1E1B16;
  color: #fff;
}
.stat-num {
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
}
.stat-label {
  font-size: .75rem;
  color: #B9B2A4;
  letter-spacing: .02em;
}
.stat-item {
  opacity: 0;
  animation: fadeIn .6s ease forwards;
}
/* ============================================================
   SHARED: Site Footer (sf-root) — used on rewards & my-applications
   ============================================================ */
.sf-root {
  background: #4a4a4a;
  color: #fff;
  padding: 48px 28px 24px;
  font-family: 'DM Sans', sans-serif;
}
.sf-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.2fr;
  gap: 48px;
  align-items: start;
}
.sf-inner a {
  color: #ffff;
}
.sf-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.sf-icon {
  width: 44px;
  height: 44px;
  background: #E8430A;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18pt;
}
.sf-name {
  font-family: 'DM Serif Display', serif;
  font-size: 20pt;
  color: #fff;
  line-height: 1;
}
.sf-name small {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 7pt;
  color: #cfcfcf;
  font-weight: 400;
  margin-top: 3px;
  letter-spacing: .02em;
}
.sf-tag {
  font-size: 10pt;
  color: #fff;
  line-height: 1.5;
}
.sf-col-title {
  font-size: 10pt;
  font-weight: 700;
  color: #fff;
  margin-bottom: 14px;
}
.sf-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sf-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 9.5pt;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}
.sf-link::before {
  content: '›';
  color: #fff;
  font-size: 11pt;
}
.sf-contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 9.5pt;
  color: #fff;
  margin-bottom: 14px;
}
.sf-contact-ico {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11pt;
}
.sf-bottom {
  max-width: 1200px;
  margin: 32px auto 0;
  text-align: center;
  font-size: 9pt;
  color: #fff;
  position: relative;
}
.sf-bottom a {
  color: #fff;
  text-decoration: underline;
  margin: 0 6px;
  cursor: pointer;
}
.sf-credit {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 9pt;
  color: #fff;
}
@media (max-width:760px) {
  .sf-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .sf-credit {
    position: static;
    display: block;
    margin-top: 8px;
  }
}
/* ============================================================
   PAGE: rewards.html (rw-root)
   ============================================================ */
.rw-root {
  --brand: #E8430A;
  --brand-light: #FBF0EC;
  --dark: #1A1410;
  --body: #3D3530;
  --muted: #8A7E78;
  --rule: #E8E2DC;
  --surface: #F2F2F2;
  --white: #FFFFFF;
  --amber: #A05C10;
  --amber-bg: #FDF3E6;
  --radius: 6px;
  font-family: 'DM Sans', sans-serif;
  color: var(--body);
  background: var(--surface);
  font-size: 10pt;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}
.rw-root a {
  text-decoration: none;
  color: inherit;
}
.rw-root .nav {
  background: var(--white);
  border-bottom: 1px solid var(--rule);
  padding: 10px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 8px rgba(0, 0, 0, .06);
}
.rw-root .nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.rw-root .nav-icon {
  width: 32px;
  height: 32px;
  background: var(--brand);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15pt;
}
.rw-root .nav-name {
  font-weight: 700;
  font-size: 11pt;
  color: var(--dark);
}
.rw-root .nav-name small {
  display: block;
  font-size: 6.5pt;
  color: var(--muted);
  font-weight: 400;
}
.rw-root .nav-links {
  display: flex;
  gap: 12px;
  align-items: center;
  overflow: hidden;
}
.rw-root .nav-link {
  font-size: 8.5pt;
  color: var(--body);
  cursor: pointer;
}
.rw-root .nav-link.active {
  color: var(--brand);
  font-weight: 600;
  border-bottom: 2px solid var(--brand);
  padding-bottom: 2px;
}
.rw-root .nav-user {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--brand-light);
  border-radius: 20px;
  padding: 4px 12px 4px 6px;
  font-size: 8.5pt;
  font-weight: 500;
  color: var(--brand);
}
.rw-root .nav-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 8pt;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rw-root .shell {
  max-width: 1240px;
  margin: 0 auto;
  padding: 40px 32px 60px;
}
.rw-root .page-title {
  font-size: 24pt;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 6px;
  letter-spacing: -.5px;
}
.rw-root .page-sub {
  font-size: 10pt;
  color: var(--body);
  margin-bottom: 36px;
}
.rw-root .page-sub a {
  color: var(--brand);
  text-decoration: underline;
  font-weight: 600;
}
.rw-root .grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  align-items: start;
}
.rw-root .empty-card {
  background: var(--white);
  border-radius: 4px;
  padding: 34px 30px;
  font-size: 11pt;
  color: var(--body);
  min-height: 80px;
}
.rw-root .sum-card {
  background: var(--white);
  border-radius: 4px;
  padding: 24px 24px 28px;
}
.rw-root .sum-title {
  font-size: 16pt;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 8px;
}
.rw-root .sum-sub {
  font-size: 9.5pt;
  color: var(--body);
  margin-bottom: 16px;
  line-height: 1.5;
}
.rw-root .sum-rule {
  height: 1px;
  background: var(--brand);
  opacity: .55;
  margin: 12px 0 22px;
}
.rw-root .sum-num {
  font-family: 'DM Sans', sans-serif;
  font-size: 22pt;
  color: var(--brand);
  font-weight: 800;
  line-height: 1;
  margin-bottom: 6px;
}
.rw-root .sum-num-label {
  font-size: 9.5pt;
  color: var(--body);
  margin-bottom: 22px;
  line-height: 1.45;
}
.rw-root .apply-btn {
  display: inline-block;
  padding: 11px 22px;
  border-radius: 4px;
  background: var(--brand);
  color: #fff;
  border: none;
  font-size: 10pt;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.rw-root .apply-btn:hover {
  background: #C43608;
}
@media (max-width:880px) {
  .rw-root .grid {
    grid-template-columns: 1fr;
  }
}
/* ============================================================
   PAGE: my-applications.html (ma-root)
   ============================================================ */
.ma-root {
  --brand: #E8430A;
  --brand-light: #FBF0EC;
  --brand-mid: #F26330;
  --dark: #1A1410;
  --body: #3D3530;
  --muted: #8A7E78;
  --rule: #E8E2DC;
  --surface: #F9F6F3;
  --white: #FFFFFF;
  --green: #5BA744;
  --green-bg: #EAF4ED;
  --amber: #A05C10;
  --amber-bg: #FDF3E6;
  --blue: #1A4E8A;
  --blue-bg: #EBF2FB;
  --radius: 8px;
  font-family: 'DM Sans', sans-serif;
  color: var(--body);
  background: var(--surface);
  font-size: 10pt;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}
.ma-root a {
  text-decoration: none;
  color: inherit;
}
.ma-root .nav {
  background: var(--white);
  border-bottom: 1px solid var(--rule);
  padding: 10px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 8px rgba(0, 0, 0, .06);
}
.ma-root .nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ma-root .nav-icon {
  width: 32px;
  height: 32px;
  background: var(--brand);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15pt;
}
.ma-root .nav-name {
  font-weight: 700;
  font-size: 11pt;
  color: var(--dark);
}
.ma-root .nav-name small {
  display: block;
  font-size: 6.5pt;
  color: var(--muted);
  font-weight: 400;
}
.ma-root .nav-links {
  display: flex;
  gap: 12px;
  align-items: center;
  overflow: hidden;
}
.ma-root .nav-link {
  font-size: 8.5pt;
  color: var(--body);
  cursor: pointer;
}
.ma-root .nav-link.active {
  color: var(--brand);
  font-weight: 600;
  border-bottom: 2px solid var(--brand);
  padding-bottom: 2px;
}
.ma-root .nav-link.disabled {
  color: var(--muted);
  cursor: not-allowed;
  opacity: .6;
}
.ma-root .nav-user {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--brand-light);
  border-radius: 20px;
  padding: 4px 12px 4px 6px;
  font-size: 8.5pt;
  font-weight: 500;
  color: var(--brand);
}
.ma-root .nav-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 8pt;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ma-root .page-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 24px;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 22px;
  align-items: start;
}
.ma-root .page-title {
  font-size: 18pt;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 4px;
}
.ma-root .page-sub {
  font-size: 9pt;
  color: var(--muted);
  margin-bottom: 18px;
}

.ma-root .page-sub a{
    text-decoration: underline;
    color: #e8430a
}

.ma-root .tabs {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 14px;
  align-items: center;
  position: sticky;
  top: 52px;
  z-index: 50;
  background: var(--surface);
}
.ma-root .tab {
  font-size: 9pt;
  color: var(--body);
  padding: 8px 0;
  cursor: pointer;
  position: relative;
}
.ma-root .tab.active {
  color: var(--dark);
  font-weight: 600;
}
.ma-root .tab.active::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--brand);
  border-radius: 2px;
}
.ma-root .tab.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: transparent;
}
.ma-root .tab.disabled {
  color: var(--muted);
  cursor: not-allowed;
  opacity: .6;
}
.ma-root .app-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ma-root .app-row {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 14px;
  align-items: center;
}
.ma-root .app-logo {
  width: 74px;
  height: 54px;
  border: 1px solid var(--rule);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  text-align: center;
  line-height: 1.05;
  font-size: 9pt;
  border-radius: 4px;
  white-space: pre-line;
}
.ma-root .app-name {
  font-size: 10.5pt;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 3px;
}
.ma-root .app-prog {
  font-size: 8.5pt;
  color: var(--body);
  margin-bottom: 10px;
}
.ma-root .app-meta {
  display: flex;
  gap: 32px;
}
.ma-root .app-meta-item {
  display: flex;
  flex-direction: column;
}
.ma-root .app-meta-val {
  font-size: 9pt;
  font-weight: 700;
  color: var(--blue);
}
.ma-root .app-meta-label {
  font-size: 7.5pt;
  color: var(--muted);
}
.ma-root .app-ctas {
  display: flex;
  gap: 8px;
  align-items: center;
}
.ma-root .app-del {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 14pt;
  cursor: pointer;
  padding: 6px;
}
.ma-root .app-del:hover {
  color: #c0392b;
}
.ma-root .btn-learn {
  font-size: 8.5pt;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 5px;
  border: 1px solid var(--rule);
  background: var(--white);
  color: var(--body);
  cursor: pointer;
}
.ma-root .btn-apply {
  font-size: 8.5pt;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 5px;
  background: var(--green);
  color: #fff;
  border: none;
  cursor: pointer;
}
.ma-root .btn-apply:hover {
  background: #4a9036;
}
.ma-root .empty {
  background: var(--white);
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 9.5pt;
}
.ma-root .ma-sidebar {
  position: sticky;
  top: 52px;
  align-self: start;
}
.ma-root .rs-card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 20px 20px;
}
.ma-root .rs-title {
  font-size: 14pt;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 6px;
}
.ma-root .rs-sub {
  font-size: 9pt;
  color: var(--body);
  margin-bottom: 12px;
  line-height: 1.5;
}
.ma-root .rs-divider {
  height: 1px;
  background: var(--brand);
  opacity: .6;
  margin: 10px 0 14px;
}
.ma-root .rs-num {
  font-family: 'DM Serif Display', serif;
  font-size: 22pt;
  color: var(--brand);
  line-height: 1;
  margin-bottom: 2px;
}
.ma-root .rs-num-label {
  font-size: 9pt;
  color: var(--body);
  margin-bottom: 14px;
}
.ma-root .rs-claim-btn {
  display: block;
  width: 100%;
  padding: 9px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid var(--rule);
  color: var(--dark);
  font-size: 9pt;
  font-weight: 600;
  cursor: pointer;
  margin: 6px 0 14px;
  font-family: inherit;
}
.ma-root .rs-note {
  font-size: 8pt;
  color: var(--body);
  font-style: italic;
  line-height: 1.5;
  margin-bottom: 14px;
}
.ma-root .rs-apply-btn {
  display: block;
  width: 100%;
  padding: 11px;
  border-radius: 5px;
  background: var(--brand);
  color: #fff;
  border: none;
  font-size: 9.5pt;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
      text-align: center;
}
.ma-root .rs-apply-btn:hover {
  background: #C43608;
}
/* ma-root institute cards — same visual language as all-institutes */
.ma-root .institute-card {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  margin-bottom: 10px;
  transition: box-shadow .15s;
}
.ma-root .institute-card:hover {
  box-shadow: 0 2px 14px rgba(0, 0, 0, .07);
}
.ma-root .inst-row {
  padding: 20px 18px;
  min-height: 110px;
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: center;
}
.ma-root .inst-row.prebooked {
  border-left: 3px solid var(--brand);
}
.ma-root .inst-logo {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  border: 1px solid var(--rule);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10pt;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
  text-align: center;
  line-height: 1.1;
}
.ma-root .inst-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ma-root .inst-logo-img {
  background: #fff;
  padding: 4px;
}
.ma-root .inst-info {
  min-width: 0;
}
.ma-root .inst-name {
  font-size: 10.5pt;
  font-weight: 600;
  color: var(--blue);
  margin-bottom: 2px;
  line-height: 1.25;
}
.ma-root .inst-prog {
  font-size: 8pt;
  color: var(--muted);
  margin-bottom: 7px;
}
.ma-root .inst-meta {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.ma-root .inst-meta-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ma-root .inst-meta-label {
  font-size: 7pt;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.ma-root .inst-meta-val {
  font-size: 8.5pt;
  font-weight: 600;
  color: var(--dark);
}
.ma-root .inst-meta-val.urgent {
  color: var(--brand);
}
.ma-root .inst-ctas {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  min-width: 110px;
}
.ma-root .cta-row-top {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  width: 100%;
}
.ma-root .cta-row-bottom {
  display: flex;
  gap: 6px;
  width: 100%;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
}
.ma-root .btn-learn {
  font-size: 8pt;
  font-weight: 500;
  padding: 6px 13px;
  border-radius: 5px;
  border: 1px solid var(--rule);
  background: var(--white);
  color: var(--body);
  cursor: pointer;
  white-space: nowrap;
}
.ma-root .btn-learn:hover {
  background: var(--surface);
}
.ma-root .btn-apply {
  font-size: 8pt;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 5px;
  background: var(--brand);
  color: #fff;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
}
.ma-root .btn-apply:hover {
  background: #C43608;
}
.ma-root .btn-apply.disabled, .ma-root .btn-apply[disabled] {
  opacity: .6;
  cursor: not-allowed;
}
.ma-root .btn-apply.green {
  background: var(--green);
      color: #fff !important;
}
.ma-root .btn-apply.green:hover {
  background: #4a9036;
}
.ma-root .app-del {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 16pt;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}
.ma-root .app-del:hover {
  color: #c0392b;
}
.ma-root .content {
  background: #f9f9fb;
  border-top: 1px solid #ececec;
  padding: 16px 20px 20px;
}
.ma-root .content hr {
  display: none;
}
.ma-root .content ul {
  padding-left: 18px;
  margin-bottom: 10px;
}
.ma-root .content li {
  margin-bottom: 5px;
}
.ma-root .content p {
  margin-bottom: 8px;
}
.ma-root .content strong {
  color: #222;
}
.ma-root .content a {
  color: #e0570e;
}
.ma-root .timeline {
  list-style: none;
  padding-left: 0;
}
.ma-root .timeline li {
  padding: 6px 0 6px 22px;
  border-left: 2px solid var(--rule);
  position: relative;
  margin: 0 0 0 8px !important;
  font-size: 9pt;
}
.ma-root .timeline li::before {
  content: "" !important;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--muted);
  position: absolute;
  left: -6px;
  top: 8px;
  display: inline-block !important;
  z-index: 2;
}
.ma-root .timeline li::after {
  display: none !important;
}
.ma-root .timeline li.completed {
  border-left-color: var(--green);
}
.ma-root .timeline li.completed::before {
  background: var(--green) !important;
}
/* ============================================================
   PAGE: compare.html (cmp-root)
   ============================================================ */
.cmp-root {
  --brand: #E8430A;
  --brand-light: #FBF0EC;
  --brand-mid: #F26330;
  --dark: #1A1410;
  --body: #3D3530;
  --muted: #8A7E78;
  --rule: #E8E2DC;
  --surface: #F9F6F3;
  --white: #FFFFFF;
  --green: #5BA744;
  --green-bg: #EAF4ED;
  --amber: #A05C10;
  --amber-bg: #FDF3E6;
  --blue: #1A4E8A;
  --blue-bg: #EBF2FB;
  --radius: 8px;
  font-family: 'DM Sans', sans-serif;
  color: var(--body);
  background: var(--surface);
  font-size: 10pt;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}
.cmp-root a {
  text-decoration: none;
  color: inherit;
}
.cmp-root .nav {
  background: var(--white);
  border-bottom: 1px solid var(--rule);
  padding: 10px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 8px rgba(0, 0, 0, .06);
}
.cmp-root .nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.cmp-root .nav-icon {
  width: 32px;
  height: 32px;
  background: var(--brand);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15pt;
}
.cmp-root .nav-name {
  font-weight: 700;
  font-size: 11pt;
  color: var(--dark);
}
.cmp-root .nav-name small {
  display: block;
  font-size: 6.5pt;
  color: var(--muted);
  font-weight: 400;
}
.cmp-root .nav-links {
  display: flex;
  gap: 12px;
  align-items: center;
  overflow: hidden;
}
.cmp-root .nav-link {
  font-size: 8.5pt;
  color: var(--body);
  cursor: pointer;
}
.cmp-root .nav-link.active {
  color: var(--brand);
  font-weight: 600;
  border-bottom: 2px solid var(--brand);
  padding-bottom: 2px;
}
.cmp-root .nav-link.disabled {
  color: var(--muted);
  cursor: not-allowed;
  opacity: .6;
}
.cmp-root .nav-user {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--brand-light);
  border-radius: 20px;
  padding: 4px 12px 4px 6px;
  font-size: 8.5pt;
  font-weight: 500;
  color: var(--brand);
}
.cmp-root .nav-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 8pt;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cmp-root .page-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 24px;
}
.cmp-root .page-title {
  font-size: 18pt;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cmp-root .page-sub {
  font-size: 9pt;
  color: var(--muted);
  margin-bottom: 18px;
  max-width: 780px;
  line-height: 1.55;
}
.cmp-root .panel {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 16px;
}
.cmp-root .panel-title {
  font-size: 12pt;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 6px;
}
.cmp-root .panel-sub {
  font-size: 8.5pt;
  color: var(--muted);
  line-height: 1.55;
}
.cmp-root .slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.cmp-root .slot {
  background: var(--white);
  border: 1.5px dashed var(--rule);
  border-radius: var(--radius);
  min-height: 148px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  transition: border-color .15s;
}
.cmp-root .slot.empty {
  cursor: pointer;
}
.cmp-root .slot.empty:hover {
  border-color: var(--brand);
  background: var(--brand-light);
}
.cmp-root .slot-plus {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22pt;
  color: var(--muted);
  font-weight: 300;
  margin-bottom: 8px;
}
.cmp-root .slot.empty:hover .slot-plus {
  color: var(--brand);
  background: #fff;
}
.cmp-root .slot-add-label {
  font-size: 9pt;
  color: var(--muted);
  font-weight: 500;
}
.cmp-root .slot.filled {
  border-style: solid;
  border-color: var(--rule);
  justify-content: flex-start;
}
.cmp-root .slot-remove {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 13pt;
  cursor: pointer;
  line-height: 1;
  padding: 2px;
}
.cmp-root .slot-remove:hover {
  color: #c0392b;
}
.cmp-root .slot-logo {
  width: 54px;
  height: 54px;
  border: 1px solid var(--rule);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 8.5pt;
  border-radius: 6px;
  white-space: pre-line;
  text-align: center;
  line-height: 1.05;
  margin-bottom: 8px;
}
.cmp-root .slot-name {
  font-size: 9.5pt;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 3px;
  text-align: center;
}
.cmp-root .slot-prog {
  font-size: 7.5pt;
  color: var(--muted);
  text-align: center;
}
.cmp-root .compare-action {
  display: flex;
  justify-content: center;
  margin-bottom: 22px;
}
.cmp-root .btn-compare-big {
  background: var(--brand);
  color: #fff;
  border: none;
  font-family: inherit;
  font-size: 10pt;
  font-weight: 700;
  padding: 10px 32px;
  border-radius: 6px;
  cursor: pointer;
  letter-spacing: .2px;
}
.cmp-root .btn-compare-big:hover {
  background: #C43608;
}
.cmp-root .btn-compare-big:disabled {
  background: var(--muted);
  cursor: not-allowed;
  opacity: .55;
}
.cmp-root .section-title {
  font-size: 12pt;
  font-weight: 700;
  color: var(--dark);
  margin: 18px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}
.cmp-root .pop-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.cmp-root .pop-card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 14px 12px 12px;
  display: flex;
  flex-direction: column;
}
.cmp-root .pop-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.cmp-root .pop-logo {
  width: 48px;
  height: 48px;
  border: 1px solid var(--rule);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 7.5pt;
  border-radius: 6px;
  white-space: pre-line;
  text-align: center;
  line-height: 1.05;
  margin: 0 auto;
}
.cmp-root .pop-vs {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--dark);
  color: #fff;
  font-size: 7.5pt;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-img-wrap {
  background: #fff !important;
  padding: 4px;
}
.logo-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.cmp-root .pop-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 10px;
}
.cmp-root .pop-name {
  font-size: 8pt;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.25;
  margin-bottom: 3px;
}
.cmp-root .pop-prog {
  font-size: 7pt;
  color: var(--muted);
  line-height: 1.3;
  margin-bottom: 6px;
}
.cmp-root .pop-rating {
  font-size: 7.5pt;
  color: var(--body);
}
.cmp-root .pop-star {
  color: #F2A91C;
}
.cmp-root .pop-cta {
  margin-top: auto;
  background: var(--brand);
  color: #fff;
  border: none;
  font-family: inherit;
  font-size: 8.5pt;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 5px;
  cursor: pointer;
  width: 100%;
}
.cmp-root .pop-cta:hover {
  background: #C43608;
}
.cmp-root .big-modal {
  background: #fff;
  border-radius: 12px;
  max-width: 1000px;
  width: 100%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cmp-root .big-modal .modal-head {
  padding: 16px 22px;
}
.cmp-root .big-modal .modal-body {
  padding: 20px 22px;
  overflow-y: auto;
}
.cmp-root .big-cmp-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 9pt;
  background: var(--surface);
  border-radius: 8px;
  overflow: hidden;
}
.cmp-root .big-cmp-table th, .cmp-root .big-cmp-table td {
  padding: 12px 10px;
  text-align: center;
  border-bottom: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  vertical-align: middle;
}
.cmp-root .big-cmp-table th:first-child, .cmp-root .big-cmp-table td:first-child {
  width: 18%;
  text-align: left;
  color: var(--muted);
  font-weight: 600;
  font-size: 8.5pt;
  padding-left: 14px;
}
.cmp-root .big-cmp-table th:last-child, .cmp-root .big-cmp-table td:last-child {
  border-right: none;
}
.cmp-root .big-cmp-table tr:last-child th, .cmp-root .big-cmp-table tr:last-child td {
  border-bottom: none;
}
.cmp-root .big-cmp-table thead th {
  font-weight: 700;
  color: var(--dark);
  font-size: 10pt;
  background: #fff;
  padding-top: 14px;
  padding-bottom: 14px;
}
.cmp-root .bcm-logo {
  width: 46px;
  height: 46px;
  border: 1px solid var(--rule);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 8pt;
  border-radius: 6px;
  white-space: pre-line;
  text-align: center;
  line-height: 1.05;
  margin: 0 auto 6px;
}
.cmp-root .bcm-name {
  font-size: 9.5pt;
  font-weight: 700;
  color: var(--dark);
}
.cmp-root .bcm-prog {
  font-size: 7.5pt;
  color: var(--muted);
  font-weight: 400;
  margin-top: 2px;
}
.cmp-root .big-cmp-table tbody td {
  color: var(--dark);
  font-weight: 600;
}
.cmp-root .big-cmp-table tbody tr:nth-child(even) {
  background: #fff;
}
.cmp-root .modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(20, 15, 12, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
}
.cmp-root .cmp-picker-box {
  background: #fff;
  border-radius: 10px;
  max-width: 520px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cmp-root .modal-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cmp-root .modal-head h3 {
  font-size: 12pt;
  color: var(--dark);
}
.cmp-root .modal-close {
  background: none;
  border: none;
  font-size: 18pt;
  cursor: pointer;
  color: var(--muted);
  line-height: 1;
}
.cmp-root .modal-search {
  padding: 12px 18px;
  border-bottom: 1px solid var(--rule);
}
.cmp-root .modal-search input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  border-radius: 5px;
  font-family: inherit;
  font-size: 9pt;
}
.cmp-root .modal-list {
  overflow-y: auto;
  flex: 1;
}
.cmp-root .modal-item {
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
}
.cmp-root .modal-item:hover {
  background: var(--brand-light);
}
.cmp-root .modal-item.disabled {
  opacity: .45;
  cursor: not-allowed;
}
.cmp-root .modal-item .mi-logo {
  width: 36px;
  height: 36px;
  border: 1px solid var(--rule);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 7pt;
  border-radius: 5px;
  white-space: pre-line;
  text-align: center;
  line-height: 1.05;
}
.cmp-root .modal-item .mi-name {
  font-size: 9pt;
  font-weight: 700;
  color: var(--dark);
}
.cmp-root .modal-item .mi-prog {
  font-size: 7.5pt;
  color: var(--muted);
}
/* ============================================================
   PAGE: explore.html (exp-root)
   ============================================================ */
.exp-root {
  --brand: #E8430A;
  --brand-light: #FBF0EC;
  --brand-mid: #F26330;
  --dark: #1A1410;
  --body: #3D3530;
  --muted: #8A7E78;
  --rule: #E8E2DC;
  --surface: #F9F6F3;
  --white: #FFFFFF;
  --green: #2D6A3F;
  --green-bg: #EAF4ED;
  --amber: #A05C10;
  --amber-bg: #FDF3E6;
  --blue: #1A4E8A;
  --blue-bg: #EBF2FB;
  --teal: #0F6674;
  --teal-bg: #E8F5F7;
  --purple: #5B2D8A;
  --radius: 8px;
  font-family: 'DM Sans', sans-serif;
  color: var(--body);
  background: var(--surface);
  font-size: 10pt;
  line-height: 1.6;
}


#cw-root{
  /* display: none!important; */
}








.exp-root .btn-remove {
  font-size: 8pt;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 5px;
  background: #0f8f35;
  color: #fff;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
.exp-root .btn-remove:hover {
  background: #930a0a;
}
.exp-root a {
  text-decoration: none;
  color: inherit;
}
.exp-root .ann-bar {
  background: #0D2E5C;
  color: rgba(255, 255, 255, .9);
  font-size: 8pt;
  padding: 7px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.exp-root .ann-cta {
  background: rgba(255, 255, 255, .2);
  color: #fff;
  font-size: 7.5pt;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, .35);
  cursor: pointer;
}
.exp-root .nav {
  background: var(--white);
  border-bottom: 1px solid var(--rule);
  padding: 10px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 8px rgba(0, 0, 0, .06);
}
.exp-root .nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}
.exp-root .nav-icon {
  width: 32px;
  height: 32px;
  background: var(--brand);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15pt;
}
.exp-root .nav-name {
  font-weight: 700;
  font-size: 11pt;
  color: var(--dark);
}
.exp-root .nav-name small {
  display: block;
  font-size: 6.5pt;
  color: var(--muted);
  font-weight: 400;
}
.exp-root .badge-eaz2 {
  background: var(--blue);
  color: #fff;
  font-size: 6.5pt;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  vertical-align: middle;
  margin-left: 4px;
}
.exp-root .nav-links {
  display: flex;
  gap: 12px;
  align-items: center;
  overflow: hidden;
}
.exp-root .nav-link {
  font-size: 8.5pt;
  color: var(--body);
  cursor: pointer;
}
.exp-root .nav-link.active {
  color: var(--brand);
  font-weight: 600;
  border-bottom: 2px solid var(--brand);
  padding-bottom: 2px;
}
.exp-root .nav-link.disabled {
  color: var(--muted);
  cursor: not-allowed;
  opacity: .6;
  font-size: 8.5pt;
}
.exp-root .nav-user {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--brand-light);
  border-radius: 20px;
  padding: 4px 12px 4px 6px;
  font-size: 8.5pt;
  font-weight: 500;
  color: var(--brand);
}
.exp-root .nav-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 8pt;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.exp-root .page-shell {
  max-width: 1020px;
  margin: 0 auto;
  padding: 28px 24px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 22px;
  align-items: start;
}
.exp-root .page-title {
  font-size: 18pt;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 4px;
}
.exp-root .page-sub {
  font-size: 9pt;
  color: var(--muted);
  margin-bottom: 18px;
}
.exp-root .filter-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.exp-root .filter-select {
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 7px 30px 7px 12px;
  font-size: 8.5pt;
  color: var(--body);
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238A7E78'/%3E%3C/svg%3E") no-repeat right 10px center;
  -webkit-appearance: none;
  cursor: pointer;
  min-width: 120px;
}
.exp-root .search-box {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 7px 12px;
  background: var(--white);
  flex: 1;
  max-width: 260px;
}
.exp-root .search-box input {
  border: none;
  outline: none;
  font-size: 8.5pt;
  color: var(--body);
  background: transparent;
  width: 100%;
}
.exp-root .search-box span {
  color: var(--muted);
  font-size: 10pt;
}
.exp-root .inst-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.exp-root .inst-row {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 22px 18px;
/*  min-height: 148px;*/
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
/*  align-items: center;*/
  transition: box-shadow .15s;
}
.exp-root .inst-row:hover {
  box-shadow: 0 2px 14px rgba(0, 0, 0, .07);
}
.exp-root .inst-row.prebooked {
  border-left: 3px solid var(--brand);
}
.exp-root .inst-logo {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  border: 1px solid var(--rule);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10pt;
  font-weight: 700;
  color: var(--dark);
  flex-shrink: 0;
  overflow: hidden;
  text-align: center;
  line-height: 1.1;
}
.exp-root .inst-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.exp-root .inst-logo-img {
  background: #fff;
  padding: 4px;
}
.exp-root .inst-name {
  font-size: 10.5pt;
  font-weight: 600;
  color: var(--blue);
  margin-bottom: 2px;
  line-height: 1.25;
}
.exp-root .inst-prog {
  font-size: 8pt;
  color: var(--muted);
  margin-bottom: 7px;
}
.exp-root .inst-meta {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.exp-root .inst-meta-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.exp-root .inst-meta-label {
  font-size: 7pt;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.exp-root .inst-meta-val {
  font-size: 8.5pt;
  font-weight: 600;
  color: var(--dark);
}
.exp-root .inst-meta-val.urgent {
  color: var(--brand);
}
.exp-root .inst-ctas {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  min-width: 130px;
}
.exp-root .cta-row-top {
  display: flex;
  gap: 15px;
  width: 100%;
  justify-content: end;
  flex-direction: row-reverse;
}
.exp-root .cta-row-bottom {
  display: flex;
  gap: 6px;
  width: 100%;
  justify-content: flex-end;
  align-items: center;
      margin-top: 24px;
}
.exp-root .cta-row-top .btn-brochure {
  flex: 0 0 auto;
  min-width: 0;
}
.exp-root .btn-learn {
  font-size: 8pt;
  font-weight: 500;
  padding: 6px 13px;
  border-radius: 5px;
  border: 1px solid var(--rule);
  background: var(--white);
  color: var(--body);
  cursor: pointer;
  white-space: nowrap;
}
.exp-root .btn-learn:hover {
  background: var(--surface);
  border-color: var(--muted);
}
.exp-root .btn-prebook {
  font-size: 8pt;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 5px;
  background: var(--brand);
  color: #fff;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
.exp-root .btn-prebook:hover {
  background: #C43608;
}
.exp-root .btn-prebook.done {
  background: var(--green-bg);
  color: var(--green);
  border: 1px solid #b8dcc4;
  font-weight: 600;
  cursor: default;
}
.exp-root .btn-brochure {
  color: var(--blue);
  cursor: pointer;
  display: inline-flex;
  font-size: 17px;
}
.exp-root .open-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--green-bg);
  color: var(--green);
  font-size: 6.5pt;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 3px;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.exp-root .open-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  display: inline-block;
  animation: exp-pulse 1.6s ease-in-out infinite;
}
.exp-root .upcoming-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fff8ec;
  color: #c47000;
  font-size: 6.5pt;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 3px;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.exp-root .upcoming-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f0a500;
  display: inline-block;
}
.exp-root .btn-compare {
  flex: 1;
  font-size: 8pt;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 5px;
  background: var(--green-bg);
  color: var(--green);
  border: 1px solid #b8dcc4;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
}
.exp-root .btn-compare:hover {
  background: #d4edda;
}
.exp-root .prebooked-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--green-bg);
  color: var(--green);
  font-size: 6.5pt;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-left: 8px;
  vertical-align: middle;
}
.exp-root .apps-open-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--green-bg);
  color: var(--green);
  font-size: 6.5pt;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-left: 8px;
  vertical-align: middle;
}
.exp-root .apps-open-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  display: inline-block;
  animation: exp-pulse 1.6s ease-in-out infinite;
}
@keyframes exp-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .4;
  }
}
.exp-root .sidebar {
  position: sticky;
  top: 72px;
  align-self: start;
}
.exp-root .sidebar-card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 18px 16px;
  margin-bottom: 12px;
}
.exp-root .sb-title {
  font-size: 15pt;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 4px;
  line-height: 1.2;
}
.exp-root .sb-sub {
  font-size: 9pt;
  color: var(--body);
  margin-bottom: 14px;
}
.exp-root .sb-divider {
  height: 1px;
  background: var(--rule);
  margin: 14px 0;
}
.exp-root .sb-rule-orange {
  height: 1px;
  background: var(--brand);
  margin: 4px 0 14px;
}
.exp-root .sb-stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.exp-root .sb-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  font-size: 9pt;
  color: var(--body);
}
.exp-root .sb-stat-label {
  flex: 1;
  line-height: 1.4;
}
.exp-root .sb-stat-val {
  font-weight: 700;
  color: var(--dark);
  font-size: 9.5pt;
  white-space: nowrap;
}
.exp-root .sb-tip-line {
  font-size: 9pt;
  color: var(--body);
  line-height: 1.5;
  margin-top: 2px;
}
.exp-root .sb-tip-more, .exp-root .sb-explorer {
  color: var(--brand);
  font-weight: 500;
}
.exp-root .sb-tip {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  background: var(--amber-bg);
  border-radius: 6px;
  padding: 9px 10px;
  margin-bottom: 12px;
}
.exp-root .sb-tip-icon {
  font-size: 11pt;
  flex-shrink: 0;
  margin-top: 1px;
}
.exp-root .sb-tip-text {
  font-size: 8pt;
  color: var(--body);
  line-height: 1.5;
}
.exp-root .sb-tip-text strong {
  color: var(--amber);
}
.exp-root .sb-inst-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.exp-root .sb-inst-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  font-size: 9pt;
  color: var(--dark);
  padding: 0;
  background: transparent;
  border: none;
}
.exp-root .sb-inst-name {
  font-weight: 500;
  line-height: 1.45;
  flex: 1;
}
.exp-root .sb-inst-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 14pt;
  padding: 0 2px;
  line-height: 1;
  flex-shrink: 0;
}
.exp-root .sb-inst-remove:hover {
  color: #c0392b;
}
.exp-root .sb-proceed-btn {
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 11px 28px;
  font-size: 10pt;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  align-self: flex-start;
  margin-top: 10px;
  width: 100%;
}
.exp-root .sb-proceed-btn:hover {
  background: #C43608;
}
.exp-root .sb-locked {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 10px 12px;
  margin-top: 12px;
}
.exp-root .sb-locked-icon {
  font-size: 13pt;
  flex-shrink: 0;
}
.exp-root .sb-locked-text {
  font-size: 8pt;
  color: var(--muted);
  line-height: 1.5;
}
.exp-root .sb-locked-text strong {
  color: var(--dark);
}
.exp-root .compare-tray {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.exp-root .ct-title {
  font-size: 9pt;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 9px;
}
.exp-root .ct-slots {
  display: flex;
  gap: 7px;
  margin-bottom: 10px;
}
.exp-root .ct-slot {
  flex: 1;
  border: 1.5px dashed var(--rule);
  border-radius: 6px;
  padding: 9px 6px;
  text-align: center;
  font-size: 7.5pt;
  color: var(--muted);
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 3px;
}
.exp-root .ct-slot.filled {
  background: var(--blue-bg);
  border-color: var(--blue);
  color: var(--blue);
  font-weight: 600;
  border-style: solid;
}
.exp-root .ct-slot.filled .ct-name {
  font-size: 7.5pt;
  font-weight: 600;
  color: var(--blue);
  line-height: 1.3;
}
.exp-root .ct-remove {
  font-size: 7.5pt;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: none;
  margin-top: 3px;
}
.exp-root .ct-compare-btn {
  width: 100%;
  padding: 7px;
  border-radius: 5px;
  background: var(--blue);
  color: #fff;
  font-size: 8.5pt;
  font-weight: 600;
  border: none;
  cursor: pointer;
}
.exp-root .section-heading {
  font-size: 8pt;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.exp-root .inst-details {
  background: var(--white);
  border: 1px solid var(--rule);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 14px 18px 16px 88px;
  margin-top: -11px;
  font-size: 8.5pt;
  color: var(--body);
  line-height: 1.7;
}
.exp-root .inst-details p {
  margin: 3px 0;
}
.exp-root .inst-details strong {
  color: var(--dark);
}
.exp-root .modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.exp-root .modal-card {
  background: var(--white);
  border-radius: 10px;
  padding: 28px 32px;
  max-width: 440px;
  width: 90%;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .2);
  position: relative;
}
.exp-root .modal-icon {
  font-size: 32pt;
  margin-bottom: 10px;
}
.exp-root .modal-title {
  font-size: 13pt;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 10px;
  line-height: 1.4;
}
.exp-root .modal-text {
  font-size: 9.5pt;
  color: var(--body);
  line-height: 1.6;
  margin-bottom: 20px;
}
.exp-root .modal-close {
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 9px 24px;
  font-size: 9pt;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.exp-root .modal-close:hover {
  background: #C43608;
}
.exp-root .btn-compare.selected {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.exp-root .ct-slot {
  position: relative;
  cursor: pointer;
}
.exp-root .ct-slot.filled .ct-remove {
  position: absolute;
  top: 2px;
  right: 5px;
  font-size: 9pt;
  line-height: 1;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
}
.exp-root .ct-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
  z-index: 50;
  max-height: 220px;
  overflow-y: auto;
  text-align: left;
}
.exp-root .ct-dropdown-item {
  padding: 7px 10px;
  font-size: 8pt;
  color: var(--body);
  cursor: pointer;
  border-bottom: 1px solid var(--surface);
}
.exp-root .ct-dropdown-item:hover {
  background: var(--blue-bg);
  color: var(--blue);
}
.exp-root .ct-dropdown-item:last-child {
  border-bottom: none;
}
.exp-root .ct-table-wrap {
  width: 100%;
  overflow-x: auto;
}
.exp-root .cmp-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 7.5pt;
  background: var(--surface);
  border-radius: 6px;
  overflow: hidden;
}
.exp-root .cmp-table th, .exp-root .cmp-table td {
  padding: 6px 4px;
  text-align: center;
  border-bottom: 1px solid #e8e3d8;
  border-right: 1px solid #e8e3d8;
  word-break: break-word;
  overflow-wrap: break-word;
  line-height: 1.25;
}
.exp-root .cmp-table th:first-child, .exp-root .cmp-table td:first-child {
  width: 32%;
}
.exp-root .cmp-table th:last-child, .exp-root .cmp-table td:last-child {
  border-right: none;
}
.exp-root .cmp-table tr:last-child th, .exp-root .cmp-table tr:last-child td {
  border-bottom: none;
}
.exp-root .cmp-table thead th {
  font-weight: 700;
  color: var(--dark);
  font-size: 8pt;
  background: transparent;
}
.exp-root .cmp-table tbody th {
  font-weight: 500;
  color: var(--muted);
  text-align: left;
  background: transparent;
  font-size: 7.5pt;
  padding-left: 6px;
}
.exp-root .cmp-table tbody td {
  color: var(--dark);
  font-weight: 500;
}
.exp-root .cmp-modal .modal-card {
  max-width: 680px;
  text-align: left;
}
.exp-root .cmp-modal .modal-title {
  text-align: center;
}
.exp-root .exp-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 14px;
}
.exp-root .exp-tab {
  padding: 8px 16px;
  font-size: 9pt;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: inherit;
  margin-bottom: -1px;
}
.exp-root .exp-tab:hover {
  color: var(--body);
}
.exp-root .exp-tab.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
  font-weight: 600;
}
/* ============================================================
   PAGE: portal.html (pt-root)
   ============================================================ */
.pt-root {
  --brand: #E8430A;
  --brand-light: #FBF0EC;
  --brand-mid: #F26330;
  --brand-dark: #B53408;
  --teal: #0F6674;
  --teal-light: #E8F5F7;
  --amber: #A05C10;
  --amber-light: #FDF3E6;
  --coral: #C0392B;
  --coral-light: #FDEEE9;
  --purple: #5B2D8A;
  --purple-light: #F0EBF8;
  --green: #2D6A3F;
  --green-light: #EAF4ED;
  --text: #1A1410;
  --text-2: #3D3530;
  --text-3: #8A7E78;
  --border: #E8E2DC;
  --border-2: #D6CFC8;
  --bg: #F9F6F3;
  --white: #FFFFFF;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  font-family: 'DM Sans', sans-serif;
  color: var(--text);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.6;
}
.pt-root * {
  box-sizing: border-box;
}
.pt-root .page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
.pt-root section {
  padding: 64px 0;
}
.pt-root .hero {
  background: linear-gradient(180deg, #FBF0EC 0%, var(--white) 100%);
  padding: 72px 0 56px;
  border-bottom: 1px solid var(--border);
}
.pt-root .hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
}
@media (max-width:900px) {
  .pt-root .hero-grid {
    grid-template-columns: 1fr;
  }
}
.pt-root .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--border-2);
  color: var(--brand-dark);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
}
.pt-root .hero-badge span {
  font-size: 14px;
}
.pt-root .hero h1 {
  font-family: 'DM Serif Display', serif;
  font-size: 48px;
  line-height: 1.1;
  color: var(--text);
  margin: 18px 0 14px;
  font-weight: 400;
}
.pt-root .hero h1 em {
  color: var(--brand);
  font-style: italic;
}
.pt-root .hero p.lede {
  font-size: 17px;
  color: var(--text-2);
  max-width: 640px;
  line-height: 1.55;
}
.pt-root .hero-features {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 22px;
}
.pt-root .hero-feat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-2);
  font-weight: 500;
}
.pt-root .hero-feat::before {
  content: "✓";
  color: var(--green);
  font-weight: 700;
}
.pt-root .hero-btns {
  display: flex;
  gap: 12px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.pt-root .hi-inset {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 18px 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
  max-width: 380px;
  margin-left: auto;
}
.pt-root .hi-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 12px;
}
.pt-root .hi-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pt-root .hi-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
}
.pt-root .hi-ename {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
}
.pt-root .hi-edate {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
}
.pt-root .hi-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  letter-spacing: .03em;
  cursor: pointer;
  border: none;
  font-family: inherit;
}
.pt-root .hi-tag.booked {
  background: #2D6A3F;
  color: #fff;
}
.pt-root .hi-tag.add {
  background: var(--brand-light);
  color: var(--brand-dark);
  border: 1px solid #f0d3c5;
}
.pt-root .hi-foot {
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-3);
  text-align: center;
}
.pt-root .hero-wrap {
  position: relative;
}
.pt-root .hero-stage {
  position: relative;
}
.pt-root .hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.pt-root .hero-slide.anchor {
  position: relative;
}
.pt-root .hero-slide.active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.pt-root .hero-slide.anchor:not(.active) {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.pt-root .h-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--border-2);
  color: var(--text);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
  font-family: inherit;
}
.pt-root .h-arrow:hover {
  background: var(--brand-light);
  border-color: var(--brand);
  color: var(--brand);
}
.pt-root .h-arrow.prev {
  left: -56px;
}
.pt-root .h-arrow.next {
  right: -56px;
}
@media (max-width:1180px) {
  .pt-root .h-arrow.prev {
    left: -16px;
  }
  .pt-root .h-arrow.next {
    right: -16px;
  }
}
.pt-root .h-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 28px;
}
.pt-root .h-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-2);
  border: none;
  cursor: pointer;
  padding: 0;
}
.pt-root .h-dot.on {
  background: var(--brand);
  width: 22px;
  border-radius: 999px;
}
.pt-root .hero-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.pt-root .hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--white);
  color: var(--text-2);
  border: 1px solid var(--border);
}
.pt-root .hero-chip.teal {
  background: var(--teal-light);
  color: var(--teal);
  border-color: rgba(15, 102, 116, .2);
}
.pt-root .hi-compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  color: var(--text-2);
}
.pt-root .hi-compare th, .pt-root .hi-compare td {
  padding: 6px 8px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.pt-root .hi-compare th {
  font-weight: 600;
  color: var(--text);
  font-size: 12px;
}
.pt-root .hi-compare tr:last-child td {
  border-bottom: none;
}
.pt-root .hi-compare .hcol {
  background: var(--brand-light);
}
.pt-root .hi-compare-ctas {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}
.pt-root .hi-mcta {
  flex: 1;
  text-align: center;
  padding: 7px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
}
.pt-root .hi-mcta.accent {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.pt-root .hi-rewards {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pt-root .hi-rrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 7px;
  background: var(--bg);
  border: 1px solid var(--border);
}
.pt-root .hi-rrow.hl {
  background: var(--teal-light);
  border-color: rgba(15, 102, 116, .25);
}
.pt-root .hi-rlabel {
  font-weight: 600;
  font-size: 12px;
  color: var(--text);
}
.pt-root .hi-rn {
  font-size: 10.5px;
  color: var(--text-3);
  margin-top: 1px;
}
.pt-root .hi-rval {
  font-weight: 700;
  font-size: 13px;
  color: var(--teal);
}
.pt-root .hi-rval.norm {
  color: var(--text);
}
.pt-root .hi-personal {
  margin-top: 10px;
  background: var(--brand-light);
  border: 1px solid #f0d3c5;
  border-radius: 7px;
  padding: 8px 10px;
  font-size: 11px;
  color: var(--text);
  text-align: center;
  line-height: 1.5;
}
.pt-root .hi-personal strong {
  color: var(--brand);
}
.pt-root .btn-primary {
  background: var(--brand);
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}
.pt-root .btn-primary:hover {
  background: var(--brand-dark);
}
.pt-root .btn-outline {
  background: transparent;
  border: 1.5px solid var(--brand);
  color: var(--brand);
  padding: 12px 22px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.pt-root .btn-outline:hover {
  background: var(--brand-light);
}
.pt-root .btn-white {
  background: #fff;
  color: var(--brand);
  border: none;
  padding: 12px 22px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.pt-root .section-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 8px;
}
.pt-root .section-title {
  font-family: 'DM Serif Display', serif;
  font-size: 32px;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 10px;
  font-weight: 400;
}
.pt-root .section-title em {
  color: var(--brand);
  font-style: italic;
}
.pt-root .section-sub {
  font-size: 15px;
  color: var(--text-3);
  max-width: 600px;
  line-height: 1.6;
}
.pt-root .divider {
  border: none;
  border-top: 1px solid var(--border);
}
.pt-root .steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.pt-root .step-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px;
  transition: transform .2s, box-shadow .2s;
}
.pt-root .step-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
}
.pt-root .step-num {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--text-3);
  margin-bottom: 14px;
}
.pt-root .step-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 12px;
}
.pt-root .ic-brand {
  background: var(--brand-light);
}
.pt-root .ic-purple {
  background: var(--purple-light);
}
.pt-root .ic-teal {
  background: var(--teal-light);
}
.pt-root .ic-amber {
  background: var(--amber-light);
}
.pt-root .step-title {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 6px;
  color: var(--text);
}
.pt-root .step-desc {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.55;
  margin-bottom: 12px;
}
.pt-root .step-timing {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--green-light);
  color: var(--green);
}
.pt-root .step-timing.season {
  background: var(--amber-light);
  color: var(--amber);
}
.pt-root .wishlist-counter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
}
.pt-root .wc-pill {
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.pt-root .exam-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 28px;
}
.pt-root .exam-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color .15s, box-shadow .15s;
}
.pt-root .exam-card:hover {
  border-color: var(--brand-mid);
  box-shadow: 0 6px 20px rgba(232, 67, 10, .06);
}
.pt-root .exam-name {
  font-family: 'DM Serif Display', serif;
  font-size: 22px;
  color: var(--text);
  font-weight: 400;
}
.pt-root .exam-full {
  font-size: 13px;
  color: var(--text-3);
}
.pt-root .exam-when {
  display: inline-block;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  margin-top: 6px;
}
.pt-root .ew-brand {
  background: var(--brand-light);
  color: var(--brand-dark);
}
.pt-root .ew-teal {
  background: var(--teal-light);
  color: var(--teal);
}
.pt-root .ew-amber {
  background: var(--amber-light);
  color: var(--amber);
}
.pt-root .ew-coral {
  background: var(--coral-light);
  color: var(--coral);
}
.pt-root .exam-institutes {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 6px;
}
.pt-root .wishlist-btn {
  margin-top: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-2);
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.pt-root .wishlist-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.pt-root .wishlist-btn.wishlisted {
  background: var(--green-light);
  border-color: #9bc7a9;
  color: var(--green);
}
.pt-root .college-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 28px;
}
.pt-root .college-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color .15s, box-shadow .15s;
}
.pt-root .college-card:hover {
  border-color: var(--brand-mid);
  box-shadow: 0 6px 20px rgba(232, 67, 10, .06);
}
.pt-root .college-avatar {
  width: 42px;
  height: 42px;
  background: var(--brand);
  color: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 6px;
}
.pt-root .college-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
}
.pt-root .college-prog {
  font-size: 12px;
  color: var(--text-3);
}
.pt-root .college-exam-tag {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--brand-light);
  color: var(--brand-dark);
  margin-top: 4px;
}
.pt-root .college-city {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 2px;
}
.pt-root .college-actions {
  display: flex;
  gap: 6px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.pt-root .col-btn {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-2);
  padding: 7px 8px;
  border-radius: var(--r-sm);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.pt-root .col-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.pt-root .col-btn.primary.wishlisted {
  background: var(--green-light);
  border-color: #9bc7a9;
  color: var(--green);
}
.pt-root .alerts-hero-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.pt-root .alert-row {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.pt-root .alert-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.pt-root .ai-brand {
  background: var(--brand-light);
}
.pt-root .ai-amber {
  background: var(--amber-light);
}
.pt-root .ai-teal {
  background: var(--teal-light);
}
.pt-root .alert-row-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
  color: var(--text);
}
.pt-root .alert-row-desc {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
}
.pt-root .checklist-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.pt-root .acc-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-top: 12px;
  overflow: hidden;
}
.pt-root .acc-card.open {
  border-color: var(--brand-mid);
}
.pt-root .acc-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  cursor: pointer;
  user-select: none;
}
.pt-root .acc-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.pt-root .acc-icon.coral {
  background: var(--coral-light);
}
.pt-root .acc-icon.brand {
  background: var(--brand-light);
}
.pt-root .acc-icon.teal {
  background: var(--teal-light);
}
.pt-root .acc-icon.amber {
  background: var(--amber-light);
}
.pt-root .acc-title {
  font-weight: 600;
  font-size: 15px;
  flex: 1;
}
.pt-root .acc-count {
  font-size: 12px;
  color: var(--text-3);
}
.pt-root .acc-chev {
  transition: transform .2s;
  color: var(--text-3);
}
.pt-root .acc-chev.open {
  transform: rotate(180deg);
  color: var(--brand);
}
.pt-root .acc-body {
  border-top: 1px solid var(--border);
  padding: 8px 20px 16px;
}
.pt-root .acc-item {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.pt-root .acc-item:last-child {
  border-bottom: none;
}
.pt-root .acc-item-icon {
  width: 30px;
  height: 30px;
  background: var(--bg);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.pt-root .acc-item-title {
  font-weight: 600;
  font-size: 13.5px;
  margin-bottom: 2px;
  color: var(--text);
}
.pt-root .acc-item-desc {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.5;
}
.pt-root .nl-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 28px;
}
.pt-root .nl-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 18px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.pt-root .nl-icon {
  font-size: 24px;
}
.pt-root .nl-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 3px;
  color: var(--text);
}
.pt-root .nl-sub {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.5;
}
.pt-root .nl-sub-cta {
  display: flex;
  gap: 10px;
  margin-top: 24px;
  max-width: 520px;
}
.pt-root .nl-input {
  flex: 1;
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  padding: 11px 14px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
}
.pt-root .nl-input:focus {
  border-color: var(--brand);
}
.pt-root .nl-sub-btn {
  background: var(--brand);
  color: #fff;
  border: none;
  padding: 11px 20px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}
.pt-root .nl-sub-btn:hover {
  background: var(--brand-dark);
}
.pt-root .cta-strip {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-mid) 100%);
  color: #fff;
  border-radius: var(--r-xl);
  padding: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.pt-root .cta-strip h3 {
  font-family: 'DM Serif Display', serif;
  font-size: 26px;
  font-weight: 400;
  margin-bottom: 6px;
}
.pt-root .cta-strip p {
  font-size: 14px;
  opacity: .92;
  max-width: 560px;
}
.pt-root footer {
  background: var(--white);
  border-top: 1px solid var(--border);
  padding: 28px 0;
}
.pt-root .footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.pt-root .footer-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
}
.pt-root .footer-logo-dot {
  width: 18px;
  height: 18px;
  background: var(--brand);
  border-radius: 5px;
}
.pt-root .footer-links {
  display: flex;
  gap: 18px;
}
.pt-root .footer-links a {
  color: var(--text-3);
  font-size: 13px;
  cursor: pointer;
}
.pt-root .footer-links a:hover {
  color: var(--brand);
}
.pt-root .footer-copy {
  font-size: 12px;
  color: var(--text-3);
}
@media(max-width:880px) {
  .pt-root .steps-grid, .pt-root .exam-grid, .pt-root .college-grid, .pt-root .alerts-hero-cards, .pt-root .nl-grid {
    grid-template-columns: 1fr 1fr;
  }
  .pt-root .hero h1 {
    font-size: 34px;
  }
  .pt-root .cta-strip {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media(max-width:560px) {
  .pt-root .steps-grid, .pt-root .exam-grid, .pt-root .college-grid, .pt-root .alerts-hero-cards, .pt-root .nl-grid {
    grid-template-columns: 1fr;
  }
}
.pt-root .nav {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 10px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 8px rgba(0, 0, 0, .06);
}
.pt-root .nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.pt-root .nav-icon {
  width: 32px;
  height: 32px;
  background: var(--brand);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15pt;
}
.pt-root .nav-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
}
.pt-root .nav-name small {
  display: block;
  font-size: 10px;
  color: var(--text-3);
  font-weight: 400;
}
.pt-root .nav-links {
  display: flex;
  gap: 18px;
  align-items: center;
}
.pt-root .nav-link {
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
}
.pt-root .nav-link.active {
  color: var(--brand);
  font-weight: 600;
}
.pt-root .nav-link.disabled {
  color: var(--text-3);
  cursor: not-allowed;
  opacity: .6;
}
.pt-root .nav-user {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--brand-light);
  border-radius: 20px;
  padding: 4px 12px 4px 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--brand);
}
.pt-root .nav-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ============================================================
   PAGE: account.html / index.html (eaz-root)
   ============================================================ */
.eaz-root {
  --brand: #E8430A;
  --brand-light: #FBF0EC;
  --brand-mid: #F26330;
  --dark: #1A1410;
  --body: #3D3530;
  --muted: #8A7E78;
  --rule: #E8E2DC;
  --surface: #F9F6F3;
  --white: #FFFFFF;
  --green: #2D6A3F;
  --green-bg: #EAF4ED;
  --amber: #A05C10;
  --amber-bg: #FDF3E6;
  --blue: #1A4E8A;
  --blue-bg: #EBF2FB;
  --teal: #0F6674;
  --teal-bg: #E8F5F7;
  --purple: #5B2D8A;
  --purple-bg: #F0EBF8;
  --radius: 10px;
  --shadow: 0 2px 18px rgba(0, 0, 0, 0.08);
  font-family: 'DM Sans', sans-serif;
  color: var(--body);
  background: var(--white);
  font-size: 10pt;
  line-height: 1.6;
  --hiw-orange: #e0521f;
  --hiw-orange-dark: #c8451a;
  --hiw-line: #e3ddd3;
  --hiw-bg: #f7f2ec; /* match your section background */
}
.nav-brand .nav-name img {
  display: block;
  max-width: 100%;
  max-height: 52px;
}
.eaz-root a {
  text-decoration: none;
}
.eaz-root .container {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
}
.eaz-root .section {
  padding: 52px 0;
}
.eaz-root .section-alt {
  background: var(--surface);
}
.eaz-root .three-col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}
.eaz-root .four-col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.eaz-root .section-eyebrow {
  font-size: 7.5pt;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 6px;
}
.eaz-root .section-eyebrow.blue {
  color: var(--blue);
}
.eaz-root .section-eyebrow.green {
  color: var(--green);
}
.eaz-root h2.section-title {
  font-family: 'DM Serif Display', serif;
  font-size: 20pt;
  color: var(--dark);
  line-height: 1.18;
  margin-bottom: 8px;
}
.eaz-root h2.section-title span {
  color: var(--brand);
}
.eaz-root .section-sub {
  font-size: 9.5pt;
  color: var(--muted);
  max-width: 520px;
  line-height: 1.65;
  margin-bottom: 15px;
}
.eaz-root .section-sub.center {
  text-align: left;
  margin: 0 auto 24px;
}
.eaz-root .text-center {
  text-align: center;
}
.eaz-root .btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9pt;
  font-weight: 600;
  padding: 9px 20px;
  border-radius: 5px;
  cursor: pointer;
  letter-spacing: .01em;
  border: none;
}
.eaz-root .btn-brand {
  background: var(--brand);
  color: #fff;
}
.eaz-root .btn-outline-brand {
  background: transparent;
  border: 1.5px solid var(--brand);
  color: var(--brand);
}
.eaz-root .btn-outline-blue {
  background: transparent;
  border: 1.5px solid var(--blue);
  color: var(--blue);
}
.eaz-root .nav {
  background: var(--white);
  border-bottom: 1px solid var(--rule);
  padding: 5px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 8px rgba(0, 0, 0, .06);
}
.eaz-root .nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.eaz-root .nav-icon {
  width: 32px;
  height: 32px;
  background: var(--brand);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15pt;
}
.eaz-root .nav-name {
  font-weight: 700;
  font-size: 11pt;
  color: var(--dark);
}
.eaz-root .nav-name small {
  display: block;
  font-size: 6.5pt;
  color: var(--muted);
  font-weight: 400;
}
.eaz-root .nav-links {
  display: flex;
  gap: 18px;
  align-items: center;
}
.eaz-root .nav-link {
  font-size: 8.5pt;
  color: var(--body);
  font-weight: 400;
  cursor: pointer;
}
.eaz-root .nav-link.active {
  color: var(--brand);
  font-weight: 600;
}
.eaz-root .nav-link.disabled {
  color: var(--muted);
  cursor: not-allowed;
  opacity: .6;
}
.eaz-root .nav-user {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--brand-light);
  border-radius: 20px;
  padding: 4px 12px 4px 6px;
  font-size: 8.5pt;
  font-weight: 500;
  color: var(--brand);
  cursor: pointer;
}
.eaz-root .nav-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 8pt;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.eaz-root .hero-shell {
  position: relative;
  overflow: hidden;
  background: var(--white);
  color: var(--dark);
  padding: 44px 20px 28px;
}
.eaz-root .hero-shell::after {
  content: '';
  position: absolute;
  top: -80px;
  right: -60px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(232, 67, 10, .08);
  pointer-events: none;
}
.eaz-root .hero-shell::before {
  content: '';
  position: absolute;
  bottom: -100px;
  left: -80px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(242, 99, 48, .06);
  pointer-events: none;
}
.eaz-root .hero-container {
  max-width: 1170px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  padding: 0 28px;
}
.eaz-root .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 20px;
  padding: 5px 13px;
  font-size: 8pt;
  font-weight: 600;
  margin-bottom: 14px;
  letter-spacing: .03em;
  background: var(--brand-light);
  border: 1px solid rgba(232, 67, 10, .25);
  color: var(--brand);
}
.eaz-root .hero-eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  animation: eazPulse 1.2s infinite;
}
.eaz-root .hero-h1 {
  font-family: 'DM Serif Display', serif;
  font-size: 28pt;
  font-weight: 400;
  line-height: 1.18;
  margin-bottom: 12px;
  color: var(--dark);
  max-width: 720px;
}
.eaz-root .hero-h1 .hl {
  color: var(--brand);
  font-style: italic;
}
.eaz-root .hero-sub {
  font-size: 10pt;
  color: var(--body);
  line-height: 1.65;
  margin-bottom: 18px;
  max-width: 560px;
}
.eaz-root .pos-carousel-wrap {
  position: relative;
  margin: 0 -4px;
}
.eaz-root .pos-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 14px;
  padding: 12px 4px 18px;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.eaz-root .pos-carousel::-webkit-scrollbar {
  display: none;
}
.eaz-root .pos-frame {
  scroll-snap-align: start;
  flex: 0 0 calc(50% - 7px);
  border-radius: 18px;
  padding: 18px;
  position: relative;
  overflow: hidden;
  color: var(--dark);
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: var(--surface);
  border: 1px solid var(--rule);
  box-shadow: 0 6px 18px rgba(26, 20, 16, .06);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.eaz-root .pos-frame:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: 0 10px 24px rgba(232, 67, 10, .12);
}
.eaz-root .pos-frame::after {
  content: '';
  position: absolute;
  bottom: -40px;
  right: -30px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: rgba(232, 67, 10, .06);
  pointer-events: none;
}
.eaz-root .pos-eyebrow {
  font-size: 7.5pt;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}
.eaz-root .pos-h {
  font-family: 'DM Serif Display', serif;
  font-size: 14pt;
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: 12px;
  color: var(--dark);
  position: relative;
  z-index: 1;
}
.eaz-root .pos-stats {
  display: flex;
  gap: 22px;
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
}
.eaz-root .pos-stat-n {
  font-family: 'DM Serif Display', serif;
  font-size: 18pt;
  color: var(--dark);
}
.eaz-root .pos-stat-l {
  font-size: 7.5pt;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.35;
}
.eaz-root .pos-icons {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.eaz-root .pos-icon {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 8pt;
  font-weight: 600;
  background: var(--white);
  padding: 4px 11px;
  border-radius: 30px;
  color: var(--dark);
  border: 1px solid var(--rule);
}
.eaz-root .pos-sub {
  font-size: 8.5pt;
  color: var(--body);
  line-height: 1.55;
  margin-top: 6px;
  position: relative;
  z-index: 1;
}
.eaz-root .pos-cta {
  align-self: flex-start;
  background: var(--brand);
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: 30px;
  font-size: 8.5pt;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  margin-top: 12px;
  transition: .2s;
  box-shadow: 0 4px 12px rgba(232, 67, 10, .3);
  position: relative;
  z-index: 1;
}
.eaz-root .pos-cta:hover {
  background: var(--brand-mid);
  transform: translateY(-2px);
}
.eaz-root .pos-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 4px 0 14px;
}
.eaz-root .pos-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rule);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all .25s cubic-bezier(.2, .9, .4, 1.1);
}
.eaz-root .pos-dot.on {
  background: var(--brand);
  width: 24px;
  border-radius: 12px;
}
.eaz-root .hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
  justify-content: flex-start;
}
.eaz-root .btn-white {
  background: var(--brand);
  color: #fff;
  border: none;
  padding: 12px 26px;
  border-radius: 10px;
  font-size: 10pt;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: .2s;
  box-shadow: 0 6px 16px rgba(232, 67, 10, .32);
}
.eaz-root .btn-white:hover {
  background: var(--brand-mid);
  transform: translateY(-2px);
}
.eaz-root .hero-mini-cards {
  background: var(--white);
  padding: 24px 20px;
}
.eaz-root .hmc-container {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.eaz-root .hmc-card {
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: .2s;
  box-shadow: 0 2px 8px rgba(20, 20, 20, .04);
}
.eaz-root .hmc-card.hmc-pre {
  background: linear-gradient(135deg, rgba(232, 67, 10, .08), rgba(232, 67, 10, .02));
  border-color: rgba(232, 67, 10, .22);
}
.eaz-root .hmc-card.hmc-live {
  background: linear-gradient(135deg, rgba(14, 143, 110, .08), rgba(14, 143, 110, .02));
  border-color: rgba(14, 143, 110, .22);
}
.eaz-root .hmc-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(20, 20, 20, .07);
}
.eaz-root .hmc-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 8pt;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 4px 10px;
  border-radius: 999px;
}
.eaz-root .hmc-tag.pre {
  background: #FEF3C7;
  color: #92400E;
  border: 1px solid #FCD34D;
}
.eaz-root .hmc-tag.live {
  background: #DCFCE7;
  color: #166534;
  border: 1px solid #86EFAC;
}
.eaz-root .hmc-title {
  font-size: 11.5pt;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.3;
}
.eaz-root .hmc-desc {
  font-size: 9.5pt;
  color: var(--body);
  line-height: 1.45;
  flex: 1;
}
.eaz-root .hmc-cta {
  align-self: flex-start;
  margin-top: 6px;
  font-size: 9.5pt;
  font-weight: 600;
  cursor: pointer;
  border: none;
  border-radius: 8px;
  padding: 9px 16px;
  color: #fff;
  transition: .2s;
}
.eaz-root .hmc-cta.pre {
  background: var(--brand);
  box-shadow: 0 2px 8px rgba(232, 67, 10, .28);
}
.eaz-root .hmc-cta.pre:hover {
  background: #c8380a;
}
.eaz-root .hmc-cta.live {
  background: #0E8F6E;
  box-shadow: 0 2px 8px rgba(14, 143, 110, .28);
}
.eaz-root .hmc-cta.live:hover {
  background: #0b755a;
}
@media (max-width:720px) {
  .eaz-root .hmc-container {
    grid-template-columns: 1fr;
  }
}
@media (max-width:720px) {
  .eaz-root .pos-frame {
    flex: 0 0 calc(100% - 8px);
  }
  .eaz-root .hero-h1 {
    font-size: 22pt;
  }
}
.eaz-root .slide {
  display: none;
}
.eaz-root .exam-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.eaz-root .exam-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 9px;
  border-radius: 6px;
  background: var(--white);
  border: 1px solid var(--rule);
  font-size: 8pt;
  color: var(--body);
}
.eaz-root .exam-name {
  font-weight: 600;
  font-size: 8.5pt;
  color: var(--dark);
}
.eaz-root .exam-date {
  font-size: 7.5pt;
  color: var(--muted);
  margin-top: 1px;
}
.eaz-root .exam-tag {
  font-size: 6.5pt;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.eaz-root .exam-tag.booked {
  background: var(--green);
  color: #fff;
}
.eaz-root .exam-tag.add {
  background: var(--blue-bg);
  color: var(--blue);
  border: 1px solid #c5d8f0;
}
.eaz-root .mini-compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 7.5pt;
  color: var(--body);
  background: var(--white);
  border-radius: 6px;
}
.eaz-root .mini-compare th {
  padding: 4px 8px;
  text-align: center;
  font-weight: 600;
  border-bottom: 1px solid var(--rule);
  font-size: 8pt;
  color: var(--dark);
}
.eaz-root .mini-compare td {
  padding: 5px 8px;
  text-align: center;
  border-bottom: 1px solid var(--rule);
  color: var(--body);
}
.eaz-root .mini-compare tr:last-child td {
  border-bottom: none;
}
.eaz-root .mini-compare .hcol {
  background: var(--surface);
}
.eaz-root .mini-compare-ctas {
  display: flex;
  gap: 5px;
  margin-top: 8px;
}
.eaz-root .mcta {
  flex: 1;
  text-align: center;
  padding: 5px;
  border-radius: 5px;
  font-size: 7.5pt;
  font-weight: 600;
  cursor: pointer;
}
.eaz-root .mcta.dark {
  background: var(--surface);
  color: var(--dark);
  border: 1px solid var(--rule);
}
.eaz-root .mcta.accent {
  background: var(--brand-light);
  color: var(--brand);
  border: 1px solid rgba(232, 67, 10, 0.2);
}
.eaz-root .reward-rows {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.eaz-root .rrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 9px;
  border-radius: 6px;
  background: var(--white);
  border: 1px solid var(--rule);
  font-size: 8pt;
  color: var(--body);
}
.eaz-root .rrow.highlight {
  background: var(--teal-bg);
  border-color: var(--teal);
}
.eaz-root .rrow-label {
  font-weight: 600;
  font-size: 8.5pt;
  color: var(--dark);
}
.eaz-root .rrow-n {
  font-size: 7.5pt;
  color: var(--muted);
}
.eaz-root .rrow-val {
  font-weight: 700;
  color: var(--teal);
  font-size: 9pt;
}
.eaz-root .rrow-val.norm {
  color: var(--dark);
}
.eaz-root .reward-personal {
  margin-top: 8px;
  background: var(--brand-light);
  border: 1px solid rgba(232, 67, 10, 0.2);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 7.5pt;
  color: var(--dark);
  text-align: center;
  line-height: 1.5;
}
.eaz-root .reward-personal strong {
  color: var(--brand);
}
.eaz-root .pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 8pt;
  font-weight: 500;
  padding: 4px 11px;
  border-radius: 20px;
}
.eaz-root .pill-light {
  background: var(--surface);
  color: var(--dark);
  border: 1px solid var(--rule);
}
.eaz-root .pill-teal-light {
  background: var(--teal-bg);
  color: var(--teal);
  border: 1px solid rgba(15, 102, 116, 0.2);
}
.eaz-root .chip-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.eaz-root .exam-strip {
  background: var(--white);
  padding: 40px 28px;
}
.eaz-root .es-inner {
  max-width: 1170px;
  margin: 0 auto;
}
.eaz-root .es-label {
  font-size: 7.5pt;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
  text-align: center;
}
.eaz-root .es-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.eaz-root .alerts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 24px;
}
.eaz-root .alert-row {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.eaz-root .alert-row:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.eaz-root .alert-row.tint-brand {
  background: var(--brand-light);
  border-color: #f5d2c1;
}
.eaz-root .alert-row.tint-amber {
  background: var(--amber-bg);
  border-color: #f1d9b4;
}
.eaz-root .alert-row.tint-teal {
  background: var(--teal-bg);
  border-color: #bde0e6;
}
.eaz-root .alert-row .alert-ico {
  background: #fff;
}
.eaz-root .alert-ico {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16pt;
  flex-shrink: 0;
}
.eaz-root .alert-ico.brand {
  background: var(--brand-light);
  color: var(--brand);
}
.eaz-root .alert-ico.amber {
  background: var(--amber-bg);
  color: var(--amber);
}
.eaz-root .alert-ico.teal {
  background: var(--teal-bg);
  color: var(--teal);
}
.eaz-root .alert-title {
  font-weight: 600;
  font-size: 9.5pt;
  color: var(--dark);
  margin-bottom: 3px;
}
.eaz-root .alert-desc {
  font-size: 8pt;
  color: var(--muted);
  line-height: 1.55;
}
.eaz-root .exam-card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 9px;
  padding: 14px 14px 12px;
  color: var(--body);
  position: relative;
  transition: box-shadow .2s;
}
.eaz-root .exam-card:hover {
  box-shadow: var(--shadow);
}
.eaz-root .ec-exam {
  font-size: 14pt;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: 2px;
  color: var(--dark);
}
.eaz-root .ec-name {
  font-size: 7.5pt;
  opacity: .6;
  margin-bottom: 10px;
  color: var(--muted);
}
.eaz-root .ec-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.eaz-root .ec-item {
  display: flex;
  justify-content: space-between;
  font-size: 7.5pt;
}
.eaz-root .ec-item-label {
  opacity: .6;
  color: var(--muted);
}
.eaz-root .ec-item-val {
  font-weight: 500;
  color: var(--body);
}
.eaz-root .ec-divider {
  height: 1px;
  background: var(--rule);
  margin: 8px 0;
}
.eaz-root .ec-prebook-btn {
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 6px 12px;
  font-size: 7.5pt;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  margin-top: 8px;
  transition: background 0.2s;
}
.eaz-root .ec-prebook-btn:hover {
  background: var(--brand-mid);
}
.eaz-root .ec-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 18px;
}
.eaz-root .ec-tab {
  background: var(--white);
  border: 1px solid var(--rule);
  color: var(--body);
  padding: 7px 18px;
  border-radius: 22px;
  font-size: 8.5pt;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
}
.eaz-root .ec-tab:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.eaz-root .ec-tab.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.eaz-root .ec-carousel {
  max-width: 90%;
  margin: 0 auto;
  position: relative;
}
.eaz-root .ec-viewport {
  overflow: hidden;
}
.eaz-root .ec-list {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: 1fr 1fr;
  grid-auto-columns: calc((100% - 12px) / 2);
  gap: 12px;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
.eaz-root .ec-li {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: box-shadow .2s, border-color .2s;
  min-height: 120px;
}
.eaz-root .ec-li:hover {
  box-shadow: var(--shadow);
  border-color: var(--brand);
}
.eaz-root .ec-li-badge {
  width: 54px;
  height: 54px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9pt;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: .02em;
  background: var(--brand-light);
  color: var(--brand);
  overflow: hidden;
}
.eaz-root .ec-li-badge.alt {
  background: var(--blue-bg);
  color: var(--blue);
}
.eaz-root .ec-li-badge.dark {
  background: var(--surface);
  color: var(--dark);
}
.eaz-root .ec-li-badge-img {
  padding: 4px;
}
.eaz-root .ec-li-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.eaz-root .ec-li-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.eaz-root .ec-li-row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.eaz-root .ec-li-row2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.eaz-root .ec-li-title {
  font-size: 11pt;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.25;
}
.eaz-root .ec-li-sub {
  font-size: 8.5pt;
  color: var(--body);
}
.eaz-root .ec-li-meta {
  display: flex;
  gap: 14px;
  font-size: 7.5pt;
  color: var(--muted);
  flex-wrap: wrap;
}
.eaz-root .ec-li-learn {
  color: var(--brand);
  font-size: 8.5pt;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.eaz-root .ec-li-learn:hover {
  text-decoration: underline;
}
.eaz-root .ec-li-actions-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.eaz-root .ec-li-pill {
  background: #fff8d6;
  color: #a37500;
  font-size: 7.5pt;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 18px;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid #f5d76e;
}
.eaz-root .ec-li-short {
  background: var(--white);
  border: 1px solid var(--brand);
  color: var(--brand);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 8pt;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: all .15s;
}
.eaz-root .ec-li-short:hover {
  background: var(--brand);
  color: #fff;
}
.eaz-root .ec-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}
.eaz-root .ec-nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--brand);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  transition: all .18s;
  font-family: inherit;
  box-shadow: 0 4px 14px rgba(232, 67, 10, .35);
}
.eaz-root .ec-nav-btn:hover:not(:disabled) {
  background: #c8580a;
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(232, 67, 10, .45);
}
.eaz-root .ec-nav-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
  box-shadow: none;
}
.eaz-root .ec-side-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}
.eaz-root .ec-side-btn:hover:not(:disabled) {
  transform: translateY(-50%) scale(1.08);
}
.eaz-root .ec-side-btn[data-ec-prev] {
  left: -58px;
}
.eaz-root .ec-side-btn[data-ec-next] {
  right: -58px;
}
.eaz-root .ec-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}
.eaz-root .ec-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rule);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all .15s;
}
.eaz-root .ec-dot.active {
  background: var(--brand);
  transform: scale(1.3);
}
@media (max-width:880px) {
  .eaz-root .ec-carousel {
    max-width: 88%;
  }
  .eaz-root .ec-side-btn[data-ec-prev] {
    left: -46px;
  }
  .eaz-root .ec-side-btn[data-ec-next] {
    right: -46px;
  }
}
@media (max-width:680px) {
  .eaz-root .ec-list {
    grid-auto-columns: 100%;
  }
  .eaz-root .ec-li {
    flex-wrap: wrap;
  }
  .eaz-root .ec-li-row2 {
    width: 100%;
  }
}
.eaz-root .inst-card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: box-shadow .2s;
}
.eaz-root .inst-card:hover {
  box-shadow: var(--shadow);
}
.eaz-root .ic-logo {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9pt;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 10px;
}
.eaz-root .ic-name {
  font-size: 10pt;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 2px;
  line-height: 1.25;
}
.eaz-root .ic-prog {
  font-size: 7.5pt;
  color: var(--muted);
  margin-bottom: 8px;
}
.eaz-root .ic-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.eaz-root .ic-tag {
  font-size: 7pt;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 3px;
}
.eaz-root .ic-tag-exam {
  background: var(--blue-bg);
  color: var(--blue);
}
.eaz-root .ic-tag-city {
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--rule);
}
.eaz-root .ic-divider {
  height: 1px;
  background: var(--rule);
  margin-bottom: 10px;
}
.eaz-root .ic-ctas {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.eaz-root .ic-cta-row {
  display: flex;
  gap: 6px;
}
.eaz-root .ic-btn {
  flex: 1;
  text-align: center;
  padding: 6px 4px;
  border-radius: 5px;
  font-size: 7.5pt;
  font-weight: 600;
  cursor: pointer;
  border: none;
}
.eaz-root .ic-btn-prebook {
  background: var(--brand);
  color: #fff;
}
.eaz-root .ic-btn-brochure {
  background: var(--blue-bg);
  color: var(--blue);
  border: 1px solid #c5d8f0;
}
.eaz-root .ic-btn-compare {
  background: var(--green-bg);
  color: var(--green);
  border: 1px solid #b8dcc4;
}
.eaz-root .how-track {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-top: 28px;
  position: relative;
}
/* .eaz-root .how-track::before{content:'';position:absolute;top:18px;left:28px;right:28px;height:2px;background:var(--rule);z-index:0;} */
.eaz-root .how-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
  gap: 10px;
  padding: 0
}
.eaz-root .hs-num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14pt;
  font-weight: 700;
  margin: 0 auto 10px;
  position: relative;
  z-index: 1;
}
.eaz-root .hs-num.active {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 0 0 4px var(--brand-light);
}
.eaz-root .hs-num.future {
  background: var(--rule);
  color: var(--muted);
}
.eaz-root .hs-icon {
  font-size: 17pt;
  margin-bottom: 4px;
}
.eaz-root .hs-title {
  font-size: 10.5pt;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 3px;
}
.eaz-root .hs-desc {
  font-size: 9.5pt;
  color: var(--muted);
  line-height: 1.45;
  padding: 0 4px;
}
.eaz-root .hs-tag {
  display: inline-block;
  font-size: 7.5pt;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  margin-top: 5px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.eaz-root .hs-tag.now {
  background: var(--green-bg);
  color: var(--green);
}
.eaz-root .hs-tag.soon {
  background: var(--rule);
  color: var(--muted);
}
.eaz-root .how-step.dim .hs-title {
  color: var(--muted);
}
.eaz-root .how-step.dim .hs-desc {
  opacity: .55;
}
.eaz-root .milestone-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 28px;
  position: relative;
}
.eaz-root .ms-node {
  position: relative;
  display: flex;
  flex-direction: column;
}
.eaz-root .ms-card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
  height: 100%;
  position: relative;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.ms-card:hover {
  box-shadow: 0 8px 32px rgba(26, 18, 8, .1);
  transform: translateY(-3px);
}
.eaz-root .ms-tag {
  display: inline-block;
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 7.5pt;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.eaz-root .ms-tag.green {
  background: var(--green-bg);
  color: var(--green);
}
.eaz-root .ms-tag.blue {
  background: var(--blue-bg);
  color: var(--blue);
}
.eaz-root .ms-tag.amber {
  background: var(--amber-bg);
  color: var(--amber);
}
.eaz-root .ms-tag.brand {
  background: var(--brand-light);
  color: var(--brand);
}
.eaz-root .ms-icon {
  font-size: 18pt;
  line-height: 1;
}
.eaz-root .ms-title {
  font-size: 18pt;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.2;
  margin-top: 10px;
}
.eaz-root .ms-sub {
  font-size: 8.5pt;
  color: var(--body);
  margin-top: -4px;
}
.eaz-root .ms-divider {
  height: 1px;
  background: var(--rule);
  margin: 2px 0;
}
.eaz-root .ms-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 8.5pt;
}
.eaz-root .ms-row-label {
  color: var(--body);
}
.eaz-root .ms-row-val {
  font-weight: 700;
  color: var(--dark);
}
.eaz-root .ms-bonus {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* padding:8px 10px;border-radius:6px; */
  font-size: 8.5pt;
}
/* .eaz-root .ms-bonus.blue{background:var(--blue-bg);} */
.eaz-root .ms-bonus.blue .ms-bonus-label, .eaz-root .ms-bonus.blue .ms-bonus-val {
  color: var(--blue);
}
/* .eaz-root .ms-bonus.amber{background:var(--amber-bg);} */
.eaz-root .ms-bonus.amber .ms-bonus-label, .eaz-root .ms-bonus.amber .ms-bonus-val {
  color: var(--amber);
}
/* .eaz-root .ms-bonus.brand{background:var(--brand-light);} */
.eaz-root .ms-bonus.brand .ms-bonus-label, .eaz-root .ms-bonus.brand .ms-bonus-val {
  color: var(--brand);
}
.eaz-root .ms-bonus-label {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #a05c10;
}
.eaz-root .ms-bonus-val {
  font-weight: 700;
}
.eaz-root .ms-earn {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 6px;
  border-top: 1px solid var(--rule);
}
.eaz-root .ms-earn-label {
  font-size: 9pt;
  font-weight: 600;
  color: var(--dark);
}
.eaz-root .ms-earn-val {
  font-size: 13pt;
  font-weight: 800;
  color: var(--dark);
}
.eaz-root .ms-earn-val.brand {
  color: var(--brand);
  font-size: 15pt;
  line-height: 1.1;
  text-align: right;
}
.eaz-root .ms-note {
  font-size: 8pt;
  color: var(--body);
  line-height: 1.5;
  margin-top: 2px;
}
.eaz-root .ms-cta {
  margin-top: 16px;
}
.eaz-root .ms-select-btn {
  width: 100%;
  padding: 10px 0;
  background: var(--brand);
  color: #fff;
  font-size: 10pt;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background .18s, transform .15s;
}
.eaz-root .ms-select-btn:hover {
  background: #c73608;
  transform: translateY(-1px);
}
.eaz-root #rewards-journey-section {
  overflow: hidden;
}
.eaz-root #rewards-journey-section .container {
  overflow: visible;
}
.eaz-root .milestone-track {
  overflow: visible;
}
.eaz-root .ms-node {
  overflow: visible;
}
.eaz-root .ms-badge-top {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand);
  color: #fff;
  font-size: 7.5pt;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(232, 67, 10, .3);
  z-index: 10;
  pointer-events: none;
}
@media(max-width:900px) {
  .eaz-root .milestone-track {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media(max-width:520px) {
  .eaz-root .milestone-track {
    grid-template-columns: 1fr;
  }
}
.eaz-root .footer {
  background: #4a4a4a;
  color: #fff;
  padding: 48px 28px 24px;
}
.eaz-root .footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.2fr;
  gap: 48px;
  align-items: start;
}
.eaz-root .footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.eaz-root .footer-icon {
  width: 44px;
  height: 44px;
  background: var(--brand);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18pt;
}
.eaz-root .footer-name {
  font-family: 'DM Serif Display', serif;
  font-size: 20pt;
  color: #fff;
  line-height: 1;
}
.eaz-root .footer-name small {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 7pt;
  color: #cfcfcf;
  font-weight: 400;
  margin-top: 3px;
  letter-spacing: .02em;
}
.eaz-root .footer-tag {
  font-size: 10pt;
  color: #fff;
  line-height: 1.5;
}
.eaz-root .footer-col-title {
  font-size: 10pt;
  font-weight: 700;
  color: #fff;
  margin-bottom: 14px;
}
.eaz-root .footer-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.eaz-root .footer-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 9.5pt;
  color: #fff;
  cursor: pointer;
}
.eaz-root .footer-link::before {
  content: '›';
  color: #fff;
  font-size: 11pt;
}
.eaz-root .footer-contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 9.5pt;
  color: #fff;
  margin-bottom: 14px;
}
.eaz-root .footer-contact-ico {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11pt;
}
.eaz-root .footer-bottom {
  max-width: 1200px;
  margin: 32px auto 0;
  font-size: 9pt;
  color: #fff;
  position: relative;
  text-align: center;
}
.eaz-root .footer-bottom a {
  color: #fff;
  text-decoration: underline;
  margin: 0 6px;
}
.eaz-root .footer-credit {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 9pt;
  color: #fff;
}
@media (max-width:760px) {
  .eaz-root .footer-credit {
    position: static;
    display: block;
    margin-top: 8px;
  }
}
@media (max-width:760px) {
  .eaz-root .footer-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
.app-section {
  background: linear-gradient(135deg, #1A1208 0%, #2D1810 100%);
}
.eaz-root .mobile-section {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 36px;
  align-items: center;
  overflow: hidden;
  position: relative;
}
/* .eaz-root .mobile-section::before{content:'';position:absolute;top:-60px;right:-60px;width:240px;height:240px;background:radial-gradient(circle,rgba(232,67,10,.12),transparent 70%);border-radius:50%;} */
.eaz-root .ms-eyebrow {
  display: inline-block;
  font-size: 7.5pt;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
  background: var(--brand-light);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.eaz-root .ms-headline {
  font-family: 'DM Serif Display', serif;
  font-size: 24pt;
  line-height: 1.18;
  margin-bottom: 12px;
  color: var(--dark);
}
.mobile-section .ms-headline, .mobile-section .ms-sub, .mobile-section .ms-feat, .mobile-section .ms-feat-ico {
  color: #fff !important;
}
.eaz-root .ms-headline span {
  color: var(--brand);
}
.eaz-root .ms-sub {
  font-size: 10.5pt;
  color: var(--body);
  margin-bottom: 22px;
  line-height: 1.6;
  max-width: 480px;
}
.eaz-root .ms-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 26px;
}
.eaz-root .ms-feat {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10pt;
  color: var(--body);
}
.eaz-root .ms-feat-ico {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(232, 67, 10, .2);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11pt;
  flex-shrink: 0;
}
.eaz-root .ms-stores {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}
.eaz-root .ms-store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #000;
  border: 1px solid #3a3026;
  color: #fff;
  padding: 10px 18px;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .15s, border-color .15s;
}
.eaz-root .ms-store:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
}
.eaz-root .ms-store-ico {
  font-size: 22pt;
}
.eaz-root .ms-store-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-align: left;
}
.eaz-root .ms-store-text small {
  font-size: 7.5pt;
  color: #bdb5ae;
}
.eaz-root .ms-store-text b {
  font-size: 11pt;
  font-weight: 600;
}
.eaz-root .ms-phone-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
}
.eaz-root .ms-phone {
  width: 220px;
  height: 430px;
  background: linear-gradient(160deg, #fff 0%, #f9f6f3 100%);
  border-radius: 32px;
  border: 8px solid #2a1f18;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .4);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.eaz-root .ms-phone::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 18px;
  background: #2a1f18;
  border-radius: 0 0 12px 12px;
}
.eaz-root .ms-ph-head {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.eaz-root .ms-ph-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11pt;
  font-weight: 700;
}
.eaz-root .ms-ph-greet {
  font-size: 9pt;
  color: var(--dark);
  font-weight: 600;
}
.eaz-root .ms-ph-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 8.5pt;
  color: var(--body);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
}
.eaz-root .ms-ph-card b {
  color: var(--dark);
  display: block;
  margin-bottom: 2px;
  font-size: 9pt;
}
.eaz-root .ms-ph-card .ms-ph-pill {
  display: inline-block;
  background: #fff8d6;
  color: #a37500;
  border: 1px solid #f5d76e;
  font-size: 7.5pt;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  margin-top: 4px;
}
.eaz-root .ms-ph-alert {
  background: var(--brand-light);
  border-left: 3px solid var(--brand);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 8pt;
  color: var(--dark);
}
@keyframes eazPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .4;
  }
}
@keyframes animate-float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
  100% {
    transform: translateY(0);
  }
}
.ms-phone-wrap {
  animation: animate-float 3s ease-in-out infinite;
}
.how-track {
  position: relative;
  padding-top: 8px;
}
/* base track line */
.how-track::before {
  content: "";
  position: absolute;
  top: 32px; /* align to vertical center of .hs-num — adjust if needed */
  left: calc(100% / 12);
  right: calc(100% / 12);
  height: 2px;
  background: var(--hiw-line);
  z-index: 0;
}
/* animated colored fill that draws left -> right */
.how-track::after {
  content: "";
  position: absolute;
  top: 32px;
  left: calc(100% / 12);
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--hiw-orange), var(--hiw-orange-dark));
  z-index: 0;
  transition: width 2s cubic-bezier(.65, 0, .35, 1);
}
.how-track.in-view::after {
  width: calc(100% - (100% / 6));
}
/* glowing dot that travels at the tip of the line */
.how-track .hiw-tracer {
  position: absolute;
  top: 32px;
  left: calc(100% / 12);
  width: 10px;
  height: 10px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--hiw-orange);
  box-shadow: 0 0 0 4px rgba(224, 82, 31, .18), 0 0 12px rgba(224, 82, 31, .6);
  opacity: 0;
  z-index: 2;
  transition: left 2s cubic-bezier(.65, 0, .35, 1), opacity .2s ease;
  pointer-events: none;
  display: none;
}
.how-track.in-view .hiw-tracer {
  opacity: 1;
  left: calc(100% - (100% / 12));
}
/* ---- step entrance ---- */
.how-step {
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .5s ease, transform .5s ease;
}
.how-track.in-view .how-step {
  opacity: 1;
  transform: translateY(0);
}
.how-track.in-view .how-step:nth-child(1) {
  transition-delay: 60ms;
}
.how-track.in-view .how-step:nth-child(2) {
  transition-delay: 280ms;
}
.how-track.in-view .how-step:nth-child(3) {
  transition-delay: 500ms;
}
.how-track.in-view .how-step:nth-child(4) {
  transition-delay: 720ms;
}
.how-track.in-view .how-step:nth-child(5) {
  transition-delay: 940ms;
}
.how-track.in-view .how-step:nth-child(6) {
  transition-delay: 1160ms;
}
/* ---- number badge: scale + gentle rotate pop, then settle with a ring pulse ---- */
.hs-num {
  position: relative;
  transform: scale(.4) rotate(-25deg);
  opacity: 0;
  box-shadow: 0 0 0 6px var(--hiw-bg);
  transition: transform .3s ease, box-shadow .3s ease;
}
.how-track.in-view .how-step:nth-child(1) .hs-num {
  animation: hiwBadge .55s cubic-bezier(.34, 1.56, .64, 1) 60ms forwards, hiwRing .9s ease-out 340ms;
}
.how-track.in-view .how-step:nth-child(2) .hs-num {
  animation: hiwBadge .55s cubic-bezier(.34, 1.56, .64, 1) 280ms forwards, hiwRing .9s ease-out 560ms;
}
.how-track.in-view .how-step:nth-child(3) .hs-num {
  animation: hiwBadge .55s cubic-bezier(.34, 1.56, .64, 1) 500ms forwards, hiwRing .9s ease-out 780ms;
}
.how-track.in-view .how-step:nth-child(4) .hs-num {
  animation: hiwBadge .55s cubic-bezier(.34, 1.56, .64, 1) 720ms forwards, hiwRing .9s ease-out 1000ms;
}
.how-track.in-view .how-step:nth-child(5) .hs-num {
  animation: hiwBadge .55s cubic-bezier(.34, 1.56, .64, 1) 940ms forwards, hiwRing .9s ease-out 1220ms;
}
.how-track.in-view .how-step:nth-child(6) .hs-num {
  animation: hiwBadge .55s cubic-bezier(.34, 1.56, .64, 1) 1160ms forwards, hiwRing .9s ease-out 1440ms;
}
@keyframes hiwBadge {
  0% {
    transform: scale(.4) rotate(-25deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.12) rotate(4deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}
@keyframes hiwRing {
  0% {
    box-shadow: 0 0 0 6px var(--hiw-bg), 0 0 0 6px rgba(224, 82, 31, .45);
  }
  100% {
    box-shadow: 0 0 0 6px var(--hiw-bg), 0 0 0 18px rgba(224, 82, 31, 0);
  }
}
/* ---- icon: soft drop-and-bounce, slightly after the badge ---- */
.hs-icon {
  display: inline-block;
  opacity: 0;
  transform: translateY(-10px) scale(.7);
  transition: transform .3s ease;
}
.how-track.in-view .how-step:nth-child(1) .hs-icon {
  animation: hiwIcon .45s ease 220ms forwards;
}
.how-track.in-view .how-step:nth-child(2) .hs-icon {
  animation: hiwIcon .45s ease 440ms forwards;
}
.how-track.in-view .how-step:nth-child(3) .hs-icon {
  animation: hiwIcon .45s ease 660ms forwards;
}
.how-track.in-view .how-step:nth-child(4) .hs-icon {
  animation: hiwIcon .45s ease 880ms forwards;
}
.how-track.in-view .how-step:nth-child(5) .hs-icon {
  animation: hiwIcon .45s ease 1100ms forwards;
}
.how-track.in-view .how-step:nth-child(6) .hs-icon {
  animation: hiwIcon .45s ease 1320ms forwards;
}
@keyframes hiwIcon {
  0% {
    opacity: 0;
    transform: translateY(-10px) scale(.7);
  }
  70% {
    opacity: 1;
    transform: translateY(2px) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* ---- tag: fades in last, like a little confirmation stamp ---- */
.hs-tag {
  opacity: 0;
  transform: scale(.85);
  transition: transform .2s ease, box-shadow .2s ease;
}
.how-track.in-view .how-step:nth-child(1) .hs-tag {
  animation: hiwTag .35s ease 420ms forwards;
}
.how-track.in-view .how-step:nth-child(2) .hs-tag {
  animation: hiwTag .35s ease 640ms forwards;
}
.how-track.in-view .how-step:nth-child(3) .hs-tag {
  animation: hiwTag .35s ease 860ms forwards;
}
.how-track.in-view .how-step:nth-child(4) .hs-tag {
  animation: hiwTag .35s ease 1080ms forwards;
}
.how-track.in-view .how-step:nth-child(5) .hs-tag {
  animation: hiwTag .35s ease 1300ms forwards;
}
.how-track.in-view .how-step:nth-child(6) .hs-tag {
  animation: hiwTag .35s ease 1520ms forwards;
}
@keyframes hiwTag {
  0% {
    opacity: 0;
    transform: scale(.85);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* ---- hover micro-interactions (after entrance completes) ---- */
.how-step:hover .hs-num {
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 6px 0 6px var(--hiw-bg), 0 8px 16px rgba(224, 82, 31, .25);
}
.how-step:hover .hs-icon {
  transform: translateY(-2px) scale(1.15) rotate(-4deg);
}
.how-step:hover .hs-tag {
  transform: scale(1.06);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
@media (max-width: 900px) {
  .how-track::before, .how-track::after, .how-track .hiw-tracer {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .how-step, .hs-num, .hs-icon, .hs-tag {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .how-track::after, .how-track .hiw-tracer {
    transition: none !important;
  }
}
@media (max-width:780px) {
  .eaz-root .mobile-section {
    grid-template-columns: 1fr;
    /* padding: 32px 24px; */
    text-align: center;
  }
  .eaz-root .ms-sub, .eaz-root .ms-features {
    /* margin-left: auto;
    margin-right: auto; */
  }
  .eaz-root .ms-feat {
    justify-content: center;
  }
  .eaz-root .ms-stores {
    justify-content: center;
  }
  .eaz-root .ms-headline {
    font-size: 20pt;
  }
.ms-card{
      margin-bottom: 20px;
}



}
/* ============================================================
   Institute Card 2 (inst-card2 / ic2-*) — index page institute grid
   ============================================================ */
.eaz-root .inst-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}
.eaz-root .inst-card2 {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow .2s, transform .2s;
}
.eaz-root .inst-card2:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.eaz-root .ic2-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.eaz-root .ic2-logo {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: var(--brand-light);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9pt;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}
.eaz-root .ic2-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.eaz-root .ic2-logo-img {
  background: #fff;
  padding: 3px;
}
.eaz-root .ic2-meta {
  flex: 1;
  min-width: 0;
}
.eaz-root .ic2-name {
  font-size: 9.5pt;
  font-weight: 600;
  color: var(--dark);
  line-height: 1.25;
  margin-bottom: 2px;
}
.eaz-root .ic2-prog {
  font-size: 7.5pt;
  color: var(--muted);
}
.eaz-root .ic2-city-badge {
  font-size: 7pt;
  font-weight: 600;
  color: var(--blue);
  background: var(--blue-bg);
  border-radius: 4px;
  padding: 3px 7px;
  flex-shrink: 0;
  white-space: nowrap;
  align-self: flex-start;
  margin-top: 2px;
}
.eaz-root .ic2-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.eaz-root .ic2-tag {
  font-size: 7pt;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 3px;
}
.eaz-root .ic2-tag-exam {
  background: var(--blue-bg);
  color: var(--blue);
}
.eaz-root .ic2-tag-city {
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--rule);
}
.eaz-root .ic2-divider {
  height: 1px;
  background: var(--rule);
}
.eaz-root .ic2-ctas {
  display: flex;
  gap: 7px;
  margin-top: auto;
}
.eaz-root .ic2-btn {
  flex: 1;
  text-align: center;
  padding: 7px 4px;
  border-radius: 6px;
  font-size: 7.5pt;
  font-weight: 600;
  cursor: pointer;
  border: none;
  font-family: 'DM Sans', sans-serif;
  transition: opacity .15s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.eaz-root .ic2-btn:hover {
  opacity: .82;
}
.eaz-root .ic2-btn-learn {
  background: var(--brand-light);
  color: var(--brand);
}
.eaz-root .ic2-btn-wish {
  background: var(--brand);
  color: #fff;
}
@media(max-width:700px) {
  .eaz-root .inst-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media(max-width:420px) {
  .eaz-root .inst-grid {
    grid-template-columns: 1fr;
  }
}
/* ============================================================
   MOVED FROM INLINE STYLES — index.jsp
   ============================================================ */
.header-region {
  display: none !important;
}
/* ============================================================
   MOVED FROM INLINE STYLES — all-institutes.jsp
   ============================================================ */
/* Loader */
#loader {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
  display: block;
  background-color: rgb(76 76 76/80%);
  z-index: 999999;
  text-align: center;
}
#loader .lds-ellipsis {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 999999;
  transform: translate(-50%, -50%);
}
#loader .lds-ellipsis p {
  margin-top: 8px;
  font-size: 16px;
  color: #fff;
  font-weight: 600;
}
#loader img {
  max-height: 60px;
}
/* Compare bar (outside exp-root, fixed) */
.compare-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 2px solid #e0570e;
  z-index: 1050;
  padding: 10px 0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .15);
}
.compare-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f2f2f2;
  border: 1px solid #ddd;
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 13px;
}
.compare-chip a {
  color: #e0570e;
  font-weight: bold;
  text-decoration: none;
}
.compare-select-btn.active {
  background: #e0570e !important;
  color: #fff !important;
}
.exams-badge {
  display: inline-block;
  background: #fff3ee;
  color: #e0570e;
  border: 1px solid #e0570e;
  border-radius: 12px;
  padding: 2px 8px;
  margin-bottom: 6px;
  font-size: 11px;
}
.wishlist-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #1b5e20;
  background: #e8f5e9;
  border: 1px solid #a5d6a7;
  border-radius: 20px;
  padding: 2px 10px;
  margin-left: 8px;
  vertical-align: middle;
}
.shortlisted {
  border-left: 4px solid #e85222 !important;
}
/* Learn More expanded content */
/* institute-card as visual container so content is clipped inside rounded corners */
.exp-root .institute-card {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  transition: box-shadow .15s;
  position: relative;
}
/* Badge overrides: pin to card corners, not inst-info */
.exp-root .institute-card .coming-soon {
  left: 0;
  top: 0;
  border-radius: 0 0 10px 0;
}
.exp-root .institute-card .offer {
    right: inherit;
    top: inherit;
    border-radius: 6px 6px 0 0;
    text-align: left;
    width: 100%;
    animation: inherit;
    position: inherit;
}
.exp-root .institute-card:hover {
  box-shadow: 0 2px 14px rgba(0, 0, 0, .07);
}
.exp-root .institute-card .inst-row {
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: none;
}
.exp-root .institute-card .inst-row:hover {
  box-shadow: none;
}
.exp-root .institute-card .inst-row.prebooked {
  border-left: 3px solid var(--brand);
}
.exp-root .content {
  background: #fff;
  border-top: 2px solid var(--brand);
  padding: 16px 22px 20px;
}
.exp-root .content hr {
  display: none;
}
.exp-root .content .row {
  margin-top: 0 !important;
  padding-bottom: 0 !important;
}
.exp-root .content .col-lg-12 {
  font-size: 9pt;
  line-height: 1.65;
  color: var(--body);
}
.exp-root .content ul {
  padding-left: 0;
  list-style: none;
  margin-bottom: 8px;
}
.exp-root .content li {
  padding-left: 15px;
  position: relative;
  margin-bottom: 5px;
}
.exp-root .content li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
  position: absolute;
  left: 0;
  top: 7px;
}
.exp-root .content p {
  margin-bottom: 6px;
}
.exp-root .content strong {
  color: var(--dark);
  font-weight: 700;
}
.exp-root .content a {
  color: var(--brand);
}
/* Custom confirm modal */
#removeConfirmModal .modal-content {
  border-radius: 12px;
  border: none;
}
#removeConfirmModal .modal-body {
  padding: 32px 24px;
}
.confirm-icon {
  font-size: 36px;
  margin-bottom: 12px;
  color: #e85222;
}
.confirm-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 6px;
  color: #1a1a1a;
}
.confirm-sub {
  font-size: 13px;
  color: #888;
  margin-bottom: 24px;
}
.confirm-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.confirm-btns .btn-cancel {
  padding: 9px 24px;
  border-radius: 6px;
  border: 1.5px solid #ddd;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: #555;
}
.confirm-btns .btn-cancel:hover {
  background: #f5f5f5;
}
.confirm-btns .btn-remove {
  padding: 9px 24px;
  border-radius: 6px;
  border: none;
  background: #e85222;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.confirm-btns .btn-remove:hover {
  background: #c74118;
}
/* ============================================================
   MOVED FROM INLINE STYLES — my-application.jsp
   ============================================================ */
.receipt .form-control {
  height: inherit;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: .375rem .75rem;
}
#uploadFileModel .modal-header .btn-close {
  position: absolute;
  right: -4px;
  top: 4px;
}
/* ============================================================
   MOVED FROM INLINE STYLES — compare-institutes.jsp
   ============================================================ */
/* Slot cards */
.add-slot {
  border: 2px dashed #ddd;
  border-radius: 12px;
  padding: 28px 14px;
  text-align: center;
  cursor: pointer;
  background: #fff;
  transition: border-color .2s;
}
.add-slot:hover {
  border-color: #e0570e;
}
.add-slot .plus-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px dashed #ccc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #aaa;
  margin-bottom: 10px;
}
.add-slot p {
  font-size: 13px;
  color: #999;
  margin: 0;
}
.add-slot.filled {
  border-color: #e0570e;
}
.slot-logo {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  background: #f0f0f0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #555;
  margin-bottom: 8px;
}
.slot-name {
  font-size: 13px;
  font-weight: 600;
  color: #222;
}
.slot-city {
  font-size: 12px;
  color: #888;
}
.slot-remove {
  font-size: 11px;
  color: #e0570e;
  cursor: pointer;
  margin-top: 6px;
  display: block;
}
/* Compare table */
.compare-table th {
  background: #fff3ee;
  color: #e0570e;
  font-weight: 700;
  font-size: 13px;
}
.compare-table td, .compare-table th {
  vertical-align: middle;
  padding: 12px 16px;
  font-size: 13px;
}
.compare-table td:first-child {
  font-weight: 600;
  color: #555;
  background: #fafafa;
  width: 150px;
}
/* Popular pair cards */
.cmp-root .pop-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
@media(max-width:991px) {
  .cmp-root .pop-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media(max-width:575px) {
  .cmp-root .pop-grid {
    grid-template-columns: 1fr;
  }
}
.pair-card {
  background: #fff;
  border-radius: 12px;
  padding: 18px 16px 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
  border: 1px solid #eee;
  display: flex;
  flex-direction: column;
}
.pair-card .pair-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
}
.pair-card .pair-insts {
  display: flex;
  gap: 10px;
  flex: 1;
}
.pair-card .pair-inst {
  flex: 1;
  min-width: 0;
}
.pair-card .pair-inst.right {
  text-align: right;
}
.inst-logo-sm {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #fff3ee;
  border: 1.5px solid #f0d5c8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #e0570e;
  flex-shrink: 0;
  line-height: 1.2;
  text-align: center;
}
.vs-badge {
  background: #1a1a1a;
  color: #fff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.inst-name-sm {
  font-size: 13px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.inst-meta-sm {
  font-size: 11px;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 3px;
}
.inst-rating-sm {
  font-size: 11px;
  color: #f5a623;
  margin-top: 3px;
}
.pair-card .pair-btn {
  margin-top: 14px;
  width: 100%;
  font-size: 13px;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
}
/* ============================================================
   MOVED FROM INLINE STYLES — exams-institutes.jsp
   ============================================================ */
/* Dynamic exam list cards (scoped to avoid conflict with pt-root .exam-card) */
.dyn-exam-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .07);
  border: 1px solid #eee;
}
.dyn-exam-badge {
  display: inline-block;
  background: #fff3ee;
  color: #e0570e;
  border: 1px solid #e0570e;
  border-radius: 12px;
  padding: 3px 10px;
  font-size: 12px;
  margin-bottom: 10px;
}
.dyn-date-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.dyn-date-box {
  background: #f8f8f8;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
}
.dyn-date-box strong {
  display: block;
  font-size: 14px;
  color: #222;
}
.dyn-date-box small {
  color: #888;
}
.dyn-accepted {
  margin-top: 10px;
  font-size: 13px;
  color: #555;
}
.dyn-accepted span {
  font-weight: 600;
  color: #333;
}
.dyn-search-box {
  position: relative;
  max-width: 420px;
  margin-bottom: 20px;
}
.dyn-search-box input {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px 16px 10px 38px;
  font-size: 14px;
  outline: none;
}
.dyn-search-box::before {
  content: "🔍";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
}
/* === Nav user dropdown (common-nav.jsp) === */
.nav-user.dropdown {
  position: relative;
  cursor: pointer;
}
.nav-user-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.nav-user-info {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.nav-user-name {
  font-size: 8.5pt;
  font-weight: 500;
}
.nav-bundle-badge {
  font-size: 7pt;
  color: var(--amber, #f59e0b);
  font-weight: 700;
}
.nav-chevron {
  font-size: 9px;
  color: #888;
  margin-left: 2px;
  transition: transform .2s;
}
.nav-user.dropdown.show .nav-chevron {
  transform: rotate(180deg);
}
.nav-dropdown {
  min-width: 210px;
  border-radius: 10px;
  border: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .13);
  padding: 6px 0;
  position: absolute;
  top: calc(100% + 8px) !important;
  right: 0;
  left: auto;
  z-index: 1060;
}
.nav-dd-welcome {
  padding: 10px 18px 6px;
  font-weight: 700;
  font-size: 14px;
  color: #1a1a1a;
}
.nav-dd-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  font-size: 13px;
  color: #333;
  text-decoration: none;
  transition: background .15s;
}
.nav-dd-item:hover {
  background: #f5f5f5;
  color: #333;
}
.nav-dd-item i {
  width: 16px;
  text-align: center;
  color: #666;
}
.nav-dd-divider {
  margin: 4px 0;
  border-color: #ececec;
}
.nav-dd-logout {
  color: #e85222 !important;
}
.nav-dd-logout i {
  color: #e85222 !important;
}
/* === Account pages (change-password.jsp, update-profile.jsp) === */
.acc-root {
  --brand: #E8430A;
  --brand-light: #FBF0EC;
  --dark: #1A1410;
  --body: #3D3530;
  --muted: #8A7E78;
  --rule: #E8E2DC;
  --surface: #edeae7;
  --white: #FFFFFF;
  --amber: #A05C10;
  --amber-bg: #FDF3E6;
  --radius: 8px;
  font-family: 'DM Sans', sans-serif;
  color: var(--body);
  background: var(--surface);
  font-size: 10pt;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}
.acc-root a {
  text-decoration: none;
  color: inherit;
}
.acc-root .nav {
  background: var(--white);
  border-bottom: 1px solid var(--rule);
  padding: 10px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 8px rgba(0, 0, 0, .06);
}
.acc-root .nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}
.acc-root .nav-icon {
  width: 32px;
  height: 32px;
  background: var(--brand);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15pt;
}
.acc-root .nav-name {
  font-weight: 700;
  font-size: 11pt;
  color: var(--dark);
}
.acc-root .nav-name small {
  display: block;
  font-size: 6.5pt;
  color: var(--muted);
  font-weight: 400;
}
.acc-root .nav-links {
  display: flex;
  gap: 12px;
  align-items: center;
  overflow: hidden;
}
.acc-root .nav-link {
  font-size: 8.5pt;
  color: var(--body);
  cursor: pointer;
}
.acc-root .nav-link.active {
  color: var(--brand);
  font-weight: 600;
  border-bottom: 2px solid var(--brand);
  padding-bottom: 2px;
}
.acc-root .nav-user {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--brand-light);
  border-radius: 20px;
  padding: 4px 12px 4px 6px;
  font-size: 8.5pt;
  font-weight: 500;
  color: var(--brand);
}
.acc-root .nav-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 8pt;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Page shell */
.acc-page-shell {
  max-width: 1140px;
  margin: 0 auto;
  padding: 28px 24px;
}
.acc-back-row {
  margin-bottom: 20px;
}
.acc-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}
.acc-back-link:hover {
  color: var(--brand);
}
.acc-back-link i {
  font-size: 11px;
}
/* Card header */
.acc-card-wrap {
  display: flex;
  justify-content: center;
}
.acc-card {
  background: var(--white);
  border-radius: 14px;
  padding: 32px 36px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .07);
  width: 100%;
  max-width: 480px;
}
.acc-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}
.acc-card-icon {
  width: 44px;
  height: 44px;
  background: var(--brand-light);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  font-size: 18px;
  flex-shrink: 0;
}
.acc-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--dark);
}
.acc-card-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
/* Profile header (update-profile.jsp) */
.acc-profile-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.acc-profile-section {
  background: var(--white);
  border-radius: 14px;
  padding: 28px 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .07);
}
.acc-profile-section h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 6px;
}
.acc-profile-section .fw-normal {
  color: var(--muted);
  font-size: 13px;
}
/* Form fields */
.acc-field {
  margin-bottom: 20px;
}
.acc-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 6px;
}
.acc-input-wrap {
  position: relative;
}
.acc-input {
  width: 100%;
  border: 1.5px solid var(--rule);
  border-radius: 8px;
  padding: 10px 38px 10px 12px;
  font-size: 14px;
  color: var(--dark);
  background: var(--white);
  outline: none;
  transition: border-color .2s;
}
.acc-input:focus {
  border-color: var(--brand);
}
.acc-eye {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--muted);
  font-size: 14px;
}
/* Submit button */
.acc-submit-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: var(--brand);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .2s;
}
.acc-submit-btn:hover {
  background: #c73c09;
}
/* Password checklist */
.acc-checks {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}
.acc-check-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.acc-check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
  padding: 4px 0;
  transition: color .2s;
}
.acc-check-ico {
  font-size: 14px;
  color: #ccc;
  transition: color .2s;
}
.acc-check-ok {
  color: var(--dark);
}
.acc-check-ok .acc-check-ico {
  color: #2e7d32;
}
.shortlistexam {
  background-color: #f1f1f1;
  overflow: hidden;
}
.shortlistexam .section-inner {
  /* max-width: 1200px;
  margin: 0 auto */
}
.section-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--mint);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 10px
}
.section-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  color: var(--charcoal);
  margin-bottom: 14px
}
.section-sub {
  font-size: 16px;
  color: var(--text-soft);
  line-height: 1.65;
  max-width: 560px
}
.shortlistexam .btn-primary {
/*  background: #fff;
  color: #000;*/
}



.notification-bar {
    background-color: #ffffff;
    padding: 10px 15px;
    border-radius: 20px;
    border-left: 3px #e8430a solid;
    display: inline-block;
}


.notification-bar i{
      font-size: 14px;
    margin-right: 3px;
    color: #1e1b16;
}


.left-col .notification-bar {
      margin-bottom: 15px;
}

/* EXAM CARDS */
.exam-tabs {
  background-color: #fff;
  display: inline-block;
  padding: 4px 12px;
  border-radius: 30px;
  margin-bottom: 30px;
}
.exam-tab {
  padding: 4px 18px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 600;
  border: 1.5px solid var(--grey);
  background: #fff;
  cursor: pointer;
  transition: all .15s;
  color: var(--text-soft)
}
.exam-tab.active {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.exam-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px
}
.exam-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 20px;
  border: 1px solid var(--grey);
  transition: box-shadow .2s, transform .2s;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.exam-card.last{
      display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #ebebeb;
    border: 1px #c9c2c2 solid;
    cursor: pointer;
}

.exam-card.last{
  font-size:36px;margin-bottom:12px
}

.exam-card.last h3{
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 18px;
    color: #000;
    margin-bottom: 8px;
}

.exam-card.last p{
    font-size: 13px;
    color: #000;
    margin-bottom: 20px;
}

.exam-card.last a{
font-size:13px;
padding:11px 22px;
}


.exam-card .exam-actions {
  margin-top: auto;
  padding-top: 12px;
}
.exam-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #1E6B4A, #69a72d);
}
.exam-card.card-type-exam::before {
  background: linear-gradient(90deg, #1E6B4A, #69a72d);
}
.exam-card.card-type-inst::before {
  background: linear-gradient(90deg, #e84b2a, #e0570e);
}
.exam-card.last:before {
  content: inherit;
}
.exam-card:hover {
  box-shadow: 0 6px 24px rgba(27, 67, 50, .1);
  transform: translateY(-2px)
}
.exam-logo-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.exam-logo-area .exam-logo-left {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: #fbf7f7;
  margin-bottom: 14px;
  overflow: hidden;
  border: 1px solid #eee;
  font-size: 16px;
  font-weight: 800;
  color: #B5451B;
  line-height: 52px;
  text-align: center;
}
.orange-text {
  color: #e84b2a;
}
.blue-text {
  color: #1E6B4A !important;
}
.exam-card.blue-bg {}
/*.exam-card.blue-bg .exam-institute {
  color: #1E6B4A !important;
}*/
/*.exam-card.blue-bg .exam-btn.primary, .exam-card.blue-bg:before {
  background: #1E6B4A;
}*/
/*.exam-card.blue-bg .exam-btn.primary:hover {
  background: #457219;
}*/
.exam-card.blue-bg .exam-institute {
  /* color: #69a72d !important; */
}
/*.exam-card.blue-bg:before {
  background: #1E6B4A;
}*/
.exam-status {}
.exam-logo-area img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px
}
.exam-institute {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--charcoal);
  margin-bottom: 4px;
  line-height: 1.3;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}
.exam-prog {
  font-size: 12px;
  color: var(--text-soft);
  margin-bottom: 14px
}
.exam-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 16px
}
.exam-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-soft)
}
.exam-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--cream);
  border: 1px solid var(--grey);
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  color: var(--green-mid);
  padding: 3px 10px
}
.exam-badge-live {
  background: #e8f8ee;
  border-color: #2ecc40;
  color: #1a8a2e;
}
.exam-badge-upcoming {
  background: #fff8e6;
  border-color: #f5a623;
  color: #b37400;
}
.exam-actions {
  display: flex;
  gap: 8px
}
.exam-btn {
  flex: 1;
  padding: 9px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  border: none;
  transition: all .15s
}
.exam-btn.primary {
    background: var(--red);
    color: #fff;
    border: solid 1px #e84b2a;
}
.exam-btn.primary:hover {
    background: #c53e21;
}
.exam-btn.secondary {
    background: var(--cream);
    border: 1.5px solid var(--border-dk);
    color: var(--body);
        transition: border-color .15s, color .15s;

}
.exam-btn.secondary:hover {
border-color: var(--red);
    color: var(--red);
}
/* ============================================================
   RESPONSIVE — Mobile hamburger nav (common-nav.jsp)
   ============================================================ */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  flex-shrink: 0;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2.5px;
  background: var(--dark);
  border-radius: 2px;
  transition: transform .25s, opacity .25s;
  transform-origin: center;
}
.nav-hamburger.nav-open span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}
.nav-hamburger.nav-open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-hamburger.nav-open span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}
@media (max-width:768px) {




  /* Show hamburger button */
  .nav-hamburger {
    display: flex;
  }
  /* Hide subtitle on mobile */
  .nav-name small {
    display: none !important;
  }
  /* Nav becomes wrapping flex container */
  .rw-root .nav, .ma-root .nav, .cmp-root .nav, .exp-root .nav, .pt-root .nav, .eaz-root .nav, .acc-root .nav {
    flex-wrap: wrap;
    padding: 10px 16px;
    gap: 0;
    position: relative;
  }
  /* Brand takes remaining row-1 space */
  .rw-root .nav-brand, .ma-root .nav-brand, .cmp-root .nav-brand, .exp-root .nav-brand, .pt-root .nav-brand, .eaz-root .nav-brand, .acc-root .nav-brand {
    flex: 1;
  }
  /* Compact user pill — avatar only */
  .rw-root .nav-user, .ma-root .nav-user, .cmp-root .nav-user, .exp-root .nav-user, .pt-root .nav-user, .eaz-root .nav-user, .acc-root .nav-user {
    background: transparent !important;
    padding: 2px 6px 2px 2px !important;
    border-radius: 20px !important;
  }
  .nav-user-info, .nav-chevron {
    display: none !important;
  }
  /* Compact avatar size */
  .rw-root .nav-avatar, .ma-root .nav-avatar, .cmp-root .nav-avatar, .exp-root .nav-avatar, .pt-root .nav-avatar, .eaz-root .nav-avatar, .acc-root .nav-avatar {
    width: 30px;
    height: 30px;
    font-size: 11pt;
  }
  /* Nav links: hidden, full-width, go to row 2 */
  .rw-root .nav-links, .ma-root .nav-links, .cmp-root .nav-links, .exp-root .nav-links, .pt-root .nav-links, .eaz-root .nav-links, .acc-root .nav-links {
    display: none;
    flex-direction: column;
    width: 100%;
    gap: 0;
    border-top: 1px solid var(--rule);
    margin-top: 10px;
    padding: 4px 0;
    background: var(--white);
    order: 10;
  }
  /* Show when open */
  .rw-root .nav-links.nav-open, .ma-root .nav-links.nav-open, .cmp-root .nav-links.nav-open, .exp-root .nav-links.nav-open, .pt-root .nav-links.nav-open, .eaz-root .nav-links.nav-open, .acc-root .nav-links.nav-open {
    display: flex;
  }
  /* Mobile nav-link items */
  .rw-root .nav-link, .ma-root .nav-link, .cmp-root .nav-link, .exp-root .nav-link, .pt-root .nav-link, .eaz-root .nav-link, .acc-root .nav-link {
    padding: 13px 16px !important;
    font-size: 14px;
    border-bottom: 1px solid #f5f5f5;
    border-radius: 0 !important;
    display: block;
    color: #333;
    font-weight: 500;
  }
  .rw-root .nav-link:last-child, .ma-root .nav-link:last-child, .cmp-root .nav-link:last-child, .exp-root .nav-link:last-child, .pt-root .nav-link:last-child, .eaz-root .nav-link:last-child, .acc-root .nav-link:last-child {
    border-bottom: none;
  }
  /* Active link: left accent bar */
  .rw-root .nav-link.active, .ma-root .nav-link.active, .cmp-root .nav-link.active, .exp-root .nav-link.active, .pt-root .nav-link.active, .eaz-root .nav-link.active, .acc-root .nav-link.active {
    color: var(--brand);
    border-left: 3px solid var(--brand);
    padding-left: 13px !important;
    border-bottom: 1px solid #f5f5f5;
    padding-bottom: 13px !important;
  }
  /* Dropdown stays anchored to nav-user on mobile */
  .rw-root .nav-dropdown, .ma-root .nav-dropdown, .cmp-root .nav-dropdown, .exp-root .nav-dropdown, .pt-root .nav-dropdown, .eaz-root .nav-dropdown, .acc-root .nav-dropdown {
    right: 0;
    left: auto;
    top: calc(100% + 8px);
    min-width: 200px;
  }



  #navMobileLinks{
        position: fixed;
        bottom: 0;
        top: 0;
        left: 0;
        transition: transform 0.3s ease-in-out;
        transform: translateX(-100%);
        width: auto;
        text-align: left;
        margin: 0;
        display: block;
       
  }

#navMobileLinks.nav-open{
    transform: none;
   box-shadow: 0 0 11px 0 rgb(0 0 0 / 20%);
}

  #navMobileLinks .nav-link{
         transition: ease-in-out 0.2s;
  }

  #navMobileLinks .nav-link.active{
    border-left:none;
  }


   #navMobileLinks .nav-link:hover,
      #navMobileLinks .nav-link:focus{
    padding-left:25px!important;
   }


.hero h1{
  font-size: 32px;
}


  .eaz-root .hero-actions{
        flex-wrap: nowrap;
            justify-content: center;
  }

  .hero-actions .btn-primary{
        padding: 10px;
  }

  .hero-actions .btn-outline{
           padding: 10px;
  }

  .ticker-strip{
    flex-wrap: wrap;
    overflow-x: inherit;
  }


  .ticker-segment {
    display: block;
    align-items: center;
    min-width: inherit;
    white-space: normal;
  }


.eaz-root .how-step{
  margin-bottom: 20px;
}

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

.exam-actions {
    gap: 5px;
}

.exam-btn{
  font-size: 10px;
}

.exam-meta-row{
  text-align: left;
}

.hero{
      display: block;
}

.savings-widget{
  margin-top: 20px;
}

.hero-feat{
  text-align: left;
}

}

/* ============================================================
   MOBILE CARD CAROUSELS — Swiper (JS adds .swiper + .is-swiper
   to #examGrid and .milestone-track below 768px; see demo-NR-index.jsp)
   ============================================================ */
@media (max-width: 768px) {
  .eaz-root .exam-grid.is-swiper,
  .eaz-root .milestone-track.is-swiper {
    display: block;
    grid-template-columns: none;
    overflow: visible;
    padding-bottom: 36px; /* room for pagination dots */
  }
  .eaz-root .exam-grid.is-swiper .swiper-slide,
  .eaz-root .milestone-track.is-swiper .swiper-slide {
    height: auto; /* equal-height cards within a slide row */
  }
  .eaz-root .exam-grid.is-swiper .exam-card,
  .eaz-root .milestone-track.is-swiper .ms-node {
    height: 100%;
    margin-bottom: 0; /* cancel any grid-gap-era margins */
  }

.exam-grid .swiper-wrapper .exam-card {
  text-align: left;
}

#examGrid .swiper-wrapper{
margin-bottom: 20px;
}

.eaz-root .section{
      padding: 40px 0;
}

}



.eaz-root .swiper-pagination-bullet-active {
  background: var(--red, #e84b2a);
}


/* ============================================================
   ADDED: Entrance / micro-interaction animations for demo-index.jsp
   (hero, section headers, exam grid, milestones, mobile app section)
   This block is purely additive — nothing above has been modified.
   ============================================================ */

@keyframes eazFadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes eazFadeInRight {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes eazFloatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes eazPopIn {
  0%   { opacity: 0; transform: scale(.85); }
  70%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes eazCardIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hero + section-header entrance utilities */
.anim-fade-up {
  opacity: 0;
  animation: eazFadeUp .7s ease forwards;
}
.anim-fade-in-right {
  opacity: 0;
  animation: eazFadeInRight .8s ease forwards;
}
.anim-count-pop {
  animation: eazPopIn .6s cubic-bezier(.34,1.56,.64,1) forwards;
}
.anim-delay-1 { animation-delay: .05s; }
.anim-delay-2 { animation-delay: .15s; }
.anim-delay-3 { animation-delay: .28s; }
.anim-delay-4 { animation-delay: .4s; }
.anim-delay-5 { animation-delay: .52s; }

/* Gentle continuous float for the hero savings card — starts only
   after its entrance animation finishes so the two never fight. */
.anim-float {
  animation:
    eazFadeInRight .8s ease forwards .28s,
    eazFloatY 5.5s ease-in-out infinite 1.1s;
}

/* Hero chip micro hover-lift (chips already exist, this only adds hover motion) */
.hero-chip {
  transition: transform .2s ease, box-shadow .2s ease;
}
.hero-chip:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
}

/* Exam-grid cards: soft staggered pop-in on first paint (independent of
   AOS/scroll so it can't conflict with the tab-filter / Swiper JS that
   toggles display on these cards). */
.exam-grid > .exam-card,
.exam-grid > .swiper-slide {
  animation: eazCardIn .55s ease both;
}
.exam-grid > .exam-card:nth-child(1),  .exam-grid > .swiper-slide:nth-child(1)  { animation-delay: .03s; }
.exam-grid > .exam-card:nth-child(2),  .exam-grid > .swiper-slide:nth-child(2)  { animation-delay: .08s; }
.exam-grid > .exam-card:nth-child(3),  .exam-grid > .swiper-slide:nth-child(3)  { animation-delay: .13s; }
.exam-grid > .exam-card:nth-child(4),  .exam-grid > .swiper-slide:nth-child(4)  { animation-delay: .18s; }
.exam-grid > .exam-card:nth-child(5),  .exam-grid > .swiper-slide:nth-child(5)  { animation-delay: .23s; }
.exam-grid > .exam-card:nth-child(6),  .exam-grid > .swiper-slide:nth-child(6)  { animation-delay: .28s; }
.exam-grid > .exam-card:nth-child(7),  .exam-grid > .swiper-slide:nth-child(7)  { animation-delay: .33s; }
.exam-grid > .exam-card:nth-child(8),  .exam-grid > .swiper-slide:nth-child(8)  { animation-delay: .38s; }

/* Milestone cards: slightly stronger hover lift on top of existing hover rules */
.ms-node {
  transition: transform .25s ease;
}
.ms-node:hover {
  transform: translateY(-4px);
}

/* Respect users who've asked for less motion */
@media (prefers-reduced-motion: reduce) {
  .anim-fade-up, .anim-fade-in-right, .anim-count-pop, .anim-float,
  .exam-grid > .exam-card, .exam-grid > .swiper-slide,
  .hero-chip, .ms-node {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}