@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap');
    :root {
      --bg: #f8f1e7;
      --bg-2: #fffaf4;
      --surface: rgba(255, 252, 246, .82);
      --surface-solid: #fffaf4;
      --surface-strong: rgba(255, 255, 255, .94);
      --text: #2f2b28;
      --text-muted: #665b52;
      --heading: #211d1a;
      --accent: #8ea899;
      --accent-strong: #527265;
      --accent-soft: rgba(142,168,153,.18);
      --gold: #b8955d;
      --rose: #d8aaa3;
      --lavender: #c8bfd5;
      --sky: #b6d5df;
      --border: rgba(82, 114, 101, .22);
      --on-accent: #fffdf9;
      --focus: #6e8f80;
      --danger: #9d3333;
      --success: #2f735c;
      --shadow: 0 24px 70px rgba(86, 70, 49, .14);
      --shadow-soft: 0 14px 42px rgba(86, 70, 49, .10);
      --radius-lg: 34px;
      --radius-md: 24px;
      --radius-sm: 16px;
      --header-h: 74px;
      --container: min(1360px, calc(100% - 17px));
      --fa-font: Vazirmatn, IRANYekan, "Yekan Bakh", "YekanBakh", Shabnam, Sahel, Tahoma, Arial, sans-serif;
      --en-font: Inter, "Segoe UI", Roboto, Arial, sans-serif;
    }

    [data-theme="dark"] {
      --bg: #111a1e;
      --bg-2: #172224;
      --surface: rgba(28, 39, 42, .82);
      --surface-solid: #1a2528;
      --surface-strong: rgba(31, 44, 47, .94);
      --text: #f2eee7;
      --text-muted: #c9c1b7;
      --heading: #fffaf1;
      --accent: #99b7a7;
      --accent-strong: #b9d0c3;
      --accent-soft: rgba(153,183,167,.14);
      --gold: #d5b579;
      --rose: #c99a9f;
      --lavender: #9b91ac;
      --sky: #88b8c5;
      --border: rgba(206, 222, 213, .19);
      --on-accent: #13201c;
      --focus: #d8bd82;
      --danger: #ffb1a9;
      --success: #a8e6cb;
      --shadow: 0 26px 80px rgba(0,0,0,.36);
      --shadow-soft: 0 16px 44px rgba(0,0,0,.26);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 18px); }
    body {
      margin: 0;
      min-height: 100vh;
      color: var(--text);
      background:
        radial-gradient(circle at 12% 12%, rgba(216,170,163,.30), transparent 30%),
        radial-gradient(circle at 82% 14%, rgba(182,213,223,.35), transparent 30%),
        radial-gradient(circle at 62% 82%, rgba(142,168,153,.28), transparent 35%),
        linear-gradient(135deg, var(--bg), var(--bg-2));
      font-family: var(--fa-font);
      line-height: 1.85;
      /* clip (not hidden) prevents horizontal scroll without creating a scroll
         container, so position:sticky sidebars keep working. */
      overflow-x: clip;
      transition: background .35s ease, color .35s ease;
    }

    html[lang="en"] body { font-family: var(--en-font); line-height: 1.7; }

    body::before,
    body::after {
      content: "";
      position: fixed;
      inset: auto;
      width: 420px;
      height: 420px;
      border-radius: 50%;
      filter: blur(28px);
      opacity: .34;
      z-index: -2;
      pointer-events: none;
      animation: floatGlow 18s ease-in-out infinite alternate;
    }
    body::before { top: 14%; left: -120px; background: var(--rose); }
    body::after { right: -120px; bottom: 8%; background: var(--accent); animation-delay: -7s; }

    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    button, input, select, textarea { font: inherit; }
    button { cursor: pointer; border: 0; }
    :focus-visible {
      outline: 3px solid var(--focus);
      outline-offset: 4px;
      border-radius: 14px;
    }

    .container { width: var(--container); margin-inline: auto; }
    .section {
      padding: clamp(72px, 9vw, 120px) 0;
      position: relative;
      scroll-margin-top: calc(var(--header-h) + 24px);
    }
    .section.compact { padding-top: clamp(42px, 6vw, 78px); }
    .section-head {
      max-width: 760px;
      margin-bottom: 34px;
    }
    .section-kicker {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 7px 13px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: var(--surface);
      color: var(--accent-strong);
      font-size: .88rem;
      font-weight: 800;
      box-shadow: var(--shadow-soft);
      backdrop-filter: blur(18px);
    }
    .section-kicker::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent), var(--gold));
      box-shadow: 0 0 18px var(--accent);
    }
    h1, h2, h3 {
      color: var(--heading);
      line-height: 1.28;
      margin: 0;
      letter-spacing: -.02em;
    }
    h1 { font-size: clamp(2.7rem, 7vw, 5.8rem); font-weight: 900; }
    h2 { font-size: clamp(2rem, 4.4vw, 3.35rem); font-weight: 900; margin-top: 16px; }
    h3 { font-size: clamp(1.18rem, 2vw, 1.45rem); font-weight: 850; }
    p { margin: 0; color: var(--text-muted); }
    .lead { font-size: clamp(1.05rem, 2vw, 1.28rem); max-width: 680px; color: var(--text); opacity: .92; }

    .site-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      z-index: 2000;
      height: var(--header-h);
      transition: height .25s ease, box-shadow .25s ease, background .25s ease;
    }
    .header-shell {
      /* Fix: the desktop menu has many items, so the header needs more room
         on large screens and must switch to the burger menu earlier on laptops. */
      width: min(1520px, calc(100% - 11px));
      height: calc(var(--header-h) - 12px);
      margin: 6px auto 0;
      padding: 0 clamp(10px, 1.6vw, 18px);
      display: grid;
      grid-template-columns: minmax(190px, auto) minmax(0, 1fr) auto;
      align-items: center;
      gap: clamp(8px, 1vw, 18px);
      border: 1px solid var(--border);
      border-radius: 999px;
      background: color-mix(in srgb, var(--surface-strong) 82%, transparent);
      backdrop-filter: blur(24px);
      box-shadow: 0 12px 36px rgba(80, 67, 53, .10);
      transition: all .25s ease;
    }
    .site-header.scrolled .header-shell {
      background: color-mix(in srgb, var(--surface-strong) 94%, transparent);
      box-shadow: var(--shadow-soft);
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      min-width: 0;
    }
    .logo-box {
      position: relative;
      width: 48px;
      height: 48px;
      flex: 0 0 48px;
      display: grid;
      place-items: center;
      border-radius: 18px;
      border: 1px solid var(--border);
      background: linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.08));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 12px 30px rgba(0,0,0,.08);
      overflow: hidden;
    }
    .logo-box img {
      width: 86%;
      height: 86%;
      object-fit: contain;
      border-radius: 14px;
    }
    .logo-fallback {
      display: none;
      color: var(--accent-strong);
      font-weight: 900;
      letter-spacing: .04em;
    }
    .logo-box.is-broken img { display: none; }
    .logo-box.is-broken .logo-fallback { display: block; }

    .brand-text {
      min-width: 0;
      display: grid;
      gap: 0;
    }
    .brand-name {
      color: var(--heading);
      font-weight: 900;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: clamp(.96rem, 1.4vw, 1.08rem);
    }
    .brand-sub {
      color: var(--text-muted);
      font-size: .78rem;
      font-weight: 700;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .desktop-nav {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: clamp(4px, .55vw, 9px);
      min-width: 0;
      max-width: 100%;
    }
    .nav-link {
      position: relative;
      padding: 8px clamp(5px, .5vw, 9px);
      color: var(--text-muted);
      font-weight: 800;
      font-size: clamp(.76rem, .76vw, .9rem);
      white-space: nowrap;
      border-radius: 999px;
      transition: color .2s ease, background .2s ease, transform .2s ease;
    }
    .nav-link:hover,
    .nav-link.active {
      color: var(--heading);
      background: var(--accent-soft);
      transform: translateY(-1px);
    }
    .nav-link.active::after {
      content: "";
      position: absolute;
      left: 18%;
      right: 18%;
      bottom: 3px;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--gold), var(--accent));
    }

    .header-actions {
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      white-space: nowrap;
    }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 44px;
      padding: 11px 18px;
      border-radius: 999px;
      font-weight: 900;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--heading);
      box-shadow: 0 10px 24px rgba(0,0,0,.06);
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
    }
    .btn:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0,0,0,.12); }
    .btn.primary {
      color: var(--on-accent);
      border-color: transparent;
      background: linear-gradient(135deg, var(--accent-strong), var(--accent), var(--gold));
      box-shadow: 0 18px 40px color-mix(in srgb, var(--accent) 38%, transparent);
    }
    .btn.secondary { background: var(--surface-strong); }
    .btn.ghost { background: transparent; box-shadow: none; }
    .icon-btn {
      width: 44px;
      height: 44px;
      padding: 0;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--heading);
      display: inline-grid;
      place-items: center;
      box-shadow: 0 10px 24px rgba(0,0,0,.06);
      transition: transform .2s ease, background .2s ease;
    }
    .icon-btn:hover { transform: translateY(-2px); background: var(--accent-soft); }
    .lang-btn {
      min-width: 58px;
      height: 44px;
      padding: 0 12px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--heading);
      font-weight: 900;
      box-shadow: 0 10px 24px rgba(0,0,0,.06);
    }
    .burger {
      display: none;
      position: relative;
    }
    .burger span,
    .burger::before,
    .burger::after {
      content: "";
      width: 19px;
      height: 2px;
      border-radius: 99px;
      background: var(--heading);
      transition: transform .2s ease, opacity .2s ease;
    }
    .burger { gap: 4px; }
    .burger[aria-expanded="true"] span { opacity: 0; }
    .burger[aria-expanded="true"]::before { transform: translateY(6px) rotate(45deg); }
    .burger[aria-expanded="true"]::after { transform: translateY(-6px) rotate(-45deg); }

    .mobile-panel {
      width: min(560px, calc(100% - 22px));
      max-height: calc(100vh - var(--header-h) - 10px);
      overflow: auto;
      margin: 8px auto 0;
      padding: 14px;
      border: 1px solid var(--border);
      border-radius: 26px;
      background: var(--surface-strong);
      backdrop-filter: blur(24px);
      box-shadow: var(--shadow);
      transform-origin: top;
      animation: menuIn .22s ease both;
    }
    .mobile-panel[hidden] { display: none; }
    .mobile-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 8px 14px;
      border-bottom: 1px solid var(--border);
      margin-bottom: 10px;
    }
    .mobile-nav {
      display: grid;
      gap: 7px;
      padding: 4px;
    }
    .mobile-nav .nav-link {
      width: 100%;
      padding: 13px 14px;
      font-size: 1rem;
    }
    .mobile-cta { width: 100%; margin-top: 10px; }

    .hero {
      min-height: calc(100vh - var(--header-h));
      display: grid;
      place-items: center;
      padding: clamp(42px, 7vw, 92px) 0 clamp(70px, 9vw, 110px);
      position: relative;
      overflow: hidden;
    }
    .hero::before {
      content: "";
      position: absolute;
      inset: 7% 4% auto;
      height: 62%;
      border-radius: 60px;
      background:
        radial-gradient(circle at 18% 28%, rgba(216,170,163,.25), transparent 35%),
        radial-gradient(circle at 78% 32%, rgba(142,168,153,.28), transparent 35%),
        linear-gradient(135deg, rgba(255,255,255,.28), rgba(255,255,255,.02));
      filter: blur(.2px);
      pointer-events: none;
      z-index: -1;
    }
    .hero-grid {
      display: grid;
      grid-template-columns: 1.04fr .96fr;
      gap: clamp(30px, 6vw, 72px);
      align-items: center;
    }
    .hero-content {
      position: relative;
      z-index: 2;
    }
    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 9px 14px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--surface);
      box-shadow: var(--shadow-soft);
      color: var(--accent-strong);
      font-weight: 900;
      backdrop-filter: blur(18px);
      margin-bottom: 18px;
    }
    .hero-title-wrap {
      display: grid;
      gap: 14px;
    }
    .hero-subtitle {
      font-size: clamp(1.05rem, 2vw, 1.35rem);
      color: var(--accent-strong);
      font-weight: 900;
    }
    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 26px;
    }
    .privacy-note {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      max-width: 620px;
      margin-top: 22px;
      padding: 14px 16px;
      border-radius: 22px;
      border: 1px solid var(--border);
      background: var(--surface);
      box-shadow: var(--shadow-soft);
      color: var(--text);
      font-weight: 700;
    }
    .privacy-note .lock {
      flex: 0 0 auto;
      width: 28px;
      height: 28px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--accent-soft);
    }

    .hero-visual {
      position: relative;
      min-height: 560px;
    }
    .hero-logo-float {
      position: absolute;
      z-index: 3;
      top: 18px;
      inset-inline-start: 18px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 9px 12px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--surface-strong);
      backdrop-filter: blur(22px);
      box-shadow: var(--shadow-soft);
      font-weight: 900;
    }
    .hero-logo-float .logo-box { width: 40px; height: 40px; flex-basis: 40px; border-radius: 15px; }

    .image-shell {
      position: relative;
      overflow: hidden;
      border-radius: var(--radius-lg);
      border: 1px solid var(--border);
      background:
        linear-gradient(135deg, rgba(255,255,255,.28), rgba(255,255,255,.04)),
        var(--surface);
      box-shadow: var(--shadow);
      isolation: isolate;
    }
    .image-shell::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(20,28,30,.02), rgba(20,28,30,.20)),
        radial-gradient(circle at 78% 18%, rgba(255,255,255,.20), transparent 26%);
      z-index: 1;
      pointer-events: none;
    }
    .image-shell img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: scale(1.01);
      transition: transform .7s ease;
    }
    .image-shell:hover img { transform: scale(1.045); }
    .image-fallback {
      display: none;
      position: absolute;
      inset: 0;
      place-items: center;
      text-align: center;
      padding: 26px;
      color: var(--heading);
      font-weight: 900;
      background:
        radial-gradient(circle at 30% 30%, var(--accent-soft), transparent 42%),
        linear-gradient(135deg, var(--surface-strong), var(--surface-solid));
      z-index: 3;
    }
    .image-shell.is-broken img { opacity: 0; }
    .image-shell.is-broken .image-fallback { display: grid; }
    .hero-image {
      height: min(68vh, 620px);
      min-height: 500px;
      border-radius: 44px;
    }
    .floating-card {
      position: absolute;
      z-index: 4;
      right: auto;
      inset-inline-end: -6px;
      bottom: 38px;
      width: min(260px, 52%);
      padding: 18px;
      border-radius: 25px;
      border: 1px solid var(--border);
      background: var(--surface-strong);
      backdrop-filter: blur(22px);
      box-shadow: var(--shadow);
      animation: floatCard 7s ease-in-out infinite;
    }
    .floating-card strong {
      display: block;
      color: var(--heading);
      font-size: 1.04rem;
      margin-bottom: 4px;
    }

    .trust-grid,
    .services-grid,
    .podcast-grid,
    .clip-grid,
    .article-grid,
    .course-grid,
    .testimonial-grid,
    .social-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
    }

    /*
      Public content rails: articles, podcasts, clips and courses stay in a
      single row while there are up to 4 items. If more items are added, the
      same section becomes its own scrollable box and shows at most two rows
      before the section-level scrollbar appears.
    */
    .podcast-grid,
    .clip-grid,
    .article-grid,
    .course-grid {
      --public-card-row-min: 420px;
      max-height: calc(var(--public-card-row-min) + var(--public-card-row-min) + 34px);
      overflow-y: auto;
      overflow-x: hidden;
      overscroll-behavior: contain;
      scrollbar-gutter: stable;
      scrollbar-width: thin;
      scrollbar-color: color-mix(in srgb, var(--accent-strong) 42%, transparent) color-mix(in srgb, var(--surface-strong) 72%, transparent);
      align-items: stretch;
      padding: 2px 10px 10px 2px;
      margin-inline-end: -10px;
    }
    .podcast-grid .media-card,
    .clip-grid .media-card,
    .article-grid .media-card,
    .course-grid .media-card {
      min-height: var(--public-card-row-min);
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    .podcast-grid .media-body,
    .clip-grid .media-body,
    .article-grid .media-body,
    .course-grid .media-body {
      flex: 1;
    }
    .podcast-grid::-webkit-scrollbar,
    .clip-grid::-webkit-scrollbar,
    .article-grid::-webkit-scrollbar,
    .course-grid::-webkit-scrollbar { width: 10px; }
    .podcast-grid::-webkit-scrollbar-thumb,
    .clip-grid::-webkit-scrollbar-thumb,
    .article-grid::-webkit-scrollbar-thumb,
    .course-grid::-webkit-scrollbar-thumb {
      border-radius: 999px;
      background: color-mix(in srgb, var(--accent-strong) 42%, transparent);
      border: 2px solid transparent;
      background-clip: padding-box;
    }
    .podcast-grid::-webkit-scrollbar-track,
    .clip-grid::-webkit-scrollbar-track,
    .article-grid::-webkit-scrollbar-track,
    .course-grid::-webkit-scrollbar-track {
      border-radius: 999px;
      background: color-mix(in srgb, var(--surface-strong) 72%, transparent);
    }
    .card {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      background: var(--surface);
      backdrop-filter: blur(22px);
      box-shadow: var(--shadow-soft);
      padding: 22px;
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }
    .card::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: 0;
      background: radial-gradient(circle at 22% 16%, rgba(255,255,255,.42), transparent 30%);
      transition: opacity .25s ease;
      pointer-events: none;
    }
    .card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow);
      border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
    }
    .card:hover::before { opacity: 1; }
    .trust-card {
      min-height: 126px;
      display: grid;
      align-content: center;
      gap: 8px;
    }
    .trust-card .icon,
    .service-icon,
    .social-icon {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 16px;
      background: linear-gradient(135deg, var(--accent-soft), rgba(184,149,93,.13));
      color: var(--accent-strong);
      font-weight: 900;
    }


    .social-icon svg,
    .contact-link-icon svg {
      width: 22px;
      height: 22px;
      display: block;
    }
    .social-card {
      text-decoration: none;
    }
    .clip-embed-wrap {
      min-height: 190px;
      display: grid;
      place-items: center;
      padding: 12px;
      background: var(--surface-solid);
      border-bottom: 1px solid var(--border);
      overflow: hidden;
    }
    .clip-embed-wrap .instagram-media {
      min-width: 0 !important;
      max-width: 100% !important;
      width: 100% !important;
      margin: 0 auto !important;
      background: var(--surface) !important;
    }

    .split-grid {
      display: grid;
      grid-template-columns: .88fr 1.12fr;
      align-items: center;
      gap: clamp(26px, 5vw, 58px);
    }
    .about-image,
    .feature-image { min-height: 460px; }
    .feature-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 22px;
    }
    .pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 9px 13px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--surface-strong);
      color: var(--heading);
      font-weight: 850;
      box-shadow: 0 8px 22px rgba(0,0,0,.05);
    }

    .service-card {
      display: grid;
      gap: 14px;
      min-height: 286px;
    }
    .service-card p { color: var(--text-muted); }
    .service-card .btn { align-self: end; justify-self: start; min-height: 40px; padding: 9px 14px; }

    .booking-head {
      max-width: 860px;
      margin-bottom: 22px;
    }
    .booking-grid,
    .ai-grid,
    .contact-grid {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: clamp(24px, 4vw, 44px);
      align-items: start;
    }
    .form-card {
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      background: var(--surface);
      backdrop-filter: blur(24px);
      box-shadow: var(--shadow);
      padding: clamp(20px, 3vw, 34px);
    }
    .form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 15px;
    }
    .field { display: grid; gap: 7px; }
    .field.full { grid-column: 1 / -1; }
    label {
      color: var(--heading);
      font-weight: 900;
      font-size: .94rem;
    }
    input, select, textarea {
      width: 100%;
      min-height: 48px;
      padding: 12px 14px;
      border-radius: 17px;
      border: 1px solid var(--border);
      background: color-mix(in srgb, var(--surface-strong) 84%, transparent);
      color: var(--text);
      outline: none;
      transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }
    textarea { min-height: 116px; resize: vertical; }
    input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--text-muted) 72%, transparent); opacity: 1; }
    input:focus, select:focus, textarea:focus {
      border-color: var(--focus);
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 18%, transparent);
      background: var(--surface-strong);
    }
    .form-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px;
      margin-top: 18px;
    }
    .form-message {
      margin-top: 14px;
      padding: 13px 15px;
      border-radius: 17px;
      border: 1px solid var(--border);
      display: none;
      font-weight: 800;
    }
    .form-message.show { display: block; }
    .form-message.success {
      color: var(--success);
      background: color-mix(in srgb, var(--success) 12%, transparent);
      border-color: color-mix(in srgb, var(--success) 42%, var(--border));
    }
    .form-message.error {
      color: var(--danger);
      background: color-mix(in srgb, var(--danger) 10%, transparent);
      border-color: color-mix(in srgb, var(--danger) 42%, var(--border));
    }
    .micro-note {
      margin-top: 12px;
      padding: 12px 14px;
      border-radius: 17px;
      background: var(--accent-soft);
      color: var(--text);
      font-weight: 750;
    }

    .media-card {
      padding: 0;
      overflow: hidden;
    }
    .media-thumb {
      height: 190px;
      border-radius: 0;
      border: 0;
      box-shadow: none;
    }
    .media-body { padding: 20px; display: grid; gap: 10px; }
    .meta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      color: var(--text-muted);
      font-size: .9rem;
      font-weight: 800;
    }
    .meta-row span {
      padding: 5px 10px;
      border-radius: 999px;
      background: var(--accent-soft);
      color: var(--accent-strong);
    }

    .clip-cover {
      height: 190px;
      display: grid;
      place-items: center;
      background:
        radial-gradient(circle at 28% 20%, rgba(216,170,163,.35), transparent 36%),
        radial-gradient(circle at 76% 58%, rgba(142,168,153,.28), transparent 38%),
        linear-gradient(135deg, var(--surface-strong), var(--surface-solid));
      border-bottom: 1px solid var(--border);
      position: relative;
      overflow: hidden;
    }
    .play-mark {
      width: 62px;
      height: 62px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      border: 1px solid var(--border);
      background: var(--surface-strong);
      box-shadow: var(--shadow-soft);
      color: var(--accent-strong);
      font-weight: 900;
      font-size: 1.5rem;
    }

    .course-area {
      display: grid;
      /* Course signup form is ~30% narrower than before (.78fr → .55fr),
         giving the course cards more horizontal space. */
      grid-template-columns: minmax(0, 1.35fr) minmax(280px, .55fr);
      gap: clamp(18px, 2.6vw, 30px);
      align-items: start;
    }
    #course-form {
      padding: clamp(16px, 2vw, 24px);
      border-radius: 28px;
    }
    #course-form .form-grid {
      grid-template-columns: 1fr;
      gap: 12px;
      margin-top: 12px !important;
    }
    #course-form input,
    #course-form select,
    #course-form textarea {
      min-height: 44px;
      padding: 10px 12px;
      border-radius: 15px;
    }
    #course-form textarea { min-height: 92px; }

    .ai-card {
      padding: 0;
      overflow: hidden;
    }
    .chat-window {
      height: 430px;
      overflow: auto;
      padding: 18px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      background:
        radial-gradient(circle at 20% 0%, var(--accent-soft), transparent 35%),
        color-mix(in srgb, var(--surface-solid) 72%, transparent);
      border-bottom: 1px solid var(--border);
      scroll-behavior: smooth;
    }
    .chat-bubble {
      max-width: min(82%, 520px);
      padding: 13px 15px;
      border-radius: 22px;
      border: 1px solid var(--border);
      box-shadow: 0 8px 24px rgba(0,0,0,.06);
      animation: bubbleIn .22s ease both;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }
    .chat-bubble.bot {
      align-self: flex-start;
      background: var(--surface-strong);
      color: var(--text);
    }
    .chat-bubble.user {
      align-self: flex-end;
      background: linear-gradient(135deg, var(--accent-strong), var(--accent));
      color: var(--on-accent);
      border-color: transparent;
    }
    html[dir="ltr"] .chat-bubble.bot { align-self: flex-start; }
    html[dir="ltr"] .chat-bubble.user { align-self: flex-end; }
    .chat-controls {
      padding: 16px;
      display: grid;
      gap: 12px;
    }
    .chat-input-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
    }
    .chat-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
    }
    .summary-box {
      display: none;
      margin-top: 14px;
      padding: 16px;
      border-radius: 22px;
      border: 1px solid var(--border);
      background: var(--surface-strong);
      white-space: pre-wrap;
      color: var(--text);
      max-height: 360px;
      overflow: auto;
    }
    .summary-box.show { display: block; }
    .status {
      padding: 11px 13px;
      border-radius: 16px;
      border: 1px solid var(--border);
      background: var(--accent-soft);
      color: var(--text);
      font-weight: 780;
    }
    .hidden { display: none !important; }

    .faq-list {
      display: grid;
      gap: 12px;
    }
    .faq-item {
      border: 1px solid var(--border);
      border-radius: 22px;
      background: var(--surface);
      box-shadow: var(--shadow-soft);
      overflow: hidden;
    }
    .faq-question {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      padding: 18px 20px;
      background: transparent;
      color: var(--heading);
      text-align: inherit;
      font-weight: 900;
    }
    .faq-question .plus {
      width: 30px;
      height: 30px;
      flex: 0 0 30px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: var(--accent-soft);
      transition: transform .2s ease;
    }
    .faq-question[aria-expanded="true"] .plus { transform: rotate(45deg); }
    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height .26s ease;
    }
    .faq-answer-inner {
      padding: 0 20px 18px;
      color: var(--text-muted);
    }

    .contact-list {
      display: grid;
      gap: 12px;
    }
    .contact-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 15px 16px;
      border-radius: 20px;
      border: 1px solid var(--border);
      background: var(--surface);
      box-shadow: var(--shadow-soft);
      font-weight: 900;
      transition: transform .2s ease, background .2s ease;
    }
    .contact-link:hover { transform: translateY(-3px); background: var(--accent-soft); }

    .testimonials-compact {
      padding: clamp(34px, 4.5vw, 58px) 0;
    }
    .testimonials-compact .section-head {
      max-width: 560px;
      margin-bottom: 18px;
    }
    .testimonials-compact .section-kicker {
      padding: 6px 11px;
      font-size: .82rem;
      box-shadow: none;
    }
    .testimonials-compact h2 {
      font-size: clamp(1.45rem, 2.7vw, 2.15rem);
      margin-top: 9px;
    }
    .testimonials-compact .testimonial-grid {
      gap: 12px;
    }
    .testimonials-compact .card {
      padding: 15px;
      border-radius: 20px;
      box-shadow: 0 10px 28px rgba(86, 70, 49, .08);
    }
    .testimonials-compact .card:hover {
      transform: translateY(-3px);
    }
    .testimonials-compact h3 {
      font-size: 1.02rem;
    }
    .testimonials-compact p {
      margin-top: 6px !important;
      line-height: 1.65;
      font-size: .94rem;
    }

    .site-footer {
      padding: 54px 0 28px;
      border-top: 1px solid var(--border);
      background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--surface-solid) 65%, transparent));
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.2fr .8fr .8fr;
      gap: 24px;
      align-items: start;
    }
    .footer-links {
      display: grid;
      gap: 9px;
    }
    .footer-bottom {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      margin-top: 32px;
      padding-top: 18px;
      border-top: 1px solid var(--border);
      color: var(--text-muted);
      font-weight: 750;
    }

    .back-top {
      position: fixed;
      inset-inline-end: 18px;
      bottom: 18px;
      z-index: 900;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: 1px solid var(--border);
      background: var(--surface-strong);
      color: var(--heading);
      box-shadow: var(--shadow);
      opacity: 0;
      visibility: hidden;
      transform: translateY(12px);
      transition: all .2s ease;
    }
    .back-top.show {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .65s ease, transform .65s ease;
    }
    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    @keyframes floatGlow {
      from { transform: translate3d(0,0,0) scale(1); }
      to { transform: translate3d(40px, -28px, 0) scale(1.08); }
    }
    @keyframes floatCard {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-12px); }
    }
    @keyframes bubbleIn {
      from { opacity: 0; transform: translateY(8px) scale(.98); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes menuIn {
      from { opacity: 0; transform: translateY(-8px) scaleY(.96); }
      to { opacity: 1; transform: translateY(0) scaleY(1); }
    }


    /* ===== Enhanced Hero Section - custom redesign ===== */
    .hero {
      min-height: calc(100svh - var(--header-h));
      padding: clamp(52px, 7.5vw, 110px) 0 clamp(78px, 9vw, 132px);
      isolation: isolate;
    }
    .hero .container {
      width: min(1240px, calc(100% - 32px));
    }
    .hero::before {
      inset: 4% 2.4% auto;
      height: 72%;
      border-radius: clamp(34px, 6vw, 84px);
      background:
        linear-gradient(145deg, rgba(255,255,255,.42), rgba(255,255,255,.08)),
        radial-gradient(circle at 16% 18%, color-mix(in srgb, var(--rose) 42%, transparent), transparent 34%),
        radial-gradient(circle at 82% 24%, color-mix(in srgb, var(--sky) 48%, transparent), transparent 35%),
        radial-gradient(circle at 56% 88%, color-mix(in srgb, var(--accent) 36%, transparent), transparent 38%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.42);
    }
    .hero::after {
      content: "";
      position: absolute;
      inset: 9% 3% auto;
      height: 76%;
      opacity: .18;
      pointer-events: none;
      z-index: -1;
      background-image:
        linear-gradient(color-mix(in srgb, var(--accent-strong) 26%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--accent-strong) 26%, transparent) 1px, transparent 1px);
      background-size: 56px 56px;
      mask-image: radial-gradient(circle at 50% 35%, #000 0, transparent 68%);
    }
    .hero-ambience {
      position: absolute;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
      z-index: 0;
    }
    .hero-orb,
    .hero-petal {
      position: absolute;
      display: grid;
      place-items: center;
      pointer-events: none;
    }
    .hero-orb {
      width: clamp(120px, 17vw, 260px);
      height: clamp(120px, 17vw, 260px);
      border-radius: 50%;
      filter: blur(2px);
      opacity: .34;
      background: radial-gradient(circle, rgba(255,255,255,.95), color-mix(in srgb, var(--accent) 52%, transparent) 54%, transparent 72%);
      animation: heroOrbFloat 14s ease-in-out infinite alternate;
    }
    .orb-one { top: 11%; inset-inline-start: 6%; }
    .orb-two { top: 55%; inset-inline-end: 10%; animation-delay: -4s; background: radial-gradient(circle, rgba(255,255,255,.9), color-mix(in srgb, var(--rose) 54%, transparent) 54%, transparent 72%); }
    .orb-three { width: clamp(82px, 11vw, 160px); height: clamp(82px, 11vw, 160px); top: 23%; inset-inline-end: 38%; animation-delay: -8s; background: radial-gradient(circle, rgba(255,255,255,.86), color-mix(in srgb, var(--gold) 46%, transparent) 56%, transparent 75%); }
    .hero-petal {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      color: var(--accent-strong);
      border: 1px solid var(--border);
      background: color-mix(in srgb, var(--surface-strong) 78%, transparent);
      box-shadow: var(--shadow-soft);
      backdrop-filter: blur(18px);
      font-weight: 900;
      animation: heroPetalDrift 9s ease-in-out infinite;
    }
    .petal-one { top: 19%; inset-inline-start: 50%; }
    .petal-two { bottom: 18%; inset-inline-start: 10%; animation-delay: -3s; }
    .petal-three { top: 68%; inset-inline-end: 31%; animation-delay: -6s; }
    .hero-grid {
      position: relative;
      z-index: 1;
      grid-template-columns: minmax(0, 1.02fr) minmax(380px, .98fr);
      gap: clamp(28px, 5.4vw, 78px);
    }
    .hero-content {
      padding: clamp(26px, 4vw, 48px);
      border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
      border-radius: clamp(28px, 4vw, 44px);
      background:
        linear-gradient(145deg, color-mix(in srgb, var(--surface-strong) 86%, transparent), color-mix(in srgb, var(--surface) 62%, transparent)),
        radial-gradient(circle at 10% 12%, rgba(255,255,255,.42), transparent 28%);
      box-shadow: var(--shadow);
      backdrop-filter: blur(26px) saturate(1.12);
    }
    .hero-content::before {
      content: "";
      position: absolute;
      inset: 14px;
      border-radius: calc(clamp(28px, 4vw, 44px) - 12px);
      border: 1px solid rgba(255,255,255,.32);
      pointer-events: none;
      opacity: .7;
    }
    .hero-badge {
      min-height: 44px;
      padding: 9px 16px 10px;
      margin-bottom: 20px;
      font-size: clamp(.9rem, 1.2vw, 1.02rem);
      letter-spacing: 0;
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--surface-strong) 94%, transparent), color-mix(in srgb, var(--accent-soft) 72%, transparent));
      animation: heroBadgeBreath 4.6s ease-in-out infinite;
    }
    .hero-badge::before {
      content: "";
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--gold), var(--accent-strong));
      box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 16%, transparent), 0 0 26px var(--accent);
    }
    .hero-title-wrap { gap: 16px; }
    .hero h1 {
      max-width: 760px;
      font-size: clamp(3.05rem, 7.8vw, 6.4rem);
      line-height: 1.08;
      font-weight: 900;
      letter-spacing: -.045em;
      text-wrap: balance;
      background: linear-gradient(135deg, var(--heading) 8%, var(--accent-strong) 54%, var(--gold) 96%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      text-shadow: 0 16px 40px color-mix(in srgb, var(--accent) 12%, transparent);
      animation: heroTitleIn .9s cubic-bezier(.2,.8,.2,1) both;
    }
    .hero-subtitle {
      position: relative;
      display: inline-block;
      width: fit-content;
      max-width: 100%;
      padding-bottom: 12px;
      font-size: clamp(1.03rem, 1.7vw, 1.34rem);
      line-height: 1.75;
      color: var(--accent-strong);
      letter-spacing: -.01em;
    }
    .hero-subtitle::after {
      content: "";
      position: absolute;
      inset-inline-start: 0;
      bottom: 0;
      width: min(76%, 380px);
      height: 4px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--gold), var(--accent), transparent);
      animation: underlineFlow 3.8s ease-in-out infinite;
    }
    .hero .lead {
      max-width: 630px;
      color: var(--text);
      font-size: clamp(1.08rem, 1.65vw, 1.28rem);
      line-height: 2.04;
      font-weight: 540;
    }
    .hero-actions {
      gap: 13px;
      margin-top: 30px;
    }
    .hero-actions .btn {
      min-height: 50px;
      padding: 12px 22px;
      font-size: clamp(.95rem, 1.1vw, 1.04rem);
    }
    .hero-actions .btn.primary {
      position: relative;
      overflow: hidden;
      border: 0;
      box-shadow: 0 22px 42px color-mix(in srgb, var(--accent-strong) 30%, transparent);
    }
    .hero-actions .btn.primary::after {
      content: "";
      position: absolute;
      top: -40%;
      bottom: -40%;
      width: 44px;
      inset-inline-start: -60px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
      transform: rotate(18deg);
      animation: buttonShine 4.2s ease-in-out infinite;
    }
    .hero-actions .btn.secondary,
    .hero-actions .btn.ghost {
      background: color-mix(in srgb, var(--surface-strong) 82%, transparent);
      backdrop-filter: blur(18px);
    }
    .privacy-note {
      align-items: center;
      max-width: 650px;
      margin-top: 24px;
      padding: 15px 17px;
      border-radius: 24px;
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--surface-strong) 86%, transparent), color-mix(in srgb, var(--accent-soft) 54%, transparent));
      font-size: clamp(.94rem, 1.05vw, 1.02rem);
      line-height: 1.9;
    }
    .privacy-note .lock {
      width: 34px;
      height: 34px;
      color: var(--accent-strong);
      background: color-mix(in srgb, var(--accent) 18%, transparent);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
      animation: heartPulse 2.8s ease-in-out infinite;
    }
    .hero-visual {
      min-height: 570px;
      display: grid;
      align-items: center;
      perspective: 1200px;
    }
    .hero-visual::before {
      content: "";
      position: absolute;
      inset: 4% 5% 2% 10%;
      border-radius: 48px;
      background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 24%, transparent), color-mix(in srgb, var(--gold) 18%, transparent));
      transform: rotate(-4deg);
      filter: blur(.2px);
      opacity: .66;
      z-index: 0;
      animation: frameFloat 7.4s ease-in-out infinite;
    }
    .hero-logo-float {
      top: 10px;
      inset-inline-start: 10px;
      min-height: 58px;
      padding: 9px 14px;
      z-index: 6;
      animation: miniCardFloat 6.4s ease-in-out infinite;
    }
    .therapy-orbit {
      position: absolute;
      inset: 0;
      z-index: 5;
      pointer-events: none;
      animation: orbitSpin 18s linear infinite;
    }
    .therapy-orbit span {
      position: absolute;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 86px;
      min-height: 36px;
      padding: 6px 12px;
      border: 1px solid var(--border);
      border-radius: 999px;
      color: var(--accent-strong);
      background: color-mix(in srgb, var(--surface-strong) 84%, transparent);
      box-shadow: var(--shadow-soft);
      backdrop-filter: blur(16px);
      font-size: .86rem;
      font-weight: 900;
      animation: orbitLabel 18s linear infinite reverse;
    }
    .therapy-orbit span:nth-child(1) { top: 16%; inset-inline-end: 0; }
    .therapy-orbit span:nth-child(2) { top: 53%; inset-inline-start: -10px; }
    .therapy-orbit span:nth-child(3) { bottom: 12%; inset-inline-end: 16%; }
    .hero-image {
      position: relative;
      z-index: 2;
      height: min(69vh, 640px);
      min-height: 520px;
      border-radius: clamp(34px, 4.5vw, 54px);
      transform: rotate(.8deg);
      box-shadow: 0 32px 90px color-mix(in srgb, #3b2e24 19%, transparent);
      animation: heroImageReveal .9s cubic-bezier(.2,.8,.2,1) .08s both, imageBreath 7s ease-in-out 1s infinite;
    }
    .hero-image::before {
      content: "";
      position: absolute;
      inset: 16px;
      border: 1px solid rgba(255,255,255,.38);
      border-radius: inherit;
      z-index: 2;
      pointer-events: none;
    }
    .hero-image::after {
      background:
        linear-gradient(180deg, rgba(20,28,30,.00), rgba(20,28,30,.20)),
        radial-gradient(circle at 75% 18%, rgba(255,255,255,.28), transparent 24%),
        linear-gradient(120deg, transparent 0 35%, rgba(255,255,255,.16) 48%, transparent 62%);
      background-size: auto, auto, 260% 100%;
      animation: imageSweep 6.5s ease-in-out infinite;
    }
    .floating-card {
      inset-inline-end: -14px;
      bottom: 24px;
      width: min(286px, 55%);
      padding: 20px 20px 18px;
      border-radius: 28px;
      background:
        linear-gradient(145deg, color-mix(in srgb, var(--surface-strong) 92%, transparent), color-mix(in srgb, var(--accent-soft) 56%, transparent));
      animation: floatCard 6.8s ease-in-out infinite;
    }
    .floating-card::before {
      content: "";
      position: absolute;
      width: 54px;
      height: 54px;
      top: -18px;
      inset-inline-end: 22px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,255,255,.8), color-mix(in srgb, var(--gold) 42%, transparent));
      box-shadow: 0 10px 28px color-mix(in srgb, var(--gold) 22%, transparent);
    }
    .floating-card strong {
      font-size: clamp(1.05rem, 1.3vw, 1.18rem);
      line-height: 1.65;
    }
    .floating-card p {
      line-height: 1.85;
      font-weight: 620;
    }

    @keyframes heroTitleIn {
      from { opacity: 0; transform: translateY(22px) scale(.98); filter: blur(8px); }
      to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    }
    @keyframes heroImageReveal {
      from { opacity: 0; transform: translateY(24px) rotate(-1deg) scale(.97); filter: blur(8px); }
      to { opacity: 1; transform: translateY(0) rotate(.8deg) scale(1); filter: blur(0); }
    }
    @keyframes heroOrbFloat {
      from { transform: translate3d(0,0,0) scale(1); }
      to { transform: translate3d(34px,-26px,0) scale(1.08); }
    }
    @keyframes heroPetalDrift {
      0%, 100% { transform: translateY(0) rotate(0deg); opacity: .68; }
      50% { transform: translateY(-18px) rotate(10deg); opacity: 1; }
    }
    @keyframes heroBadgeBreath {
      0%, 100% { transform: translateY(0); box-shadow: var(--shadow-soft); }
      50% { transform: translateY(-2px); box-shadow: 0 18px 46px color-mix(in srgb, var(--accent) 22%, transparent); }
    }
    @keyframes underlineFlow {
      0%, 100% { transform: scaleX(.72); transform-origin: right; opacity: .7; }
      50% { transform: scaleX(1); transform-origin: left; opacity: 1; }
    }
    @keyframes buttonShine {
      0%, 48% { inset-inline-start: -70px; }
      70%, 100% { inset-inline-start: calc(100% + 70px); }
    }
    @keyframes heartPulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.08); }
    }
    @keyframes frameFloat {
      0%, 100% { transform: translateY(0) rotate(-4deg); }
      50% { transform: translateY(-12px) rotate(-2.5deg); }
    }
    @keyframes miniCardFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }
    @keyframes orbitSpin {
      to { transform: rotate(-360deg); }
    }
    html[dir="ltr"] .therapy-orbit { animation-name: orbitSpinLtr; }
    @keyframes orbitSpinLtr {
      to { transform: rotate(360deg); }
    }
    @keyframes orbitLabel {
      to { transform: rotate(360deg); }
    }
    html[dir="ltr"] .therapy-orbit span { animation-name: orbitLabelLtr; }
    @keyframes orbitLabelLtr {
      to { transform: rotate(-360deg); }
    }
    @keyframes imageBreath {
      0%, 100% { transform: rotate(.8deg) translateY(0); }
      50% { transform: rotate(.2deg) translateY(-8px); }
    }
    @keyframes imageSweep {
      0%, 45% { background-position: 0 0, 0 0, 120% 0; }
      70%, 100% { background-position: 0 0, 0 0, -120% 0; }
    }

    @media (max-width: 980px) {
      .hero .container { width: min(760px, calc(100% - 26px)); }
      .hero-grid { grid-template-columns: 1fr; }
      .hero-content { padding: clamp(22px, 5vw, 34px); }
      .hero h1 { font-size: clamp(2.65rem, 12vw, 4.8rem); }
      .hero-visual { min-height: 520px; }
      .hero-image { height: 520px; min-height: 430px; transform: rotate(0deg); }
      .therapy-orbit { opacity: .82; }
      .floating-card { inset-inline-end: 10px; width: min(310px, 70%); }
    }
    @media (max-width: 680px) {
      .hero { padding-top: 32px; }
      .hero::before { inset-inline: 8px; border-radius: 34px; }
      .hero-content { border-radius: 28px; }
      .hero-content::before { inset: 10px; }
      .hero-badge { width: 100%; justify-content: center; }
      .hero h1 { letter-spacing: -.035em; }
      .hero-subtitle { width: 100%; font-size: 1.02rem; }
      .hero .lead { font-size: 1rem; line-height: 1.95; }
      .hero-actions { margin-top: 24px; }
      .hero-actions .btn { width: 100%; min-height: 48px; }
      .privacy-note { align-items: flex-start; font-size: .92rem; }
      .hero-visual { min-height: auto; }
      .hero-image { height: 410px; min-height: 360px; border-radius: 32px; }
      .therapy-orbit { display: none; }
      .hero-logo-float { max-width: calc(100% - 24px); }
      .floating-card { width: 100%; margin-top: 14px; inset: auto; }
      .hero-petal { display: none; }
    }

    @media (max-width: 1500px) {
      .header-shell {
        grid-template-columns: minmax(185px, 1fr) auto;
      }
      .desktop-nav, .desktop-cta { display: none; }
      .burger { display: inline-grid; }
    }
    @media (max-width: 980px) {
      .hero-grid,
      .split-grid,
      .booking-grid,
      .ai-grid,
      .contact-grid,
      .course-area,
      .footer-grid {
        grid-template-columns: 1fr;
      }
      .hero-visual { min-height: auto; }
      .hero-image { height: 520px; min-height: 420px; }
      .trust-grid,
      .services-grid,
      .podcast-grid,
      .clip-grid,
      .article-grid,
      .course-grid,
      .testimonial-grid,
      .social-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .podcast-grid,
      .clip-grid,
      .article-grid,
      .course-grid { --public-card-row-min: 400px; }
      .about-image, .feature-image { min-height: 380px; }
    }
    @media (max-width: 680px) {
      :root { --header-h: 66px; }
      .header-shell {
        width: calc(100% - 7px);
        height: calc(var(--header-h) - 10px);
        margin-top: 5px;
        padding: 0 8px;
        gap: 7px;
      }
      .brand { gap: 8px; }
      .brand-sub { display: none; }
      .logo-box { width: 42px; height: 42px; flex-basis: 42px; border-radius: 15px; }
      .brand-name { max-width: 150px; font-size: .92rem; }
      .header-actions { gap: 5px; }
      .lang-btn { min-width: 48px; height: 40px; padding: 0 8px; font-size: .82rem; }
      .icon-btn { width: 40px; height: 40px; }
      .hero { padding-top: 28px; }
      .hero-actions .btn, .form-actions .btn, .chat-buttons .btn { width: 100%; }
      .hero-image { height: 410px; min-height: 360px; border-radius: 32px; }
      .floating-card { position: relative; inset: auto; width: 100%; margin-top: 14px; }
      .hero-logo-float { top: 12px; inset-inline-start: 12px; max-width: calc(100% - 24px); }
      .trust-grid,
      .services-grid,
      .podcast-grid,
      .clip-grid,
      .article-grid,
      .course-grid,
      .testimonial-grid,
      .social-grid,
      .form-grid {
        grid-template-columns: 1fr;
      }
      .podcast-grid,
      .clip-grid,
      .article-grid,
      .course-grid { --public-card-row-min: 380px; }
      .section { padding: 64px 0; }
      .card { padding: 18px; }
      .form-card { padding: 18px; border-radius: 28px; }
      #course-form { padding: 18px; }
      .testimonials-compact { padding: 42px 0; }
      .chat-window { height: 390px; padding: 13px; }
      .chat-bubble { max-width: 94%; }
      .chat-input-row { grid-template-columns: 1fr; }
      .footer-bottom { display: grid; }
    }
    @media (max-width: 390px) {
      .brand-name { max-width: 112px; }
      .lang-btn { min-width: 42px; font-size: .76rem; }
      .hero-image { height: 350px; min-height: 320px; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
      }
      .reveal { opacity: 1; transform: none; }
    }
  

    /* ===== Final Theme Polish + Global Animated Background + Unified Contact ===== */
    :root {
      --bg: #f7efe4;
      --bg-2: #fffaf1;
      --surface: rgba(255, 250, 242, .72);
      --surface-solid: #fff9ef;
      --surface-strong: rgba(255, 253, 248, .90);
      --text: #342d27;
      --text-muted: #71655b;
      --heading: #241e19;
      --accent: #91ad9e;
      --accent-strong: #436b5c;
      --accent-soft: rgba(145, 173, 158, .18);
      --gold: #c39a5d;
      --rose: #e5b2aa;
      --lavender: #cfc2df;
      --sky: #b7dbe3;
      --border: rgba(67, 107, 92, .18);
      --shadow: 0 28px 90px rgba(91, 72, 47, .14);
      --shadow-soft: 0 16px 48px rgba(91, 72, 47, .095);
      --glow-a: rgba(145, 173, 158, .36);
      --glow-b: rgba(229, 178, 170, .30);
      --glow-c: rgba(195, 154, 93, .24);
      --glass-stroke: rgba(255,255,255,.58);
    }

    body[data-theme="dark"] {
      --bg: #0e1719;
      --bg-2: #182326;
      --surface: rgba(25, 36, 38, .70);
      --surface-solid: #172225;
      --surface-strong: rgba(29, 42, 45, .88);
      --text: #f4eee6;
      --text-muted: #d2c7bc;
      --heading: #fff7ec;
      --accent: #9ab9aa;
      --accent-strong: #c1d9cc;
      --accent-soft: rgba(154, 185, 170, .13);
      --gold: #d6b06d;
      --rose: #d59ea1;
      --lavender: #a99bbc;
      --sky: #8fc5cf;
      --border: rgba(218, 233, 225, .16);
      --shadow: 0 30px 96px rgba(0,0,0,.42);
      --shadow-soft: 0 18px 52px rgba(0,0,0,.30);
      --glow-a: rgba(154, 185, 170, .22);
      --glow-b: rgba(213, 158, 161, .16);
      --glow-c: rgba(214, 176, 109, .15);
      --glass-stroke: rgba(255,255,255,.13);
    }

    body {
      background:
        radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--rose) 23%, transparent), transparent 28%),
        radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--sky) 27%, transparent), transparent 30%),
        linear-gradient(135deg, var(--bg), var(--bg-2) 48%, color-mix(in srgb, var(--accent) 9%, var(--bg-2)));
      background-attachment: fixed;
      letter-spacing: -.008em;
    }

    body > :not(.site-ambience) {
      position: relative;
      z-index: 1;
    }

    .site-ambience {
      position: fixed;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      pointer-events: none;
      opacity: 1;
    }
    .site-ambience::before {
      content: "";
      position: absolute;
      inset: -12%;
      opacity: .42;
      background-image:
        linear-gradient(115deg, transparent 0 42%, color-mix(in srgb, var(--accent) 15%, transparent) 43% 44%, transparent 45% 100%),
        linear-gradient(245deg, transparent 0 52%, color-mix(in srgb, var(--gold) 13%, transparent) 53% 54%, transparent 55% 100%);
      background-size: 260px 260px, 330px 330px;
      animation: ambienceGrid 30s linear infinite;
      mask-image: radial-gradient(circle at 50% 30%, #000 0, transparent 76%);
    }
    .site-ambience::after {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .22;
      background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.55) 0 1px, transparent 1.6px),
        radial-gradient(circle at 70% 64%, color-mix(in srgb, var(--accent) 34%, transparent) 0 1px, transparent 1.8px);
      background-size: 46px 46px, 72px 72px;
      animation: ambienceDust 26s linear infinite;
      mix-blend-mode: soft-light;
    }
    .ambient-glow,
    .ambient-thread,
    .ambient-noise {
      position: absolute;
      display: block;
      pointer-events: none;
    }
    .ambient-glow {
      width: clamp(260px, 34vw, 620px);
      height: clamp(260px, 34vw, 620px);
      border-radius: 999px;
      filter: blur(34px);
      opacity: .42;
      transform: translate3d(0,0,0);
      animation: ambienceFloat 24s ease-in-out infinite alternate;
    }
    .glow-a {
      top: -12%;
      inset-inline-start: -10%;
      background: radial-gradient(circle, var(--glow-b), transparent 68%);
    }
    .glow-b {
      top: 28%;
      inset-inline-end: -13%;
      background: radial-gradient(circle, var(--glow-a), transparent 68%);
      animation-delay: -8s;
      animation-duration: 28s;
    }
    .glow-c {
      width: clamp(200px, 28vw, 480px);
      height: clamp(200px, 28vw, 480px);
      bottom: -14%;
      inset-inline-start: 32%;
      background: radial-gradient(circle, var(--glow-c), transparent 70%);
      animation-delay: -14s;
      animation-duration: 31s;
    }
    .ambient-thread {
      width: min(76vw, 980px);
      height: min(76vw, 980px);
      border: 1px solid color-mix(in srgb, var(--accent) 17%, transparent);
      border-radius: 42% 58% 50% 50% / 48% 42% 58% 52%;
      filter: blur(.2px);
      opacity: .22;
      animation: ambienceThread 34s ease-in-out infinite;
    }
    .thread-a { top: 6%; inset-inline-start: -22%; }
    .thread-b {
      right: auto;
      bottom: -24%;
      inset-inline-end: -20%;
      width: min(64vw, 760px);
      height: min(64vw, 760px);
      border-color: color-mix(in srgb, var(--gold) 18%, transparent);
      animation-delay: -15s;
      animation-direction: reverse;
    }
    .ambient-noise {
      inset: 0;
      opacity: .12;
      background-image: linear-gradient(0deg, rgba(255,255,255,.06), rgba(255,255,255,.06));
      mix-blend-mode: overlay;
    }

    .header-shell,
    .card,
    .form-card,
    .faq-item,
    .privacy-note,
    .mobile-panel,
    .contact-main-card,
    .contact-directory-card,
    .contact-brand-card {
      border-color: color-mix(in srgb, var(--border) 86%, var(--glass-stroke));
      box-shadow: var(--shadow-soft);
    }

    .btn.primary {
      background: linear-gradient(135deg, var(--accent-strong) 0%, color-mix(in srgb, var(--accent) 88%, var(--gold)) 56%, var(--gold) 100%);
    }

    .therapy-orbit { display: none !important; }

    .contact-hub-section {
      padding-top: clamp(76px, 9vw, 126px);
      padding-bottom: clamp(34px, 5vw, 64px);
    }
    .unified-contact {
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(310px, .68fr);
      gap: clamp(16px, 2.6vw, 26px);
      padding: clamp(16px, 2.4vw, 28px);
      border: 1px solid var(--border);
      border-radius: clamp(30px, 4.2vw, 48px);
      background:
        radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--rose) 20%, transparent), transparent 34%),
        radial-gradient(circle at 84% 12%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 36%),
        linear-gradient(145deg, color-mix(in srgb, var(--surface-strong) 86%, transparent), color-mix(in srgb, var(--surface) 72%, transparent));
      box-shadow: var(--shadow);
      backdrop-filter: blur(28px) saturate(1.12);
      overflow: hidden;
      position: relative;
    }
    .unified-contact::before {
      content: "";
      position: absolute;
      inset: 12px;
      border-radius: calc(clamp(30px, 4.2vw, 48px) - 12px);
      border: 1px solid rgba(255,255,255,.26);
      pointer-events: none;
    }
    .unified-contact::after {
      content: "";
      position: absolute;
      width: 340px;
      height: 340px;
      border-radius: 50%;
      inset-inline-end: -150px;
      top: -120px;
      background: radial-gradient(circle, color-mix(in srgb, var(--gold) 18%, transparent), transparent 72%);
      animation: contactGlow 14s ease-in-out infinite alternate;
      pointer-events: none;
    }
    .contact-main-card,
    .contact-directory-card,
    .contact-brand-card,
    .contact-legal {
      position: relative;
      z-index: 1;
      border: 1px solid var(--border);
      background: color-mix(in srgb, var(--surface-strong) 82%, transparent);
      backdrop-filter: blur(22px);
    }
    .contact-main-card {
      grid-row: span 2;
      min-height: 100%;
      padding: clamp(24px, 4vw, 44px);
      border-radius: clamp(26px, 3.5vw, 38px);
      display: grid;
      align-content: center;
      gap: 18px;
    }
    .contact-main-card h2 {
      margin-top: 6px;
      font-size: clamp(2.2rem, 5vw, 4.4rem);
      background: linear-gradient(135deg, var(--heading), var(--accent-strong) 58%, var(--gold));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .contact-main-card .lead {
      max-width: 680px;
      line-height: 2.05;
    }
    .clinic-chip {
      width: fit-content;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 11px 15px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: var(--accent-soft);
      color: var(--heading);
      font-weight: 900;
    }
    .clinic-chip span {
      width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: color-mix(in srgb, var(--surface-strong) 80%, transparent);
      color: var(--accent-strong);
      animation: heartPulse 2.8s ease-in-out infinite;
    }
    .contact-main-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 8px;
    }
    .contact-directory-card,
    .contact-brand-card {
      border-radius: 28px;
      padding: clamp(20px, 2.5vw, 28px);
    }
    .contact-directory-card h3,
    .contact-brand-card h3 {
      font-size: 1.12rem;
      margin-bottom: 14px;
    }
    .contact-list {
      gap: 10px;
    }
    .contact-link {
      min-height: 58px;
      justify-content: stretch;
      background: color-mix(in srgb, var(--surface-strong) 74%, transparent);
      border-radius: 18px;
      padding: 12px 13px;
      box-shadow: none;
    }
    .contact-link-icon {
      width: 36px;
      height: 36px;
      flex: 0 0 36px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      background: linear-gradient(135deg, var(--accent-soft), color-mix(in srgb, var(--gold) 14%, transparent));
      color: var(--accent-strong);
      font-size: .82rem;
      font-weight: 900;
    }
    .contact-link-label { flex: 1; }
    .contact-link-arrow {
      width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: color-mix(in srgb, var(--accent) 13%, transparent);
      transition: transform .2s ease, background .2s ease;
    }
    .contact-link:hover .contact-link-arrow {
      transform: translateX(-3px);
      background: color-mix(in srgb, var(--accent) 24%, transparent);
    }
    html[dir="ltr"] .contact-link:hover .contact-link-arrow { transform: translateX(3px); }
    .contact-brand {
      margin-bottom: 14px;
    }
    .contact-brand-card p {
      line-height: 1.9;
      margin-bottom: 20px;
    }
    .contact-link-groups {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      padding-top: 18px;
      border-top: 1px solid var(--border);
    }
    .compact-links {
      display: grid;
      gap: 8px;
      margin-top: 12px;
    }
    .compact-links a {
      display: inline-flex;
      align-items: center;
      min-height: 36px;
      padding: 7px 10px;
      border-radius: 999px;
      color: var(--text-muted);
      font-weight: 850;
      transition: background .2s ease, color .2s ease, transform .2s ease;
    }
    .compact-links a:hover {
      color: var(--heading);
      background: var(--accent-soft);
      transform: translateY(-2px);
    }
    .contact-legal {
      grid-column: 1 / -1;
      display: flex;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      padding: 16px 18px;
      border-radius: 22px;
      color: var(--text-muted);
      font-size: .92rem;
      font-weight: 750;
      line-height: 1.8;
    }

    @keyframes ambienceFloat {
      0% { transform: translate3d(0,0,0) scale(1); }
      50% { transform: translate3d(5vw,-3vh,0) scale(1.08); }
      100% { transform: translate3d(-4vw,4vh,0) scale(.96); }
    }
    @keyframes ambienceThread {
      0%, 100% { transform: rotate(0deg) scale(1); border-radius: 42% 58% 50% 50% / 48% 42% 58% 52%; }
      50% { transform: rotate(22deg) scale(1.08); border-radius: 58% 42% 44% 56% / 42% 60% 40% 58%; }
    }
    @keyframes ambienceGrid {
      from { transform: translate3d(0,0,0) rotate(0deg); }
      to { transform: translate3d(-90px,70px,0) rotate(1deg); }
    }
    @keyframes ambienceDust {
      from { transform: translate3d(0,0,0); }
      to { transform: translate3d(72px,46px,0); }
    }
    @keyframes contactGlow {
      from { transform: translate3d(0,0,0) scale(1); opacity: .72; }
      to { transform: translate3d(-56px,40px,0) scale(1.18); opacity: .42; }
    }

    @media (max-width: 980px) {
      .unified-contact {
        grid-template-columns: 1fr;
      }
      .contact-main-card {
        grid-row: auto;
      }
      .contact-link-groups {
        grid-template-columns: 1fr 1fr;
      }
    }
    @media (max-width: 680px) {
      .contact-hub-section { padding-top: 64px; }
      .unified-contact {
        width: calc(100% - 14px);
        padding: 12px;
        border-radius: 28px;
      }
      .contact-main-card,
      .contact-directory-card,
      .contact-brand-card {
        border-radius: 22px;
        padding: 18px;
      }
      .contact-main-actions .btn { width: 100%; }
      .contact-link-groups {
        grid-template-columns: 1fr;
      }
      .contact-legal {
        display: grid;
        padding: 14px;
      }
      .ambient-thread { opacity: .14; }
      .ambient-glow { filter: blur(42px); opacity: .34; }
    }
    @media (prefers-reduced-motion: reduce) {
      .site-ambience *, .site-ambience::before, .site-ambience::after,
      .unified-contact::after, .clinic-chip span {
        animation: none !important;
      }
    }


    /* Compact professional contact/footer block - reduced height */
    .compact-contact-section {
      padding-top: clamp(34px, 4.8vw, 66px) !important;
      padding-bottom: clamp(22px, 3vw, 34px) !important;
    }
    .compact-contact {
      grid-template-columns: minmax(260px, .92fr) minmax(330px, 1.05fr) minmax(280px, .9fr) !important;
      gap: clamp(10px, 1.5vw, 14px) !important;
      padding: clamp(10px, 1.4vw, 14px) !important;
      border-radius: clamp(22px, 3vw, 34px) !important;
      align-items: stretch !important;
      background:
        radial-gradient(circle at 10% 18%, color-mix(in srgb, var(--rose) 13%, transparent), transparent 30%),
        radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 32%),
        linear-gradient(145deg, color-mix(in srgb, var(--surface-strong) 90%, transparent), color-mix(in srgb, var(--surface) 76%, transparent)) !important;
    }
    .compact-contact::before {
      inset: 8px !important;
      border-radius: calc(clamp(22px, 3vw, 34px) - 8px) !important;
      opacity: .68;
    }
    .compact-contact::after {
      width: 210px !important;
      height: 210px !important;
      inset-inline-end: -92px !important;
      top: -82px !important;
      opacity: .46 !important;
    }
    .compact-contact .contact-main-card,
    .compact-contact .contact-directory-card,
    .compact-contact .contact-brand-card {
      padding: clamp(13px, 1.5vw, 18px) !important;
      border-radius: clamp(18px, 2.2vw, 24px) !important;
      min-height: 0 !important;
      box-shadow: 0 10px 26px rgba(86, 70, 49, .07) !important;
    }
    .compact-contact .contact-main-card {
      grid-row: auto !important;
      align-content: start !important;
      gap: 10px !important;
    }
    .compact-title-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }
    .compact-contact .contact-main-card h2 {
      margin: 0 !important;
      font-size: clamp(1.42rem, 2.15vw, 2rem) !important;
      line-height: 1.25 !important;
      letter-spacing: -.015em;
    }
    .compact-contact .contact-main-card .lead {
      max-width: none !important;
      font-size: clamp(.88rem, .98vw, .98rem) !important;
      line-height: 1.72 !important;
    }
    .compact-clinic-chip {
      padding: 6px 10px !important;
      gap: 7px !important;
      font-size: .86rem !important;
      white-space: nowrap;
    }
    .compact-clinic-chip span {
      width: 24px !important;
      height: 24px !important;
    }
    .compact-actions {
      gap: 8px !important;
      margin-top: 4px !important;
    }
    .compact-actions .btn {
      min-height: 38px !important;
      padding: 8px 13px !important;
      font-size: .88rem !important;
      box-shadow: 0 10px 24px rgba(0,0,0,.06) !important;
    }
    .compact-directory h3,
    .compact-brand-card h3 {
      margin: 0 0 9px !important;
      font-size: .98rem !important;
      line-height: 1.35 !important;
    }
    .compact-contact-list {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 7px !important;
    }
    .compact-contact .contact-link {
      min-height: 40px !important;
      padding: 6px 7px !important;
      border-radius: 14px !important;
      gap: 7px !important;
      font-size: .86rem !important;
    }
    .compact-contact .contact-link-icon {
      width: 28px !important;
      height: 28px !important;
      flex-basis: 28px !important;
      border-radius: 10px !important;
      font-size: .72rem !important;
    }
    .compact-contact .contact-link-arrow {
      width: 24px !important;
      height: 24px !important;
      font-size: .78rem !important;
    }
    .compact-brand {
      margin-bottom: 8px !important;
      gap: 9px !important;
    }
    .compact-brand .logo-box {
      width: 40px !important;
      height: 40px !important;
      flex-basis: 40px !important;
      border-radius: 14px !important;
    }
    .compact-brand-card p {
      margin-bottom: 10px !important;
      font-size: .87rem !important;
      line-height: 1.58 !important;
    }
    .compact-link-groups {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 10px !important;
      padding-top: 10px !important;
    }
    .compact-links {
      gap: 3px !important;
      margin-top: 6px !important;
    }
    .compact-links a {
      min-height: 27px !important;
      padding: 4px 8px !important;
      font-size: .82rem !important;
    }
    .compact-legal {
      grid-column: 1 / -1 !important;
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) !important;
      gap: 10px !important;
      padding: 9px 13px !important;
      border-radius: 16px !important;
      font-size: .78rem !important;
      line-height: 1.55 !important;
      opacity: .92;
    }

    @media (max-width: 1120px) {
      .compact-contact {
        grid-template-columns: minmax(0, 1fr) minmax(300px, .82fr) !important;
      }
      .compact-brand-card {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(260px, .8fr) minmax(360px, 1.2fr);
        align-items: center;
        gap: 12px;
      }
      .compact-brand-card .contact-link-groups { padding-top: 0 !important; border-top: 0 !important; }
      .compact-brand-card p { margin-bottom: 0 !important; }
    }
    @media (max-width: 760px) {
      .compact-contact-section { padding-top: 42px !important; }
      .compact-contact {
        width: calc(100% - 10px) !important;
        grid-template-columns: 1fr !important;
        padding: 9px !important;
        border-radius: 24px !important;
      }
      .compact-brand-card {
        grid-column: auto;
        display: block;
      }
      .compact-contact-list,
      .compact-link-groups,
      .compact-legal {
        grid-template-columns: 1fr !important;
      }
      .compact-title-row { display: grid; justify-content: stretch; }
      .compact-clinic-chip { width: fit-content; }
      .compact-actions .btn { width: 100%; }
    }


    /* ===== Requested refinements: hero loop, shorter side card, pointer-aware buttons, fixed header ===== */
    .site-header {
      position: fixed;
      inset-block-start: 0;
      inset-inline: 0;
      width: 100%;
      z-index: 2000;
      transform: translateY(0);
      will-change: height, transform;
    }
    main {
      padding-top: var(--header-h);
    }
    .site-header.scrolled .header-shell {
      margin-top: 4px;
      transform: translateY(0);
    }

    .hero-image::after {
      background:
        linear-gradient(180deg, rgba(20,28,30,.00), rgba(20,28,30,.20)),
        radial-gradient(circle at 75% 18%, rgba(255,255,255,.28), transparent 24%),
        linear-gradient(120deg, transparent 0 35%, rgba(255,255,255,.18) 48%, transparent 62%);
      background-size: auto, auto, 280% 100%;
      animation: imageSweepLoop 6.4s ease-in-out infinite;
      will-change: background-position, opacity;
    }

    .floating-card {
      width: min(330px, 62%);
      padding: 14px 20px 13px;
      bottom: 28px;
    }
    .floating-card strong {
      line-height: 1.42;
      margin-bottom: 2px;
    }
    .floating-card p {
      line-height: 1.55;
    }

    .btn,
    .lang-btn,
    .icon-btn:not(.burger) {
      position: relative;
      overflow: hidden;
      isolation: isolate;
      --mx: 50%;
      --my: 50%;
    }
    .btn::before,
    .lang-btn::before,
    .icon-btn:not(.burger)::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      opacity: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at var(--mx) var(--my),
          rgba(255,255,255,.46) 0,
          color-mix(in srgb, var(--accent) 28%, transparent) 18%,
          transparent 44%);
      transition: opacity .18s ease;
    }
    .btn:hover::before,
    .lang-btn:hover::before,
    .icon-btn:not(.burger):hover::before {
      opacity: 1;
    }

    @keyframes imageSweepLoop {
      0%, 100% {
        background-position: 0 0, 0 0, 145% 0;
        opacity: .54;
      }
      50% {
        background-position: 0 0, 0 0, -145% 0;
        opacity: 1;
      }
    }

    @media (max-width: 680px) {
      main {
        padding-top: var(--header-h);
      }
      .floating-card {
        width: 100%;
        padding: 14px 16px 13px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .hero-image::after {
        animation: none !important;
      }
    }


    /* Header stays visible at every scroll position */
    .site-header {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      z-index: 9999 !important;
    }

  

    /* ===== Hero text box height optimization only ===== */
    .hero-content {
      max-width: 720px;
      padding: clamp(22px, 2.8vw, 34px);
      border-radius: clamp(26px, 3vw, 38px);
    }
    .hero-content::before {
      inset: 10px;
      border-radius: calc(clamp(26px, 3vw, 38px) - 10px);
    }
    .hero-title-wrap {
      gap: 10px;
    }
    .hero-badge {
      min-height: 38px;
      padding: 7px 14px 8px;
      margin-bottom: 14px;
      font-size: clamp(.86rem, .95vw, .96rem);
    }
    .hero h1 {
      font-size: clamp(2.55rem, 5.9vw, 4.9rem);
      line-height: 1.04;
    }
    .hero-subtitle {
      font-size: clamp(.97rem, 1.25vw, 1.14rem);
      line-height: 1.55;
      padding-bottom: 10px;
    }
    .hero .lead {
      max-width: 600px;
      font-size: clamp(1rem, 1.25vw, 1.13rem);
      line-height: 1.75;
    }
    .hero-actions {
      gap: 10px;
      margin-top: 22px;
    }
    .hero-actions .btn {
      min-height: 44px;
      padding: 10px 18px;
      font-size: clamp(.9rem, .98vw, .98rem);
    }
    .privacy-note {
      max-width: 610px;
      margin-top: 16px;
      padding: 11px 14px;
      border-radius: 20px;
      font-size: clamp(.88rem, .96vw, .94rem);
      line-height: 1.65;
    }
    .privacy-note .lock {
      width: 30px;
      height: 30px;
    }

    @media (max-width: 980px) {
      .hero-content {
        max-width: 100%;
        padding: clamp(20px, 4vw, 28px);
      }
      .hero h1 {
        font-size: clamp(2.4rem, 10vw, 4rem);
      }
      .hero-subtitle {
        line-height: 1.5;
      }
      .hero .lead {
        line-height: 1.72;
      }
    }

    @media (max-width: 680px) {
      .hero-content {
        padding: 20px;
      }
      .hero-content::before {
        inset: 8px;
      }
      .hero-badge {
        min-height: 36px;
        margin-bottom: 12px;
      }
      .hero-title-wrap {
        gap: 9px;
      }
      .hero h1 {
        font-size: clamp(2.2rem, 10vw, 3.3rem);
        line-height: 1.08;
      }
      .hero-subtitle {
        padding-bottom: 8px;
      }
      .hero .lead {
        line-height: 1.7;
      }
      .hero-actions {
        margin-top: 18px;
      }
      .hero-actions .btn {
        min-height: 44px;
        padding: 9px 16px;
      }
      .privacy-note {
        margin-top: 14px;
        padding: 10px 12px;
        line-height: 1.62;
      }
    }


    /* ==========================================================
       Aurora Therapy Theme - Turquoise to Purple
       نسخه کامل پیشنهادی ChatGPT برای سایت دکتر حدیث مرادی
       این بخش در انتهای CSS آمده تا روی رنگ‌های قبلی سایت اعمال شود.
       ========================================================== */
    :root {
      --bg: #eefcff;
      --bg-2: #fbf7ff;
      --surface: rgba(255, 255, 255, .74);
      --surface-solid: #ffffff;
      --surface-strong: rgba(255, 255, 255, .92);
      --text: #2c2a35;
      --text-muted: #6d687d;
      --heading: #211b34;
      --accent: #48c6c8;
      --accent-strong: #6b4cc2;
      --accent-soft: rgba(72, 198, 200, .16);
      --gold: #d7b46a;
      --rose: #e9b7d2;
      --lavender: #bda7f2;
      --sky: #9be7ef;
      --border: rgba(107, 76, 194, .18);
      --on-accent: #ffffff;
      --focus: #7c5cff;
      --danger: #b84a62;
      --success: #27806f;
      --shadow: 0 28px 90px rgba(69, 55, 128, .16);
      --shadow-soft: 0 16px 48px rgba(69, 55, 128, .10);
      --glow-a: rgba(72, 198, 200, .34);
      --glow-b: rgba(189, 167, 242, .30);
      --glow-c: rgba(215, 180, 106, .20);
      --glass-stroke: rgba(255,255,255,.58);
    }

    body[data-theme="dark"],
    [data-theme="dark"] {
      --bg: #101421;
      --bg-2: #181428;
      --surface: rgba(27, 30, 47, .72);
      --surface-solid: #191b2d;
      --surface-strong: rgba(31, 34, 55, .90);
      --text: #f3eefc;
      --text-muted: #c9c1dc;
      --heading: #ffffff;
      --accent: #64d9db;
      --accent-strong: #c3b1ff;
      --accent-soft: rgba(100, 217, 219, .13);
      --gold: #e3c477;
      --rose: #db91bd;
      --lavender: #a993f0;
      --sky: #7ee6ef;
      --border: rgba(195, 177, 255, .17);
      --on-accent: #111421;
      --focus: #d7c7ff;
      --danger: #ff9ab2;
      --success: #90ead9;
      --shadow: 0 30px 96px rgba(0,0,0,.44);
      --shadow-soft: 0 18px 52px rgba(0,0,0,.32);
      --glow-a: rgba(100, 217, 219, .22);
      --glow-b: rgba(169, 147, 240, .18);
      --glow-c: rgba(227, 196, 119, .12);
      --glass-stroke: rgba(255,255,255,.13);
    }

    body {
      background:
        radial-gradient(circle at 8% 9%, color-mix(in srgb, var(--lavender) 34%, transparent), transparent 31%),
        radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--sky) 38%, transparent), transparent 32%),
        radial-gradient(circle at 70% 83%, color-mix(in srgb, var(--rose) 25%, transparent), transparent 35%),
        linear-gradient(135deg, var(--bg), var(--bg-2) 50%, color-mix(in srgb, var(--accent) 12%, var(--bg-2)));
      background-attachment: fixed;
    }

    body::before {
      background: linear-gradient(135deg, var(--lavender), var(--rose));
      opacity: .28;
    }

    body::after {
      background: linear-gradient(135deg, var(--accent), var(--accent-strong));
      opacity: .30;
    }

    .header-shell,
    .mobile-panel,
    .card,
    .form-card,
    .faq-item,
    .contact-link,
    .hero-content,
    .image-shell,
    .floating-card,
    .privacy-note {
      border-color: color-mix(in srgb, var(--accent-strong) 24%, transparent);
      box-shadow: var(--shadow-soft);
    }

    .header-shell {
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--surface-strong) 92%, transparent), color-mix(in srgb, var(--accent-soft) 64%, transparent));
    }

    .nav-link:hover,
    .nav-link.active,
    .contact-link:hover,
    .icon-btn:hover {
      background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--lavender) 18%, transparent));
      color: var(--heading);
    }

    .nav-link.active::after,
    .hero-subtitle::after {
      background: linear-gradient(90deg, var(--accent), var(--accent-strong), var(--lavender), transparent);
    }

    .section-kicker,
    .hero-badge,
    .pill,
    .meta-row span,
    .micro-note,
    .status,
    .faq-question .plus,
    .trust-card .icon,
    .service-icon,
    .social-icon,
    .privacy-note .lock {
      background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, transparent), color-mix(in srgb, var(--lavender) 18%, transparent));
      color: var(--accent-strong);
    }

    .section-kicker::before,
    .hero-badge::before {
      background: linear-gradient(135deg, var(--accent), var(--accent-strong), var(--lavender));
      box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 52%, transparent);
    }

    .btn.primary,
    .chat-bubble.user {
      color: #fff;
      background: linear-gradient(135deg, var(--accent-strong) 0%, var(--accent) 55%, var(--gold) 100%);
      box-shadow: 0 20px 46px rgba(20, 89, 90, .26);
    }

    .btn.primary:hover {
      box-shadow: 0 26px 58px rgba(20, 89, 90, .34);
    }

    .hero::before {
      background:
        linear-gradient(145deg, rgba(255,255,255,.46), rgba(255,255,255,.08)),
        radial-gradient(circle at 15% 16%, color-mix(in srgb, var(--sky) 42%, transparent), transparent 34%),
        radial-gradient(circle at 82% 22%, color-mix(in srgb, var(--lavender) 46%, transparent), transparent 36%),
        radial-gradient(circle at 55% 88%, color-mix(in srgb, var(--rose) 26%, transparent), transparent 38%);
    }

    .hero h1 {
      background: linear-gradient(135deg, var(--heading) 8%, var(--accent-strong) 42%, var(--accent) 76%, var(--gold) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      text-shadow: 0 18px 44px rgba(20, 89, 90, .12);
    }

    body[data-theme="dark"] .hero h1,
    [data-theme="dark"] .hero h1 {
      background: linear-gradient(135deg, #ffffff 6%, var(--accent) 42%, var(--accent-strong) 78%, var(--gold) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hero-content {
      background:
        linear-gradient(145deg, color-mix(in srgb, var(--surface-strong) 88%, transparent), color-mix(in srgb, var(--surface) 66%, transparent)),
        radial-gradient(circle at 10% 12%, color-mix(in srgb, var(--sky) 20%, transparent), transparent 30%),
        radial-gradient(circle at 88% 84%, color-mix(in srgb, var(--lavender) 18%, transparent), transparent 34%);
    }

    .hero-visual::before {
      background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 28%, transparent), color-mix(in srgb, var(--lavender) 26%, transparent));
    }

    .image-shell::after,
    .hero-image::after {
      background:
        linear-gradient(180deg, rgba(16,20,33,.00), rgba(16,20,33,.22)),
        radial-gradient(circle at 75% 18%, rgba(255,255,255,.30), transparent 25%),
        linear-gradient(120deg, transparent 0 35%, rgba(255,255,255,.17) 48%, transparent 62%);
      background-size: auto, auto, 260% 100%;
    }

    .clip-cover {
      background:
        radial-gradient(circle at 28% 20%, color-mix(in srgb, var(--lavender) 42%, transparent), transparent 36%),
        radial-gradient(circle at 76% 58%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 38%),
        linear-gradient(135deg, var(--surface-strong), var(--surface-solid));
    }

    input:focus,
    select:focus,
    textarea:focus {
      border-color: var(--focus);
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 18%, transparent);
    }

    .card:hover {
      border-color: color-mix(in srgb, var(--accent-strong) 42%, var(--border));
      box-shadow: var(--shadow);
    }

    .ambient-glow.glow-a { background: var(--glow-a); }
    .ambient-glow.glow-b { background: var(--glow-b); }
    .ambient-glow.glow-c { background: var(--glow-c); }

    .site-footer {
      background:
        linear-gradient(180deg, transparent, color-mix(in srgb, var(--surface-solid) 72%, transparent)),
        radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--lavender) 18%, transparent), transparent 46%);
    }

.form-grid-spaced{margin-top:16px}
.social-card-title{margin-top:14px}
.testimonial-quote{margin-top:10px}
.slot-suggestion{min-height:34px;padding:6px 10px;margin:3px}

/* Article pages and in-article images */
.article-section{padding-top:calc(var(--header-h) + clamp(42px, 7vw, 88px))}
.article-container{max-width:1040px}
.article-card{padding:clamp(18px, 3vw, 34px)}
.article-cover{width:min(100%,920px);min-height:0;aspect-ratio:16/8.5;margin:0 auto clamp(24px,4vw,42px);border-radius:30px}
.article-cover img{width:100%;height:100%;max-height:430px;object-fit:cover;border-radius:30px}
.article-content{display:grid;gap:18px}.article-content h1{font-size:clamp(2.15rem, 5vw, 4rem);max-width:900px}.article-content h2{font-size:clamp(1.45rem, 3vw, 2.25rem);margin-top:12px}.article-content p{font-size:1.04rem}.article-content .lead{max-width:880px}
.article-meta{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 8px}.article-meta span{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text-muted);font-size:.92rem}
.article-figure{width:min(100%,820px);margin:clamp(22px,4vw,38px) auto;border-radius:var(--radius-md);overflow:hidden;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-soft)}
.article-figure img{width:100%;display:block;object-fit:cover;max-height:380px;border-radius:var(--radius-md)}
.article-figure figcaption{padding:10px 14px;color:var(--text-muted);font-size:.95rem;text-align:center;background:color-mix(in srgb, var(--surface-solid) 72%, transparent)}
.article-figure.is-broken{display:none}.article-figure-small{max-width:720px;margin-left:auto;margin-right:auto}.article-note{padding:16px 18px;border-radius:var(--radius-sm);background:var(--accent-soft);border:1px solid var(--border);color:var(--text-muted)}
.article-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
@media(max-width:640px){.article-card{padding:14px}.article-content{gap:14px}.article-actions .btn{width:100%;justify-content:center}.article-meta span{width:100%;justify-content:center}}

/* Podcast audio player */
.podcast-card .podcast-audio{
  width:100%;
  min-height:42px;
  border-radius:14px;
  background:rgba(255,255,255,.72);
  box-shadow:inset 0 0 0 1px rgba(80,66,50,.10);
}
.podcast-card .podcast-play:disabled{
  cursor:not-allowed;
  opacity:.62;
  filter:saturate(.65);
}
.podcast-empty{
  border:1px dashed rgba(80,66,50,.24);
  border-radius:14px;
  padding:10px 12px;
  background:rgba(255,255,255,.48);
}

/* Localized calendar picker: Persian Jalali for FA and Gregorian for EN. */
.calendar-hidden-input{display:none!important}
.cal-picker{position:relative;width:100%}
.cal-picker-inline{z-index:50}
.cal-picker-popover.cal-picker-popover-inline{position:absolute;top:calc(100% + 8px);left:0;right:0;width:100%;max-height:min(72vh,540px);overflow:auto}
.cal-picker-always-open{display:grid;gap:10px}
.cal-picker-always-open .cal-picker-popover.cal-picker-popover-inline{position:static;top:auto;left:auto;right:auto;width:100%;max-height:none;overflow:visible;margin-top:2px}
.cal-picker-always-open .cal-picker-trigger-input{background:color-mix(in srgb,var(--accent-soft) 34%,var(--surface-strong));border-color:color-mix(in srgb,var(--accent-strong) 34%,var(--border));color:var(--heading)}
.booking-date-slots{border:1px solid color-mix(in srgb,var(--accent-strong) 24%,var(--border));background:color-mix(in srgb,var(--accent-soft) 86%,var(--surface-strong));font-weight:850}
.booking-date-slots .slot-suggestion{display:inline-flex;width:auto;margin:4px;min-height:34px;padding:6px 10px}
.cal-picker-trigger{width:100%;min-height:52px;border:1px solid var(--border);border-radius:18px;background:rgba(255,255,255,.72);color:var(--text);padding:12px 14px;text-align:inherit;font-weight:800;box-shadow:none;display:flex;align-items:center;justify-content:space-between;gap:10px}
.cal-picker-trigger::after{content:"▾";font-size:.85rem;color:var(--accent-strong)}
.cal-picker-trigger:hover{transform:none;background:var(--surface-strong)}
.cal-picker-input-wrapper{position:relative}
.cal-picker-input-wrapper::after{content:"▾";position:absolute;inset-inline-end:14px;top:17px;color:var(--accent-strong);font-size:.85rem;pointer-events:none}
.cal-picker-trigger-input{display:block;cursor:pointer;padding-inline-end:38px;caret-color:transparent}
.cal-picker-trigger-input::after{content:none}
.cal-picker-trigger-input:focus{outline:2px solid color-mix(in srgb,var(--accent-strong) 34%,transparent);outline-offset:2px;background:var(--surface-strong)}
.cal-picker-popover{position:fixed;z-index:10000;top:0;left:0;width:min(390px,calc(100vw - 20px));max-height:min(78vh,540px);overflow:auto;box-sizing:border-box;padding:14px;border:1px solid var(--border);border-radius:22px;background:var(--surface-solid);box-shadow:var(--shadow);backdrop-filter:blur(20px)}
.cal-picker-head{display:grid;grid-template-columns:42px 1fr 42px;align-items:center;gap:8px;margin-bottom:10px;text-align:center}.cal-picker-head strong{font-size:.98rem;color:var(--heading)}
.cal-nav,.cal-text-btn{border:1px solid var(--border);box-shadow:none;background:rgba(255,255,255,.74);color:var(--text);border-radius:14px;padding:8px;width:auto}.cal-nav:hover,.cal-text-btn:hover{transform:none;background:var(--accent-soft)}
.cal-weekdays,.cal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.cal-weekdays span{text-align:center;color:var(--text-muted);font-size:.78rem;font-weight:900;padding:4px 0}.cal-day,.cal-day-empty{min-height:44px;border-radius:14px}.cal-day{border:1px solid transparent;background:rgba(255,255,255,.68);color:var(--text);box-shadow:none;padding:5px 3px;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;line-height:1.25}.cal-day:hover{transform:none;border-color:var(--border);background:var(--accent-soft)}.cal-day.is-today{border-color:var(--gold)}.cal-day.is-selected{background:linear-gradient(135deg,var(--accent),var(--accent-strong));color:var(--on-accent);border-color:transparent}.cal-day-main{font-weight:900}.cal-day-sub{font-size:.66rem;white-space:nowrap;opacity:.78}.cal-picker-foot{display:flex;gap:8px;margin-top:10px;justify-content:space-between}.cal-text-btn{font-size:.84rem;font-weight:800}
@media(max-width:520px){.cal-picker-popover{width:calc(100vw - 20px)!important;max-height:78vh}.cal-day,.cal-day-empty{min-height:42px}.cal-day-sub{font-size:.6rem}}
.article-cover[data-article-image-position="after_title"],
.article-cover[data-article-image-position="after_summary"]{margin-top:clamp(16px,3vw,28px)}

.empty-state{grid-column:1/-1;text-align:center;color:var(--muted);padding:24px!important}
.empty-state p{margin:0;font-weight:800}


/* Public consultation schedule and visible booking calendar */
.booking-calendar-panel{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(18px,3vw,30px);
  margin:0 0 clamp(22px,4vw,36px);
  align-items:stretch;
}
.consultation-times-card,
.consultation-calendar-card{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--surface);
  backdrop-filter:blur(22px);
  box-shadow:var(--shadow-soft);
  padding:clamp(18px,3vw,28px);
}
.booking-schedule-field{margin-top:2px}
.consultation-times-card-inline{background:color-mix(in srgb,var(--surface-strong) 82%,transparent);box-shadow:var(--shadow-soft);padding:clamp(16px,2.4vw,24px)}
.consultation-times-card p{color:var(--text-muted);margin-top:8px}
.consultation-weekly-hours{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px}
.consultation-weekday{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:16px;
  background:color-mix(in srgb,var(--surface-strong) 78%,transparent);
}
.consultation-weekday strong{color:var(--heading)}
.consultation-weekday span{font-weight:850;color:var(--text-muted);text-align:end}
.consultation-weekday.is-closed{opacity:.68;background:color-mix(in srgb,var(--surface) 72%,transparent)}
.consultation-calendar-head{display:grid;grid-template-columns:44px 1fr 44px;gap:10px;align-items:center;text-align:center;margin-bottom:12px}
.consultation-calendar-head strong{font-size:1.02rem;color:var(--heading)}
.consultation-calendar-head .btn{min-height:40px;padding:8px 10px;width:44px;justify-content:center}
.consultation-calendar-weekdays,.consultation-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.consultation-calendar-weekdays span{text-align:center;color:var(--text-muted);font-size:.76rem;font-weight:900;padding:4px 0}
.consultation-day,.consultation-day-empty{
  min-height:54px;
  border-radius:15px;
}
.consultation-day{
  border:1px solid var(--border);
  background:rgba(255,255,255,.66);
  color:var(--text);
  box-shadow:none;
  padding:6px 3px;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  line-height:1.22;
}
.consultation-day:hover{transform:none;background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent-strong) 42%,var(--border))}
.consultation-day.is-today{border-color:var(--gold)}
.consultation-day.is-open::after{content:"";width:6px;height:6px;border-radius:999px;background:var(--success);margin-top:2px}
.consultation-day.is-closed{opacity:.55;background:color-mix(in srgb,var(--surface) 72%,transparent)}
.consultation-day.is-selected{background:linear-gradient(135deg,var(--accent),var(--accent-strong));color:var(--on-accent);border-color:transparent;opacity:1}
.consultation-day-main{font-weight:950}
.consultation-day-sub{font-size:.64rem;white-space:nowrap;opacity:.78}
.consultation-calendar-legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;color:var(--text-muted);font-weight:800;font-size:.88rem}
.consultation-calendar-legend span{display:inline-flex;gap:6px;align-items:center}
.legend-dot{width:9px;height:9px;border-radius:999px;display:inline-flex;background:var(--text-muted)}
.legend-dot.open{background:var(--success)}
.legend-dot.closed{background:color-mix(in srgb,var(--danger) 70%,var(--text-muted))}
.consultation-day-slots{margin-top:14px;padding:12px 14px;border-radius:17px;background:var(--accent-soft);color:var(--text);font-weight:800}
.consultation-day-slots .slot-suggestion{display:inline-flex;width:auto;margin:4px;min-height:34px;padding:6px 10px}
.consultation-day-slots .slot-suggestion.is-disabled{opacity:.5;text-decoration:line-through;pointer-events:none}
@media(max-width:980px){.booking-calendar-panel{grid-template-columns:1fr}.consultation-weekly-hours{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.consultation-weekly-hours{grid-template-columns:1fr}.consultation-day,.consultation-day-empty{min-height:46px}.consultation-day-sub{display:none}.consultation-calendar-head{grid-template-columns:40px 1fr 40px}.consultation-calendar-head .btn{width:40px}}

/* Booking time selector: free doctor slots only, no manual time typing. */
.booking-time-field{position:relative}
.time-picker-trigger{width:100%;min-height:52px;border:1px solid var(--border);border-radius:18px;background:rgba(255,255,255,.72);color:var(--text);padding:12px 38px 12px 14px;text-align:inherit;font-weight:800;box-shadow:none;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer}
html[dir="rtl"] .time-picker-trigger{padding:12px 14px 12px 38px}
.time-picker-trigger::after{content:"▾";position:absolute;inset-inline-end:14px;color:var(--accent-strong);font-size:.85rem;pointer-events:none}
.time-picker-trigger:hover:not(:disabled),.time-picker-trigger:focus-visible{transform:none;background:var(--surface-strong);border-color:var(--focus);box-shadow:0 0 0 4px color-mix(in srgb,var(--focus) 18%,transparent);outline:none}
.time-picker-trigger:disabled{cursor:not-allowed;opacity:.72;color:var(--text-muted)}
.time-picker-trigger.has-value{border-color:color-mix(in srgb,var(--accent-strong) 46%,var(--border));background:color-mix(in srgb,var(--accent-soft) 78%,var(--surface-strong))}
.booking-time-slots{margin-top:10px;border:1px solid color-mix(in srgb,var(--accent-strong) 24%,var(--border));border-radius:18px;background:color-mix(in srgb,var(--accent-soft) 86%,var(--surface-strong));padding:12px;box-shadow:var(--shadow-soft)}
.booking-time-slots[hidden]{display:none!important}
.booking-time-slots-title{font-weight:900;margin-bottom:8px;color:var(--heading)}
.booking-time-slot-list{display:flex;flex-wrap:wrap;gap:6px}
.booking-time-slot-list .slot-suggestion{display:inline-flex;width:auto;margin:0;min-height:36px;padding:7px 12px}
.booking-time-slot-list .slot-suggestion.is-selected{background:linear-gradient(135deg,var(--accent),var(--accent-strong));color:var(--on-accent);border-color:transparent}

/* Booking date/time theme correction: keep calendar and free-time selector in the same warm site palette, not neutral grey. */
.cal-picker-trigger,
.cal-picker-trigger-input,
.time-picker-trigger{
  position:relative;
  border-color:var(--border);
  background:color-mix(in srgb,var(--surface-strong) 84%,var(--bg-2));
  color:var(--text);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--surface-strong) 78%,transparent);
}
.cal-picker-trigger:hover,
.cal-picker-trigger-input:hover,
.time-picker-trigger:hover:not(:disabled),
.cal-picker-trigger-input:focus,
.time-picker-trigger:focus-visible{
  background:var(--surface-strong);
  border-color:var(--focus);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--focus) 18%,transparent);
}
.cal-picker-trigger::after,
.cal-picker-input-wrapper::after,
.time-picker-trigger::after{
  color:var(--accent-strong);
}
.time-picker-trigger:disabled{
  opacity:1;
  color:color-mix(in srgb,var(--accent-strong) 72%,var(--text-muted));
  background:color-mix(in srgb,var(--accent-soft) 28%,var(--surface-strong));
}
.time-picker-trigger.has-value,
.cal-picker-trigger-input:not(:placeholder-shown){
  background:color-mix(in srgb,var(--accent-soft) 38%,var(--surface-strong));
  border-color:color-mix(in srgb,var(--accent-strong) 46%,var(--border));
  color:var(--heading);
}
.cal-picker-popover{
  background:linear-gradient(180deg,var(--surface-solid),color-mix(in srgb,var(--bg-2) 72%,var(--surface-solid)));
  border-color:color-mix(in srgb,var(--accent-strong) 28%,var(--border));
  backdrop-filter:none;
}
.cal-nav,
.cal-text-btn,
.cal-day{
  background:color-mix(in srgb,var(--surface-strong) 86%,var(--bg-2));
  color:var(--text);
}
.cal-nav:hover,
.cal-text-btn:hover,
.cal-day:hover{
  background:color-mix(in srgb,var(--accent-soft) 56%,var(--surface-strong));
  border-color:color-mix(in srgb,var(--accent-strong) 36%,var(--border));
}
.cal-weekdays span,
.cal-day-sub{
  color:color-mix(in srgb,var(--accent-strong) 72%,var(--text-muted));
}
.cal-day.is-today{
  background:color-mix(in srgb,var(--gold) 16%,var(--surface-strong));
  border-color:var(--gold);
}
.cal-day.is-selected{
  background:linear-gradient(135deg,var(--accent),var(--accent-strong));
  color:var(--on-accent);
  border-color:transparent;
}
.booking-time-slots,
.booking-date-slots{
  background:color-mix(in srgb,var(--accent-soft) 42%,var(--surface-strong));
  border-color:color-mix(in srgb,var(--accent-strong) 28%,var(--border));
  box-shadow:var(--shadow-soft);
}
.booking-time-slot-list .slot-suggestion{
  background:color-mix(in srgb,var(--surface-strong) 88%,var(--bg-2));
  border-color:var(--border);
  color:var(--text);
}
.booking-time-slot-list .slot-suggestion:hover{
  background:color-mix(in srgb,var(--accent-soft) 58%,var(--surface-strong));
  border-color:color-mix(in srgb,var(--accent-strong) 38%,var(--border));
}
.booking-time-slot-list .slot-suggestion.is-selected{
  background:linear-gradient(135deg,var(--accent),var(--accent-strong));
  color:var(--on-accent);
  border-color:transparent;
}
[data-theme="dark"] .cal-picker-trigger,
[data-theme="dark"] .cal-picker-trigger-input,
[data-theme="dark"] .time-picker-trigger,
[data-theme="dark"] .cal-nav,
[data-theme="dark"] .cal-text-btn,
[data-theme="dark"] .cal-day,
[data-theme="dark"] .booking-time-slot-list .slot-suggestion{
  background:color-mix(in srgb,var(--surface-strong) 82%,var(--bg-2));
}
[data-theme="dark"] .cal-picker-popover{
  background:linear-gradient(180deg,var(--surface-solid),color-mix(in srgb,var(--bg-2) 78%,var(--surface-solid)));
}

/* SEO/landing links added for the consultation and course landing pages */
.section-extra-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px}

/* Article content enhancement and accessibility: inline photos, key points, sources and CTA */
:root{
  --article-readable-bg:#fffdf8;
  --article-readable-bg-soft:#f7efe6;
  --article-readable-bg-strong:#ffffff;
  --article-readable-text:#2f2b28;
  --article-readable-muted:#4f463f;
  --article-readable-border:rgba(82,70,57,.24);
  --article-readable-link:#436b5c;
  --article-readable-shadow:0 18px 48px rgba(75,54,44,.10);
}
body[data-theme="dark"],
[data-theme="dark"]{
  --article-readable-bg:#1c2135;
  --article-readable-bg-soft:#242a43;
  --article-readable-bg-strong:#171b2c;
  --article-readable-text:#fffaf1;
  --article-readable-muted:#e4dceb;
  --article-readable-border:rgba(215,199,255,.30);
  --article-readable-link:#bfeeea;
  --article-readable-shadow:0 20px 56px rgba(0,0,0,.34);
}
.article-article{
  color:var(--article-readable-text);
  background:linear-gradient(145deg,var(--article-readable-bg),var(--article-readable-bg-strong));
  border-color:var(--article-readable-border);
}
.article-article .lead,
.article-content,
.article-content p,
.article-content li,
.article-content blockquote,
.article-content .article-sources,
.article-content .article-sources li,
.article-content .article-cta-box p{
  color:var(--article-readable-muted);
}
.article-article h1,
.article-content h2,
.article-content h3,
.article-content strong,
.article-content .article-keypoints strong,
.article-content .article-note strong,
.article-content .article-cta-box h2{
  color:var(--article-readable-text);
}
.article-content a:not(.btn){
  color:var(--article-readable-link);
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:5px;
}
.article-content .article-keypoints,
.article-content .article-note,
.article-content .article-cta-box,
.article-content .article-sources,
.article-content blockquote{
  color:var(--article-readable-muted);
  background:linear-gradient(135deg,var(--article-readable-bg),var(--article-readable-bg-soft));
  border:1px solid var(--article-readable-border);
  border-radius:28px;
  box-shadow:var(--article-readable-shadow);
}
.article-content .article-keypoints,
.article-content .article-note,
.article-content .article-cta-box{
  padding:clamp(18px,3vw,28px);
}
.article-content .article-keypoints strong,
.article-content .article-note strong{display:block;margin-bottom:10px;font-size:1.05rem}
.article-content .article-keypoints ul{margin:0;padding-inline-start:22px}
.article-content .article-inline-photo{width:min(100%,760px);margin:clamp(22px,4vw,38px) auto;overflow:hidden;border-radius:30px;background:var(--article-readable-bg);border:1px solid var(--article-readable-border);box-shadow:var(--article-readable-shadow)}
.article-content .article-inline-photo--small{width:min(100%,560px)}
.article-content .article-inline-photo--wide{width:min(100%,920px)}
.article-content .article-inline-photo img{display:block;width:100%;height:auto;aspect-ratio:16/9;max-height:360px;object-fit:cover}
.article-content .article-inline-photo figcaption{padding:13px 18px;color:var(--article-readable-muted);font-size:.93rem;line-height:1.9;background:var(--article-readable-bg-soft)}
.article-content .article-cta-box{display:grid;gap:12px;margin-top:clamp(24px,4vw,42px)}
.article-content .article-cta-box h2{margin:0;font-size:clamp(1.35rem,2.5vw,2rem)}
.article-content .article-cta-box p{margin:0;max-width:760px}
.article-content .article-sources{display:grid;gap:10px;font-size:.96rem;padding:clamp(16px,2.6vw,24px)}
.article-content blockquote{padding:clamp(16px,2.6vw,24px)}
.article-content h3{font-size:1.15rem;margin-top:10px}
.article-content ol{display:grid;gap:10px;padding-inline-start:24px}
.article-content ol li{line-height:2}
.article-figure{background:var(--article-readable-bg);border-color:var(--article-readable-border);box-shadow:var(--article-readable-shadow)}
.article-figure img{height:auto;object-fit:cover}
.article-figure figcaption{color:var(--article-readable-muted);background:var(--article-readable-bg-soft)}
@media(max-width:640px){.article-cover{border-radius:22px;aspect-ratio:16/10}.article-cover img{border-radius:22px;max-height:300px}.article-content .article-inline-photo{border-radius:22px;width:100%}.article-content .article-inline-photo img{max-height:260px}.article-content .article-keypoints,.article-content .article-note,.article-content .article-cta-box,.article-content .article-sources,.article-content blockquote{border-radius:22px;padding:16px}.article-content .article-inline-photo figcaption{font-size:.88rem}}

/* Admin-controlled article font sizes */
.article-article h1{font-size:var(--article-title-font-size,clamp(2.15rem,5vw,4rem))}
.article-article .article-content,
.article-article .article-content p,
.article-article .article-content li{font-size:var(--article-body-font-size,1.04rem)}

/* Public content list and course landing details */
.section-footer {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}
.card-title-link {
  color: inherit;
  text-decoration: none;
}
.card-title-link:hover { color: var(--accent-strong); }
.card-actions {
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.content-list-page,
.course-detail-page {
  min-height: 100vh;
  background: var(--bg);
}
.content-list-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 22px;
  margin-bottom: 22px;
}
.content-list-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.content-list-grid .media-card {
  min-height: 420px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.content-list-grid .media-body { flex: 1; }
.empty-state { grid-column: 1 / -1; }

/* --- Refined article list cards (articles.html) --- */
body[data-content="articles"] .content-list-grid,
.content-list-grid:has(.article-list-card) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 22px);
}
.article-list-card {
  overflow: hidden;
  border-radius: var(--radius-lg, 24px);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.article-list-card .media-thumb-link {
  display: block;
  position: relative;
}
.article-list-card .media-thumb {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.article-list-card .media-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.article-list-card:hover .media-thumb img { transform: scale(1.05); }
.article-card-chip {
  position: absolute;
  inset-inline-start: 12px;
  inset-block-start: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  color: #fff;
  background: color-mix(in srgb, var(--accent, #527265) 88%, transparent);
  backdrop-filter: blur(4px);
  box-shadow: 0 6px 16px rgba(40, 60, 50, .22);
}
.article-list-card .media-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(14px, 1.8vw, 20px);
}
.article-list-card .article-card-meta span {
  color: var(--text-muted);
  font-size: .82rem;
}
.article-list-card h3 { margin: 0; line-height: 1.5; }
.article-list-card h3 a { font-size: clamp(1.02rem, 1.5vw, 1.18rem); }
.article-list-card .media-body p {
  color: var(--text-muted);
  line-height: 1.9;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-list-card .article-card-cta { margin-top: auto; align-self: flex-start; }
[data-theme="dark"] .article-card-chip {
  background: color-mix(in srgb, var(--accent, #7aa694) 82%, #10201a);
}
@media (max-width: 900px) {
  .content-list-grid:has(.article-list-card) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .content-list-grid:has(.article-list-card) { grid-template-columns: 1fr; }
}
.course-detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: 28px;
  align-items: stretch;
  margin-bottom: 24px;
}
.course-detail-image {
  min-height: 360px;
  border-radius: var(--radius-lg);
}
.course-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.course-detail-card h2 { margin-bottom: 10px; }
.course-detail-card p { margin: 0; line-height: 2; }
.course-detail-list {
  margin: 0;
  padding-inline-start: 20px;
  line-height: 2;
}
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: .94rem;
}
.breadcrumb a { color: var(--accent-strong); text-decoration: none; }

@media (max-width: 980px) {
  .content-list-hero { align-items: flex-start; flex-direction: column; }
  .content-list-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .course-detail-hero,
  .course-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .content-list-grid { grid-template-columns: 1fr; }
  .content-list-grid .media-card { min-height: 380px; }
  .course-detail-image { min-height: 280px; }
}

/* Targeted course/seminar card layout refinement */
.course-list-panel {
  min-width: 0;
}
.course-list-panel .section-footer {
  margin-top: 18px;
}
.course-grid {
  --public-card-row-min: 360px;
}
.course-grid .course-compact-card,
.content-list-grid .course-compact-card {
  min-height: 360px;
}
.course-compact-card .media-body {
  gap: 9px;
}
.course-summary-list {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 18px;
  background: var(--accent-soft);
}
.course-summary-list p {
  margin: 0;
  color: var(--text);
  font-size: .92rem;
  line-height: 1.75;
}
.course-short-description {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.course-compact-card .card-actions {
  margin-top: auto;
}
@media (max-width: 980px) {
  .course-grid { --public-card-row-min: 360px; }
}
@media (max-width: 680px) {
  .course-grid { --public-card-row-min: 350px; }
  .course-grid .course-compact-card,
  .content-list-grid .course-compact-card { min-height: 350px; }
}

/* Targeted update: home content sections now show one normal row without internal scrollbars. */
.podcast-grid,
.clip-grid,
.article-grid,
.course-grid {
  max-height: none;
  overflow: visible;
  overscroll-behavior: auto;
  scrollbar-gutter: auto;
  scrollbar-width: auto;
  padding: 0;
  margin-inline-end: 0;
}
.podcast-grid::-webkit-scrollbar,
.clip-grid::-webkit-scrollbar,
.article-grid::-webkit-scrollbar,
.course-grid::-webkit-scrollbar {
  display: none;
}

/* Course detail landing refinement: dedicated course page with intro video and course-specific registration. */
.course-area-cards-only {
  grid-template-columns: 1fr;
}
.content-list-page[data-content-kind="courses"] #list-title {
  font-size: clamp(1.55rem, 2.5vw, 2.25rem);
  line-height: 1.35;
  letter-spacing: -0.015em;
}
.content-list-hero h1 {
  font-size: clamp(1.65rem, 2.8vw, 2.55rem);
  line-height: 1.35;
}
.course-detail-hero.card {
  padding: clamp(22px, 3vw, 34px);
}
.course-detail-hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.course-detail-hero h1 {
  font-size: clamp(2rem, 4vw, 4.25rem);
  line-height: 1.18;
  margin-bottom: 14px;
}
.course-hero-meta span {
  background: var(--accent-soft);
  border: 1px solid var(--border);
}
.course-landing-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: clamp(18px, 3vw, 30px);
  align-items: start;
}
.course-main-content {
  display: grid;
  gap: 16px;
  min-width: 0;
}
.course-side-content {
  display: grid;
  gap: 16px;
  position: sticky;
  top: calc(var(--header-h) + 18px);
}
.course-detail-card {
  padding: clamp(20px, 2.6vw, 30px);
}
.course-detail-card h2,
.course-side-head h2 {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.45;
}
.course-side-head {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}
.course-side-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.9;
}
.course-video-box,
.course-registration-box {
  padding: clamp(18px, 2.2vw, 24px);
}
.course-intro-video {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 24px;
  border: 1px solid var(--border);
  background: #000;
  box-shadow: var(--shadow-soft);
}
.course-video-placeholder {
  min-height: 220px;
  display: grid;
  place-items: center;
  gap: 12px;
  text-align: center;
  padding: 24px;
  border-radius: 24px;
  border: 1px dashed var(--border);
  background: var(--accent-soft);
  color: var(--muted);
}
.course-registration-box form,
.course-auth-actions {
  display: grid;
  gap: 14px;
}
.course-registration-box .btn {
  width: 100%;
}
.course-auth-actions .mini-link {
  justify-self: center;
  text-align: center;
}
.course-auth-note {
  margin: 16px 0 0;
  color: var(--muted);
  line-height: 1.9;
  font-size: .95rem;
}
.course-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.course-info-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: var(--accent-soft);
  border: 1px solid var(--border);
  line-height: 1.8;
}
.course-info-row span {
  color: var(--muted);
}
.course-info-row strong {
  color: var(--heading);
  text-align: end;
}
@media (max-width: 980px) {
  .course-landing-layout {
    grid-template-columns: 1fr;
  }
  .course-side-content {
    position: static;
  }
}
@media (max-width: 680px) {
  .course-info-grid {
    grid-template-columns: 1fr;
  }
  .course-detail-hero h1 {
    font-size: clamp(1.8rem, 10vw, 2.55rem);
  }
  .course-video-placeholder {
    min-height: 180px;
  }
}

/* Performance pass: keep heavy course media idle until the user explicitly starts playback. */
.course-video-lazy {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  background: var(--accent-soft);
  color: #fff;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  text-align: center;
  font: inherit;
}
.course-video-lazy:hover,
.course-video-lazy:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
}
.course-video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.course-video-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(17, 26, 30, .24), rgba(17, 26, 30, .46));
}
.course-video-play,
.course-video-label {
  position: relative;
  z-index: 1;
}
.course-video-play {
  width: 58px;
  height: 58px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
  border: 1px solid rgba(255, 255, 255, .42);
  box-shadow: 0 14px 35px rgba(0, 0, 0, .18);
  backdrop-filter: blur(10px);
}
.course-video-box,
.course-registration-box,
.course-detail-card,
.content-list-grid .media-card {
  content-visibility: auto;
  contain-intrinsic-size: 1px 420px;
}
.course-detail-hero {
  contain: layout paint;
}
@media (prefers-reduced-motion: reduce) {
  .course-video-lazy,
  .course-video-lazy:hover,
  .course-video-lazy:focus-visible {
    transform: none;
  }
}

/* ===== Service pathways replacement + dedicated service landing pages ===== */
.service-pathways-section {
  padding-top: clamp(42px, 6vw, 70px);
  padding-bottom: clamp(42px, 6vw, 70px);
}
.compact-head {
  max-width: 920px;
  margin-bottom: 18px;
}
.service-pathways-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.service-path-card {
  min-height: 0;
  padding: 16px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  text-decoration: none;
  color: inherit;
}
.service-path-card .service-icon {
  width: 44px;
  height: 44px;
  border-radius: 17px;
}
.service-icon svg {
  width: 23px;
  height: 23px;
  display: block;
}
.service-card-copy { display: grid; gap: 5px; min-width: 0; }
.service-path-card h3 {
  margin: 0;
  font-size: clamp(.98rem, 1.35vw, 1.12rem);
  line-height: 1.5;
}
.service-path-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: .88rem;
  line-height: 1.9;
}
.service-card-action {
  grid-column: 2;
  justify-self: start;
  margin-top: 2px;
  color: var(--accent-strong);
  font-weight: 950;
  font-size: .86rem;
}
.service-card-action::after { content: " ←"; }

.service-page-main { padding-top: calc(var(--header-h) + 12px); }
.service-hero { padding-top: clamp(42px, 6vw, 78px); }
.service-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, .62fr);
  gap: clamp(22px, 4vw, 46px);
  align-items: stretch;
}
.service-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
  color: var(--text-muted);
  font-weight: 850;
  font-size: .92rem;
}
.service-breadcrumb a { color: var(--accent-strong); text-decoration: none; }
.service-hero h1 { margin-bottom: 16px; }
.service-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.service-summary-card {
  display: grid;
  gap: 14px;
  align-content: start;
}
.service-summary-card .service-icon {
  width: 56px;
  height: 56px;
  border-radius: 20px;
}
.service-summary-card .service-icon svg { width: 30px; height: 30px; }
.service-summary-list {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.service-summary-list li,
.service-sign-list li {
  position: relative;
  padding-inline-start: 22px;
  color: var(--text);
  line-height: 1.9;
}
html[dir="rtl"] .service-summary-list li,
html[dir="rtl"] .service-sign-list li { padding-inline-start: 0; padding-inline-end: 22px; }
.service-summary-list li::before,
.service-sign-list li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent-strong);
  position: absolute;
  inset-inline-start: 0;
  top: .8em;
}
html[dir="rtl"] .service-summary-list li::before,
html[dir="rtl"] .service-sign-list li::before { inset-inline-start: auto; inset-inline-end: 0; }
.service-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.service-detail-grid .card { min-height: 235px; }
.service-detail-grid h2,
.service-detail-grid h3 { margin-bottom: 10px; }
.service-signs-card { grid-column: 1 / -1; }
.service-sign-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.service-video-card {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(18px, 3vw, 30px);
  align-items: center;
}
.service-video-placeholder {
  min-height: 235px;
  border-radius: var(--radius-lg);
  border: 1px dashed color-mix(in srgb, var(--accent-strong) 48%, var(--border));
  background:
    radial-gradient(circle at 28% 24%, var(--accent-soft), transparent 42%),
    linear-gradient(135deg, var(--surface-strong), var(--surface-solid));
  display: grid;
  place-items: center;
  text-align: center;
  padding: 22px;
}
.service-video-play {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: var(--on-accent);
  box-shadow: var(--shadow-soft);
  font-size: 1.35rem;
}
.service-booking-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(20px, 3vw, 34px);
  align-items: start;
}
.service-fixed-service {
  min-height: 48px;
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: color-mix(in srgb, var(--accent-soft) 62%, var(--surface-strong));
  color: var(--heading);
  padding: 12px 14px;
  font-weight: 900;
}
.service-page-footer {
  padding: 30px 0 46px;
  color: var(--text-muted);
  font-weight: 800;
}
.service-page-footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

@media (max-width: 1120px) {
  .service-pathways-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .service-hero-grid,
  .service-video-card,
  .service-booking-grid { grid-template-columns: 1fr; }
  .service-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .service-pathways-section { padding-top: 38px; padding-bottom: 38px; }
  .service-pathways-grid {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding: 2px 0 12px;
  }
  .service-path-card {
    flex: 0 0 min(82vw, 330px);
    scroll-snap-align: start;
  }
  .service-sign-list { grid-template-columns: 1fr; }
  .service-hero-actions .btn { width: 100%; }
}


/* ===== V46 service pathways refinement: course-style cards, larger dedicated icons, bilingual labels ===== */
.service-pathways-section {
  padding-top: clamp(42px, 5.6vw, 68px);
  padding-bottom: clamp(42px, 5.6vw, 68px);
}
.service-pathways-section .section-head {
  max-width: 980px;
}
.service-pathways-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.service-path-card {
  min-height: 178px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  border-radius: 28px;
  background:
    radial-gradient(circle at 20% 12%, color-mix(in srgb, var(--accent-soft) 72%, transparent), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--surface-strong) 94%, transparent), color-mix(in srgb, var(--surface) 72%, transparent));
}
.service-path-card::after {
  content: "";
  position: absolute;
  inset-inline: 18px;
  bottom: 52px;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--border) 88%, transparent), transparent);
  opacity: .75;
  pointer-events: none;
}
.service-path-card .service-icon {
  width: 64px;
  height: 64px;
  border-radius: 23px;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.62), transparent 38%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 80%, transparent), color-mix(in srgb, var(--gold) 20%, transparent));
  color: var(--accent-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 14px 34px rgba(86,70,49,.09);
}
.service-path-card .service-icon svg {
  width: 36px;
  height: 36px;
  display: block;
}
.service-path-card .service-card-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.service-card-eyebrow {
  color: var(--gold);
  font-family: var(--en-font);
  font-size: .72rem;
  line-height: 1.35;
  letter-spacing: .045em;
  text-transform: uppercase;
  font-weight: 900;
}
html[dir="rtl"] .service-card-eyebrow { text-align: right; }
.service-path-card h3 {
  margin: 0;
  color: var(--heading);
  font-size: clamp(1.03rem, 1.45vw, 1.22rem);
  line-height: 1.55;
  font-weight: 950;
}
.service-path-card p { display: none; }
.service-path-card .service-card-action {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 950;
  font-size: .84rem;
}
html[dir="ltr"] .service-card-action::after { content: " →"; }
html[dir="rtl"] .service-card-action::after { content: " ←"; }
.service-path-card:hover .service-icon {
  transform: translateY(-2px) scale(1.04);
  transition: transform .24s ease;
}
.service-page-main .service-hero h1 small {
  display: block;
  margin-top: 8px;
  color: var(--gold);
  font-family: var(--en-font);
  font-size: clamp(1rem, 1.5vw, 1.28rem);
  line-height: 1.5;
  letter-spacing: .035em;
  font-weight: 900;
}
.service-page-main .service-bilingual-note {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--accent-soft);
  color: var(--text);
  font-family: var(--en-font);
  line-height: 1.85;
}
.service-page-main .service-section-intro {
  margin: 0 0 14px;
  color: var(--text-muted);
  line-height: 2;
}
.service-page-main .service-detail-grid .card {
  min-height: 280px;
  padding: clamp(20px, 2.5vw, 28px);
}
.service-page-main .service-detail-grid p {
  line-height: 2.08;
}
.service-page-main .service-video-card {
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr);
}
.service-page-main .service-video-placeholder strong {
  color: var(--heading);
  font-size: 1.05rem;
}
.service-page-main .service-video-placeholder p {
  margin: 4px 0 0;
  color: var(--text-muted);
  line-height: 1.9;
}
.service-page-main .service-video-topics {
  display: grid;
  gap: 8px;
  padding: 0;
  margin: 14px 0 0;
  list-style: none;
}
.service-page-main .service-video-topics li {
  padding: 9px 12px;
  border-radius: 16px;
  background: var(--accent-soft);
  border: 1px solid var(--border);
  line-height: 1.85;
}
@media (max-width: 1120px) {
  .service-pathways-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .service-pathways-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    padding: 0;
  }
  .service-path-card {
    min-height: 166px;
    padding: 15px;
  }
  .service-path-card .service-icon { width: 56px; height: 56px; border-radius: 20px; }
  .service-path-card .service-icon svg { width: 31px; height: 31px; }
}
@media (max-width: 460px) {
  .service-pathways-grid { grid-template-columns: 1fr; }
  .service-path-card { min-height: 150px; }
}

/* V47 service pathways: language-aware icon grid without card boxes */
.service-pathways-section {
  position: relative;
  overflow: hidden;
}

.service-pathways-section .section-head {
  max-width: 760px;
}

.service-pathways-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(110px, 1fr));
  gap: 22px 18px;
  align-items: start;
}

.service-path-logo,
.service-path-logo.card,
.service-path-card.service-path-logo {
  min-height: 0;
  padding: 10px 6px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  display: grid;
  place-items: center;
  gap: 12px;
  text-align: center;
  text-decoration: none;
  color: var(--text);
  isolation: isolate;
}

.service-path-logo::before,
.service-path-logo::after {
  display: none !important;
}

.service-path-logo .service-icon,
.service-summary-card .service-icon {
  --icon-main: #5d63d8;
  --icon-accent: #28b8bc;
  --icon-soft: rgba(93, 99, 216, .13);
  width: 92px;
  height: 92px;
  border-radius: 32px;
  display: inline-grid;
  place-items: center;
  background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--icon-soft) 72%, white 18%), var(--icon-soft));
  box-shadow: 0 18px 42px rgba(66, 72, 101, .12), inset 0 0 0 1px rgba(255,255,255,.7);
  color: var(--icon-main);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.service-path-logo .service-icon svg,
.service-summary-card .service-icon svg {
  width: 66px;
  height: 66px;
  display: block;
}

.service-path-logo h3 {
  margin: 0;
  font-size: clamp(.92rem, .78rem + .28vw, 1.06rem);
  line-height: 1.75;
  font-weight: 900;
  letter-spacing: -.01em;
  color: var(--heading);
}

.service-path-logo:hover .service-icon,
.service-path-logo:focus-visible .service-icon {
  transform: translateY(-7px) scale(1.08);
  box-shadow: 0 26px 62px rgba(66, 72, 101, .18), inset 0 0 0 1px rgba(255,255,255,.8);
  filter: saturate(1.08);
}

.service-path-logo:focus-visible {
  outline: 3px solid rgba(72,198,200,.42);
  outline-offset: 6px;
  border-radius: 28px;
}

.service-path-logo .service-card-copy,
.service-path-logo .service-card-eyebrow,
.service-path-logo .service-card-action,
.service-path-logo p,
.service-path-card .service-card-copy,
.service-path-card .service-card-eyebrow,
.service-path-card .service-card-action,
.service-path-card p {
  display: none !important;
}

.service-icon-individual { --icon-main: #6c5ce7; --icon-accent: #00b8d4; --icon-soft: rgba(108,92,231,.15); }
.service-icon-depression { --icon-main: #3f6ad8; --icon-accent: #7b61ff; --icon-soft: rgba(63,106,216,.14); }
.service-icon-infidelity { --icon-main: #e25575; --icon-accent: #7c4dff; --icon-soft: rgba(226,85,117,.14); }
.service-icon-premarital { --icon-main: #b56bdb; --icon-accent: #f4a261; --icon-soft: rgba(181,107,219,.16); }
.service-icon-couples { --icon-main: #ff7a59; --icon-accent: #28b8bc; --icon-soft: rgba(255,122,89,.14); }
.service-icon-sexual { --icon-main: #d85a8a; --icon-accent: #ffb35c; --icon-soft: rgba(216,90,138,.14); }
.service-icon-phobia { --icon-main: #ff9f1c; --icon-accent: #3a86ff; --icon-soft: rgba(255,159,28,.16); }
.service-icon-family { --icon-main: #2fbf71; --icon-accent: #4d96ff; --icon-soft: rgba(47,191,113,.15); }
.service-icon-parenting { --icon-main: #19a7ce; --icon-accent: #ffa600; --icon-soft: rgba(25,167,206,.14); }
.service-icon-child { --icon-main: #7cc576; --icon-accent: #ff70a6; --icon-soft: rgba(124,197,118,.16); }
.service-icon-education { --icon-main: #4361ee; --icon-accent: #06d6a0; --icon-soft: rgba(67,97,238,.14); }
.service-icon-addiction { --icon-main: #5f6c7b; --icon-accent: #ef476f; --icon-soft: rgba(95,108,123,.14); }

.lang-btn {
  min-width: 42px;
  font-weight: 900;
  letter-spacing: .02em;
}

.service-summary-card .service-icon {
  width: 104px;
  height: 104px;
  margin-bottom: 8px;
}

.service-summary-card .service-icon svg {
  width: 74px;
  height: 74px;
}

body[data-lang="en"] .service-page-main,
html[dir="ltr"] body .service-page-main {
  text-align: left;
}

body[data-lang="en"] .service-breadcrumb,
html[dir="ltr"] .service-breadcrumb {
  direction: ltr;
}

body[data-lang="en"] .form-card,
html[dir="ltr"] .form-card {
  direction: ltr;
}

body[data-lang="en"] .form-card input,
body[data-lang="en"] .form-card textarea,
body[data-lang="en"] .form-card select,
html[dir="ltr"] .form-card input,
html[dir="ltr"] .form-card textarea,
html[dir="ltr"] .form-card select {
  text-align: left;
}

@media (max-width: 1120px) {
  .service-pathways-grid { grid-template-columns: repeat(4, minmax(110px, 1fr)); }
}

@media (max-width: 760px) {
  .service-pathways-grid {
    grid-template-columns: repeat(3, minmax(88px, 1fr));
    gap: 18px 12px;
  }
  .service-path-logo { padding: 6px 2px; gap: 9px; }
  .service-path-logo .service-icon {
    width: 76px;
    height: 76px;
    border-radius: 26px;
  }
  .service-path-logo .service-icon svg {
    width: 55px;
    height: 55px;
  }
  .service-path-logo h3 { font-size: .84rem; line-height: 1.65; }
}

@media (max-width: 430px) {
  .service-pathways-grid { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
  .service-path-logo .service-icon { width: 82px; height: 82px; }
  .service-path-logo .service-icon svg { width: 58px; height: 58px; }
}

/* V49: service page media management mirrors course media performance rules. */
.service-icon-image {
  overflow: hidden;
  background: rgba(255,255,255,.78) !important;
}
.service-logo-image {
  width: 78%;
  height: 78%;
  object-fit: contain;
  display: block;
}
.service-summary-media {
  margin: -4px 0 14px;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--accent-soft);
  box-shadow: var(--shadow-soft);
}
.service-summary-image {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.service-video-lazy,
.service-intro-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
}
.service-video-lazy {
  min-height: 235px;
  border: 1px solid var(--border);
  background: var(--accent-soft);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  font: inherit;
  text-align: center;
}
.service-video-lazy:hover,
.service-video-lazy:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
}
.service-video-poster,
.service-video-shade {
  position: absolute;
  inset: 0;
}
.service-video-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.service-video-shade {
  background: linear-gradient(rgba(17, 26, 30, .22), rgba(17, 26, 30, .56));
}
.service-video-lazy .service-video-play,
.service-video-label {
  position: relative;
  z-index: 1;
}
.service-video-label {
  display: inline-flex;
  margin-top: 76px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.32);
  backdrop-filter: blur(10px);
  font-weight: 900;
}
.service-intro-video {
  display: block;
  border: 1px solid var(--border);
  background: #000;
  box-shadow: var(--shadow-soft);
}
.service-video-card,
.service-summary-card {
  content-visibility: auto;
  contain-intrinsic-size: 1px 460px;
}
@media (max-width: 760px) {
  .service-video-lazy { min-height: 190px; }
  .service-summary-media { border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .service-video-lazy,
  .service-video-lazy:hover,
  .service-video-lazy:focus-visible {
    transform: none;
  }
}

/* V50: richer colorful service icons and per-service font controls. */
.service-path-logo .service-icon,
.service-summary-card .service-icon {
  --icon-third: color-mix(in srgb, var(--icon-main) 34%, var(--icon-accent) 66%);
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.88) 0 16%, transparent 17%),
    radial-gradient(circle at 76% 78%, color-mix(in srgb, var(--icon-accent) 34%, transparent) 0 30%, transparent 31%),
    linear-gradient(145deg, color-mix(in srgb, var(--icon-main) 18%, white 82%), color-mix(in srgb, var(--icon-accent) 20%, white 80%));
  box-shadow: 0 20px 48px color-mix(in srgb, var(--icon-main) 24%, transparent), inset 0 0 0 1px rgba(255,255,255,.78);
}
.service-path-logo .service-icon svg,
.service-summary-card .service-icon svg { filter: drop-shadow(0 7px 10px color-mix(in srgb, var(--icon-main) 20%, transparent)); }
.service-icon-individual { --icon-main: #6c5ce7; --icon-accent: #00c2ff; --icon-soft: rgba(108,92,231,.17); }
.service-icon-depression { --icon-main: #3f6ad8; --icon-accent: #8a63ff; --icon-soft: rgba(63,106,216,.16); }
.service-icon-infidelity { --icon-main: #e25575; --icon-accent: #7c4dff; --icon-soft: rgba(226,85,117,.17); }
.service-icon-premarital { --icon-main: #b56bdb; --icon-accent: #ffb45e; --icon-soft: rgba(181,107,219,.18); }
.service-icon-couples { --icon-main: #ff7a59; --icon-accent: #16c7c9; --icon-soft: rgba(255,122,89,.17); }
.service-icon-sexual { --icon-main: #c84cc0; --icon-accent: #ff7a59; --icon-soft: rgba(200,76,192,.18); }
.service-icon-phobia { --icon-main: #ff9f1c; --icon-accent: #3a86ff; --icon-soft: rgba(255,159,28,.18); }
.service-icon-family { --icon-main: #20bf6b; --icon-accent: #4d96ff; --icon-soft: rgba(32,191,107,.18); }
.service-icon-parenting { --icon-main: #19a7ce; --icon-accent: #ffa600; --icon-soft: rgba(25,167,206,.17); }
.service-icon-child { --icon-main: #7cc576; --icon-accent: #ff70a6; --icon-soft: rgba(124,197,118,.18); }
.service-icon-education { --icon-main: #4361ee; --icon-accent: #06d6a0; --icon-soft: rgba(67,97,238,.16); }
.service-icon-addiction { --icon-main: #5f6c7b; --icon-accent: #ef476f; --icon-soft: rgba(95,108,123,.17); }
.service-icon-masturbation { --icon-main: #8f5bd5; --icon-accent: #00b894; --icon-soft: rgba(143,91,213,.18); }
.service-icon-orientation { --icon-main: #4d96ff; --icon-accent: #ff6b9d; --icon-soft: rgba(77,150,255,.18); }
.service-page-main #service-title { font-size: var(--service-title-font-size, clamp(2.55rem, 5.9vw, 4.9rem)); }
.service-page-main #service-lead,
.service-page-main #service-detail-grid p,
.service-page-main #service-detail-grid li,
.service-page-main #service-video-card p,
.service-page-main #service-video-card li,
.service-page-main #service-booking-lead,
.service-page-main .service-summary-list li,
.service-page-main .service-section-intro,
.service-page-main .form-card label,
.service-page-main .service-fixed-service,
.service-page-main .micro-note { font-size: var(--service-body-font-size, inherit); }


/* V52: pre-consultation CTA, dynamic doctors, clean service logos, smoke/fog ambience. */
.btn.preconsult-cta {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #047857 0%, #10b981 58%, #84cc16 100%);
  box-shadow: 0 20px 46px rgba(16, 185, 129, .28);
  position: relative;
  overflow: hidden;
}
.btn.preconsult-cta::after {
  content: "";
  position: absolute;
  top: -44%;
  bottom: -44%;
  width: 44px;
  inset-inline-start: -62px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.44), transparent);
  transform: rotate(18deg);
  animation: buttonShine 4.2s ease-in-out infinite;
  pointer-events: none;
}
.btn.preconsult-cta:hover {
  color: #fff;
  box-shadow: 0 26px 58px rgba(16, 185, 129, .36);
}
.header-actions .desktop-preconsult {
  min-height: 44px;
  padding: 11px 18px;
  font-size: inherit;
}
.mobile-cta.preconsult-cta { margin-top: 8px; }

.doctor-grid {
  align-items: stretch;
}
.doctor-card .media-thumb img {
  object-position: center top;
}
.doctor-card h3 a {
  color: inherit;
  text-decoration: none;
}
.doctor-title {
  margin: -4px 0 6px;
  color: var(--accent-strong);
  font-weight: 850;
}
.doctor-specialties {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 10px;
}
.doctor-specialty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--heading);
  font-size: .82rem;
  font-weight: 850;
}
.doctor-page {
  min-height: calc(100vh - var(--header-h));
  padding: clamp(30px, 6vw, 80px) 0 clamp(58px, 8vw, 100px);
}
.doctor-profile-card {
  display: grid;
  grid-template-columns: minmax(260px, 380px) 1fr;
  gap: clamp(22px, 4vw, 48px);
  align-items: start;
  padding: clamp(22px, 4vw, 42px);
}
.doctor-profile-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border-radius: 32px;
  box-shadow: var(--shadow-soft);
  background: var(--accent-soft);
}
.doctor-profile-body {
  display: grid;
  gap: 16px;
}
.doctor-profile-body h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.35;
}
.doctor-profile-title {
  margin: 0;
  color: var(--accent-strong);
  font-weight: 900;
  font-size: clamp(1rem, 1.2vw, 1.18rem);
}
.doctor-full-bio {
  white-space: pre-line;
  line-height: 2;
}
.doctor-media-grid,
.doctor-course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}
.doctor-video-card iframe,
.doctor-video-card video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 22px;
  background: #111;
}
.doctor-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}
.doctor-message {
  padding: 22px;
  text-align: center;
}

.site-ambience::before {
  inset: -18%;
  opacity: .34;
  background:
    radial-gradient(ellipse at 16% 18%, color-mix(in srgb, var(--accent) 28%, transparent) 0 16%, transparent 48%),
    radial-gradient(ellipse at 84% 28%, color-mix(in srgb, var(--gold) 22%, transparent) 0 14%, transparent 46%),
    radial-gradient(ellipse at 52% 84%, color-mix(in srgb, var(--lavender) 20%, transparent) 0 18%, transparent 52%);
  background-size: auto;
  filter: blur(42px);
  mask-image: none;
  animation: smokeDrift 38s ease-in-out infinite alternate;
}
.site-ambience::after {
  inset: -14%;
  opacity: .18;
  background:
    radial-gradient(ellipse at 24% 70%, rgba(255,255,255,.26) 0 10%, transparent 42%),
    radial-gradient(ellipse at 68% 18%, color-mix(in srgb, var(--accent-strong) 17%, transparent) 0 12%, transparent 48%);
  background-size: auto;
  filter: blur(58px);
  mix-blend-mode: soft-light;
  animation: smokeBreath 44s ease-in-out infinite alternate;
}
.ambient-thread { display: none !important; }
.ambient-noise {
  opacity: .06;
  background-image: radial-gradient(circle at 50% 50%, rgba(255,255,255,.22), transparent 38%);
}
@keyframes smokeDrift {
  0% { transform: translate3d(-1.6%, -1%, 0) scale(1); }
  50% { transform: translate3d(1.8%, 1.2%, 0) scale(1.035); }
  100% { transform: translate3d(-.4%, 2%, 0) scale(1.07); }
}
@keyframes smokeBreath {
  0% { transform: translate3d(1%, -1%, 0) scale(1.02); opacity: .13; }
  100% { transform: translate3d(-2%, 1.4%, 0) scale(1.1); opacity: .22; }
}
.service-path-logo .service-icon,
.service-summary-card .service-icon {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none;
  overflow: visible;
  padding: 0;
}
.service-path-logo .service-icon svg,
.service-summary-card .service-icon svg {
  filter: drop-shadow(0 7px 10px color-mix(in srgb, var(--icon-main) 20%, transparent));
}
.service-icon-image {
  background: transparent !important;
  overflow: visible;
}
.service-icon-image .service-logo-image,
.service-logo-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.service-path-logo {
  justify-items: center;
  align-items: center;
}
.service-path-logo:hover .service-icon,
.service-path-logo:focus-visible .service-icon {
  box-shadow: none !important;
}
@media (max-width: 1180px) {
  .desktop-preconsult { display: none !important; }
}
@media (max-width: 760px) {
  .doctor-profile-card { grid-template-columns: 1fr; }
  .doctor-profile-photo { max-width: 360px; margin: 0 auto; }
  .doctor-action-row .btn { width: 100%; }
  .service-path-logo .service-icon { width: 72px; height: 72px; }
  .service-path-logo .service-icon svg { width: 56px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn.preconsult-cta::after,
  .site-ambience::before,
  .site-ambience::after,
  .ambient-glow {
    animation: none !important;
  }
}


/* V53: redesigned service icons with theme-reactive palette. */
:root {
  --service-ink: color-mix(in srgb, var(--heading) 84%, var(--accent-strong));
  --service-calm: color-mix(in srgb, var(--accent-strong) 78%, var(--sky));
  --service-warm: color-mix(in srgb, var(--gold) 72%, var(--accent-strong));
  --service-rose: color-mix(in srgb, var(--rose) 82%, #c76d63);
  --service-alert: color-mix(in srgb, var(--danger) 74%, var(--gold));
  --service-soft: color-mix(in srgb, var(--accent-soft) 65%, rgba(255,255,255,.42));
  --service-glow: color-mix(in srgb, var(--accent) 18%, transparent);
}
[data-theme="dark"] {
  --service-ink: color-mix(in srgb, var(--heading) 76%, var(--sky));
  --service-calm: color-mix(in srgb, var(--sky) 68%, var(--accent-strong));
  --service-warm: color-mix(in srgb, var(--gold) 78%, #f0d4a4);
  --service-rose: color-mix(in srgb, var(--rose) 78%, #ffb0a7);
  --service-alert: color-mix(in srgb, var(--danger) 82%, var(--gold));
  --service-soft: color-mix(in srgb, var(--accent-soft) 52%, rgba(255,255,255,.05));
  --service-glow: color-mix(in srgb, var(--sky) 15%, transparent);
}
.service-path-logo .service-icon,
.service-summary-card .service-icon {
  position: relative;
  width: 86px;
  height: 86px;
  color: var(--icon-main);
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none;
  overflow: visible;
  padding: 0;
  isolation: isolate;
  transform-origin: center;
  transition: transform .26s ease, filter .26s ease, opacity .26s ease;
}
.service-path-logo .service-icon::before,
.service-summary-card .service-icon::before {
  content: "";
  position: absolute;
  inset: 18% 14%;
  border-radius: 999px;
  background: radial-gradient(circle, color-mix(in srgb, var(--icon-soft) 82%, transparent) 0 28%, transparent 72%);
  filter: blur(14px);
  opacity: .85;
  z-index: -1;
  transition: opacity .26s ease, transform .26s ease;
}
.service-path-logo .service-icon svg,
.service-summary-card .service-icon svg {
  width: 64px;
  height: 64px;
  overflow: visible;
  filter: drop-shadow(0 9px 18px color-mix(in srgb, var(--icon-main) 18%, transparent));
}
.service-path-logo:hover .service-icon,
.service-path-logo:focus-visible .service-icon,
.service-summary-card:hover .service-icon {
  transform: translateY(-2px) scale(1.035);
}
.service-path-logo:hover .service-icon::before,
.service-path-logo:focus-visible .service-icon::before,
.service-summary-card:hover .service-icon::before {
  opacity: 1;
  transform: scale(1.07);
}
.service-icon-individual { --icon-main: var(--service-ink); --icon-accent: var(--service-warm); --icon-soft: color-mix(in srgb, var(--service-warm) 18%, var(--service-soft)); }
.service-icon-depression { --icon-main: var(--service-calm); --icon-accent: var(--service-warm); --icon-soft: color-mix(in srgb, var(--service-calm) 20%, var(--service-soft)); }
.service-icon-infidelity { --icon-main: var(--service-rose); --icon-accent: var(--service-alert); --icon-soft: color-mix(in srgb, var(--service-rose) 18%, var(--service-soft)); }
.service-icon-premarital { --icon-main: var(--service-warm); --icon-accent: var(--service-rose); --icon-soft: color-mix(in srgb, var(--service-warm) 18%, var(--service-soft)); }
.service-icon-couples { --icon-main: var(--service-ink); --icon-accent: var(--service-calm); --icon-soft: color-mix(in srgb, var(--service-calm) 18%, var(--service-soft)); }
.service-icon-sexual { --icon-main: var(--service-rose); --icon-accent: var(--service-warm); --icon-soft: color-mix(in srgb, var(--service-rose) 16%, var(--service-soft)); }
.service-icon-phobia { --icon-main: var(--service-alert); --icon-accent: var(--service-warm); --icon-soft: color-mix(in srgb, var(--service-alert) 18%, var(--service-soft)); }
.service-icon-family { --icon-main: var(--service-ink); --icon-accent: var(--service-rose); --icon-soft: color-mix(in srgb, var(--service-ink) 12%, var(--service-soft)); }
.service-icon-parenting { --icon-main: var(--service-calm); --icon-accent: var(--service-warm); --icon-soft: color-mix(in srgb, var(--service-calm) 18%, var(--service-soft)); }
.service-icon-child { --icon-main: var(--service-ink); --icon-accent: var(--service-rose); --icon-soft: color-mix(in srgb, var(--service-rose) 16%, var(--service-soft)); }
.service-icon-education { --icon-main: var(--service-calm); --icon-accent: var(--service-warm); --icon-soft: color-mix(in srgb, var(--service-calm) 20%, var(--service-soft)); }
.service-icon-addiction { --icon-main: var(--service-ink); --icon-accent: var(--service-alert); --icon-soft: color-mix(in srgb, var(--service-ink) 14%, var(--service-soft)); }
.service-icon-masturbation { --icon-main: var(--service-ink); --icon-accent: var(--service-warm); --icon-soft: color-mix(in srgb, var(--service-warm) 14%, var(--service-soft)); }
.service-icon-orientation { --icon-main: var(--service-calm); --icon-accent: var(--service-rose); --icon-soft: color-mix(in srgb, var(--service-calm) 18%, var(--service-soft)); }
@media (max-width: 760px) {
  .service-path-logo .service-icon,
  .service-summary-card .service-icon { width: 74px; height: 74px; }
  .service-path-logo .service-icon svg,
  .service-summary-card .service-icon svg { width: 56px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .service-path-logo .service-icon,
  .service-summary-card .service-icon,
  .service-path-logo .service-icon::before,
  .service-summary-card .service-icon::before {
    transition: none !important;
    transform: none !important;
  }
}

/* Targeted V53 doctor-section fix: align doctors with course-card media behavior only. */
.doctor-card.course-compact-card {
  min-height: var(--public-card-row-min, 360px);
}
.doctor-thumb {
  border-radius: 0;
  border: 0;
  box-shadow: none;
  display: block;
}
.doctor-thumb .image-fallback {
  border-radius: 0;
}
.doctor-video-badge {
  position: absolute;
  inset-inline-start: 14px;
  bottom: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #fff;
  background: rgba(17, 26, 30, .56);
  border: 1px solid rgba(255, 255, 255, .38);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .16);
  backdrop-filter: blur(12px);
  font-size: .82rem;
  font-weight: 900;
}
.doctor-summary-list {
  gap: 5px;
}
.doctor-summary-list p {
  font-size: .88rem;
}
.doctor-short-bio {
  -webkit-line-clamp: 3;
}
.doctor-video-card,
.doctor-empty-card,
.doctor-related-course {
  padding: clamp(16px, 2vw, 22px);
}
.doctor-video-card {
  display: grid;
  gap: 14px;
}
.doctor-side-head h3 {
  margin: 8px 0 0;
  color: var(--heading);
  line-height: 1.55;
}
.doctor-video-lazy,
.doctor-intro-video,
.doctor-intro-embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 24px;
}
.doctor-intro-video,
.doctor-intro-embed {
  display: block;
  border: 0;
  background: #111;
  box-shadow: var(--shadow-soft);
}
.doctor-empty-card {
  min-height: 220px;
  display: grid;
  place-items: center;
  gap: 12px;
  text-align: center;
  background:
    radial-gradient(circle at 30% 30%, var(--accent-soft), transparent 42%),
    linear-gradient(135deg, var(--surface-strong), var(--surface-solid));
}
.doctor-empty-card p {
  margin: 0;
  color: var(--text);
  font-weight: 850;
  line-height: 1.9;
}
.doctor-related-course { padding: 0; }

/* Doctor profile page is standalone and does not load the homepage reveal observer. */
.doctor-page .reveal {
  opacity: 1;
  transform: none;
}

/* Targeted V53.1 doctor profile page refinement: compact professional media rail only. */
.doctor-page {
  padding: clamp(22px, 4vw, 46px) 0 clamp(54px, 7vw, 86px);
}
.doctor-page .container {
  max-width: 1160px;
}
.doctor-profile-card {
  display: flex;
  align-items: flex-start;
  gap: clamp(18px, 3.2vw, 34px);
  padding: clamp(18px, 3vw, 32px);
  overflow: visible;
  border-radius: 34px;
  background:
    radial-gradient(circle at 86% 10%, color-mix(in srgb, var(--accent-soft) 84%, transparent), transparent 34%),
    linear-gradient(145deg, var(--surface-strong), var(--surface-solid));
}
.doctor-profile-body {
  flex: 1 1 auto;
  min-width: 0;
  align-content: start;
  gap: 14px;
}
.doctor-profile-media {
  flex: 0 0 clamp(250px, 28vw, 334px);
  width: clamp(250px, 28vw, 334px);
  max-width: 334px;
  display: grid;
  gap: 14px;
  align-self: flex-start;
  position: sticky;
  top: calc(var(--header-h) + 16px);
}
.doctor-photo-frame {
  margin: 0;
  padding: 10px;
  border-radius: 28px;
  border: 1px solid var(--border);
  background:
    linear-gradient(145deg, rgba(255,255,255,.42), rgba(255,255,255,.08)),
    var(--surface-strong);
  box-shadow: 0 22px 52px rgba(57, 78, 79, .13);
}
.doctor-profile-photo {
  display: block;
  width: 100%;
  max-height: 350px;
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  object-fit: cover;
  object-position: center top;
  box-shadow: none;
}
.doctor-profile-body h1 {
  font-size: clamp(2rem, 3.6vw, 3.15rem);
  line-height: 1.18;
  letter-spacing: -0.025em;
}
.doctor-profile-title {
  max-width: 780px;
  line-height: 1.9;
  color: var(--accent-strong);
}
.doctor-specialty-block h2 {
  margin: 0 0 8px;
  font-size: 1rem;
  color: var(--heading);
}
.doctor-specialties {
  margin: 0;
}
.doctor-specialty {
  padding: 7px 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  background: color-mix(in srgb, var(--accent-soft) 82%, var(--surface-strong));
}
.doctor-full-bio {
  max-width: 820px;
  margin: 0;
  padding: clamp(14px, 2vw, 20px);
  border-radius: 24px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-strong) 72%, var(--accent-soft));
  color: var(--text);
  line-height: 1.95;
}
.doctor-action-row {
  gap: 10px;
  margin-top: 4px;
}
.doctor-action-row .btn {
  min-height: 44px;
  padding: 11px 18px;
}
.doctor-video-card--compact {
  padding: 14px;
  gap: 10px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 20% 18%, color-mix(in srgb, var(--accent-soft) 85%, transparent), transparent 42%),
    linear-gradient(145deg, var(--surface-strong), var(--surface-solid));
  box-shadow: 0 18px 42px rgba(57, 78, 79, .12);
}
.doctor-video-card--compact .doctor-side-head {
  display: grid;
  gap: 4px;
  margin: 0;
}
.doctor-video-card--compact .doctor-side-head h3,
.doctor-video-card--compact > h3 {
  margin: 0;
  font-size: .98rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.doctor-video-card--compact .section-kicker {
  font-size: .72rem;
}
.doctor-video-card--compact .doctor-video-lazy,
.doctor-video-card--compact .doctor-intro-video,
.doctor-video-card--compact .doctor-intro-embed {
  aspect-ratio: 16 / 9;
  min-height: 142px;
  border-radius: 18px;
  box-shadow: none;
}
.doctor-video-card--compact .course-video-lazy {
  padding: 16px;
}
.doctor-video-card--compact .course-video-play {
  width: 46px;
  height: 46px;
}
.doctor-video-card--compact .course-video-label {
  font-size: .84rem;
  font-weight: 900;
}
.doctor-video-card--compact.doctor-empty-card {
  min-height: 146px;
  padding: 16px;
}
.doctor-video-card--compact.doctor-empty-card p {
  font-size: .9rem;
}
.doctor-courses-section {
  padding-top: clamp(24px, 4vw, 42px);
}
.doctor-course-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
@media (max-width: 980px) {
  .doctor-profile-card {
    flex-direction: column;
  }
  .doctor-profile-media {
    position: static;
    width: min(100%, 620px);
    max-width: 620px;
    grid-template-columns: minmax(180px, 280px) minmax(220px, 1fr);
    align-items: start;
  }
  .doctor-profile-photo {
    max-height: 320px;
  }
  .doctor-video-card--compact .doctor-video-lazy,
  .doctor-video-card--compact .doctor-intro-video,
  .doctor-video-card--compact .doctor-intro-embed {
    min-height: 150px;
  }
}
@media (max-width: 680px) {
  .doctor-page {
    padding-top: 16px;
  }
  .doctor-profile-card {
    gap: 16px;
    padding: 16px;
    border-radius: 26px;
  }
  .doctor-profile-media {
    width: 100%;
    grid-template-columns: 1fr;
  }
  .doctor-photo-frame {
    width: min(100%, 280px);
    margin-inline: auto;
    border-radius: 24px;
  }
  .doctor-profile-photo {
    max-height: 300px;
    border-radius: 18px;
  }
  .doctor-full-bio {
    border-radius: 20px;
    padding: 14px;
  }
}

/* Targeted V55 updates: doctor team cards + colorful service path marks. */
.doctor-card.course-compact-card {
  --public-card-thumb: clamp(150px, 16vw, 210px);
  min-height: max(var(--public-card-row-min, 360px), 390px);
}
.doctor-card .media-body {
  padding-top: clamp(18px, 2.2vw, 24px);
}
.doctor-thumb {
  min-height: clamp(180px, 18vw, 250px);
  aspect-ratio: 4 / 3;
}
.doctor-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.doctor-card .media-tag {
  display: none !important;
}

.service-path-logo .service-icon,
.service-summary-card .service-icon {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.service-path-logo .service-icon::before,
.service-summary-card .service-icon::before {
  background: radial-gradient(circle, color-mix(in srgb, var(--icon-main) 18%, transparent) 0 18%, color-mix(in srgb, var(--icon-accent) 16%, transparent) 28%, transparent 68%);
  filter: blur(18px);
  opacity: .76;
}
.service-path-logo .service-icon svg,
.service-summary-card .service-icon svg {
  filter: drop-shadow(0 10px 18px color-mix(in srgb, var(--icon-main) 24%, transparent));
}
.service-icon-individual { --icon-main: #7c3aed; --icon-accent: #f59e0b; --icon-soft: rgba(124,58,237,.16); }
.service-icon-depression { --icon-main: #4361ee; --icon-accent: #06b6d4; --icon-soft: rgba(67,97,238,.16); }
.service-icon-infidelity { --icon-main: #e11d48; --icon-accent: #8b5cf6; --icon-soft: rgba(225,29,72,.16); }
.service-icon-premarital { --icon-main: #f97316; --icon-accent: #ec4899; --icon-soft: rgba(249,115,22,.16); }
.service-icon-couples { --icon-main: #ef4444; --icon-accent: #14b8a6; --icon-soft: rgba(239,68,68,.16); }
.service-icon-sexual { --icon-main: #db2777; --icon-accent: #f59e0b; --icon-soft: rgba(219,39,119,.16); }
.service-icon-phobia { --icon-main: #f59e0b; --icon-accent: #3b82f6; --icon-soft: rgba(245,158,11,.17); }
.service-icon-family { --icon-main: #22c55e; --icon-accent: #f43f5e; --icon-soft: rgba(34,197,94,.16); }
.service-icon-parenting { --icon-main: #0ea5e9; --icon-accent: #f97316; --icon-soft: rgba(14,165,233,.16); }
.service-icon-child { --icon-main: #84cc16; --icon-accent: #ec4899; --icon-soft: rgba(132,204,22,.16); }
.service-icon-education { --icon-main: #2563eb; --icon-accent: #10b981; --icon-soft: rgba(37,99,235,.16); }
.service-icon-addiction { --icon-main: #64748b; --icon-accent: #ef4444; --icon-soft: rgba(100,116,139,.16); }
.service-icon-masturbation { --icon-main: #a855f7; --icon-accent: #f97316; --icon-soft: rgba(168,85,247,.16); }
.service-icon-orientation { --icon-main: #6366f1; --icon-accent: #ec4899; --icon-soft: rgba(99,102,241,.16); }
.service-icon-image {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}


/* ===== Service cards fixed package integration: 16 prepared PNG mask icons, 6 + 6 + centered 4 ===== */
.service-pathways-section .section-head {
  max-width: 840px;
  margin-bottom: 40px;
}

.service-pathways-grid,
.services-grid.service-pathways-grid,
#services-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(6, minmax(118px, 1fr));
  gap: 20px 14px;
  align-items: stretch;
  direction: inherit;
}

.service-path-logo,
.service-path-logo.card,
.service-path-card.service-path-logo {
  min-height: 0;
  padding: 14px 9px 13px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, rgba(255,255,255,.4));
  border-radius: 28px;
  background: color-mix(in srgb, var(--surface-strong) 82%, transparent);
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 14px;
  text-align: center;
  color: var(--text);
  isolation: isolate;
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  box-shadow: 0 10px 24px rgba(78, 66, 58, .055);
  overflow: hidden;
  position: relative;
  text-decoration: none;
}

.service-path-logo::before,
.service-path-logo::after,
.service-path-card::after {
  content: none !important;
  display: none !important;
}

.service-path-logo:hover,
.service-path-logo:focus-visible {
  background: color-mix(in srgb, var(--surface-strong) 92%, transparent);
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--icon-ink, var(--heading)) 28%, var(--border));
  box-shadow: 0 14px 32px rgba(78, 66, 58, .10);
}

.service-path-logo .service-icon,
.service-summary-card .service-icon {
  --icon-ink: #171411;
  width: clamp(92px, 7.2vw, 112px);
  height: clamp(92px, 7.2vw, 112px);
  display: grid;
  place-items: center;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
  color: var(--icon-ink);
  transition: transform .22s ease, filter .22s ease;
}

body[data-theme="dark"] .service-path-logo .service-icon,
body[data-theme="dark"] .service-summary-card .service-icon {
  --icon-ink: #fff7e6;
}

.service-mask-icon {
  width: 86%;
  height: 86%;
  display: block;
  background: var(--icon-ink, currentColor);
  -webkit-mask: var(--service-icon-mask) center / contain no-repeat;
  mask: var(--service-icon-mask) center / contain no-repeat;
  filter: none !important;
  image-rendering: auto;
  transform: translateZ(0);
  transition: transform .22s ease, background .22s ease;
}

.service-path-logo:hover .service-icon,
.service-path-logo:focus-visible .service-icon {
  transform: translateY(-2px);
  filter: none;
}

.service-path-logo:hover .service-mask-icon,
.service-path-logo:focus-visible .service-mask-icon {
  transform: scale(1.035);
  filter: none;
}

.service-path-logo .service-icon svg,
.service-summary-card .service-icon svg {
  display: none !important;
}

.service-icon-image,
.service-path-logo .service-icon-image,
.service-summary-card .service-icon-image {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.service-icon-image img,
.service-logo-image {
  width: 86%;
  height: 86%;
  display: block;
  object-fit: contain;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.service-path-logo h3 {
  margin: 0;
  font-size: clamp(.96rem, .84rem + .34vw, 1.10rem);
  line-height: 1.72;
  font-weight: 950;
  letter-spacing: -.01em;
  color: var(--heading);
  max-width: 170px;
}

html[lang="en"] .service-path-logo h3,
html[dir="ltr"] .service-path-logo h3 {
  line-height: 1.28;
  font-weight: 850;
}

.service-path-logo .service-card-copy,
.service-path-logo .service-card-eyebrow,
.service-path-logo .service-card-action,
.service-path-logo p,
.service-path-card .service-card-copy,
.service-path-card .service-card-eyebrow,
.service-path-card .service-card-action,
.service-path-card p {
  display: none !important;
}

.service-icon-heartbreak { --icon-ink: #171411; }
.service-icon-anxiety { --icon-ink: #171411; }
body[data-theme="dark"] .service-icon-heartbreak,
body[data-theme="dark"] .service-icon-anxiety { --icon-ink: #fff7e6; }

@media (min-width: 1121px) {
  #services-grid > .service-path-logo:nth-child(13) {
    grid-column: 2;
  }
}

@media (max-width: 1180px) {
  .service-pathways-grid,
  .services-grid.service-pathways-grid,
  #services-grid {
    grid-template-columns: repeat(4, minmax(120px, 1fr));
  }
}

@media (max-width: 760px) {
  .service-pathways-grid,
  .services-grid.service-pathways-grid,
  #services-grid {
    grid-template-columns: repeat(3, minmax(88px, 1fr));
    gap: 18px 12px;
  }
  .service-path-logo,
  .service-path-logo.card,
  .service-path-card.service-path-logo {
    padding: 12px 8px;
    gap: 10px;
    border-radius: 22px;
  }
  .service-path-logo .service-icon,
  .service-summary-card .service-icon {
    width: 84px;
    height: 84px;
  }
  .service-path-logo h3 {
    font-size: .84rem;
    line-height: 1.6;
  }
}

@media (max-width: 430px) {
  .service-pathways-grid,
  .services-grid.service-pathways-grid,
  #services-grid {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
  .service-path-logo .service-icon,
  .service-summary-card .service-icon {
    width: 92px;
    height: 92px;
  }
}


/* Hotfix: render prepared PNG service icons directly instead of CSS masks.
   This prevents a failed mask URL from appearing as a solid cream square. */
.service-prepared-icon,
.service-icon-image .service-prepared-icon,
.service-path-logo .service-prepared-icon,
.service-summary-card .service-prepared-icon {
  width: 86%;
  height: 86%;
  display: block;
  object-fit: contain;
  object-position: center;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: brightness(0) saturate(100%) invert(7%) sepia(11%) saturate(734%) hue-rotate(349deg) brightness(95%) contrast(96%);
}

body[data-theme="dark"] .service-prepared-icon,
body[data-theme="dark"] .service-icon-image .service-prepared-icon,
body[data-theme="dark"] .service-path-logo .service-prepared-icon,
body[data-theme="dark"] .service-summary-card .service-prepared-icon {
  filter: brightness(0) saturate(100%) invert(94%) sepia(11%) saturate(629%) hue-rotate(328deg) brightness(105%) contrast(96%);
}

.service-icon-image .service-prepared-icon:hover,
.service-path-logo:hover .service-prepared-icon,
.service-path-logo:focus-visible .service-prepared-icon {
  filter: brightness(0) saturate(100%) invert(7%) sepia(11%) saturate(734%) hue-rotate(349deg) brightness(95%) contrast(96%);
}

body[data-theme="dark"] .service-path-logo:hover .service-prepared-icon,
body[data-theme="dark"] .service-path-logo:focus-visible .service-prepared-icon {
  filter: brightness(0) saturate(100%) invert(94%) sepia(11%) saturate(629%) hue-rotate(328deg) brightness(105%) contrast(96%);
}

/* V59 service pages only: fix prepared icon rendering, remove the large visible booking calendar,
   and make the service date-picker popup fit the calendar grid more comfortably. */
.service-page-main #service-calendar-panel {
  display: none !important;
}

.service-page-main .service-booking-grid {
  grid-template-columns: minmax(0, 860px);
  justify-content: center;
}

.service-page-main .form-card {
  width: 100%;
}

.service-page-main .service-summary-card .service-icon {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.service-page-main .service-summary-card .service-prepared-icon,
.service-page-main .service-summary-card .service-logo-image {
  width: 86% !important;
  height: 86% !important;
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Safety net for any stale cached service-page.js that still outputs the old mask element:
   never let a failed CSS mask appear as a solid square on dedicated service pages. */
.service-page-main .service-mask-icon {
  background: transparent !important;
  -webkit-mask: none !important;
  mask: none !important;
  box-shadow: none !important;
}

.service-page-main .cal-picker-popover.cal-picker-popover-inline {
  width: min(450px, calc(100vw - 32px)) !important;
  max-width: min(450px, calc(100vw - 32px));
  max-height: min(82vh, 610px);
  padding: 18px;
  left: auto;
  right: auto;
  inset-inline-start: 0;
}

html[dir="rtl"] .service-page-main .cal-picker-popover.cal-picker-popover-inline {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

.service-page-main .cal-picker-head {
  grid-template-columns: 46px 1fr 46px;
  gap: 10px;
  margin-bottom: 12px;
}

.service-page-main .cal-picker-head strong {
  font-size: 1.02rem;
}

.service-page-main .cal-weekdays,
.service-page-main .cal-days {
  gap: 7px;
}

.service-page-main .cal-day,
.service-page-main .cal-day-empty {
  min-height: 50px;
  border-radius: 15px;
}

.service-page-main .cal-picker-foot {
  margin-top: 12px;
}

@media (max-width: 680px) {
  .service-page-main .service-booking-grid {
    grid-template-columns: 1fr;
  }
  .service-page-main .cal-picker-popover.cal-picker-popover-inline {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px);
    padding: 16px;
  }
  .service-page-main .cal-day,
  .service-page-main .cal-day-empty {
    min-height: 46px;
  }
}

/* V60 service pages refinement: professional spacing, smaller headings and correct bullet direction.
   Scoped to dedicated service pages only; home cards and other site sections remain untouched. */
.service-page-main {
  --service-page-section-y: clamp(34px, 4.8vw, 64px);
  --service-page-card-pad: clamp(18px, 2.2vw, 26px);
  --service-page-card-gap: clamp(14px, 2vw, 22px);
  padding-top: calc(var(--header-h) + 8px);
}

.service-page-main .section {
  padding-top: var(--service-page-section-y);
  padding-bottom: var(--service-page-section-y);
}

.service-page-main .service-hero {
  padding-top: clamp(32px, 4.5vw, 58px);
  padding-bottom: clamp(34px, 5vw, 66px);
}

.service-page-main .service-hero-grid {
  grid-template-columns: minmax(0, 1.16fr) minmax(292px, .52fr);
  gap: clamp(18px, 3vw, 38px);
  align-items: center;
}

html[dir="rtl"] .service-page-main .service-hero-grid > .reveal:first-child,
body[data-lang="fa"] .service-page-main .service-hero-grid > .reveal:first-child {
  text-align: right;
}

html[dir="ltr"] .service-page-main .service-hero-grid > .reveal:first-child,
body[data-lang="en"] .service-page-main .service-hero-grid > .reveal:first-child {
  text-align: left;
}

.service-page-main #service-title {
  font-size: var(--service-title-font-size, clamp(2.05rem, 4.2vw, 3.65rem));
  line-height: 1.18;
  letter-spacing: -.025em;
  max-width: 900px;
  margin-bottom: 12px;
}

.service-page-main h2,
.service-page-main .service-detail-grid h2,
.service-page-main .service-detail-grid h3,
.service-page-main .service-summary-card h2,
.service-page-main .service-video-card h2,
.service-page-main .booking-head h2 {
  font-size: clamp(1.22rem, 1.65vw, 1.72rem);
  line-height: 1.45;
  letter-spacing: -.012em;
  margin-top: 0;
  margin-bottom: 10px;
}

.service-page-main h3 {
  font-size: clamp(1.06rem, 1.35vw, 1.28rem);
  line-height: 1.55;
}

.service-page-main #service-lead,
.service-page-main #service-booking-lead,
.service-page-main .lead {
  font-size: clamp(.98rem, 1.1vw, 1.1rem);
  line-height: 2;
  max-width: 800px;
}

.service-page-main .service-breadcrumb {
  margin-bottom: 12px;
  font-size: .86rem;
}

.service-page-main .section-kicker {
  font-size: .82rem;
  min-height: 34px;
  padding: 7px 12px;
}

.service-page-main .service-hero-actions {
  margin-top: 20px;
  gap: 10px;
}

.service-page-main .card {
  border-radius: 26px;
}

.service-page-main .service-summary-card {
  width: 100%;
  max-width: 504px;
  justify-self: end;
  align-self: center;
  gap: 12px;
  padding: var(--service-page-card-pad);
  min-height: auto;
}

html[dir="rtl"] .service-page-main .service-summary-card,
body[data-lang="fa"] .service-page-main .service-summary-card {
  justify-self: start;
  text-align: right;
}

html[dir="ltr"] .service-page-main .service-summary-card,
body[data-lang="en"] .service-page-main .service-summary-card {
  justify-self: end;
  text-align: left;
}

.service-page-main .service-summary-card .service-icon,
.service-page-main .service-summary-card .service-icon-image {
  width: 68px !important;
  height: 68px !important;
  margin-bottom: 2px;
}

.service-page-main .service-summary-card .service-prepared-icon,
.service-page-main .service-summary-card .service-logo-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

.service-page-main .service-summary-card .btn {
  width: 100%;
  min-height: 44px;
  margin-top: 4px;
}

.service-page-main .service-summary-list {
  gap: 8px;
}

.service-page-main .service-summary-list li,
.service-page-main .service-sign-list li,
.service-page-main .service-video-topics li {
  position: relative;
  line-height: 1.85;
}

.service-page-main .service-summary-list li,
.service-page-main .service-sign-list li {
  width: 100%;
  box-sizing: border-box;
}

.service-page-main .service-summary-list li,
.service-page-main .service-sign-list li {
  padding-top: 1px;
  padding-bottom: 1px;
}

.service-page-main .service-summary-list li::before,
.service-page-main .service-sign-list li::before {
  width: 7px;
  height: 7px;
  top: .86em;
}

html[dir="rtl"] .service-page-main .service-summary-list,
html[dir="rtl"] .service-page-main .service-sign-list,
body[data-lang="fa"] .service-page-main .service-summary-list,
body[data-lang="fa"] .service-page-main .service-sign-list {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .service-page-main .service-summary-list li,
html[dir="rtl"] .service-page-main .service-sign-list li,
body[data-lang="fa"] .service-page-main .service-summary-list li,
body[data-lang="fa"] .service-page-main .service-sign-list li {
  padding-inline-start: 0 !important;
  padding-inline-end: 22px !important;
  padding-left: 0 !important;
  padding-right: 22px !important;
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .service-page-main .service-summary-list li::before,
html[dir="rtl"] .service-page-main .service-sign-list li::before,
body[data-lang="fa"] .service-page-main .service-summary-list li::before,
body[data-lang="fa"] .service-page-main .service-sign-list li::before {
  inset-inline-start: auto !important;
  inset-inline-end: 0 !important;
  left: auto !important;
  right: 0 !important;
}

html[dir="ltr"] .service-page-main .service-summary-list,
html[dir="ltr"] .service-page-main .service-sign-list,
body[data-lang="en"] .service-page-main .service-summary-list,
body[data-lang="en"] .service-page-main .service-sign-list {
  direction: ltr;
  text-align: left;
}

html[dir="ltr"] .service-page-main .service-summary-list li,
html[dir="ltr"] .service-page-main .service-sign-list li,
body[data-lang="en"] .service-page-main .service-summary-list li,
body[data-lang="en"] .service-page-main .service-sign-list li {
  padding-inline-start: 22px !important;
  padding-inline-end: 0 !important;
  padding-left: 22px !important;
  padding-right: 0 !important;
  direction: ltr;
  text-align: left;
}

html[dir="ltr"] .service-page-main .service-summary-list li::before,
html[dir="ltr"] .service-page-main .service-sign-list li::before,
body[data-lang="en"] .service-page-main .service-summary-list li::before,
body[data-lang="en"] .service-page-main .service-sign-list li::before {
  inset-inline-start: 0 !important;
  inset-inline-end: auto !important;
  left: 0 !important;
  right: auto !important;
}

.service-page-main .service-detail-grid {
  gap: 14px;
}

.service-page-main .service-detail-grid .card {
  min-height: auto;
  padding: var(--service-page-card-pad);
}

.service-page-main .service-detail-grid p {
  line-height: 1.95;
}

.service-page-main .service-signs-card {
  padding-bottom: clamp(20px, 2.4vw, 28px);
}

.service-page-main .service-section-intro {
  margin-bottom: 12px;
  line-height: 1.9;
}

.service-page-main .service-sign-list {
  gap: 6px 18px;
}

.service-page-main .service-video-card {
  grid-template-columns: minmax(0, 1fr) minmax(260px, .72fr);
  gap: clamp(16px, 2.5vw, 28px);
  padding: var(--service-page-card-pad);
  align-items: center;
}

.service-page-main .service-video-card p {
  line-height: 1.9;
}

.service-page-main .service-video-topics {
  gap: 7px;
  margin-top: 12px;
}

.service-page-main .service-video-topics li {
  padding: 8px 12px;
  border-radius: 14px;
}

html[dir="rtl"] .service-page-main .service-video-topics,
body[data-lang="fa"] .service-page-main .service-video-topics {
  direction: rtl;
  text-align: right;
}

html[dir="ltr"] .service-page-main .service-video-topics,
body[data-lang="en"] .service-page-main .service-video-topics {
  direction: ltr;
  text-align: left;
}

.service-page-main .service-video-placeholder {
  min-height: 190px;
  padding: 18px;
}

.service-page-main .service-video-play {
  width: 58px;
  height: 58px;
  font-size: 1.12rem;
  margin-bottom: 10px;
}

.service-page-main #service-booking .section-head.booking-head {
  max-width: 760px;
  margin: 0 auto 20px;
  text-align: center;
}

.service-page-main .service-booking-grid {
  grid-template-columns: minmax(0, 780px);
  justify-content: center;
  gap: 18px;
}

.service-page-main .form-card {
  padding: clamp(18px, 2.4vw, 28px);
}

.service-page-main .form-grid {
  gap: 12px;
}

.service-page-main .service-fixed-service,
.service-page-main .form-card input,
.service-page-main .form-card select,
.service-page-main .form-card textarea,
.service-page-main .time-picker-trigger {
  min-height: 46px;
}

.service-page-main .form-card textarea {
  min-height: 112px;
}

@media (max-width: 1120px) {
  .service-page-main .service-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(270px, .55fr);
  }
  .service-page-main #service-title {
    font-size: var(--service-title-font-size, clamp(1.95rem, 4.8vw, 3.2rem));
  }
}

@media (max-width: 980px) {
  .service-page-main .service-hero-grid,
  .service-page-main .service-video-card,
  .service-page-main .service-booking-grid {
    grid-template-columns: 1fr;
  }
  .service-page-main .service-summary-card {
    max-width: 100%;
    justify-self: stretch;
  }
  .service-page-main .service-detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .service-page-main {
    --service-page-section-y: 30px;
    --service-page-card-pad: 18px;
  }
  .service-page-main #service-title {
    font-size: var(--service-title-font-size, clamp(1.78rem, 9vw, 2.65rem));
  }
  .service-page-main h2,
  .service-page-main .service-detail-grid h2,
  .service-page-main .service-detail-grid h3,
  .service-page-main .service-summary-card h2,
  .service-page-main .service-video-card h2,
  .service-page-main .booking-head h2 {
    font-size: clamp(1.16rem, 5.2vw, 1.46rem);
  }
  .service-page-main .service-hero-actions .btn {
    width: 100%;
  }
  .service-page-main .service-sign-list {
    grid-template-columns: 1fr;
  }
}

/* v75: scoped modern article reading template. Other site sections remain untouched. */
body.article-modern-view .article-section{
  padding-top:calc(var(--header-h) + clamp(22px,4vw,48px));
  padding-bottom:clamp(34px,5vw,64px);
}
body.article-modern-view .article-layout{
  max-width:min(calc(100vw - 4cm), 1320px);
  width:100%;
}
@media(max-width:900px){
  body.article-modern-view .article-layout{
    max-width:100%;
  }
}
body.article-modern-view .article-article{
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  color:var(--text);
}
/* Remove the generic .card pointer sheen + lift on the article wrapper
   (the "mirror" effect that looked wrong, especially in dark mode). */
body.article-modern-view .article-article::before{content:none;display:none;opacity:0}
body.article-modern-view .article-article:hover{transform:none;box-shadow:none;border-color:transparent}
.article-read-progress{
  position:fixed;
  inset:0 0 auto 0;
  height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-strong,#a0664c));
  transform:scaleX(0);
  transform-origin:right;
  z-index:9999;
  pointer-events:none;
}
[dir="ltr"] .article-read-progress{transform-origin:left}
.article-modern-page{
  display:grid;
  gap:clamp(18px,3vw,28px);
}
.article-modern-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,420px);
  align-items:stretch;
  gap:clamp(16px,2.5vw,24px);
  padding:clamp(20px,3.2vw,34px);
  border:1px solid rgba(114,91,68,.16);
  border-radius:28px;
  background:linear-gradient(135deg,rgba(255,253,248,.96),rgba(246,239,230,.88));
  box-shadow:0 18px 48px rgba(75,54,44,.08);
  overflow:hidden;
}
.article-modern-hero.no-cover{
  grid-template-columns:1fr;
}
.article-hero-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.article-kicker{
  width:max-content;
  max-width:100%;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(82,114,101,.11);
  color:var(--accent);
  font-weight:850;
  font-size:.86rem;
}
.article-modern-hero h1{
  margin:14px 0 10px;
  color:var(--heading);
  font-size:var(--article-title-font-size,clamp(1.75rem,3.9vw,3.15rem));
  line-height:1.45;
  letter-spacing:-.04em;
  max-width:860px;
}
.article-meta-modern{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:4px 0 12px;
}
.article-meta-modern span{
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  border:1px solid rgba(114,91,68,.16);
  border-radius:999px;
  background:rgba(255,255,255,.62);
  color:var(--text-muted);
  font-size:.82rem;
  line-height:1.7;
}
.article-lead-modern{
  margin:0;
  max-width:780px;
  color:var(--text-muted);
  font-size:clamp(.98rem,1.35vw,1.08rem);
  line-height:2;
}
.article-hero-actions,
.article-bottom-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.article-hero-media{
  min-width:0;
  align-self:center;
}
body.article-modern-view .article-cover-modern{
  width:100%;
  aspect-ratio:16/10.5;
  min-height:0;
  margin:0;
  border-radius:24px;
  border:1px solid rgba(114,91,68,.14);
  box-shadow:0 18px 44px rgba(75,54,44,.12);
  background:var(--surface);
}
body.article-modern-view .article-cover-modern img{
  width:100%;
  height:100%;
  max-height:360px;
  object-fit:cover;
  border-radius:24px;
}
.article-modern-grid{
  display:grid;
  grid-template-columns:252px minmax(0,1fr);
  gap:clamp(16px,2.5vw,24px);
  align-items:start;
}
.article-modern-sidebar{
  position:sticky;
  top:calc(var(--header-h) + 16px);
  display:grid;
  gap:12px;
  align-self:start;
  max-height:calc(100vh - var(--header-h) - 32px);
  overflow:visible;
}
/* The table-of-contents itself scrolls internally if it is very long, so the
   "In this article" card always stays visible next to the scrolling article. */
.article-modern-sidebar .article-toc-nav{
  max-height:calc(100vh - var(--header-h) - 150px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}
.article-sidebar-card{
  padding:16px;
  border:1px solid rgba(114,91,68,.16);
  border-radius:22px;
  background:rgba(255,253,248,.86);
  box-shadow:0 14px 36px rgba(75,54,44,.06);
}
.article-sidebar-card strong{
  display:block;
  margin-bottom:10px;
  color:var(--heading);
  font-size:.98rem;
}
.article-toc-nav{
  display:grid;
  gap:4px;
}
.article-toc-nav a,
.article-toc-empty{
  display:block;
  padding:7px 10px;
  border-radius:12px;
  color:var(--text-muted);
  font-size:.88rem;
  line-height:1.75;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.article-toc-nav a:hover{
  background:rgba(82,114,101,.09);
  color:var(--accent);
  transform:translateX(-2px);
}
[dir="ltr"] .article-toc-nav a:hover{transform:translateX(2px)}
.article-toc-nav a.is-sub{
  padding-inline-start:20px;
  font-size:.82rem;
  opacity:.92;
}
.article-toc-nav a.active{
  background:rgba(82,114,101,.16);
  color:var(--accent);
  font-weight:800;
  opacity:1;
  box-shadow:inset 3px 0 0 var(--accent,#527265);
}
[dir="ltr"] .article-toc-nav a.active{
  box-shadow:inset -3px 0 0 var(--accent,#527265);
}
[data-theme="dark"] .article-toc-nav a.active{
  background:rgba(120,166,148,.18);
}
body.article-modern-view .article-content h2,
body.article-modern-view .article-content h3{
  scroll-margin-top:calc(var(--header-h) + 24px);
}
.article-sidebar-cta{
  background:linear-gradient(135deg,rgba(82,114,101,.12),rgba(255,255,255,.84));
}
.article-sidebar-cta p{
  margin:0 0 12px;
  color:var(--text-muted);
  font-size:.88rem;
  line-height:1.9;
}
.article-sidebar-cta .btn{
  width:100%;
  justify-content:center;
  min-height:42px;
  padding:10px 14px;
}
.article-modern-main{
  min-width:0;
  display:grid;
  gap:16px;
}
.article-quick-summary,
.article-note-card,
.article-final-cta,
.article-content > .article-cta-inline{
  border:1px solid rgba(114,91,68,.16);
  border-radius:22px;
  background:rgba(255,253,248,.92);
  box-shadow:0 14px 38px rgba(75,54,44,.06);
}
.article-quick-summary{
  padding:18px 20px;
  background:linear-gradient(135deg,rgba(82,114,101,.10),rgba(255,253,248,.98));
}
.article-quick-summary span{
  display:block;
  margin-bottom:6px;
  color:var(--accent);
  font-size:.92rem;
  font-weight:900;
}
.article-quick-summary p{
  margin:0;
  color:var(--text-muted);
  font-size:.98rem;
  line-height:1.95;
}
.article-inline-cover-after-summary{
  max-width:760px;
  margin:0 auto;
  width:100%;
}
body.article-modern-view .article-content{
  display:block;
  padding:clamp(20px,3vw,30px);
  border:1px solid rgba(114,91,68,.14);
  border-radius:26px;
  background:rgba(255,253,248,.94);
  box-shadow:0 18px 48px rgba(75,54,44,.07);
  color:var(--text);
  font-size:var(--article-body-font-size,1rem);
  line-height:2.05;
}
body.article-modern-view .article-content > *:first-child{margin-top:0}
body.article-modern-view .article-content > *:last-child{margin-bottom:0}
body.article-modern-view .article-content h2{
  position:relative;
  margin:clamp(24px,4vw,38px) 0 12px;
  padding-inline-start:16px;
  color:var(--heading);
  font-size:clamp(1.28rem,2.3vw,1.72rem);
  line-height:1.65;
}
body.article-modern-view .article-content h2::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:.45em;
  width:5px;
  height:1.5em;
  border-radius:999px;
  background:var(--accent);
}
body.article-modern-view .article-content h3{
  margin:22px 0 8px;
  color:var(--heading);
  font-size:clamp(1.08rem,1.7vw,1.24rem);
  line-height:1.8;
}
body.article-modern-view .article-content p,
body.article-modern-view .article-content li,
body.article-modern-view .article-content blockquote{
  color:var(--text-muted);
  font-size:var(--article-body-font-size,1rem);
  line-height:2.05;
}
body.article-modern-view .article-content p{margin:0 0 14px}
body.article-modern-view .article-content ul,
body.article-modern-view .article-content ol{
  display:grid;
  gap:8px;
  margin:12px 0 18px;
  padding-inline-start:24px;
}
body.article-modern-view .article-content li{
  padding-inline-start:4px;
}
body.article-modern-view .article-content blockquote{
  margin:18px 0;
  padding:16px 18px;
  border-inline-start:4px solid var(--accent);
  border-radius:18px;
  background:rgba(82,114,101,.08);
}
body.article-modern-view .article-content a:not(.btn){
  color:var(--accent);
  font-weight:850;
  text-decoration:underline;
  text-underline-offset:4px;
}
body.article-modern-view .article-content .article-inline-photo{
  width:min(100%,720px);
  margin:22px auto;
  border-radius:22px;
  overflow:hidden;
  background:var(--surface);
  border:1px solid rgba(114,91,68,.14);
  box-shadow:0 16px 40px rgba(75,54,44,.08);
}
body.article-modern-view .article-content .article-inline-photo--small{width:min(100%,520px)}
body.article-modern-view .article-content .article-inline-photo--wide{width:min(100%,880px)}
body.article-modern-view .article-content .article-inline-photo img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  max-height:340px;
  object-fit:cover;
}
body.article-modern-view .article-content .article-inline-photo figcaption{
  padding:9px 14px;
  color:var(--text-muted);
  font-size:.86rem;
  line-height:1.9;
  text-align:center;
  background:rgba(246,239,230,.74);
}
.article-table-card{
  margin:22px 0;
  padding:0;
  border:1px solid rgba(114,91,68,.14);
  border-radius:20px;
  overflow:hidden;
  background:#fffdf8;
  box-shadow:0 14px 34px rgba(75,54,44,.06);
}
.article-table-card figcaption{
  padding:12px 14px;
  color:var(--heading);
  font-weight:900;
  background:rgba(82,114,101,.08);
}
.article-table-scroll{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
body.article-modern-view .article-content table{
  width:100%;
  min-width:620px;
  border-collapse:separate;
  border-spacing:0;
  font-size:.92rem;
  background:#fff;
}
body.article-modern-view .article-content th,
body.article-modern-view .article-content td{
  padding:12px 13px;
  border-bottom:1px solid rgba(114,91,68,.14);
  text-align:start;
  vertical-align:top;
}
body.article-modern-view .article-content th{
  background:rgba(82,114,101,.08);
  color:var(--heading);
  font-weight:900;
}
body.article-modern-view .article-content tr:last-child td{border-bottom:0}
.article-note-card,
body.article-modern-view .article-content .article-note-card{
  padding:16px 18px;
  margin:18px 0;
  background:linear-gradient(135deg,rgba(82,114,101,.10),rgba(255,253,248,.96));
}
.article-note-card strong,
body.article-modern-view .article-content .article-note-card strong{
  display:block;
  margin-bottom:6px;
  color:var(--heading);
  font-size:.98rem;
}
.article-note-card p,
body.article-modern-view .article-content .article-note-card p{
  margin:0;
  color:var(--text-muted);
  font-size:.96rem;
}
.article-note-card--warning,
body.article-modern-view .article-content .article-note-card--warning{
  background:linear-gradient(135deg,rgba(218,144,63,.14),rgba(255,253,248,.96));
}
.article-cta-inline,
.article-final-cta{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  padding:18px;
  background:linear-gradient(135deg,rgba(82,114,101,.14),rgba(255,253,248,.96));
}
.article-cta-inline h2,
.article-final-cta h2{
  margin:0 0 4px;
  color:var(--heading);
  font-size:clamp(1.2rem,2vw,1.48rem);
}
.article-cta-inline p,
.article-final-cta p{
  margin:0;
  color:var(--text-muted);
}
.article-faq-list{
  display:grid;
  gap:10px;
  margin:20px 0;
}
.article-faq-list details{
  border:1px solid rgba(114,91,68,.14);
  border-radius:18px;
  background:rgba(255,255,255,.62);
  padding:13px 15px;
}
.article-faq-list summary{
  cursor:pointer;
  color:var(--heading);
  font-weight:900;
}
.article-faq-list p{
  margin:10px 0 0 !important;
}
.article-final-cta{
  margin-top:0;
}
.article-bottom-actions{
  margin-top:0;
}
.article-mobile-consult{
  display:none;
}
[data-theme="dark"] .article-modern-hero,
[data-theme="dark"] .article-sidebar-card,
[data-theme="dark"] body.article-modern-view .article-content,
[data-theme="dark"] .article-quick-summary,
[data-theme="dark"] .article-note-card,
[data-theme="dark"] .article-final-cta,
[data-theme="dark"] .article-table-card{
  background:linear-gradient(135deg,rgba(31,30,43,.94),rgba(25,24,36,.9));
  border-color:rgba(255,255,255,.12);
}
[data-theme="dark"] .article-meta-modern span,
[data-theme="dark"] body.article-modern-view .article-content table{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.12);
}
[data-theme="dark"] body.article-modern-view .article-content th,
[data-theme="dark"] .article-table-card figcaption{
  background:rgba(255,255,255,.07);
}
@media(max-width:980px){
  .article-modern-hero,
  .article-modern-grid,
  .article-cta-inline,
  .article-final-cta{
    grid-template-columns:1fr;
  }
  .article-modern-sidebar{
    position:relative;
    top:auto;
    order:2;
    max-height:none;
    overflow:visible;
  }
  .article-sidebar-cta{display:none}
  .article-modern-sidebar .article-toc-nav{
    max-height:none;
    overflow:visible;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:640px){
  body.article-modern-view .article-section{
    padding-top:calc(var(--header-h) + 16px);
    padding-bottom:82px;
  }
  .article-modern-hero,
  body.article-modern-view .article-content,
  .article-quick-summary,
  .article-note-card,
  .article-final-cta,
  .article-sidebar-card{
    border-radius:20px;
  }
  .article-modern-hero{
    padding:18px;
  }
  .article-modern-hero h1{
    font-size:var(--article-title-font-size,clamp(1.55rem,8vw,2.15rem));
    line-height:1.55;
  }
  .article-meta-modern span{
    font-size:.78rem;
  }
  .article-toc-nav{
    grid-template-columns:1fr;
  }
  body.article-modern-view .article-content{
    padding:18px;
  }
  body.article-modern-view .article-content table{
    min-width:560px;
  }
  .article-hero-actions .btn,
  .article-bottom-actions .btn{
    width:100%;
    justify-content:center;
  }
  .article-mobile-consult{
    display:block;
    position:fixed;
    right:12px;
    left:12px;
    bottom:12px;
    z-index:9998;
    padding:9px;
    border:1px solid rgba(114,91,68,.16);
    border-radius:18px;
    background:rgba(255,253,248,.94);
    backdrop-filter:blur(14px);
    box-shadow:0 16px 44px rgba(75,54,44,.18);
  }
  .article-mobile-consult .btn{
    width:100%;
    justify-content:center;
  }
}

/* =====================================================================
   User authentication & user panel — visual redesign (v78 UI refresh)
   Scoped to .auth-page / .user-panel-page / .auth-section / .user-panel-section
   so global components on other pages are untouched. Uses design tokens
   (--accent, --gold, --surface, --border, --heading …) so it stays on-brand
   and theme-safe, and logical properties so RTL (fa) and LTR (en) both work.
   ===================================================================== */
.user-nav-link { white-space: nowrap; }
.auth-section, .user-panel-section { padding-top: clamp(6rem, 9vw, 7.5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.auth-section .is-hidden, .user-panel-section .is-hidden { display: none !important; }

/* ---------- Auth: shell & split card ---------- */
.auth-shell { width: min(1040px, 100%); max-width: 1040px; margin-inline: auto; }
.auth-card { max-width: none; margin-inline: auto; padding: 0; overflow: hidden; border-radius: var(--radius-lg); }
.auth-card-grid { display: grid; grid-template-columns: 1.02fr 1.14fr; min-height: 100%; }

/* Brand / trust side panel (decorative, additive) */
.auth-aside {
  position: relative;
  padding: clamp(26px, 3.4vw, 44px);
  color: #fdfcf8;
  display: flex;
  flex-direction: column;
  gap: 22px;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 8%, rgba(255,255,255,.24), transparent 44%),
    radial-gradient(circle at 6% 96%, color-mix(in srgb, var(--gold) 60%, transparent), transparent 48%),
    linear-gradient(155deg, var(--accent-strong), color-mix(in srgb, var(--accent) 76%, var(--accent-strong)) 58%, color-mix(in srgb, var(--accent-strong) 78%, #22574a));
}
.auth-aside::after {
  content: "";
  position: absolute;
  inset-block-start: -40%;
  inset-inline-end: -30%;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.16), transparent 62%);
  pointer-events: none;
}
.auth-aside-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; }
.auth-aside-brand .dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 16px rgba(255,255,255,.8); }
.auth-aside h2 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.5; margin: 0; letter-spacing: -.01em; }
.auth-aside p { color: rgba(255,255,255,.9); font-size: 1rem; line-height: 1.9; margin: 0; }
.auth-trust { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: 12px; }
.auth-trust li { display: flex; align-items: center; gap: 12px; font-weight: 650; color: #fff; }
.auth-trust .ic {
  flex: none; width: 40px; height: 40px; border-radius: 13px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(6px);
}
.auth-trust .ic svg { width: 20px; height: 20px; stroke: #fff; }

/* Auth main column (holds the existing forms & tabs) */
.auth-main { padding: clamp(26px, 3.4vw, 44px); background: var(--surface-strong); }
.auth-head { align-items: flex-start; margin-bottom: 6px; max-width: none; }
.auth-head h1 { font-size: clamp(1.65rem, 3.2vw, 2.15rem); font-weight: 900; margin-top: 8px; }
.auth-head .hint { margin-top: 10px; }

/* Segmented tabs — on-brand sage/gold */
.auth-tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 22px 0 18px; padding: 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  box-shadow: inset 0 1px 3px rgba(86,70,49,.06);
}
.auth-tab {
  flex: 1 1 auto; min-width: 90px;
  border: 0; border-radius: 999px;
  padding: 11px 14px; background: transparent;
  cursor: pointer; font: inherit; font-weight: 800; font-size: .96rem;
  color: var(--text-muted);
  transition: color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.auth-tab:hover { color: var(--heading); }
.auth-tab.active {
  color: var(--on-accent);
  background: linear-gradient(135deg, var(--accent-strong), var(--accent));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 34%, transparent);
}

.auth-form { display: grid; gap: 15px; }
.auth-form .field span { font-size: .92rem; }

/* Google sign-in button */
.google-login {
  justify-content: center; width: 100%;
  background: var(--surface-strong);
  border: 1px solid var(--border);
  color: var(--heading);
  font-weight: 800;
}
.google-login:hover { background: var(--surface-solid); }
.google-login::before {
  content: "";
  display: inline-block; width: 20px; height: 20px;
  margin-inline-end: 10px; flex: none;
  background: no-repeat center / contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="%234285F4" d="M45.12 24.5c0-1.56-.14-3.06-.4-4.5H24v8.51h11.84c-.51 2.75-2.06 5.08-4.39 6.64v5.52h7.11c4.16-3.83 6.56-9.47 6.56-16.17z"/><path fill="%2334A853" d="M24 46c5.94 0 10.92-1.97 14.56-5.33l-7.11-5.52c-1.97 1.32-4.49 2.1-7.45 2.1-5.73 0-10.58-3.87-12.31-9.07H4.34v5.7C7.96 41.07 15.4 46 24 46z"/><path fill="%23FBBC05" d="M11.69 28.18c-.44-1.32-.69-2.73-.69-4.18s.25-2.86.69-4.18v-5.7H4.34C2.85 17.09 2 20.45 2 24s.85 6.91 2.34 9.88l7.35-5.7z"/><path fill="%23EA4335" d="M24 10.75c3.23 0 6.13 1.11 8.41 3.29l6.31-6.31C34.91 4.18 29.93 2 24 2 15.4 2 7.96 6.93 4.34 14.12l7.35 5.7c1.73-5.2 6.58-9.07 12.31-9.07z"/></svg>');
}

.or-line { display: flex; align-items: center; gap: 12px; color: var(--text-muted); font-size: .9rem; font-weight: 700; }
.or-line::before, .or-line::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* Small reassurance note under the auth form (additive) */
.auth-secure-note {
  display: flex; align-items: center; gap: 9px;
  margin-top: 4px; padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--text); font-size: .9rem; font-weight: 650;
}
.auth-secure-note svg { width: 17px; height: 17px; flex: none; stroke: var(--accent-strong); }

/* Form messages inside auth & panel */
.auth-section .form-message, .user-panel-section .form-message {
  display: none; margin-top: 14px; padding: 12px 15px;
  border-radius: var(--radius-sm); border: 1px solid transparent; font-weight: 750;
}
.auth-section .form-message.show, .user-panel-section .form-message.show { display: block; }
.auth-section .form-message.success, .user-panel-section .form-message.success {
  background: color-mix(in srgb, var(--success) 12%, transparent);
  border-color: color-mix(in srgb, var(--success) 40%, transparent);
  color: var(--success);
}
.auth-section .form-message.error, .user-panel-section .form-message.error {
  background: color-mix(in srgb, var(--danger) 11%, transparent);
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
  color: var(--danger);
}
.form-message .mini-link { display: inline-block; margin-top: 6px; color: var(--accent-strong); font-weight: 800; text-decoration: underline; }

/* ---------- User panel / dashboard ---------- */
/* Keep side margins small on desktop while staying readable (brief: ≤~75px). */
.user-panel-shell { width: min(1320px, calc(100% - 32px)); max-width: 1320px; margin-inline: auto; display: grid; gap: clamp(16px, 2vw, 24px); }

.user-panel-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--sky) 30%, transparent), transparent 46%),
    radial-gradient(circle at 4% 100%, var(--accent-soft), transparent 52%),
    linear-gradient(135deg, var(--surface-strong), var(--surface-solid));
}
.user-panel-hero h1 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 900; margin-top: 10px; }
.user-panel-hero .hint { margin-top: 12px; max-width: 60ch; }

/* Panel section wrapper (was the 2-col grid; now hosts tabs) */
.panel-grid { display: grid; gap: clamp(16px, 2vw, 22px); }
.full-panel-card { grid-column: 1 / -1; }

/* Tab navigation */
.panel-tabs {
  display: none; /* revealed by panel-tabs.js; falls back to stacked sections without JS */
  gap: 6px; padding: 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  box-shadow: var(--shadow-soft);
  overflow-x: auto; scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
body.js-panel-tabs .panel-tabs { display: flex; }
.panel-tab {
  flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  white-space: nowrap;
  border: 0; border-radius: calc(var(--radius-md) - 8px);
  padding: 12px 18px; background: transparent;
  cursor: pointer; font: inherit; font-weight: 800; font-size: .98rem;
  color: var(--text-muted);
  transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}
.panel-tab svg { width: 19px; height: 19px; flex: none; }
.panel-tab:hover { color: var(--heading); background: var(--accent-soft); }
.panel-tab.active {
  color: var(--on-accent);
  background: linear-gradient(135deg, var(--accent-strong), var(--accent));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 32%, transparent);
}

/* Tab panels: visible by default (no-JS fallback), toggled once JS is ready */
.panel-tabpanels { display: grid; gap: clamp(16px, 2vw, 22px); }
.panel-tabpanels.tabs-enabled .panel-tabpanel { display: none; }
.panel-tabpanels.tabs-enabled .panel-tabpanel.is-active { display: block; animation: panelFade .28s ease; }
@keyframes panelFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Cards inside the panel */
.user-panel-section .card h2 { font-size: clamp(1.2rem, 2.1vw, 1.55rem); font-weight: 900; margin: 0; }
.user-panel-section .card h3 { font-size: 1.02rem; font-weight: 850; }
.account-card, .request-card { padding: clamp(20px, 2.4vw, 30px); }
.account-card { display: grid; gap: 18px; align-content: start; }

/* Account details list */
.account-card .detail-list { display: grid; gap: 0; margin-top: 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: color-mix(in srgb, var(--surface) 70%, transparent); }
.account-card .detail-list div { display: grid; grid-template-columns: 7.5rem 1fr; gap: .75rem; align-items: baseline; padding: 12px 15px; border: 0; border-bottom: 1px solid var(--border); }
.account-card .detail-list div:last-child { border-bottom: 0; }
.account-card dt { color: var(--text-muted); font-weight: 750; font-size: .9rem; }
.account-card dd { margin: 0; overflow-wrap: anywhere; color: var(--heading); font-weight: 700; }

/* Change-password block as a distinct sub-section */
#change-password-form { display: grid; gap: 14px; margin-top: 4px; padding-top: 20px; border-top: 1px dashed var(--border); }
#change-password-form h3 { margin: 0; }

.panel-form { display: grid; gap: 16px; }
.panel-form .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.panel-form .field.full { grid-column: 1 / -1; }

/* Selected-course notice */
.selected-course-notice {
  margin: 4px 0 2px; padding: 13px 15px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--success) 34%, transparent);
  background: color-mix(in srgb, var(--success) 10%, transparent);
  color: var(--success); font-weight: 750; line-height: 1.8;
}

/* Generic vertical rhythm helper used across the panel */
.spaced-block { display: grid; gap: 12px; }

/* "My requests" columns + cards */
.requests-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(16px, 2vw, 22px); margin-top: 8px; }
.requests-columns > div { display: grid; gap: 12px; align-content: start; }
.requests-columns > div > h3 { display: flex; align-items: center; gap: 8px; }
.user-request-item {
  display: grid; gap: 8px; padding: 16px 17px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-strong) 80%, transparent);
  box-shadow: 0 6px 18px rgba(86,70,49,.05);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.user-request-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.user-request-item > div { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.user-request-item strong { color: var(--heading); font-weight: 850; font-size: 1.02rem; }
.user-request-item p { color: var(--text-muted); }
.user-request-item small { color: var(--text-muted); direction: ltr; text-align: start; font-size: .82rem; }
.user-request-item .badge {
  flex: none; padding: 5px 12px; border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  font-size: .78rem; font-weight: 800; white-space: nowrap;
}
.user-request-item .badge.soft {
  background: color-mix(in srgb, var(--surface) 82%, var(--accent-soft));
  color: var(--text-muted);
  border-color: var(--border);
  font-weight: 650;
  margin: 2px 0;
}
.user-request-item .hint { display: flex; flex-wrap: wrap; gap: 6px; }

/* Beautiful empty state (panel.js injects <p class="hint"> when a list is empty) */
.requests-columns .spaced-block > .hint:only-child {
  margin: 0; text-align: center; color: var(--text-muted); font-weight: 650;
  padding: 28px 18px;
  border: 1px dashed color-mix(in srgb, var(--border) 88%, var(--accent));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
}
.requests-columns .spaced-block > .hint:only-child::before {
  content: ""; display: block; width: 34px; height: 34px; margin: 0 auto 10px;
  background: no-repeat center / contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="%23527265" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16M4 12h16M4 17h10"/><circle cx="18.5" cy="17.5" r="3.2"/></svg>');
  opacity: .8;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .auth-card-grid { grid-template-columns: 1fr; }
  .auth-aside { order: -1; gap: 16px; padding: 26px 24px; }
  .auth-trust { margin-top: 6px; }
}
@media (max-width: 820px) {
  .requests-columns { grid-template-columns: 1fr; }
  .panel-form .grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .account-card .detail-list div { grid-template-columns: 1fr; gap: 3px; }
  .panel-tab { padding: 11px 14px; font-size: .92rem; }
  .auth-tab { min-width: 0; padding: 10px 10px; font-size: .9rem; }
}

/* =====================================================================
   VISUAL REFINEMENT PASS — shared header/nav, home page, and public
   content-list pages (articles / podcasts / clips / courses).
   Additive only: refines shared primitives (nav, buttons, cards,
   section heads, empty states) plus the content-list hero, so the
   home page and list pages gain the same polish as the auth pages.
   Uses design tokens + logical properties (RTL/LTR safe). No HTML
   structure, IDs, data-attributes, or JS-referenced classes changed.
   ===================================================================== */

/* ---------- Header / navigation polish (every page) ---------- */
.header-shell {
  border-color: color-mix(in srgb, var(--accent) 20%, var(--border));
  box-shadow: 0 16px 44px color-mix(in srgb, var(--accent-strong) 13%, rgba(22, 20, 42, .10));
}
.site-header.scrolled .header-shell {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
}
.nav-link { letter-spacing: -.01em; }
/* Make the current page read more clearly than a plain hover */
.desktop-nav .nav-link.active {
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent-soft) 92%, transparent);
}
.desktop-nav .nav-link.active::after {
  left: 22%; right: 22%;
  bottom: 3px; height: 2.5px;
  background: linear-gradient(90deg, var(--accent-strong), var(--accent));
}
/* A touch more presence on the header call-to-action buttons */
.header-actions .btn.primary {
  box-shadow: 0 16px 36px color-mix(in srgb, var(--accent) 36%, transparent);
}
.header-actions .btn.primary:hover {
  box-shadow: 0 22px 48px color-mix(in srgb, var(--accent) 44%, transparent);
}

/* ---------- Public content-list hero (articles/podcasts/clips/courses) ---------- */
/* Tame the very large global h1 inside the hero card (same fix used on auth). */
.content-list-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 3vw, 38px);
  align-items: center;
}
.content-list-hero > * { position: relative; z-index: 1; }
.content-list-hero .section-kicker { margin-bottom: 14px; }
.content-list-hero h1 {
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  font-weight: 900;
  letter-spacing: -.02em;
}
.content-list-hero .lead { margin-top: 12px; max-width: 62ch; }
/* Soft on-brand glow in the corner, echoing the auth aside. */
.content-list-hero::after {
  content: "";
  position: absolute;
  inset-block-start: -55%;
  inset-inline-start: -12%;
  width: 360px; height: 360px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%);
}

/* ---------- Card grids: a little more breathing room ---------- */
.content-list-grid { gap: clamp(16px, 1.6vw, 22px); }

/* ---------- Media-card polish (home grids + list pages) ---------- */
/* Subtle brand accent line that appears on hover (cards are position:relative). */
.media-card::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  height: 3px;
  border-start-start-radius: var(--radius-md);
  border-start-end-radius: var(--radius-md);
  background: linear-gradient(90deg, var(--accent-strong), var(--accent), var(--gold));
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 3;
}
.media-card:hover::after { opacity: 1; }

/* ---------- Beautiful empty state (also fixes the undefined --muted color) ---------- */
.empty-state {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
  font-weight: 800;
  color: var(--text-muted);
  padding: clamp(34px, 5vw, 54px) 24px !important;
  border: 1.5px dashed color-mix(in srgb, var(--accent) 42%, var(--border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
}
.empty-state::before {
  content: "";
  width: 48px; height: 48px;
  border-radius: 15px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  background:
    color-mix(in srgb, var(--accent-soft) 92%, transparent)
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%236d687d" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5h14M5 12h9M5 19h6"/></svg>') center / 24px no-repeat;
}
.empty-state p { margin: 0; font-weight: 800; color: var(--text-muted); }

/* ---------- Small responsive guards for the content-list pages ---------- */
@media (max-width: 1080px) {
  .content-list-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .content-list-hero { flex-direction: column; align-items: flex-start; }
  .content-list-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .content-list-grid { grid-template-columns: 1fr; }
}


/* =====================================================================
   v82 — Article detail/list professional redesign
   Scoped only to article pages and articles list. Keeps course, podcast,
   clip, service, auth and panel layouts untouched.
   ===================================================================== */
body.article-modern-view {
  --article-card-bg: color-mix(in srgb, var(--surface-strong) 92%, #fffdf8 8%);
  --article-card-bg-soft: color-mix(in srgb, var(--surface) 86%, var(--accent-soft) 14%);
  --article-card-border: color-mix(in srgb, var(--accent) 24%, var(--border));
  --article-card-shadow: 0 22px 58px color-mix(in srgb, var(--accent-strong) 12%, transparent);
  --article-copy-color: var(--text);
  --article-muted-color: var(--text-muted);
}
body.article-modern-view[data-theme="dark"] {
  --article-card-bg: color-mix(in srgb, var(--surface-strong) 94%, #10181b 6%);
  --article-card-bg-soft: color-mix(in srgb, var(--surface) 82%, #0f171a 18%);
  --article-card-border: color-mix(in srgb, var(--accent-strong) 24%, var(--border));
  --article-card-shadow: 0 24px 64px rgba(0, 0, 0, .34);
  --article-copy-color: #f8f3ea;
  --article-muted-color: #d8d0c5;
}
body.article-modern-view .article-layout {
  max-width: min(1420px, calc(100vw - 22px));
}
body.article-modern-view .article-modern-page {
  gap: clamp(18px, 2.6vw, 30px);
}
body.article-modern-view .article-modern-hero,
body.article-modern-view .article-sidebar-card,
body.article-modern-view .article-quick-summary,
body.article-modern-view .article-note-card,
body.article-modern-view .article-final-cta,
body.article-modern-view .article-content {
  border-color: var(--article-card-border);
  box-shadow: var(--article-card-shadow);
}
body.article-modern-view .article-modern-hero {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 8% 8%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 34%),
    radial-gradient(circle at 94% 22%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 28%),
    linear-gradient(135deg, var(--article-card-bg), var(--article-card-bg-soft));
}
body.article-modern-view .article-modern-hero::after {
  content: "";
  position: absolute;
  inset-inline-start: clamp(18px, 4vw, 54px);
  inset-block-end: -70px;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 24%, transparent), transparent 64%);
  filter: blur(6px);
  opacity: .8;
  pointer-events: none;
  z-index: -1;
}
body.article-modern-view .article-kicker,
body.article-modern-view .article-quick-summary span,
body.article-modern-view .article-toc-nav a.active,
body.article-modern-view .article-content a:not(.btn) {
  color: var(--accent-strong);
}
body.article-modern-view .article-lead-modern,
body.article-modern-view .article-meta-modern span,
body.article-modern-view .article-quick-summary p,
body.article-modern-view .article-sidebar-cta p,
body.article-modern-view .article-note-card p,
body.article-modern-view .article-final-cta p,
body.article-modern-view .article-content p,
body.article-modern-view .article-content li,
body.article-modern-view .article-content blockquote,
body.article-modern-view .article-toc-nav a,
body.article-modern-view .article-toc-empty {
  color: var(--article-muted-color);
}
body.article-modern-view .article-modern-hero h1,
body.article-modern-view .article-sidebar-card strong,
body.article-modern-view .article-content h2,
body.article-modern-view .article-content h3,
body.article-modern-view .article-content strong,
body.article-modern-view .article-final-cta h2 {
  color: var(--heading);
}
body.article-modern-view .article-modern-grid {
  grid-template-columns: minmax(248px, 292px) minmax(0, 1fr);
  gap: clamp(18px, 2.5vw, 30px);
  align-items: start;
}
body.article-modern-view .article-modern-sidebar {
  position: sticky;
  top: calc(var(--header-h) + 14px);
  z-index: 15;
  align-self: start;
  max-height: calc(100svh - var(--header-h) - 28px);
  overflow: visible;
}
body.article-modern-view .article-toc-card {
  position: relative;
  overflow: hidden;
  padding: 17px;
  background:
    linear-gradient(135deg, var(--article-card-bg), var(--article-card-bg-soft));
  backdrop-filter: blur(18px);
}
body.article-modern-view .article-toc-card::before {
  content: "";
  position: absolute;
  inset-block: 14px;
  inset-inline-start: 0;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(var(--accent-strong), var(--accent), var(--gold));
}
body.article-modern-view .article-toc-card > strong {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
body.article-modern-view .article-toc-card > strong::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-strong), var(--gold));
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 14%, transparent);
}
body.article-modern-view .article-modern-sidebar .article-toc-nav {
  max-height: calc(100svh - var(--header-h) - 170px);
  padding-inline-end: 3px;
  overflow-y: auto;
}
body.article-modern-view .article-toc-nav a,
body.article-modern-view .article-toc-empty {
  border: 1px solid transparent;
}
body.article-modern-view .article-toc-nav a:hover {
  border-color: color-mix(in srgb, var(--accent) 20%, transparent);
  background: color-mix(in srgb, var(--accent-soft) 80%, transparent);
  color: var(--heading);
}
body.article-modern-view .article-toc-nav a.active {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
  background: color-mix(in srgb, var(--accent-soft) 95%, var(--surface-strong) 5%);
  box-shadow: inset 4px 0 0 var(--accent-strong);
}
[dir="ltr"] body.article-modern-view .article-toc-nav a.active {
  box-shadow: inset -4px 0 0 var(--accent-strong);
}
body.article-modern-view .article-sidebar-cta {
  background:
    radial-gradient(circle at 20% 0, color-mix(in srgb, var(--gold) 18%, transparent), transparent 45%),
    linear-gradient(135deg, var(--article-card-bg-soft), var(--article-card-bg));
}
body.article-modern-view .article-modern-main {
  gap: 18px;
  min-width: 0;
}
body.article-modern-view .article-content {
  background: var(--article-card-bg);
  color: var(--article-copy-color);
  line-height: 2.12;
}
body.article-modern-view .article-content h2 {
  padding-block-start: 6px;
}
body.article-modern-view .article-content h2::before {
  background: linear-gradient(var(--accent-strong), var(--accent), var(--gold));
}
body.article-modern-view .article-content blockquote,
body.article-modern-view .article-faq-list details {
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface-strong) 45%);
  border-color: var(--article-card-border);
}
body.article-modern-view .article-final-cta,
body.article-modern-view .article-quick-summary {
  background:
    radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 42%),
    linear-gradient(135deg, var(--article-card-bg-soft), var(--article-card-bg));
}

/* Articles listing page — professional article-only redesign. */
.content-list-page[data-content-kind="articles"] {
  --article-list-card-bg: color-mix(in srgb, var(--surface-strong) 90%, var(--bg-2) 10%);
  --article-list-card-border: color-mix(in srgb, var(--accent) 24%, var(--border));
}
.content-list-page[data-content-kind="articles"] .content-list-hero {
  min-height: clamp(230px, 28vw, 360px);
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border));
  border-radius: clamp(26px, 3vw, 38px);
  background:
    radial-gradient(circle at 12% 12%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 36%),
    radial-gradient(circle at 88% 0, color-mix(in srgb, var(--gold) 17%, transparent), transparent 30%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface-strong) 94%, transparent), color-mix(in srgb, var(--surface) 82%, transparent));
  box-shadow: 0 26px 70px color-mix(in srgb, var(--accent-strong) 14%, transparent);
}
.content-list-page[data-content-kind="articles"] .content-list-hero::before {
  content: "مقالات";
  position: absolute;
  inset-inline-end: clamp(20px, 5vw, 70px);
  inset-block-end: -18px;
  color: color-mix(in srgb, var(--accent-strong) 10%, transparent);
  font-size: clamp(4.6rem, 13vw, 12rem);
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
  z-index: 0;
}
html[lang="en"] .content-list-page[data-content-kind="articles"] .content-list-hero::before {
  content: "Articles";
  font-family: var(--en-font);
}
.content-list-page[data-content-kind="articles"] .content-list-hero .section-kicker {
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--surface-strong) 82%, transparent);
}
.content-list-page[data-content-kind="articles"] .content-list-hero h1 {
  max-width: 780px;
  color: var(--heading);
  font-size: clamp(2.15rem, 4.2vw, 3.7rem);
  line-height: 1.24;
}
.content-list-page[data-content-kind="articles"] .content-list-hero .lead {
  color: var(--text);
  opacity: .94;
  font-weight: 600;
}
.content-list-page[data-content-kind="articles"] .content-list-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
  align-items: stretch;
}
.content-list-page[data-content-kind="articles"] .article-list-card {
  position: relative;
  min-height: 100%;
  border: 1px solid var(--article-list-card-border);
  border-radius: clamp(22px, 2.4vw, 30px);
  background: var(--article-list-card-bg);
  box-shadow: 0 18px 50px color-mix(in srgb, var(--accent-strong) 10%, transparent);
  isolation: isolate;
}
.content-list-page[data-content-kind="articles"] .article-list-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: inherit;
  border: 1px solid color-mix(in srgb, var(--surface-strong) 50%, transparent);
  pointer-events: none;
  opacity: .62;
  z-index: 1;
}
.content-list-page[data-content-kind="articles"] .article-list-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent) 44%, var(--border));
  box-shadow: 0 28px 70px color-mix(in srgb, var(--accent-strong) 16%, transparent);
}
.content-list-page[data-content-kind="articles"] .article-list-card .media-thumb {
  aspect-ratio: 16 / 10.5;
  border-radius: clamp(20px, 2vw, 26px);
  background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface) 40%);
}
.content-list-page[data-content-kind="articles"] .article-list-card .media-thumb-link {
  padding: 10px 10px 0;
}
.content-list-page[data-content-kind="articles"] .article-card-chip {
  inset-inline-start: 22px;
  inset-block-start: 22px;
  color: var(--on-accent);
  background: linear-gradient(135deg, var(--accent-strong), var(--accent));
  border: 1px solid color-mix(in srgb, #fff 24%, transparent);
}
.content-list-page[data-content-kind="articles"] .article-list-card .media-body {
  position: relative;
  z-index: 2;
  gap: 10px;
  padding: clamp(16px, 2vw, 24px);
}
.content-list-page[data-content-kind="articles"] .article-list-card .article-card-meta span {
  color: var(--accent-strong);
  font-weight: 800;
}
.content-list-page[data-content-kind="articles"] .article-list-card h3 a {
  color: var(--heading);
  font-size: clamp(1.08rem, 1.45vw, 1.28rem);
  line-height: 1.65;
}
.content-list-page[data-content-kind="articles"] .article-list-card h3 a:hover {
  color: var(--accent-strong);
}
.content-list-page[data-content-kind="articles"] .article-list-card .media-body p {
  color: var(--text-muted);
  line-height: 2;
  -webkit-line-clamp: 4;
}
.content-list-page[data-content-kind="articles"] .article-list-card .article-card-cta {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  color: var(--accent-strong);
}
@media (max-width: 1080px) {
  .content-list-page[data-content-kind="articles"] .content-list-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 980px) {
  body.article-modern-view .article-modern-grid {
    grid-template-columns: 1fr;
  }
  body.article-modern-view .article-modern-sidebar {
    position: sticky;
    top: calc(var(--header-h) + 8px);
    order: 0;
    max-height: min(38svh, 320px);
    overflow: visible;
  }
  body.article-modern-view .article-sidebar-cta {
    display: none;
  }
  body.article-modern-view .article-modern-sidebar .article-toc-nav {
    max-height: min(24svh, 190px);
    overflow-y: auto;
  }
  body.article-modern-view .article-toc-card {
    backdrop-filter: blur(20px);
  }
}
@media (max-width: 640px) {
  body.article-modern-view .article-layout {
    max-width: min(100%, calc(100vw - 18px));
  }
  body.article-modern-view .article-modern-hero,
  body.article-modern-view .article-toc-card,
  body.article-modern-view .article-content,
  body.article-modern-view .article-quick-summary,
  body.article-modern-view .article-note-card,
  body.article-modern-view .article-final-cta {
    border-radius: 20px;
  }
  body.article-modern-view .article-modern-sidebar {
    top: calc(var(--header-h) + 7px);
    max-height: none;
  }
  body.article-modern-view .article-toc-card {
    padding: 12px;
  }
  body.article-modern-view .article-toc-card > strong {
    margin-bottom: 8px;
    font-size: .92rem;
  }
  body.article-modern-view .article-modern-sidebar .article-toc-nav,
  body.article-modern-view .article-toc-nav {
    display: flex;
    gap: 8px;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding-block-end: 4px;
    scrollbar-width: thin;
  }
  body.article-modern-view .article-toc-nav a,
  body.article-modern-view .article-toc-empty {
    flex: 0 0 auto;
    max-width: min(72vw, 300px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 8px 11px;
    font-size: .82rem;
    background: color-mix(in srgb, var(--surface-strong) 72%, transparent);
  }
  body.article-modern-view .article-toc-nav a.is-sub {
    padding-inline-start: 11px;
  }
  body.article-modern-view .article-content {
    line-height: 2.06;
  }
  .content-list-page[data-content-kind="articles"] .content-list-hero {
    min-height: 0;
    padding: 22px;
  }
  .content-list-page[data-content-kind="articles"] .content-list-hero::before {
    font-size: clamp(4rem, 26vw, 8rem);
    opacity: .7;
  }
  .content-list-page[data-content-kind="articles"] .content-list-grid {
    grid-template-columns: 1fr;
  }
  .content-list-page[data-content-kind="articles"] .article-list-card:hover {
    transform: translateY(-3px);
  }
}

/* v82 dark-mode selectors for pages where data-theme is on <body>. */
body.article-modern-view[data-theme="dark"] .article-kicker,
body.article-modern-view[data-theme="dark"] .article-quick-summary span,
body.article-modern-view[data-theme="dark"] .article-toc-nav a.active,
body.article-modern-view[data-theme="dark"] .article-content a:not(.btn) {
  color: var(--accent-strong);
}
body.article-modern-view[data-theme="dark"] .article-modern-hero,
body.article-modern-view[data-theme="dark"] .article-sidebar-card,
body.article-modern-view[data-theme="dark"] .article-quick-summary,
body.article-modern-view[data-theme="dark"] .article-note-card,
body.article-modern-view[data-theme="dark"] .article-final-cta,
body.article-modern-view[data-theme="dark"] .article-content {
  background:
    radial-gradient(circle at 12% 0, rgba(153,183,167,.12), transparent 40%),
    linear-gradient(135deg, var(--article-card-bg), var(--article-card-bg-soft));
}
body.article-modern-view[data-theme="dark"] .article-meta-modern span,
body.article-modern-view[data-theme="dark"] .article-faq-list details,
body.article-modern-view[data-theme="dark"] .article-content blockquote {
  background: rgba(255,255,255,.065);
  border-color: rgba(255,255,255,.14);
}
body.article-modern-view[data-theme="dark"] .article-toc-nav a:hover,
body.article-modern-view[data-theme="dark"] .article-toc-nav a.active {
  background: rgba(153,183,167,.16);
  color: var(--heading);
}
body.content-list-page[data-content-kind="articles"][data-theme="dark"] {
  --article-list-card-bg: color-mix(in srgb, var(--surface-strong) 92%, #0f171a 8%);
  --article-list-card-border: color-mix(in srgb, var(--accent-strong) 24%, var(--border));
}
body.content-list-page[data-content-kind="articles"][data-theme="dark"] .content-list-hero .lead,
body.content-list-page[data-content-kind="articles"][data-theme="dark"] .article-list-card .media-body p,
body.content-list-page[data-content-kind="articles"][data-theme="dark"] .article-card-meta span {
  color: var(--text-muted);
}
body.content-list-page[data-content-kind="articles"][data-theme="dark"] .article-list-card h3 a,
body.content-list-page[data-content-kind="articles"][data-theme="dark"] .content-list-hero h1 {
  color: var(--heading);
}

/* v82-final: force real article pages to match the standalone article preview */
body.article-modern-view{
  --article-preview-bg:var(--bg);
  --article-preview-bg-2:var(--bg-2);
  --article-preview-surface:var(--surface-strong, var(--surface));
  --article-preview-surface-soft:var(--surface, var(--surface-solid));
  --article-preview-glass:color-mix(in srgb, var(--surface-strong, var(--surface)) 88%, transparent);
  --article-preview-heading:var(--heading);
  --article-preview-text:var(--text);
  --article-preview-muted:var(--text-muted);
  --article-preview-accent:var(--accent);
  --article-preview-accent-strong:var(--accent-strong, var(--accent));
  --article-preview-accent-soft:var(--accent-soft);
  --article-preview-gold:var(--gold, #c89146);
  --article-preview-border:color-mix(in srgb, var(--accent) 20%, var(--border));
  --article-preview-shadow:0 22px 60px color-mix(in srgb, var(--accent-strong, var(--accent)) 12%, transparent);
  --article-preview-shadow-soft:0 14px 38px color-mix(in srgb, var(--accent-strong, var(--accent)) 8%, transparent);
  color:var(--article-preview-text);
}
body.article-modern-view[data-theme="dark"]{
  --article-preview-glass:color-mix(in srgb, var(--surface-strong, var(--surface)) 90%, transparent);
  --article-preview-border:color-mix(in srgb, var(--accent-strong, var(--accent)) 24%, var(--border));
  --article-preview-shadow:0 24px 70px rgba(0,0,0,.38);
  --article-preview-shadow-soft:0 16px 44px rgba(0,0,0,.26);
  --article-preview-text:#f2ebdf;
  --article-preview-muted:#ded3c8;
}
body.article-modern-view .article-section{
  padding-top:calc(var(--header-h) + clamp(20px,4vw,48px));
  padding-bottom:70px;
}
body.article-modern-view .article-layout{
  width:min(calc(100vw - 4cm),1320px);
  max-width:100%;
  margin-inline:auto;
}
body.article-modern-view .article-article{
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  color:var(--article-preview-text);
}
body.article-modern-view .article-article::before,
body.article-modern-view .article-article::after{content:none;display:none}
body.article-modern-view .article-article:hover{transform:none;box-shadow:none;border-color:transparent}
body.article-modern-view .article-modern-page{display:grid;gap:clamp(18px,3vw,28px)}
body.article-modern-view .article-modern-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,420px);
  align-items:stretch;
  gap:clamp(16px,2.5vw,24px);
  padding:clamp(20px,3.2vw,34px);
  border:1px solid var(--article-preview-border);
  border-radius:28px;
  background:linear-gradient(135deg,var(--article-preview-glass),color-mix(in srgb,var(--article-preview-surface-soft) 72%,transparent));
  box-shadow:var(--article-preview-shadow);
  overflow:hidden;
}
body.article-modern-view .article-modern-hero.no-cover{grid-template-columns:1fr}
body.article-modern-view .article-hero-copy{min-width:0;display:flex;flex-direction:column;justify-content:center}
body.article-modern-view .article-kicker{
  width:max-content;
  max-width:100%;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  background:var(--article-preview-accent-soft);
  color:var(--article-preview-accent);
  font-weight:900;
  font-size:.86rem;
}
body.article-modern-view .article-modern-hero h1{
  margin:14px 0 10px;
  color:var(--article-preview-heading);
  font-size:var(--article-title-font-size,clamp(1.75rem,3.9vw,3.15rem));
  line-height:1.45;
  letter-spacing:-.04em;
  max-width:860px;
}
body.article-modern-view .article-meta-modern{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 12px}
body.article-modern-view .article-meta-modern span{
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  border:1px solid var(--article-preview-border);
  border-radius:999px;
  background:color-mix(in srgb,var(--article-preview-surface) 68%,transparent);
  color:var(--article-preview-muted);
  font-size:.82rem;
  line-height:1.7;
}
body.article-modern-view .article-lead-modern{
  margin:0;
  max-width:780px;
  color:var(--article-preview-muted);
  font-size:clamp(.98rem,1.35vw,1.08rem);
  line-height:2;
}
body.article-modern-view .article-hero-actions,
body.article-modern-view .article-bottom-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
body.article-modern-view .article-hero-media{min-width:0;align-self:center}
body.article-modern-view .article-cover-modern{
  width:100%;
  aspect-ratio:16/10.5;
  min-height:0;
  margin:0;
  border-radius:24px;
  border:1px solid var(--article-preview-border);
  box-shadow:0 18px 44px color-mix(in srgb, var(--accent-strong, var(--accent)) 13%, transparent);
  overflow:hidden;
  background:linear-gradient(135deg,var(--article-preview-accent-soft),var(--article-preview-surface));
}
body.article-modern-view .article-cover-modern img,
body.article-modern-view .article-cover-modern svg{
  width:100%;
  height:100%;
  max-height:360px;
  object-fit:cover;
  display:block;
  border-radius:24px;
}
body.article-modern-view .article-modern-grid{
  display:grid;
  grid-template-columns:252px minmax(0,1fr);
  gap:clamp(16px,2.5vw,24px);
  align-items:start;
}
body.article-modern-view .article-modern-sidebar{
  position:sticky;
  top:calc(var(--header-h) + 16px);
  display:grid;
  gap:12px;
  align-self:start;
  max-height:calc(100vh - var(--header-h) - 32px);
  overflow:visible;
  z-index:5;
}
body.article-modern-view .article-sidebar-card{
  padding:16px;
  border:1px solid var(--article-preview-border);
  border-radius:22px;
  background:var(--article-preview-glass);
  box-shadow:var(--article-preview-shadow-soft);
  backdrop-filter:blur(18px);
}
body.article-modern-view .article-sidebar-card strong{
  display:block;
  margin-bottom:10px;
  color:var(--article-preview-heading);
  font-size:.98rem;
}
body.article-modern-view .article-toc-card{position:relative}
body.article-modern-view .article-modern-sidebar .article-toc-nav,
body.article-modern-view .article-toc-nav{
  display:grid;
  gap:4px;
  max-height:calc(100vh - var(--header-h) - 150px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}
body.article-modern-view .article-toc-nav a,
body.article-modern-view .article-toc-empty{
  display:block;
  padding:7px 10px;
  border-radius:12px;
  color:var(--article-preview-muted);
  font-size:.88rem;
  line-height:1.75;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
body.article-modern-view .article-toc-nav a:hover{
  background:var(--article-preview-accent-soft);
  color:var(--article-preview-accent);
  transform:translateX(-2px);
}
[dir="ltr"] body.article-modern-view .article-toc-nav a:hover{transform:translateX(2px)}
body.article-modern-view .article-toc-nav a.is-sub{padding-inline-start:20px;font-size:.82rem;opacity:.92}
body.article-modern-view .article-toc-nav a.active{
  background:var(--article-preview-accent-soft);
  color:var(--article-preview-accent);
  font-weight:900;
  opacity:1;
  box-shadow:inset 3px 0 0 var(--article-preview-accent);
}
[dir="ltr"] body.article-modern-view .article-toc-nav a.active{box-shadow:inset -3px 0 0 var(--article-preview-accent)}
body.article-modern-view .article-sidebar-cta{background:linear-gradient(135deg,var(--article-preview-accent-soft),var(--article-preview-glass))}
body.article-modern-view .article-sidebar-cta p{margin:0 0 12px;color:var(--article-preview-muted);font-size:.88rem;line-height:1.9}
body.article-modern-view .article-sidebar-cta .btn{width:100%;min-height:42px;justify-content:center}
body.article-modern-view .article-modern-main{min-width:0;display:grid;gap:16px}
body.article-modern-view .article-quick-summary,
body.article-modern-view .article-note-card,
body.article-modern-view .article-final-cta,
body.article-modern-view .article-content{
  border:1px solid var(--article-preview-border);
  border-radius:22px;
  background:var(--article-preview-glass);
  box-shadow:var(--article-preview-shadow-soft);
}
body.article-modern-view .article-quick-summary{padding:18px 20px;background:linear-gradient(135deg,var(--article-preview-accent-soft),var(--article-preview-glass))}
body.article-modern-view .article-quick-summary span{display:block;margin-bottom:6px;color:var(--article-preview-accent);font-size:.92rem;font-weight:900}
body.article-modern-view .article-quick-summary p{margin:0;color:var(--article-preview-muted);font-size:.98rem;line-height:1.95}
body.article-modern-view .article-content{
  display:block;
  padding:clamp(20px,3vw,30px);
  border-radius:26px;
  color:var(--article-preview-text);
  font-size:var(--article-body-font-size,1rem);
  line-height:2.05;
}
body.article-modern-view .article-content > *:first-child{margin-top:0}
body.article-modern-view .article-content > *:last-child{margin-bottom:0}
body.article-modern-view .article-content h2,
body.article-modern-view .article-content h3{scroll-margin-top:calc(var(--header-h) + 24px)}
body.article-modern-view .article-content h2{
  position:relative;
  margin:clamp(24px,4vw,38px) 0 12px;
  padding-inline-start:16px;
  color:var(--article-preview-heading);
  font-size:clamp(1.28rem,2.3vw,1.72rem);
  line-height:1.65;
}
body.article-modern-view .article-content h2::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:.45em;
  width:5px;
  height:1.5em;
  border-radius:999px;
  background:var(--article-preview-accent);
}
body.article-modern-view .article-content h3{margin:22px 0 8px;color:var(--article-preview-heading);font-size:clamp(1.08rem,1.7vw,1.24rem);line-height:1.8}
body.article-modern-view .article-content p,
body.article-modern-view .article-content li,
body.article-modern-view .article-content blockquote{color:var(--article-preview-muted);font-size:var(--article-body-font-size,1rem);line-height:2.05}
body.article-modern-view .article-content p{margin:0 0 14px}
body.article-modern-view .article-content ul,
body.article-modern-view .article-content ol{display:grid;gap:8px;margin:12px 0 18px;padding-inline-start:24px}
body.article-modern-view .article-content li{padding-inline-start:4px}
body.article-modern-view .article-content blockquote{margin:18px 0;padding:16px 18px;border-inline-start:4px solid var(--article-preview-accent);border-radius:18px;background:var(--article-preview-accent-soft)}
body.article-modern-view .article-content a:not(.btn){color:var(--article-preview-accent);font-weight:900;text-decoration:underline;text-underline-offset:4px}
body.article-modern-view .article-content .article-inline-photo{width:min(100%,720px);margin:22px auto;border-radius:22px;overflow:hidden;background:var(--article-preview-surface);border:1px solid var(--article-preview-border);box-shadow:var(--article-preview-shadow-soft)}
body.article-modern-view .article-content .article-inline-photo img,
body.article-modern-view .article-content .article-inline-photo svg{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
body.article-modern-view .article-content .article-inline-photo figcaption{padding:9px 14px;color:var(--article-preview-muted);font-size:.86rem;line-height:1.9;text-align:center;background:var(--article-preview-surface-soft)}
body.article-modern-view .article-note-card{padding:16px 18px;margin:18px 0;background:linear-gradient(135deg,var(--article-preview-accent-soft),var(--article-preview-glass))}
body.article-modern-view .article-note-card strong{display:block;margin-bottom:6px;color:var(--article-preview-heading);font-size:.98rem}
body.article-modern-view .article-note-card p{margin:0;color:var(--article-preview-muted);font-size:.96rem;line-height:1.95}
body.article-modern-view .article-final-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:18px;background:linear-gradient(135deg,var(--article-preview-accent-soft),var(--article-preview-glass))}
body.article-modern-view .article-final-cta h2{margin:0 0 4px;color:var(--article-preview-heading);font-size:clamp(1.2rem,2vw,1.48rem)}
body.article-modern-view .article-final-cta p{margin:0;color:var(--article-preview-muted)}
body.article-modern-view .article-read-progress{background:linear-gradient(90deg,var(--article-preview-accent),var(--article-preview-gold))}
@media(max-width:1040px){
  body.article-modern-view .article-layout{width:100%}
}
@media(max-width:980px){
  body.article-modern-view .article-modern-hero,
  body.article-modern-view .article-modern-grid,
  body.article-modern-view .article-final-cta{grid-template-columns:1fr}
  body.article-modern-view .article-modern-sidebar{position:sticky;top:calc(var(--header-h) + 8px);order:0;max-height:min(38svh,320px);overflow:visible}
  body.article-modern-view .article-sidebar-cta{display:none}
  body.article-modern-view .article-modern-sidebar .article-toc-nav{max-height:min(24svh,190px);overflow-y:auto}
}
@media(max-width:640px){
  body.article-modern-view .article-layout{max-width:min(100%,calc(100vw - 18px))}
  body.article-modern-view .article-modern-hero,
  body.article-modern-view .article-content,
  body.article-modern-view .article-quick-summary,
  body.article-modern-view .article-note-card,
  body.article-modern-view .article-final-cta,
  body.article-modern-view .article-sidebar-card{border-radius:20px}
  body.article-modern-view .article-modern-hero{padding:18px}
  body.article-modern-view .article-modern-hero h1{font-size:clamp(1.55rem,8vw,2.15rem);line-height:1.55}
  body.article-modern-view .article-meta-modern span{font-size:.78rem}
  body.article-modern-view .article-modern-sidebar{top:calc(var(--header-h) + 7px);max-height:none}
  body.article-modern-view .article-toc-card{padding:12px}
  body.article-modern-view .article-modern-sidebar .article-toc-nav,
  body.article-modern-view .article-toc-nav{display:flex;gap:8px;max-height:none;overflow-x:auto;overflow-y:hidden;padding-block-end:4px;scrollbar-width:thin}
  body.article-modern-view .article-toc-nav a,
  body.article-modern-view .article-toc-empty{flex:0 0 auto;max-width:min(72vw,300px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:8px 11px;font-size:.82rem;background:color-mix(in srgb,var(--article-preview-surface) 72%,transparent)}
  body.article-modern-view .article-toc-nav a.is-sub{padding-inline-start:11px}
  body.article-modern-view .article-content{padding:18px;line-height:2.06}
  body.article-modern-view .article-hero-actions .btn,
  body.article-modern-view .article-bottom-actions .btn{width:100%;justify-content:center}
}


/* v84 audit fix: allow the sticky article table of contents to escape the generic .card overflow. */
body.article-modern-view .article-article{
  overflow:visible;
}
body.article-modern-view .article-modern-page,
body.article-modern-view .article-modern-grid{
  overflow:visible;
}

/* v85: widen article side cards by 30% and remove the desktop TOC scrollbar. */
@media (min-width: 981px){
  body.article-modern-view .article-modern-grid{
    grid-template-columns:328px minmax(0,1fr);
  }
  body.article-modern-view .article-modern-sidebar{
    max-height:none;
    overflow:visible;
  }
  body.article-modern-view .article-modern-sidebar .article-toc-nav,
  body.article-modern-view .article-toc-nav{
    max-height:none;
    overflow:visible;
    scrollbar-width:none;
  }
  body.article-modern-view .article-modern-sidebar .article-toc-nav::-webkit-scrollbar,
  body.article-modern-view .article-toc-nav::-webkit-scrollbar{
    width:0;
    height:0;
    display:none;
  }
}

/* =====================================================================
   v89 — Compact auth card + required user profile completion
   ===================================================================== */
.auth-page .auth-section{padding-top:clamp(5rem,7vw,6.25rem);padding-bottom:clamp(2rem,4vw,3rem)}
.auth-page .auth-shell{width:min(940px,calc(100% - 28px));max-width:940px}
.auth-page .auth-card-grid{grid-template-columns:.9fr 1.1fr;min-height:auto}
.auth-page .auth-aside{padding:clamp(20px,2.6vw,30px);gap:14px}
.auth-page .auth-aside h2{font-size:clamp(1.25rem,2vw,1.62rem);line-height:1.45}
.auth-page .auth-aside p{font-size:.94rem;line-height:1.75}
.auth-page .auth-trust{gap:8px;margin-top:4px}
.auth-page .auth-trust li{gap:9px;font-size:.9rem;line-height:1.55}
.auth-page .auth-trust .ic{width:32px;height:32px;border-radius:11px}
.auth-page .auth-trust .ic svg{width:17px;height:17px}
.auth-page .auth-main{padding:clamp(20px,2.7vw,32px)}
.auth-page .auth-head h1{font-size:clamp(1.45rem,2.5vw,1.9rem);margin-top:5px}
.auth-page .auth-head .hint{margin-top:6px;font-size:.94rem;line-height:1.75}
.auth-page .auth-tabs{margin:14px 0 14px;padding:5px}
.auth-page .auth-tab{padding:9px 12px;font-size:.92rem}
.auth-page .auth-form{gap:12px}
.auth-page #register-form{grid-template-columns:repeat(2,minmax(0,1fr))}
.auth-page #register-form .full,.auth-page #register-form .btn{grid-column:1/-1}
.auth-page .auth-secure-note{padding:10px 12px;font-size:.85rem}
.auth-page .lang-btn{min-width:42px;height:42px;display:inline-grid;place-items:center}
.auth-page .field small,.user-panel-page .field small{font-size:.78em;font-weight:700;color:var(--text-muted);margin-inline-start:4px}

.profile-required-alert{display:grid;gap:4px;margin:8px 0 12px;padding:13px 15px;border:1px solid color-mix(in srgb,var(--gold) 45%,var(--border));border-radius:var(--radius-sm);background:color-mix(in srgb,var(--gold) 16%,var(--surface));color:var(--heading)}
.profile-required-alert strong{font-weight:900}.profile-required-alert span{font-size:.92rem;line-height:1.75;color:var(--text)}
.profile-form{padding:16px;border:1px solid var(--border);border-radius:var(--radius-md);background:color-mix(in srgb,var(--surface) 78%,transparent)}
.profile-form .grid{margin-top:10px}.profile-form textarea{min-height:82px;resize:vertical}
.panel-tab.is-locked{opacity:.55;cursor:not-allowed;filter:saturate(.75)}
body.profile-incomplete .panel-tab.is-locked:hover{background:transparent;color:var(--text-muted)}

@media(max-width:900px){.auth-page .auth-card-grid{grid-template-columns:1fr}.auth-page .auth-aside{display:none}.auth-page #register-form{grid-template-columns:1fr}.auth-page #register-form .full,.auth-page #register-form .btn{grid-column:auto}}
@media(max-width:520px){.auth-page .auth-main{padding:18px}.auth-page .auth-tabs{border-radius:20px}.auth-page .auth-tab{min-width:100%;width:100%}}

/* ============================================================
   v90 — Delaram Zendegi brand refresh
   Palette derived from the brand logo motion:
   deep green #063f40, warm gold #bd943c, soft cream #fffaf0.
   ============================================================ */
:root {
  --accent: #7ba79c;
  --accent-strong: #14595a;
  --accent-soft: rgba(20, 89, 90, .12);
  --gold: #bd943c;
  --border: rgba(20, 89, 90, .20);
  --focus: #1c6a62;
}
[data-theme="dark"] {
  --accent: #8fbcb2;
  --accent-strong: #b7dcd4;
  --accent-soft: rgba(143, 188, 178, .14);
  --gold: #d8b571;
  --border: rgba(190, 220, 210, .20);
}

/* --- Brand-centered hero --------------------------------- */
.brand-hero-grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
  align-items: center;
}
.brand-hero-title {
  font-size: clamp(3rem, 7.4vw, 6rem);
}
.brand-hero-slogan {
  font-weight: 700;
  color: var(--accent-strong);
  padding-bottom: 0;
}
.brand-hero-slogan::after {
  content: none;
  display: none;
  animation: none;
}
.brand-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
}
.brand-hero-actions .btn {
  min-height: 52px;
  padding: 13px 26px;
  font-weight: 700;
}

.brand-hero-visual {
  min-height: 480px;
  display: grid;
  align-items: center;
  justify-items: center;
}
.brand-hero-visual::before {
  inset: 6% 8% 4% 8%;
  border-radius: 52px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--gold) 20%, transparent));
}
.brand-emblem-card {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: clamp(16px, 2.1vw, 24px);
  width: min(100%, 462px);
  padding: clamp(32px, 4.2vw, 50px) clamp(24px, 3.15vw, 42px);
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: clamp(30px, 4vw, 46px);
  background:
    radial-gradient(circle at 50% 26%, rgba(255,255,255,.92) 0 18%, rgba(255,249,236,.6) 46%, transparent 74%),
    linear-gradient(160deg, color-mix(in srgb, var(--surface-strong) 92%, transparent), color-mix(in srgb, var(--surface) 68%, transparent));
  box-shadow: var(--shadow);
  backdrop-filter: blur(24px) saturate(1.1);
}
[data-theme="dark"] .brand-emblem-card {
  background:
    radial-gradient(circle at 50% 26%, rgba(255, 250, 236, .10) 0 22%, transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--surface-strong) 94%, transparent), color-mix(in srgb, var(--surface) 72%, transparent));
}
.brand-emblem-glow {
  position: absolute;
  top: 6%;
  left: 50%;
  width: 74%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 199, 91, .26), rgba(216, 168, 59, .08) 46%, transparent 72%);
  filter: blur(2px);
  pointer-events: none;
  animation: emblemBreath 5.4s ease-in-out infinite;
}
.brand-emblem-img {
  width: clamp(170px, 22vw, 250px);
  height: auto;
  filter: drop-shadow(0 14px 24px rgba(65, 45, 12, .16));
  animation: emblemLift 6.2s ease-in-out infinite;
}
.brand-emblem-title {
  width: clamp(200px, 24vw, 300px);
  max-width: calc(100% - 28px);
  height: auto;
  display: block;
  margin-block: 2px 6px;
}
.brand-pillars {
  display: flex;
  margin-top: 2px;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.brand-pillars span {
  padding: 7px 15px;
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--surface-strong) 82%, transparent);
}
@keyframes emblemBreath {
  0%, 100% { opacity: .8; transform: translateX(-50%) scale(.97); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.03); }
}
@keyframes emblemLift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* --- Home UI polish --------------------------------------- */
.section-head.reveal .lead,
.section-head .lead { line-height: 2; }
html[lang="en"] .section-head .lead { line-height: 1.75; }
.btn { letter-spacing: 0; }

@media (max-width: 1080px) {
  .brand-hero-grid { grid-template-columns: 1fr; }
  .brand-hero-visual { min-height: auto; margin-top: 8px; }
}
@media (max-width: 640px) {
  .brand-hero-title { font-size: clamp(2.5rem, 12vw, 3.6rem); }
  .brand-hero-actions { flex-direction: column; align-items: stretch; }
  .brand-hero-actions .btn { width: 100%; justify-content: center; min-height: 54px; }
  .brand-emblem-card { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-emblem-glow, .brand-emblem-img { animation: none; }
}

/* --- v90 mobile header fix: keep burger + actions on screen --- */
@media (max-width: 760px) {
  .header-shell { gap: 10px; }
  .header-actions { gap: 7px; flex-shrink: 0; }
  .header-actions .user-nav-link span { display: none; }
  .header-actions .user-nav-link {
    min-width: 40px;
    padding: 8px;
    justify-content: center;
  }
  .brand { min-width: 0; }
  .brand-text { min-width: 0; }
  .brand-name, .brand-sub {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
@media (max-width: 420px) {
  .brand-sub { display: none; }
}

/* --- v90: grid columns that can shrink on narrow screens --- */
@media (max-width: 760px) {
  .header-shell { grid-template-columns: minmax(0, 1fr) auto; }
  .desktop-nav { display: none; }
  .brand .logo-box { flex-shrink: 0; }
}

/* --- V91 homepage readability + card sizing fixes ---------------------- */
#home .hero-actions .free-preconsult {
  box-shadow: 0 24px 48px color-mix(in srgb, var(--accent-strong) 34%, transparent);
}
#podcasts .media-card,
#clips .media-card,
#articles .media-card,
#courses .media-card,
#testimonial-grid .card {
  height: auto;
  min-height: fit-content;
}
#podcasts .media-body,
#clips .media-body,
#articles .media-body,
#courses .media-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 12px;
  line-height: 1.85;
}
#podcasts .media-body p,
#clips .media-body p,
#articles .media-body p,
#courses .media-body p,
#testimonial-grid .card p,
.course-short-description {
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
  overflow: visible;
  overflow-wrap: anywhere;
  line-height: 1.9;
}
html[lang="en"] #podcasts .media-body,
html[lang="en"] #clips .media-body,
html[lang="en"] #articles .media-body,
html[lang="en"] #courses .media-body,
html[lang="en"] #testimonial-grid .card p {
  line-height: 1.7;
}
#podcasts .media-body .btn,
#clips .media-body .btn,
#articles .media-body .btn,
#courses .media-body .btn,
#courses .card-actions {
  margin-top: auto;
  min-height: 46px;
  align-self: flex-start;
}
#contact .contact-link,
.compact-contact .contact-link {
  min-height: 44px !important;
  overflow: visible;
}
#contact .contact-link-label {
  overflow-wrap: anywhere;
  line-height: 1.55;
}
@media (max-width: 680px) {
  #home .hero-actions .btn,
  #podcasts .media-body .btn,
  #clips .media-body .btn,
  #articles .media-body .btn,
  #courses .media-body .btn {
    width: 100%;
    justify-content: center;
    min-height: 52px;
  }
}


/* v96 — High-contrast CTA buttons for light/dark themes */
:root {
  --btn-primary-bg: #0f5b5c;
  --btn-primary-bg-hover: #0a4748;
  --btn-primary-text: #ffffff;
  --btn-primary-shadow: 0 18px 42px rgba(15, 91, 92, .28);
  --btn-secondary-bg: #fffdf8;
  --btn-secondary-text: #174b48;
  --btn-secondary-border: rgba(15, 91, 92, .38);
  --btn-focus-ring: 0 0 0 4px rgba(15, 91, 92, .24);
}
[data-theme="dark"] {
  --btn-primary-bg: #00a3a0;
  --btn-primary-bg-hover: #19b8b4;
  --btn-primary-text: #082020;
  --btn-primary-shadow: 0 18px 44px rgba(0, 163, 160, .28);
  --btn-secondary-bg: #203134;
  --btn-secondary-text: #f6fff9;
  --btn-secondary-border: rgba(169, 224, 210, .44);
  --btn-focus-ring: 0 0 0 4px rgba(0, 163, 160, .36);
}
.btn.primary,
button.primary,
.hero .btn.primary,
.hero-actions .btn.primary,
.service-card .btn,
.consultation-cta .btn,
.cta-button {
  color: var(--btn-primary-text) !important;
  background: var(--btn-primary-bg) !important;
  border-color: transparent !important;
  text-shadow: none !important;
  box-shadow: var(--btn-primary-shadow) !important;
}
.btn.primary:hover,
button.primary:hover,
.hero .btn.primary:hover,
.service-card .btn:hover,
.consultation-cta .btn:hover,
.cta-button:hover {
  color: var(--btn-primary-text) !important;
  background: var(--btn-primary-bg-hover) !important;
}
.btn.secondary,
button.secondary,
.hero .btn.secondary {
  color: var(--btn-secondary-text) !important;
  background: var(--btn-secondary-bg) !important;
  border-color: var(--btn-secondary-border) !important;
}
.btn:focus-visible,
button:focus-visible,
.cta-button:focus-visible {
  outline: none !important;
  box-shadow: var(--btn-focus-ring), var(--btn-primary-shadow) !important;
}
.btn:disabled,
button:disabled,
.btn.disabled {
  opacity: .58;
  filter: grayscale(.15);
  cursor: not-allowed;
  transform: none !important;
}
.auth-page #sms-login-verify-form,
.auth-page #sms-reset-verify-form {
  grid-template-columns: 1fr;
}

/* =====================================================================
   v97 — Professional auth page redesign and safer auth controls
   ===================================================================== */
.auth-page {
  --auth-panel-bg: color-mix(in srgb, var(--surface-strong) 92%, var(--bg-2));
  --auth-panel-bg-soft: color-mix(in srgb, var(--surface) 86%, transparent);
  --auth-field-bg: color-mix(in srgb, var(--surface-strong) 90%, #ffffff 10%);
  --auth-tab-bg: color-mix(in srgb, var(--surface) 80%, transparent);
  --auth-action-shadow: 0 14px 30px color-mix(in srgb, var(--accent-strong) 22%, transparent);
}
.auth-page .auth-section {
  padding-top: clamp(5.4rem, 8vw, 7rem);
  padding-bottom: clamp(2.4rem, 5vw, 4.2rem);
}
.auth-page .auth-shell {
  width: min(1120px, calc(100% - 30px));
  max-width: 1120px;
}
.auth-page .auth-card-pro {
  border: 1px solid color-mix(in srgb, var(--accent-strong) 18%, var(--border));
  border-radius: clamp(26px, 3vw, 36px);
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface-strong) 86%, transparent), color-mix(in srgb, var(--bg-2) 46%, transparent));
  box-shadow: 0 24px 70px rgba(40, 32, 24, .14);
}
.auth-page .auth-card-grid {
  grid-template-columns: minmax(310px, .86fr) minmax(0, 1.14fr);
  min-height: 640px;
}
.auth-page .auth-aside {
  padding: clamp(26px, 3.4vw, 44px);
  justify-content: space-between;
  gap: 20px;
  background:
    radial-gradient(circle at 86% 8%, rgba(255,255,255,.20), transparent 38%),
    radial-gradient(circle at 10% 92%, color-mix(in srgb, var(--gold) 66%, transparent), transparent 42%),
    linear-gradient(155deg, #063f40 0%, color-mix(in srgb, var(--accent-strong) 90%, #063f40) 56%, #0e5a56 100%);
}
.auth-page .auth-aside h2 {
  font-size: clamp(1.45rem, 2.35vw, 2rem);
  line-height: 1.55;
}
.auth-page .auth-aside p {
  font-size: .98rem;
  line-height: 1.95;
  max-width: 35ch;
}
.auth-page .auth-trust {
  margin: 4px 0 0;
  gap: 11px;
}
.auth-page .auth-trust li {
  align-items: flex-start;
  padding: 10px 11px;
  border-radius: 18px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(6px);
  line-height: 1.7;
}
.auth-page .auth-trust .ic {
  width: 36px;
  height: 36px;
  border-radius: 14px;
}
.auth-page .auth-aside-footer {
  display: grid;
  gap: 6px;
  margin-top: auto;
  padding: 16px;
  border-radius: 22px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
}
.auth-page .auth-aside-footer span {
  font-size: .82rem;
  font-weight: 800;
  opacity: .82;
}
.auth-page .auth-aside-footer strong {
  font-size: .98rem;
  line-height: 1.75;
}
.auth-page .auth-main {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: clamp(24px, 3.7vw, 46px);
  background:
    radial-gradient(circle at 96% 5%, color-mix(in srgb, var(--accent-soft) 72%, transparent), transparent 38%),
    linear-gradient(180deg, var(--auth-panel-bg), color-mix(in srgb, var(--surface-solid) 86%, transparent));
}
.auth-page .auth-head {
  margin-bottom: 0;
}
.auth-page .auth-head h1 {
  margin: 6px 0 0;
  font-size: clamp(1.65rem, 2.8vw, 2.28rem);
  letter-spacing: -.02em;
}
.auth-page .auth-head .hint {
  max-width: 58ch;
  line-height: 1.9;
}
.auth-page .auth-tabs-pro {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 6px 0 2px;
  padding: 8px;
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface-strong) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-strong) 16%, var(--border));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}
.auth-page .auth-tab {
  min-width: 0;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 17px;
  padding: 10px 11px;
  color: color-mix(in srgb, var(--text) 78%, var(--text-muted));
  background: transparent;
  white-space: nowrap;
}
.auth-page .auth-tab:hover {
  background: color-mix(in srgb, var(--accent-soft) 64%, transparent);
  color: var(--heading);
  transform: translateY(-1px);
}
.auth-page .auth-tab.active {
  color: var(--btn-primary-text, #fff);
  background: linear-gradient(135deg, var(--btn-primary-bg, #14595a), var(--btn-primary-bg-hover, #0f4748));
  box-shadow: var(--auth-action-shadow);
}
.auth-page .auth-method-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 6px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-strong) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-strong) 13%, var(--border));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42);
}
.auth-page .method-pill {
  min-height: 42px;
  width: 100%;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  color: color-mix(in srgb, var(--text) 80%, var(--text-muted));
  font-weight: 950;
  font-size: .9rem;
  box-shadow: none;
  cursor: pointer;
}
.auth-page .method-pill:hover {
  background: color-mix(in srgb, var(--accent-soft) 62%, transparent);
  color: var(--heading);
  transform: translateY(-1px);
}
.auth-page .method-pill.active {
  background: var(--surface-solid);
  color: var(--accent-strong);
  border-color: color-mix(in srgb, var(--accent-strong) 20%, var(--border));
  box-shadow: 0 10px 22px rgba(20, 89, 90, .10);
}
.auth-page .auth-form-card {
  display: grid;
  gap: 14px;
  padding: clamp(16px, 2.6vw, 24px);
  border: 1px solid color-mix(in srgb, var(--accent-strong) 14%, var(--border));
  border-radius: 28px;
  background: color-mix(in srgb, var(--surface-solid) 86%, var(--auth-panel-bg-soft));
  box-shadow: 0 14px 44px rgba(44, 35, 25, .08);
}
.auth-page .auth-form-head {
  display: grid;
  gap: 5px;
}
.auth-page .auth-form-head.full,
.auth-page #register-form .auth-form-links.full,
.auth-page #register-form .auth-actions.full {
  grid-column: 1 / -1;
}
.auth-page .auth-form-head h2 {
  margin: 0;
  color: var(--heading);
  font-size: clamp(1.12rem, 2vw, 1.42rem);
  font-weight: 950;
}
.auth-page .auth-form-head p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.8;
  font-size: .94rem;
  font-weight: 650;
}
.auth-page .auth-form .field {
  gap: 8px;
}
.auth-page .auth-form .field span {
  color: var(--heading);
  font-size: .9rem;
  font-weight: 900;
}
.auth-page .auth-form input {
  min-height: 52px;
  border-radius: 18px;
  background: var(--auth-field-bg);
  border-color: color-mix(in srgb, var(--accent-strong) 17%, var(--border));
  font-weight: 750;
}
.auth-page .auth-form input:hover {
  border-color: color-mix(in srgb, var(--accent-strong) 32%, var(--border));
  background: var(--surface-strong);
}
.auth-page .auth-form input:focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 18%, transparent), 0 8px 22px rgba(0,0,0,.05);
}
.auth-page .auth-code-field input {
  text-align: center;
  letter-spacing: .5em;
  direction: ltr;
  font-size: 1.18rem;
  font-weight: 950;
  padding-inline-start: calc(14px + .5em);
}
.auth-page .google-login {
  min-height: 52px;
  border-radius: 18px;
  background: var(--surface-solid);
  color: var(--heading);
  border-color: color-mix(in srgb, var(--accent-strong) 18%, var(--border));
  box-shadow: 0 10px 24px rgba(40, 32, 24, .06);
}
.auth-page .google-login:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--surface-solid) 88%, var(--accent-soft));
  border-color: color-mix(in srgb, var(--accent-strong) 34%, var(--border));
}
.auth-page .or-line {
  margin: 1px 0;
  font-size: .84rem;
}
.auth-page .auth-actions {
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: wrap;
  margin-top: 2px;
}
.auth-page .auth-actions .btn {
  min-height: 50px;
  border-radius: 18px;
  justify-content: center;
  flex: 1 1 180px;
  font-weight: 900;
}
.auth-page .auth-actions.two-actions .btn:first-child {
  flex-basis: 58%;
}
.auth-page .auth-actions.two-actions .btn:last-child {
  flex-basis: 32%;
}
.auth-page .auth-form-links {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 2px;
}
.auth-page .auth-link-btn {
  width: auto;
  min-height: 34px;
  padding: 5px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--accent-strong);
  box-shadow: none;
  font: inherit;
  font-size: .9rem;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 5px;
  cursor: pointer;
}
.auth-page .auth-link-btn:hover,
.auth-page .auth-link-btn:focus-visible {
  color: color-mix(in srgb, var(--accent-strong) 70%, var(--gold));
  transform: none;
}
.auth-page .auth-link-btn:focus-visible,
.auth-page .auth-tab:focus-visible,
.auth-page .method-pill:focus-visible,
.auth-page .auth-actions .btn:focus-visible,
.auth-page .google-login:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--focus) 34%, transparent);
  outline-offset: 3px;
}
.auth-page .auth-form.is-submitting {
  opacity: .92;
}
.auth-page .auth-form button:disabled,
.auth-page .auth-form .btn:disabled {
  cursor: wait;
  opacity: .72;
  filter: saturate(.72);
  transform: none;
}
.auth-page .auth-section .form-message {
  margin: 0;
  border-radius: 20px;
  padding: 12px 14px;
  line-height: 1.8;
}
.auth-page .auth-secure-note {
  justify-content: center;
  margin-top: 0;
  border-radius: 22px;
  background: color-mix(in srgb, var(--accent-soft) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-strong) 14%, var(--border));
}
[data-theme="dark"] .auth-page,
.auth-page[data-theme="dark"],
body[data-theme="dark"].auth-page {
  --auth-panel-bg: color-mix(in srgb, var(--surface-strong) 92%, #0f1726);
  --auth-panel-bg-soft: color-mix(in srgb, var(--surface) 86%, #11182a);
  --auth-field-bg: color-mix(in srgb, var(--surface-strong) 88%, #11182a);
  --auth-action-shadow: 0 14px 34px rgba(0,0,0,.32);
}
[data-theme="dark"] .auth-page .auth-card-pro,
body[data-theme="dark"].auth-page .auth-card-pro {
  box-shadow: 0 24px 70px rgba(0,0,0,.35);
}
[data-theme="dark"] .auth-page .auth-form-card,
body[data-theme="dark"].auth-page .auth-form-card {
  box-shadow: 0 18px 48px rgba(0,0,0,.22);
}
[data-theme="dark"] .auth-page .auth-tab.active,
body[data-theme="dark"].auth-page .auth-tab.active {
  color: #062f31;
  background: linear-gradient(135deg, #c2eee6, #8fbcb2);
}
[data-theme="dark"] .auth-page .google-login,
body[data-theme="dark"].auth-page .google-login {
  background: color-mix(in srgb, var(--surface-strong) 94%, transparent);
}
@media (max-width: 980px) {
  .auth-page .auth-card-grid { grid-template-columns: 1fr; min-height: 0; }
  .auth-page .auth-aside { display: grid; }
  .auth-page .auth-aside p { max-width: none; }
  .auth-page .auth-trust { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .auth-page .auth-aside-footer { display: none; }
}
@media (max-width: 760px) {
  .auth-page .auth-shell { width: min(100% - 20px, 620px); }
  .auth-page .auth-card-grid { display: block; }
  .auth-page .auth-aside { display: none; }
  .auth-page .auth-main { padding: 16px; }
  .auth-page .auth-tabs-pro { grid-template-columns: 1fr; border-radius: 22px; }
  .auth-page .auth-method-switch { grid-template-columns: 1fr; }
  .auth-page .auth-tab { min-height: 44px; white-space: normal; line-height: 1.45; }
  .auth-page .auth-form-card { border-radius: 24px; padding: 16px; }
  .auth-page #register-form { grid-template-columns: 1fr; }
  .auth-page #register-form .full,
  .auth-page #register-form .btn,
  .auth-page #register-form .auth-form-head.full,
  .auth-page #register-form .auth-form-links.full,
  .auth-page #register-form .auth-actions.full { grid-column: auto; }
  .auth-page .auth-actions .btn { flex-basis: 100%; width: 100%; }
  .auth-page .auth-form-links { justify-content: center; text-align: center; }
}
@media (max-width: 420px) {
  .auth-page .auth-tabs-pro { grid-template-columns: 1fr; }
  .auth-page .auth-head h1 { font-size: 1.42rem; }
  .auth-page .auth-form-head h2 { font-size: 1.08rem; }
}
.auth-page .auth-tabs-pro .auth-tab{width:auto;min-width:0}
@media (max-width: 760px){.auth-page .auth-tabs-pro .auth-tab{width:auto;min-width:0}}
.auth-page .auth-tabs-pro .auth-tab.active{color:#ffffff!important}
body[data-theme="dark"].auth-page .auth-tabs-pro .auth-tab.active{color:#062f31!important}

[data-theme="dark"] .auth-page .method-pill.active,
body[data-theme="dark"].auth-page .method-pill.active {
  background: color-mix(in srgb, var(--surface-solid) 88%, var(--accent-soft));
  color: #dffcf7;
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
}

/* ============================================================
   v102 — Hero title readability + turquoise dark-mode buttons
   Fixes clipped Persian/English descenders in the brand hero title
   and refreshes dark-theme CTAs with a calmer turquoise palette.
   ============================================================ */
.hero h1.brand-hero-title,
.brand-hero-title {
  display: block;
  line-height: 1.22;
  padding-block: .04em .18em;
  margin-block: 0 .08em;
  overflow: visible;
  text-wrap: balance;
}

html[lang="en"] .hero h1.brand-hero-title,
html[lang="en"] .brand-hero-title {
  line-height: 1.2;
  letter-spacing: -.035em;
}

.brand-hero-content,
.hero-title-wrap {
  overflow: visible;
}

body[data-theme="dark"],
[data-theme="dark"] {
  --btn-primary-bg: linear-gradient(135deg, #2dd4bf 0%, #06b6d4 100%);
  --btn-primary-bg-hover: linear-gradient(135deg, #14b8a6 0%, #0891b2 100%);
  --btn-primary-text: #ffffff;
  --btn-primary-shadow: 0 20px 48px rgba(45, 212, 191, .26);
  --btn-secondary-bg: rgba(8, 47, 73, .28);
  --btn-secondary-text: #99f6e4;
  --btn-secondary-border: rgba(45, 212, 191, .52);
  --btn-focus-ring: 0 0 0 4px rgba(45, 212, 191, .32);
}

body[data-theme="dark"] .btn.primary,
body[data-theme="dark"] button.primary,
body[data-theme="dark"] .hero .btn.primary,
body[data-theme="dark"] .hero-actions .btn.primary,
body[data-theme="dark"] .service-card .btn,
body[data-theme="dark"] .consultation-cta .btn,
body[data-theme="dark"] .cta-button,
[data-theme="dark"] .btn.primary,
[data-theme="dark"] button.primary,
[data-theme="dark"] .hero .btn.primary,
[data-theme="dark"] .hero-actions .btn.primary,
[data-theme="dark"] .service-card .btn,
[data-theme="dark"] .consultation-cta .btn,
[data-theme="dark"] .cta-button {
  color: var(--btn-primary-text) !important;
  background: var(--btn-primary-bg) !important;
  border: 1px solid rgba(153, 246, 228, .22) !important;
  box-shadow: var(--btn-primary-shadow) !important;
}

body[data-theme="dark"] .btn.primary:hover,
body[data-theme="dark"] button.primary:hover,
body[data-theme="dark"] .hero .btn.primary:hover,
body[data-theme="dark"] .service-card .btn:hover,
body[data-theme="dark"] .consultation-cta .btn:hover,
body[data-theme="dark"] .cta-button:hover,
[data-theme="dark"] .btn.primary:hover,
[data-theme="dark"] button.primary:hover,
[data-theme="dark"] .hero .btn.primary:hover,
[data-theme="dark"] .service-card .btn:hover,
[data-theme="dark"] .consultation-cta .btn:hover,
[data-theme="dark"] .cta-button:hover {
  background: var(--btn-primary-bg-hover) !important;
  box-shadow: 0 24px 56px rgba(45, 212, 191, .34) !important;
}

body[data-theme="dark"] .btn.secondary,
body[data-theme="dark"] button.secondary,
body[data-theme="dark"] .hero .btn.secondary,
[data-theme="dark"] .btn.secondary,
[data-theme="dark"] button.secondary,
[data-theme="dark"] .hero .btn.secondary {
  color: var(--btn-secondary-text) !important;
  background: var(--btn-secondary-bg) !important;
  border-color: var(--btn-secondary-border) !important;
  box-shadow: 0 14px 34px rgba(6, 182, 212, .12) !important;
}

body[data-theme="dark"] .btn.secondary:hover,
body[data-theme="dark"] button.secondary:hover,
body[data-theme="dark"] .hero .btn.secondary:hover,
[data-theme="dark"] .btn.secondary:hover,
[data-theme="dark"] button.secondary:hover,
[data-theme="dark"] .hero .btn.secondary:hover {
  color: #ffffff !important;
  background: rgba(20, 184, 166, .22) !important;
  border-color: rgba(153, 246, 228, .72) !important;
}

body[data-theme="dark"] .btn.ghost,
body[data-theme="dark"] .hero .btn.ghost,
[data-theme="dark"] .btn.ghost,
[data-theme="dark"] .hero .btn.ghost {
  color: #99f6e4 !important;
  border: 1px solid rgba(45, 212, 191, .28) !important;
  background: rgba(45, 212, 191, .06) !important;
}

body[data-theme="dark"] .btn.ghost:hover,
body[data-theme="dark"] .hero .btn.ghost:hover,
[data-theme="dark"] .btn.ghost:hover,
[data-theme="dark"] .hero .btn.ghost:hover {
  color: #ffffff !important;
  background: rgba(6, 182, 212, .16) !important;
  border-color: rgba(153, 246, 228, .55) !important;
}

@media (max-width: 640px) {
  .hero h1.brand-hero-title,
  .brand-hero-title {
    line-height: 1.24;
    padding-bottom: .2em;
  }
}


/* v102: taller specialist cards with larger portrait area */
.doctor-card.course-compact-card{
  --public-card-thumb:clamp(230px,24vw,330px);
  min-height:max(var(--public-card-row-min,360px),510px);
}
.doctor-card.course-compact-card .media-thumb,
.doctor-thumb{
  min-height:clamp(240px,27vw,360px);
  aspect-ratio:4 / 4.7;
}
.doctor-card.course-compact-card .media-thumb img,
.doctor-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
}
.doctor-card.course-compact-card .media-body{
  padding-top:clamp(16px,2vw,22px);
}
@media(max-width:900px){
  .doctor-card.course-compact-card{--public-card-thumb:clamp(220px,38vw,320px);min-height:480px}
  .doctor-card.course-compact-card .media-thumb,.doctor-thumb{min-height:clamp(230px,45vw,340px)}
}
@media(max-width:560px){
  .doctor-card.course-compact-card{min-height:460px}
  .doctor-card.course-compact-card .media-thumb,.doctor-thumb{min-height:clamp(240px,72vw,360px);aspect-ratio:4 / 4.6}
}

.article-content .article-video-card{margin:clamp(22px,4vw,38px) 0;padding:clamp(16px,3vw,24px);border-radius:28px;border:1px solid var(--article-readable-border);background:var(--article-readable-bg);box-shadow:var(--article-readable-shadow)}
.article-content .article-video-card video{display:block;width:100%;max-height:430px;border-radius:20px;background:#111}
.article-content .article-video-card figcaption{padding-top:12px;color:var(--article-readable-muted);font-size:.93rem;text-align:center}
.article-content .article-video-card--link h2{margin-top:0}.article-content .article-video-card--link p{color:var(--article-readable-muted)}