/* ==========================================================================
   Tecnow IT Academy — design system + homepage
   Everything visual lives here. Change a token in :root and it updates
   everywhere on the site.
   ========================================================================== */

:root {
  /* Brand — built out from the site's existing #FBF8FE lavender */
  --tn-p-800: #4C1D95;
  --tn-p-700: #5B21B6;
  --tn-p-600: #6D28D9;   /* PRIMARY */
  --tn-p-500: #8B5CF6;
  --tn-p-200: #DDD0FB;
  --tn-p-100: #EDE4FE;
  --tn-p-50:  #FBF8FE;

  --tn-ink:   #16131F;
  --tn-ink-2: #4B4560;
  --tn-ink-3: #8B85A0;

  --tn-line:   #E9E4F3;
  --tn-line-2: #F2EEF9;
  --tn-white:  #FFFFFF;

  --tn-sun:   #FFD54A;

  /* Icon accent hues */
  --tn-c-blue:   #2563EB;
  --tn-c-green:  #16A34A;
  --tn-c-amber:  #F59E0B;
  --tn-c-red:    #EF4444;
  --tn-c-teal:   #0D9488;
  --tn-c-pink:   #DB2777;
  --tn-c-indigo: #4F46E5;
  --tn-c-sky:    #0EA5E9;

  --tn-shadow:    0 18px 36px -22px rgba(22, 19, 31, .28);
  --tn-shadow-lg: 0 40px 70px -35px rgba(22, 19, 31, .35);

  --tn-radius:    18px;
  --tn-radius-sm: 12px;
  --tn-gutter:    44px;
  --tn-maxw:      1352px;
}

/* ---------- base ---------- */

.tn-page,
.tn-page * { box-sizing: border-box; }

.tn-page {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--tn-ink);
  background: var(--tn-white);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

:where(.tn-page) img { max-width: 100%; height: auto; }
:where(.tn-page) svg { display: block; flex-shrink: 0; }

:where(.tn-page) a { color: var(--tn-p-600); text-decoration: none; transition: color .15s ease; }
:where(.tn-page) a:hover { color: var(--tn-p-700); }

:where(.tn-page) :where(h1, h2, h3, h4, p, ul, ol) { margin: 0; }

.tn-mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }
.tn-tamil { font-family: 'Noto Sans Tamil', 'Plus Jakarta Sans', sans-serif; }

.tn-container {
  max-width: var(--tn-maxw);
  margin: 0 auto;
  padding-left: var(--tn-gutter);
  padding-right: var(--tn-gutter);
}

.tn-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- buttons ---------- */

.tn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: inherit; font-weight: 700; line-height: 1;
  border: 0; border-radius: var(--tn-radius-sm); cursor: pointer;
  text-align: center; white-space: nowrap;
  transition: background-color .16s ease, box-shadow .16s ease,
              transform .16s ease, border-color .16s ease, color .16s ease;
}

.tn-page .tn-btn--primary { background: var(--tn-p-600); color: #fff; padding: 16px 28px; font-size: 16px; box-shadow: 0 12px 24px -12px rgba(109, 40, 217, .55); }
.tn-page .tn-btn--primary:hover { background: var(--tn-p-700); color: #fff; transform: translateY(-1px); box-shadow: 0 14px 28px -10px rgba(109, 40, 217, .6); }

.tn-page .tn-btn--ghost { background: var(--tn-white); color: var(--tn-ink); border: 1.5px solid var(--tn-line); padding: 14.5px 24px; font-size: 16px; }
.tn-page .tn-btn--ghost:hover { border-color: var(--tn-p-200); background: var(--tn-p-50); color: var(--tn-ink); }

.tn-page .tn-btn--white { background: #fff; color: var(--tn-p-700); padding: 16px 30px; font-size: 16px; font-weight: 800; }
.tn-page .tn-btn--white:hover { color: var(--tn-p-800); transform: translateY(-1px); }

.tn-page .tn-btn--outline-white { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .5); padding: 14.5px 28px; font-size: 16px; }
.tn-page .tn-btn--outline-white:hover { background: rgba(255, 255, 255, .1); color: #fff; }

.tn-btn--sm { padding: 11px 20px; font-size: 14.5px; }
.tn-btn--block { display: flex; width: 100%; padding: 12px; font-size: 14.5px; }

/* ---------- offer bar ---------- */

.tn-offerbar {
  background: var(--tn-sun);
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 4px 10px;
  padding: 13px 20px;
  font-size: 15px; text-align: center;
}
.tn-offerbar__lead { font-weight: 800; color: var(--tn-ink); }
.tn-offerbar__text { font-weight: 500; color: #3A2F05; }
.tn-offerbar__link { font-weight: 800; color: var(--tn-ink) !important; border-bottom: 2px solid rgba(22, 19, 31, .35); }

/* ---------- header ---------- */

.tn-header {
  position: sticky; top: 0; z-index: 200;
  background: var(--tn-white);
  border-bottom: 1px solid var(--tn-line);
}
.tn-header__inner {
  height: 74px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.tn-header__left { display: flex; align-items: center; gap: 38px; min-width: 0; }
.tn-header__right { display: flex; align-items: center; gap: 18px; }

.tn-logo { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.tn-logo:hover { color: inherit; }
.tn-logo__mark {
  width: 40px; height: 40px; border-radius: 11px; background: var(--tn-p-600);
  display: flex; align-items: center; justify-content: center;
}
.tn-logo__text { display: flex; align-items: baseline; gap: 6px; }
.tn-logo__name { font-size: 22px; font-weight: 800; color: var(--tn-ink); letter-spacing: -.03em; }
.tn-logo__sub { font-size: 11px; font-weight: 700; color: var(--tn-ink-3); letter-spacing: .06em; }
.tn-logo img { max-height: 42px; width: auto; }

.tn-nav { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
.tn-nav__item { position: static; }
.tn-nav__link {
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
  color: var(--tn-ink-2); font-size: 15px; font-weight: 600;
  padding: 26px 0; position: relative;
}
.tn-nav__link:hover,
.tn-nav__item.is-open > .tn-nav__link { color: var(--tn-p-600); }
.tn-nav__item.is-current > .tn-nav__link { color: var(--tn-ink); font-weight: 700; }
.tn-nav__item.is-open > .tn-nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: var(--tn-p-600); border-radius: 3px 3px 0 0;
}
.tn-nav__chev { transition: transform .18s ease; }
.tn-nav__item.is-open .tn-nav__chev { transform: rotate(180deg); }

.tn-search {
  display: flex; align-items: center; gap: 9px;
  width: 210px; height: 40px; padding: 0 13px;
  border: 1px solid var(--tn-line); border-radius: 10px; background: var(--tn-p-50);
  color: var(--tn-ink-3); font-size: 14px; font-weight: 500;
}
.tn-search:hover { border-color: var(--tn-p-200); color: var(--tn-ink-2); }

.tn-cart { position: relative; display: flex; color: var(--tn-ink-2); }
.tn-cart:hover { color: var(--tn-p-600); }
.tn-cart__count {
  position: absolute; top: -5px; right: -6px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--tn-c-red); color: #fff;
  font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.tn-cart__count[hidden] { display: none; }
.tn-login { color: var(--tn-ink) !important; font-size: 15px; font-weight: 700; white-space: nowrap; }

.tn-nav__mobileextra { display: none; }

.tn-burger {
  display: none; width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; color: var(--tn-ink); padding: 0;
}

/* ---------- mega menu ---------- */

.tn-megamenu {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  z-index: 210;
  padding: 0 var(--tn-gutter);
}
.tn-nav__item.is-open .tn-megamenu { display: block; }

.tn-megamenu__panel {
  max-width: var(--tn-maxw); margin: 0 auto;
  background: var(--tn-white);
  border: 1px solid var(--tn-line); border-top: none;
  border-radius: 0 0 20px 20px;
  overflow: hidden;
  box-shadow: var(--tn-shadow-lg);
  display: flex; flex-direction: column;
}
.tn-megamenu__body { display: flex; }

.tn-mm__rail {
  width: 292px; flex-shrink: 0;
  background: var(--tn-p-600);
  padding: 20px 0 24px;
  display: flex; flex-direction: column;
}
.tn-mm__raillabel {
  padding: 0 24px 14px;
  font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--tn-p-200);
}
.tn-mm__railitem {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 24px;
  color: #EDE4FE !important; font-size: 15px; font-weight: 600;
  transition: background-color .14s ease;
}
.tn-mm__railitem span { display: flex; align-items: center; gap: 12px; }
.tn-mm__railitem:hover { background: rgba(255, 255, 255, .12); color: #fff !important; }
.tn-mm__railitem.is-active {
  background: var(--tn-white); color: var(--tn-p-700) !important; font-weight: 800;
}
.tn-mm__raildiv { height: 1px; background: rgba(255, 255, 255, .16); margin: 16px 24px; }
.tn-mm__pill {
  font-size: 10px; font-weight: 800; color: var(--tn-ink);
  background: var(--tn-sun); padding: 3px 7px; border-radius: 5px;
}

.tn-mm__main { flex: 1; padding: 26px 30px 24px; min-width: 0; }
.tn-mm__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; margin-bottom: 20px;
}
.tn-mm__title { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.tn-mm__sub { font-size: 13.5px; color: var(--tn-ink-3); margin-top: 3px; }
.tn-mm__link { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; white-space: nowrap; }

.tn-mm__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; }
.tn-mm__card {
  display: flex; gap: 14px; padding: 14px; border-radius: var(--tn-radius-sm);
  transition: background-color .14s ease; color: inherit !important;
}
.tn-mm__card:hover { background: var(--tn-p-50); }
.tn-mm__cardtitle { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--tn-ink); }
.tn-mm__cardsub { display: block; font-size: 13px; color: var(--tn-ink-3); margin-top: 3px; }

.tn-mm__features { display: grid; grid-template-columns: 1.25fr 1fr; gap: 14px; margin-top: 20px; }
.tn-mm__feature {
  display: flex; align-items: center; gap: 16px;
  border: 1px solid var(--tn-line); border-radius: 14px; padding: 16px 18px;
  color: inherit !important;
}
.tn-mm__feature--accent { border-color: var(--tn-p-200); background: var(--tn-p-50); }
.tn-mm__feature:hover { border-color: var(--tn-p-200); }
.tn-mm__featuretitle { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--tn-ink); }
.tn-mm__featuresub { display: block; font-size: 13px; color: var(--tn-ink-2); margin-top: 4px; }

.tn-mm__promo {
  background: var(--tn-sun);
  padding: 15px 30px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.tn-mm__promotext { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 15px; }
.tn-mm__promotext strong { font-weight: 800; color: var(--tn-ink); }
.tn-mm__promotext span { color: #3A2F05; }
.tn-mm__promolink { font-size: 14.5px; font-weight: 800; color: var(--tn-ink) !important; border-bottom: 2px solid rgba(22, 19, 31, .35); white-space: nowrap; }

.tn-mm__backdrop {
  display: none; position: fixed; inset: 0; z-index: 190;
  background: rgba(22, 19, 31, .28);
}
.tn-page.tn-menu-open .tn-mm__backdrop { display: block; }

/* ---------- sections ---------- */

.tn-section { padding: 84px 0 88px; background: var(--tn-white); }
.tn-section--tint { background: var(--tn-p-50); border-top: 1px solid var(--tn-line); border-bottom: 1px solid var(--tn-line); }
.tn-section--flush-top { padding-top: 0; }

.tn-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tn-p-600); }

.tn-sechead { text-align: center; max-width: 660px; margin: 0 auto 48px; }
.tn-sechead--left { text-align: left; margin-left: 0; margin-right: 0; }
.tn-sechead__title { font-size: 38px; font-weight: 800; letter-spacing: -.032em; line-height: 1.14; margin-top: 14px; }
.tn-sechead__lead { font-size: 16.5px; color: var(--tn-ink-2); line-height: 1.6; margin-top: 14px; }

.tn-secbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 42px; }
.tn-secbar .tn-sechead { margin-bottom: 0; }
.tn-arrowlink { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 700; white-space: nowrap; }

.tn-grid { display: grid; gap: 22px; }
.tn-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tn-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tn-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

.tn-card {
  background: var(--tn-white);
  border: 1px solid var(--tn-line);
  border-radius: var(--tn-radius);
  padding: 30px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tn-card:hover { transform: translateY(-4px); box-shadow: var(--tn-shadow); border-color: var(--tn-p-200); }
.tn-card__title { font-size: 19px; font-weight: 800; letter-spacing: -.02em; margin: 18px 0 10px; }
.tn-card__text { font-size: 15px; color: var(--tn-ink-2); line-height: 1.62; }
.tn-card--row { display: flex; gap: 22px; align-items: flex-start; }
.tn-card--row .tn-card__title { margin-top: 0; }

/* ---------- hero ---------- */

.tn-hero {
  background: var(--tn-p-50);
  border-bottom: 1px solid var(--tn-line);
  padding: 74px 0 78px;
  position: relative; overflow: hidden;
}
.tn-hero__glow {
  position: absolute; right: -120px; top: -140px; width: 520px; height: 520px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(139, 92, 246, .16), rgba(139, 92, 246, 0) 70%);
}
.tn-hero__inner { position: relative; display: flex; gap: 56px; align-items: center; }
.tn-hero__copy { width: 596px; flex-shrink: 0; }
.tn-hero__art { flex: 1; display: flex; justify-content: center; min-width: 0; }

.tn-hero__badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--tn-white); border: 1px solid var(--tn-p-200);
  padding: 7px 14px 7px 8px; border-radius: 999px; margin-bottom: 24px;
}
.tn-hero__badgetag {
  font-size: 11px; font-weight: 800; color: #fff; background: var(--tn-p-600);
  padding: 4px 9px; border-radius: 999px; letter-spacing: .04em;
}
.tn-hero__badgetext { font-size: 13px; font-weight: 700; color: var(--tn-p-700); }

.tn-hero__title { font-size: 52px; line-height: 1.1; font-weight: 800; letter-spacing: -.035em; }
.tn-hero__lead { font-size: 18px; line-height: 1.62; color: var(--tn-ink-2); max-width: 512px; margin-top: 22px; }
.tn-hero__actions { display: flex; align-items: center; gap: 14px; margin-top: 32px; flex-wrap: wrap; }

.tn-hero__proof { display: flex; align-items: center; gap: 26px; margin-top: 34px; flex-wrap: wrap; }
.tn-hero__prooftext { font-size: 14px; color: var(--tn-ink-2); font-weight: 600; }
.tn-hero__divider { width: 1px; height: 22px; background: var(--tn-line); }

.tn-avatars { display: flex; }
.tn-avatars__item {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--tn-p-50); color: #fff;
  font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.tn-avatars__item + .tn-avatars__item { margin-left: -11px; }
.tn-avatars__item--more { font-size: 11px; background: var(--tn-p-600); }

.tn-stars { display: flex; gap: 1.5px; }

/* ---------- stats ---------- */

.tn-stats { background: var(--tn-white); border-bottom: 1px solid var(--tn-line); padding: 34px 0; }
.tn-stats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tn-stat { display: flex; align-items: center; gap: 16px; padding: 0 28px; }
.tn-stat:first-child { padding-left: 0; }
.tn-stat:last-child { padding-right: 0; }
.tn-stat + .tn-stat { border-left: 1px solid var(--tn-line); }
.tn-stat__icon {
  width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.tn-stat__value { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.tn-stat__label { font-size: 13.5px; color: var(--tn-ink-3); font-weight: 500; }

/* ---------- learning path ---------- */

.tn-step { position: relative; padding: 26px; }
.tn-step__num {
  position: absolute; top: 22px; right: 24px;
  font-size: 30px; font-weight: 800; color: var(--tn-line); letter-spacing: -.04em;
}
.tn-step__title { font-size: 17.5px; font-weight: 800; letter-spacing: -.02em; margin: 16px 0 9px; }
.tn-step__text { font-size: 14.5px; color: var(--tn-ink-2); line-height: 1.6; }

/* ---------- courses ---------- */

.tn-course {
  display: flex; flex-direction: column;
  background: var(--tn-white);
  border: 1px solid var(--tn-line);
  border-radius: 20px; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tn-course:hover { transform: translateY(-4px); box-shadow: var(--tn-shadow); border-color: var(--tn-p-200); }
.tn-course--featured {
  border: 2px solid var(--tn-p-600);
  box-shadow: 0 20px 40px -26px rgba(109, 40, 217, .45);
}
.tn-course__cover {
  height: 140px; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.tn-course__tag {
  position: absolute; top: 14px; left: 14px;
  font-size: 11px; font-weight: 800; letter-spacing: .04em;
  background: #fff; padding: 5px 11px; border-radius: 999px;
}
.tn-course__tag--solid { background: var(--tn-p-600); color: #fff; }
.tn-course__flag {
  position: absolute; top: 14px; right: 14px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  color: var(--tn-ink); background: var(--tn-sun);
  padding: 5px 10px; border-radius: 6px;
}
.tn-course__body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.tn-course__title { font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.32; }
.tn-course__meta { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--tn-ink-3); font-weight: 500; }
.tn-course__rating { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--tn-ink-2); font-weight: 700; }
.tn-course__spacer { flex: 1; min-height: 6px; }
.tn-course__price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tn-course__now { font-size: 27px; font-weight: 800; letter-spacing: -.03em; }
.tn-course__was { font-size: 15px; color: var(--tn-ink-3); text-decoration: line-through; }
.tn-course__save { font-size: 11.5px; font-weight: 800; color: var(--tn-c-green); background: #E7F8EE; padding: 4px 9px; border-radius: 6px; }
.tn-course__list { display: flex; flex-direction: column; gap: 8px; padding-top: 2px; }
.tn-course__listitem { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--tn-ink-2); }

/* ---------- trainer ---------- */

.tn-trainer {
  background: var(--tn-p-800); border-radius: 24px;
  padding: 52px 56px;
  display: flex; align-items: center; gap: 48px;
  position: relative; overflow: hidden;
}
.tn-trainer__blob { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .06); pointer-events: none; }
.tn-trainer__blob--a { right: -70px; top: -90px; width: 340px; height: 340px; }
.tn-trainer__blob--b { right: 130px; bottom: -130px; width: 240px; height: 240px; background: rgba(255, 255, 255, .04); }
.tn-trainer__photo { flex-shrink: 0; position: relative; }
.tn-trainer__avatar {
  width: 136px; height: 136px; border-radius: 30px; object-fit: cover;
  background: linear-gradient(150deg, var(--tn-p-500), var(--tn-p-700));
  display: flex; align-items: center; justify-content: center;
  font-size: 52px; font-weight: 800; color: #fff;
}
.tn-trainer__badge {
  position: absolute; bottom: -12px; right: -12px;
  width: 44px; height: 44px; border-radius: 14px; background: var(--tn-sun);
  display: flex; align-items: center; justify-content: center;
}
.tn-trainer__body { position: relative; flex: 1; min-width: 0; }
.tn-trainer__eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tn-p-200); margin-bottom: 12px; }
.tn-trainer__name { font-size: 32px; font-weight: 800; color: #fff; letter-spacing: -.03em; margin-bottom: 8px; }
.tn-trainer__role { font-size: 16px; color: var(--tn-p-200); margin-bottom: 16px; }
.tn-trainer__text { font-size: 16px; color: #E6DEFA; line-height: 1.68; max-width: 690px; }
.tn-trainer__chips { display: flex; align-items: center; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.tn-trainer__chip { font-size: 13.5px; font-weight: 600; color: #EDE4FE; background: rgba(255, 255, 255, .1); padding: 9px 15px; border-radius: 999px; }

/* ---------- testimonials ---------- */

.tn-quote { display: flex; flex-direction: column; gap: 16px; padding: 28px; }
.tn-quote__stars { display: flex; gap: 2px; }
.tn-quote__text { font-size: 15.5px; color: var(--tn-ink-2); line-height: 1.68; flex: 1; }
.tn-quote__by { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--tn-line-2); }
.tn-quote__avatar {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  color: #fff; font-size: 16px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.tn-quote__name { display: block; font-size: 14.5px; font-weight: 800; }
.tn-quote__role { font-size: 13px; color: var(--tn-ink-3); }
.tn-note { text-align: center; font-size: 13px; color: var(--tn-ink-3); margin-top: 26px; }

/* ---------- FAQ ---------- */

.tn-faq { display: flex; gap: 72px; align-items: flex-start; }
.tn-faq__intro { width: 390px; flex-shrink: 0; }
.tn-faq__list { flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.tn-faq__item { border: 1px solid var(--tn-line); background: var(--tn-white); border-radius: 14px; transition: border-color .16s ease, background-color .16s ease; }
.tn-faq__item:hover { border-color: var(--tn-p-200); }
.tn-faq__item.is-open { border-color: var(--tn-p-200); background: var(--tn-p-50); }

.tn-faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 26px; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--tn-ink);
}
.tn-faq__icon {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  background: var(--tn-line-2); color: var(--tn-ink-2);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .16s ease, color .16s ease;
}
.tn-faq__item.is-open .tn-faq__icon { background: var(--tn-p-600); color: #fff; }
.tn-faq__icon .tn-faq__bar-v { transition: opacity .16s ease; }
.tn-faq__item.is-open .tn-faq__bar-v { opacity: 0; }

.tn-faq__a { display: none; padding: 0 26px 24px; }
.tn-faq__item.is-open .tn-faq__a { display: block; }
.tn-faq__a p { font-size: 15.5px; color: var(--tn-ink-2); line-height: 1.66; max-width: 700px; }

.tn-whatsapp {
  display: inline-flex; align-items: center; gap: 10px;
  background: #E7F8EE; color: #0B6B33 !important; font-weight: 700; font-size: 15px;
  padding: 14px 22px; border-radius: var(--tn-radius-sm); margin-top: 26px;
  transition: background-color .16s ease;
}
.tn-whatsapp:hover { background: #D6F2E3; color: #0B6B33 !important; }

/* ---------- CTA ---------- */

.tn-cta {
  position: relative; overflow: hidden;
  border-radius: 26px; background: var(--tn-p-600);
  padding: 72px 40px;
  display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center;
}
.tn-cta__blob { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .08); pointer-events: none; }
.tn-cta__blob--a { left: -70px; bottom: -140px; width: 340px; height: 340px; }
.tn-cta__blob--b { right: -80px; top: -150px; width: 360px; height: 360px; }
.tn-cta__title { position: relative; font-size: 40px; font-weight: 800; color: #fff; max-width: 660px; letter-spacing: -.032em; line-height: 1.14; }
.tn-cta__lead { position: relative; font-size: 17px; color: #E6DEFA; max-width: 540px; line-height: 1.6; }
.tn-cta__actions { position: relative; display: flex; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; justify-content: center; }

/* ---------- footer ---------- */

.tn-footer { background: var(--tn-ink); padding: 66px 0 30px; }
.tn-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: 44px; padding-bottom: 44px; }
.tn-footer__about { display: flex; flex-direction: column; gap: 16px; }
.tn-footer__logo { display: flex; align-items: center; gap: 11px; }
.tn-footer__logomark { width: 36px; height: 36px; border-radius: 10px; background: var(--tn-p-600); display: flex; align-items: center; justify-content: center; }
.tn-footer__name { font-size: 18px; font-weight: 800; color: #fff; letter-spacing: -.03em; }
.tn-footer__sub { font-size: 10px; font-weight: 700; color: #8B85A0; letter-spacing: .06em; }
.tn-footer__text { font-size: 14px; color: #A29CB5; line-height: 1.65; max-width: 260px; }
.tn-footer__social { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.tn-footer__socialitem {
  width: 36px; height: 36px; border-radius: 10px; background: rgba(255, 255, 255, .07);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .16s ease;
}
.tn-footer__socialitem:hover { background: rgba(255, 255, 255, .16); }
.tn-footer__col { display: flex; flex-direction: column; gap: 13px; }
.tn-footer__coltitle { font-size: 12.5px; font-weight: 800; color: #fff; letter-spacing: .07em; margin-bottom: 5px; }
.tn-footer__link { display: flex; align-items: center; gap: 9px; font-size: 14px; color: #A29CB5 !important; }
.tn-footer__link:hover { color: #fff !important; }
.tn-footer__legal { font-size: 13px; color: #6E6884; line-height: 1.6; margin-top: 4px; }
.tn-footer__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: 13px; color: #6E6884;
}
.tn-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1200px) {
  :root { --tn-gutter: 32px; }
  .tn-hero__copy { width: 520px; }
  .tn-hero__title { font-size: 46px; }
  .tn-nav { gap: 20px; }
  .tn-header__left { gap: 26px; }
  .tn-search { width: 170px; }
  .tn-mm__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .tn-search { display: none; }
  .tn-hero__inner { flex-direction: column; align-items: stretch; gap: 44px; }
  .tn-hero__copy { width: 100%; }
  .tn-hero__lead { max-width: none; }
  .tn-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 0; }
  .tn-stat { padding: 0 24px; }
  .tn-stat:nth-child(odd) { padding-left: 0; }
  .tn-stat:nth-child(even) { padding-right: 0; }
  .tn-stat:nth-child(odd) { border-left: 0; }
  .tn-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tn-faq { flex-direction: column; gap: 40px; }
  .tn-faq__intro { width: 100%; }
  .tn-trainer { padding: 40px; gap: 32px; }
}

@media (max-width: 900px) {
  /* Mobile navigation */
  .tn-burger { display: flex; }
  .tn-nav { display: none; }
  .tn-login, .tn-header__cta { display: none; }

  .tn-page.tn-nav-open .tn-nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--tn-white);
    border-bottom: 1px solid var(--tn-line);
    box-shadow: var(--tn-shadow);
    padding: 8px 0 16px;
    max-height: calc(100vh - 74px); overflow-y: auto;
  }
  .tn-page.tn-nav-open .tn-nav__link {
    padding: 14px var(--tn-gutter); justify-content: space-between; font-size: 16px;
  }
  .tn-page.tn-nav-open .tn-nav__item.is-open > .tn-nav__link::after { display: none; }
  .tn-page.tn-nav-open .tn-nav__mobileextra {
    display: flex; flex-direction: column; gap: 10px;
    padding: 16px var(--tn-gutter) 4px;
    border-top: 1px solid var(--tn-line); margin-top: 8px;
  }
  .tn-nav__mobileextra { display: none; }

  .tn-megamenu { position: static; padding: 0; }
  .tn-megamenu__panel { border: 0; border-radius: 0; box-shadow: none; }
  .tn-megamenu__body { flex-direction: column; }
  .tn-mm__rail { width: 100%; }
  .tn-mm__grid { grid-template-columns: 1fr; }
  .tn-mm__features { grid-template-columns: 1fr; }
  .tn-mm__backdrop { display: none !important; }

  .tn-grid--2, .tn-grid--3 { grid-template-columns: 1fr; }
  .tn-section { padding: 60px 0 64px; }
  .tn-sechead__title { font-size: 32px; }
  .tn-secbar { flex-direction: column; align-items: flex-start; gap: 18px; }
  .tn-trainer { flex-direction: column; align-items: flex-start; text-align: left; padding: 36px 28px; }
  .tn-cta { padding: 52px 28px; }
  .tn-cta__title { font-size: 32px; }
  .tn-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
}

@media (max-width: 620px) {
  :root { --tn-gutter: 20px; }
  .tn-offerbar { font-size: 13.5px; padding: 11px 16px; }
  .tn-hero { padding: 48px 0 52px; }
  .tn-hero__title { font-size: 34px; }
  .tn-hero__lead { font-size: 16px; }
  .tn-hero__actions { flex-direction: column; align-items: stretch; }
  .tn-hero__actions .tn-btn { width: 100%; }
  .tn-hero__proof { gap: 14px; }
  .tn-hero__divider { display: none; }
  .tn-stats__grid { grid-template-columns: 1fr; gap: 22px; }
  .tn-stat { padding: 0 !important; border-left: 0 !important; }
  .tn-grid--4 { grid-template-columns: 1fr; }
  .tn-sechead__title { font-size: 27px; }
  .tn-card, .tn-quote { padding: 24px; }
  .tn-card--row { flex-direction: column; gap: 16px; }
  .tn-trainer__avatar { width: 104px; height: 104px; font-size: 40px; }
  .tn-trainer__name { font-size: 26px; }
  .tn-cta__title { font-size: 26px; }
  .tn-cta__actions { flex-direction: column; align-items: stretch; width: 100%; }
  .tn-cta__actions .tn-btn { width: 100%; }
  .tn-faq__q { font-size: 15.5px; padding: 20px; }
  .tn-faq__a { padding: 0 20px 20px; }
  .tn-footer__grid { grid-template-columns: 1fr; }
  .tn-footer__bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Fix: legacy Elementor pages had their first section(s) pulled up with a negative top margin to sit flush under the OLD (shorter) header; the new sticky header is taller, so it now hides part of the hero underneath it (confirmed on the Master Program page: -60px). Added 2026-08-27. */
#tn-content .elementor > .elementor-section.elementor-top-section:nth-of-type(-n+2) { margin-top: 0 !important; }

/* ==========================================================================
   Roadmap slider -- "Your Roadmap to Become a Linux Administrator"
   Added 2026-08-27 (homepage, before Popular Courses).
   Uses the existing design tokens already defined in :root -- no new colors.
   ========================================================================== */

.tn-roadmap {
  padding: 84px 0 88px;
  background: #FBF8FE;
  border-top: 1px solid var(--tn-line);
  border-bottom: 1px solid var(--tn-line);
}

.tn-roadmap__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 0 44px;
  max-width: 1440px;
  margin: 0 auto 40px;
}

.tn-roadmap__heading h2 {
  font-size: 34px;
  font-weight: 800;
  color: var(--tn-ink);
  margin: 0 0 8px;
}

.tn-roadmap__heading p {
  font-size: 16px;
  color: var(--tn-ink-2);
  margin: 0;
}

.tn-roadmap__arrows {
  display: flex;
  gap: 10px;
  flex: none;
}

.tn-roadmap__arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--tn-line);
  background: #fff;
  color: var(--tn-p-600);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
}

.tn-roadmap__arrow:hover:not(:disabled) {
  background: var(--tn-p-600);
  border-color: var(--tn-p-600);
  color: #fff;
}

.tn-roadmap__arrow:disabled {
  opacity: .35;
  cursor: default;
}

.tn-roadmap__arrow svg { width: 18px; height: 18px; }

.tn-roadmap__viewport {
  overflow: hidden;
  max-width: 1440px;
  margin: 0 auto;
}

.tn-roadmap__track {
  display: flex;
  gap: 22px;
  padding: 4px 44px 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 44px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.tn-roadmap__track::-webkit-scrollbar { display: none; }

.tn-roadmap__card {
  flex: 0 0 auto;
  width: calc((100% - 44px - 22px * 2) / 3.35);
  min-width: 236px;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--tn-line);
  border-radius: 20px;
  padding: 26px 22px 24px;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}

.tn-roadmap__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -20px rgba(76, 29, 149, .35);
}

.tn-roadmap__num {
  position: absolute;
  top: -16px;
  left: 22px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--tn-p-600);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #FBF8FE;
}

.tn-roadmap__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0 18px;
}

.tn-roadmap__icon svg { width: 26px; height: 26px; }

.tn-roadmap__card h3 {
  font-size: 19px;
  font-weight: 800;
  color: var(--tn-ink);
  margin: 0 0 14px;
  line-height: 1.3;
}

.tn-roadmap__card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.tn-roadmap__card li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14.5px;
  color: var(--tn-ink-2);
  line-height: 1.4;
}

.tn-roadmap__card li svg {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 2px;
  color: var(--tn-p-500);
}

.tn-roadmap__dots {
  display: none;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
}

.tn-roadmap__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tn-line);
  border: none;
  padding: 0;
  cursor: pointer;
}

.tn-roadmap__dot[aria-current="true"] {
  background: var(--tn-p-600);
  width: 20px;
  border-radius: 4px;
}

.tn-roadmap__cta {
  text-align: center;
  margin-top: 44px;
}

@media (max-width: 1200px) {
  .tn-roadmap__card { width: calc((100% - 44px - 22px * 1.5) / 2.35); }
}

@media (max-width: 1024px) {
  .tn-roadmap__head { padding: 0 28px; flex-direction: column; align-items: flex-start; gap: 16px; }
  .tn-roadmap__track { padding: 4px 28px 12px; scroll-padding-left: 28px; }
  .tn-roadmap__card { width: calc((100% - 28px - 22px) / 1.85); min-width: 220px; }
}

@media (max-width: 900px) {
  .tn-roadmap { padding: 60px 0 64px; }
  .tn-roadmap__arrows { display: none; }
  .tn-roadmap__dots { display: flex; }
}

@media (max-width: 620px) {
  .tn-roadmap__head { padding: 0 20px; }
  .tn-roadmap__heading h2 { font-size: 26px; }
  .tn-roadmap__track { padding: 4px 20px 10px; scroll-padding-left: 20px; }
  .tn-roadmap__card { width: 82%; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tn-roadmap__track { scroll-behavior: auto; }
  .tn-roadmap__card { transition: none; }
}

/* =======================================================================
   About & Contact page components — added 2026-08-28
   ======================================================================= */

.tn-storyblock__title {
	font-size: 22px;
	font-weight: 800;
	color: var(--tn-ink);
	margin: 0 0 14px;
}
.tn-storyblock p {
	color: var(--tn-ink-2);
	line-height: 1.7;
	margin: 0 0 14px;
}
.tn-storyblock p:last-child {
	margin-bottom: 0;
}

/* Bordered key/value info panel — used on About + Contact */
.tn-infopanel {
	border: 1px solid var(--tn-line);
	border-radius: 18px;
	padding: 26px 28px;
	background: var(--tn-white);
}
.tn-infopanel__heading {
	font-size: 16px;
	font-weight: 800;
	color: var(--tn-ink);
	margin: 0 0 14px;
}
.tn-infopanel__row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--tn-line-2);
}
.tn-infopanel__row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}
.tn-infopanel__row:first-child {
	padding-top: 0;
}
.tn-infopanel__label {
	font-weight: 700;
	color: var(--tn-ink);
	min-width: 170px;
	flex-shrink: 0;
}
.tn-infopanel__value {
	color: var(--tn-ink-2);
}
.tn-infopanel__value a {
	color: var(--tn-p-600);
	font-weight: 600;
}

/* Contact page: reach-us panel + tiles */
.tn-reachpanel > p {
	color: var(--tn-ink-2);
	margin: 6px 0 0;
}
.tn-reachcard {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	border: 1px solid var(--tn-line);
	border-radius: 16px;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tn-reachcard:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(22, 19, 31, 0.08);
}
.tn-reachcard__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	flex-shrink: 0;
}
.tn-reachcard__label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--tn-ink-3);
}
.tn-reachcard__value {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: var(--tn-ink);
	word-break: break-word;
}

/* Contact page: form card */
.tn-formcard {
	padding: 30px;
}
.tn-form__row {
	margin-bottom: 18px;
}
.tn-form__row label {
	display: block;
	font-weight: 700;
	font-size: 14px;
	color: var(--tn-ink);
	margin-bottom: 6px;
}
.tn-form__row input,
.tn-form__row select,
.tn-form__row textarea {
	width: 100%;
	font: inherit;
	font-size: 15px;
	color: var(--tn-ink);
	padding: 12px 14px;
	border: 1px solid var(--tn-line);
	border-radius: 12px;
	background: var(--tn-white);
	box-sizing: border-box;
}
.tn-form__row input:focus,
.tn-form__row select:focus,
.tn-form__row textarea:focus {
	outline: none;
	border-color: var(--tn-p-600);
	box-shadow: 0 0 0 3px var(--tn-p-100);
}
.tn-form__row textarea {
	resize: vertical;
	min-height: 120px;
}
.tn-btn--block {
	width: 100%;
	justify-content: center;
}
.tn-form__banner {
	border-radius: 12px;
	padding: 14px 16px;
	margin-bottom: 20px;
	font-size: 14px;
	line-height: 1.5;
}
.tn-form__banner--success {
	background: #DCFCE7;
	color: #166534;
}
.tn-form__banner--error {
	background: #FEE2E2;
	color: #991B1B;
}
.tn-form__banner--error ul {
	margin: 8px 0 0;
	padding-left: 18px;
}

@media (max-width: 900px) {
	.tn-infopanel__label {
		min-width: 140px;
	}
}
@media (max-width: 620px) {
	.tn-infopanel__row {
		flex-direction: column;
		gap: 2px;
	}
	.tn-infopanel__label {
		min-width: 0;
	}
}


/* ------------------------------------------------------------------------
 * Header search: the pill is now a real <form> (was a plain link before,
 * which is why clicking it never let anyone type a query).
 * -------------------------------------------------------------------- */
.tn-search__submit {
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0; margin: 0;
  color: inherit; cursor: pointer; flex-shrink: 0;
}
.tn-search__input {
  border: none; background: transparent; outline: none;
  font: inherit; color: var(--tn-ink); width: 100%; min-width: 0;
}
.tn-search__input::placeholder { color: var(--tn-ink-3); }

/* Search results page */
.tn-search-empty {
  text-align: center; padding: 56px 24px; border: 1px solid var(--tn-line);
  border-radius: var(--tn-radius); background: var(--tn-p-50);
}
.tn-search-empty__title { font-size: 20px; font-weight: 700; color: var(--tn-ink); margin: 0 0 8px; }
.tn-search-empty__text { color: var(--tn-ink-2); margin: 0 0 20px; }

@media (max-width: 480px) {
  .tn-search { width: 150px; }
}


/* ------------------------------------------------------------------------
 * Courses archive (/courses/) — Tutor LMS override card price styling.
 * Tutor's tutor_course_price() prints a bare <div class="price">...</div>;
 * this restyles it to match the .tn-course__now / __was price look used
 * elsewhere instead of the plugin's unstyled default text.
 * -------------------------------------------------------------------- */
.tn-course__price--tutor {
  display: block;
  margin: 2px 0 12px;
}
.tn-course__price--tutor .price {
  font-size: 20px;
  font-weight: 700;
  color: var(--tn-ink);
}
.tn-course__price--tutor .price ins {
  text-decoration: none;
  color: var(--tn-ink);
}
.tn-course__price--tutor .price del {
  color: var(--tn-ink-3);
  font-size: 14px;
  font-weight: 500;
  margin-right: 6px;
}

/* ------------------------------------------------------------------------
 * Tutor LMS single-course pages (/courses/<slug>/) — retheme via Tutor's
 * own CSS custom properties instead of rebuilding the template from
 * scratch. Tutor's whole frontend (single course, student dashboard,
 * lesson/quiz views) reads its color/spacing from these --tutor-* vars, so
 * overriding them at :root retints buttons, accordion headers, active
 * tabs, and borders consistently everywhere Tutor renders, without
 * touching Tutor's own PHP templates or risking the Enroll / Add to Cart /
 * Wishlist functionality that lives on this page. Values below were read
 * directly off the live rendered page (computed styles), not guessed.
 * -------------------------------------------------------------------- */
:root {
  --tutor-color-primary: var(--tn-p-600);
  --tutor-color-primary-rgb: 109, 40, 217;
  --tutor-color-primary-hover: var(--tn-p-700);
  --tutor-color-primary-hover-rgb: 91, 33, 182;
  --tutor-body-color: var(--tn-ink);
  --tutor-body-color-rgb: 22, 19, 31;
  --tutor-border-color: var(--tn-line);
  --tutor-border-color-rgb: 233, 228, 243;
  --tutor-color-secondary: var(--tn-ink-2);
  --tutor-color-subdued: var(--tn-ink-3);
  --tutor-color-muted: var(--tn-ink-3);
  --tutor-color-gray-10: var(--tn-p-50);
}

/* A handful of Tutor elements hardcode a color instead of reading the
   variables above (confirmed by inspecting computed styles) — patched
   individually here. */
.tutor-btn-ghost,
.tutor-btn-outline-primary,
.tutor-course-wishlist-btn,
.tutor-course-share-btn,
.tutor-woocommerce-view-cart {
  color: var(--tn-ink) !important;
  border-color: var(--tn-line) !important;
}
.tutor-btn-gift {
  background: var(--tn-p-600) !important;
  background-image: none !important;
}
.tutor-btn-gift:hover {
  background: var(--tn-p-700) !important;
}
.tutor-course-details-info a {
  color: var(--tn-p-600) !important;
}
.tutor-course-details-info a:hover {
  color: var(--tn-p-700) !important;
}

/* Card / sidebar / accordion polish to match the site's rounder, softly
   shadowed component look instead of Tutor's tighter 6px corners. */
.tutor-card {
  border-radius: 14px !important;
}
.tutor-sidebar-card {
  border-radius: 14px !important;
  box-shadow: var(--tn-shadow);
}
.tutor-accordion-item-header {
  border-radius: 10px 10px 0 0 !important;
}
.tutor-btn {
  border-radius: 10px !important;
}

/* ------------------------------------------------------------------------
 * Blog listing (home.php) + single post (single.php) — new templates,
 * reusing the site's card/typography components.
 * -------------------------------------------------------------------- */
.tn-post {
  background: var(--tn-white);
  border: 1px solid var(--tn-line);
  border-radius: var(--tn-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tn-post__cover {
  aspect-ratio: 16 / 9;
  background: var(--tn-p-50);
  overflow: hidden;
}
.tn-post__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tn-post__body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.tn-post__meta {
  font-size: 13px;
  color: var(--tn-ink-3);
  margin-bottom: 8px;
}
.tn-post__title {
  font-size: 19px;
  font-weight: 700;
  color: var(--tn-ink);
  margin: 0 0 10px;
  line-height: 1.35;
}
.tn-post__title a {
  color: inherit;
  text-decoration: none;
}
.tn-post__title a:hover {
  color: var(--tn-p-600);
}
.tn-post__excerpt {
  color: var(--tn-ink-2);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 16px;
  flex: 1;
}
.tn-post__readmore {
  font-size: 14px;
  font-weight: 600;
  color: var(--tn-p-600);
  text-decoration: none;
}
.tn-post__readmore:hover {
  color: var(--tn-p-700);
}

/* Single post article body */
.tn-article {
  max-width: 760px;
  margin: 0 auto;
}
.tn-article__cover {
  border-radius: var(--tn-radius);
  overflow: hidden;
  margin-bottom: 32px;
}
.tn-article__cover img {
  width: 100%;
  height: auto;
  display: block;
}
.tn-article__meta {
  font-size: 14px;
  color: var(--tn-ink-3);
  margin-bottom: 12px;
}
.tn-article__title {
  font-size: 34px;
  line-height: 1.25;
  margin: 0 0 24px;
}
.tn-article__content {
  color: var(--tn-ink-2);
  font-size: 17px;
  line-height: 1.8;
}
.tn-article__content p {
  margin: 0 0 20px;
}
.tn-article__content h2 {
  font-size: 26px;
  color: var(--tn-ink);
  margin: 36px 0 16px;
}
.tn-article__content h3 {
  font-size: 21px;
  color: var(--tn-ink);
  margin: 28px 0 14px;
}
.tn-article__content ul,
.tn-article__content ol {
  margin: 0 0 20px;
  padding-left: 24px;
}
.tn-article__content li {
  margin-bottom: 8px;
}
.tn-article__content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 12px 0;
}
.tn-article__content a {
  color: var(--tn-p-600);
}
.tn-article__content blockquote {
  border-left: 3px solid var(--tn-p-600);
  padding: 4px 0 4px 20px;
  margin: 24px 0;
  color: var(--tn-ink-2);
  font-style: italic;
}
.tn-article__nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--tn-line);
}
.tn-article__navlink {
  max-width: 48%;
  text-decoration: none;
  color: var(--tn-ink-2);
  font-size: 14px;
}
.tn-article__navlink strong {
  display: block;
  color: var(--tn-ink);
  font-size: 15px;
  margin-top: 4px;
}
.tn-article__navlink:hover strong {
  color: var(--tn-p-600);
}