.topbar{background:var(--cream);border-bottom:1px solid rgba(38,70,83,.1)}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:62px;height:62px;border-radius:10px;background:linear-gradient(135deg,var(--orange),#ffc278);display:grid;place-items:center;color:#fff;font-weight:800}
.brand-name{font-weight:800}


.card.course .meta{list-style:none;padding-left:0;margin:.5rem 0 1rem;display:grid;gap:4px}
.filters{display:flex;gap:12px;align-items:flex-end}
.filters label{display:flex;flex-direction:column;gap:6px}
.accordion .item{border:1px solid rgba(38,70,83,.12);border-radius:12px;background:rgba(255,255,255,.6)}
.accordion .item + .item{margin-top:10px}
.accordion .q{width:100%;text-align:left;padding:14px 16px;border:none;background:transparent;cursor:pointer;position:relative;font:inherit;font-weight:700;color:var(--charcoal)}
.accordion .q::after{content:'▾';position:absolute;right:14px;top:50%;transform:translateY(-50%) rotate(0deg);transition:transform .18s ease}
.accordion .a{padding:0 16px 14px 16px;display:none;color:var(--charcoal)}
.accordion .item.is-open .a{display:block}
.accordion .item.is-open .q::after{transform:translateY(-50%) rotate(180deg)}
.brand-logo { height: 44px; width: auto; object-fit: contain; border-radius: 50%; }
/* Slightly larger logo in header */
.topbar .brand-logo{ height: 52px; }

.brand-name {
  font-weight: 800;
  font-size: 18px;
  margin-left: 8px;
}

/* Course cards: pastel green with pastel orange shadow border */
.card.course{background:var(--green);color:var(--charcoal);border:1px solid rgba(255,153,51,.28);box-shadow:0 6px 18px rgba(255,153,51,.10);display:flex;flex-direction:column}
.card.course{transition:transform .2s ease, box-shadow .2s ease; will-change: transform}
.card.course:hover, .card.course:focus-within{transform:translateY(-4px) scale(1.01); box-shadow:0 12px 28px rgba(255,153,51,.18)}
.card.course .h3,.card.course p,.card.course .meta,.card.course .meta li,.card.course strong{color:var(--charcoal)}
.card.course .old-price{opacity:.7;text-decoration:line-through;margin-right:8px}
.card.course .new-price{font-weight:800}
.card.course .badge.offer{background:var(--orange);color:#fff;border-radius:9999px;padding:4px 10px;font-size:.9rem;font-weight:800;letter-spacing:.02em;margin-left:8px;display:inline-block;box-shadow:0 2px 8px rgba(255,153,51,.35)}
.card.course .save-line{display:inline-block;margin:8px auto 10px;background:rgba(255,153,51,.18);color:var(--charcoal);border-radius:9999px;padding:6px 12px;font-weight:800;align-self:center;animation:d2d-pulse 1.4s ease-in-out infinite}
@keyframes d2d-pulse{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,153,51,.35)}70%{transform:scale(1.04);box-shadow:0 0 0 12px rgba(255,153,51,0)}100%{transform:scale(1)}}

/* Center the course cards responsively */
#course-cards{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));justify-items:center}
#course-cards .card.course{width:100%;max-width:360px}
.card.course .btn,.card.course .btn-outline{background:var(--cream);color:var(--charcoal);border-color:transparent;align-self:center}
.card.course .btn:hover,.card.course .btn-outline:hover{background:var(--orange);color:var(--charcoal)}

/* Course cards in other grids (e.g., promo/print) */
.promo .grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));justify-items:center}
.promo .card.course{width:100%;max-width:360px}

/* Donut charts */
.donut-card{display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center}
.donut{width:160px;height:160px;border-radius:50%;background:conic-gradient(var(--orange) 0deg, var(--orange) 0deg, #eee 0deg);position:relative}
.donut:before{content:"";position:absolute;inset:18px;border-radius:50%;background:#fff}
.legend{display:grid;gap:6px}
.legend .item{display:flex;align-items:center;gap:8px}
.legend .swatch{width:12px;height:12px;border-radius:3px;display:inline-block}
.donut-table{width:100%;border-collapse:collapse}
.donut-table th,.donut-table td{padding:6px 8px;border-bottom:1px solid rgba(38,70,83,.12);text-align:left}
.donut-table th{background:#f7f7f7}

/* Generic table style */
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:8px 10px;border-bottom:1px solid rgba(38,70,83,.12);text-align:left}
.table th{background:#f7f7f7}

@media (prefers-reduced-motion: reduce){
  .card.course{transition:none}
  .card.course:hover, .card.course:focus-within{transform:none}
}

/* Decorative elements removed per request */
/* Login Modal */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:11000}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.35)}
.modal-panel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(38,70,83,.25);width:min(520px,92vw);padding:24px;max-height:90vh;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.modal-close{position:absolute;top:8px;right:10px;background:transparent;border:none;font-size:24px;line-height:1;cursor:pointer}
.stack{display:grid;gap:12px;margin-top:16px}
.btn-block{width:100%;justify-content:center}
/* Testimonials: remove card background/border/shadow */
.testimonials .card{background:transparent;border:none;box-shadow:none}

/* Utility: make any specific card flat (no bg/border/shadow) */
.card.card-flat{background:transparent!important;border:none!important;box-shadow:none!important}