/* Mahbod Style Academy — tokens v2 (generated from tokens.json). Global vars are prefixed --ma-*; inside .ma they are also available unprefixed, as bundle.css expects. */
:root{
  --ma-brand:#d8554f;
  --ma-brand-strong:#c8453f;
  --ma-brand-deep:#9f2f2b;
  --ma-brand-tint:#fcefee;
  --ma-brand-tint-border:#f3c9c6;
  --ma-brand-on-dark:#f08a85;
  --ma-on-brand:#ffffff;
  --ma-on-brand-muted:#ffe7e5;
  --ma-brand-tile:rgba(255, 255, 255, 0.14);
  --ma-gold:#f2c94c;
  --ma-ink:#1c1d21;
  --ma-graphite:#2a2c31;
  --ma-canvas:#f7f5f3;
  --ma-surface:#ffffff;
  --ma-surface-sunken:#efebe7;
  --ma-line:#ece8e5;
  --ma-line-strong:#e4dfda;
  --ma-text-body:#3d4046;
  --ma-muted:#5e6168;
  --ma-text-on-dark:#ffffff;
  --ma-text-on-dark-muted:#b0b2b7;
  --ma-nav-inactive:#a9acb2;
  --ma-star:#f5a524;
  --ma-online:#5bd68a;
  --ma-whatsapp:#25d366;
  --ma-success:#1e8e55;
  --ma-success-tint:#e6f4ec;
  --ma-success-ink:#146b3e;
  --ma-font-sans:"Ravi FaNum", Ravi, Tahoma, sans-serif;
  --ma-space-1:4px;
  --ma-space-2:8px;
  --ma-space-3:12px;
  --ma-gap-card:14px;
  --ma-gutter:16px;
  --ma-space-5:20px;
  --ma-space-6:24px;
  --ma-space-7:28px;
  --ma-gap-section:32px;
  --ma-space-12:48px;
  --ma-radius-sm:10px;
  --ma-radius-icon:15px;
  --ma-radius-md:18px;
  --ma-radius-lg:22px;
  --ma-radius-xl:28px;
  --ma-radius-2xl:34px;
  --ma-radius-pill:999px;
  --ma-shadow-brand:0 10px 20px -10px rgba(200, 69, 63, 0.9);
  --ma-shadow-nav-active:0 12px 22px -6px rgba(217, 84, 79, 0.8), 0 0 0 5px rgba(28, 29, 33, 0.88);
  --ma-shadow-nav:0 20px 40px -18px rgba(28, 29, 33, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --ma-shadow-header:0 14px 30px -16px rgba(28, 29, 33, 0.35);
  --ma-shadow-lift:0 22px 40px -22px rgba(28, 29, 33, 0.45);
  --ma-shadow-faq-open:0 16px 30px -20px rgba(200, 69, 63, 0.55);
  --ma-shadow-tabs:0 8px 24px rgba(28, 29, 33, 0.06);
  --ma-shadow-whatsapp:0 10px 30px rgba(37, 211, 102, 0.35);
  --ma-duration-press:250ms;
  --ma-duration-lift:350ms;
  --ma-duration-rise:800ms;
  --ma-duration-ring:16s;
  --ma-ease-out:cubic-bezier(.2, .8, .2, 1);
  --ma-ease-spring:cubic-bezier(.3, 1.6, .5, 1);
  --ma-display-lg-size:40px;
  --ma-display-lg-line:1.3;
  --ma-display-lg-weight:900;
  --ma-display-size:30px;
  --ma-display-line:1.35;
  --ma-display-weight:900;
  --ma-title-lg-size:26px;
  --ma-title-lg-line:1.45;
  --ma-title-lg-weight:900;
  --ma-title-size:20px;
  --ma-title-line:1.5;
  --ma-title-weight:900;
  --ma-h3-size:16px;
  --ma-h3-line:1.6;
  --ma-h3-weight:700;
  --ma-body-lg-size:16px;
  --ma-body-lg-line:2.1;
  --ma-body-lg-weight:400;
  --ma-body-size:14px;
  --ma-body-line:2;
  --ma-body-weight:400;
  --ma-cta-size:16px;
  --ma-cta-line:1;
  --ma-cta-weight:900;
  --ma-button-size:15px;
  --ma-button-line:1;
  --ma-button-weight:700;
  --ma-price-size:19px;
  --ma-price-line:1.4;
  --ma-price-weight:900;
  --ma-eyebrow-size:12px;
  --ma-eyebrow-line:1.6;
  --ma-eyebrow-weight:700;
  --ma-caption-size:12px;
  --ma-caption-line:1.7;
  --ma-caption-weight:500;
  --ma-chip-size:11px;
  --ma-chip-line:1;
  --ma-chip-weight:700;
}
.ma{
  --brand:var(--ma-brand);
  --brand-strong:var(--ma-brand-strong);
  --brand-deep:var(--ma-brand-deep);
  --brand-tint:var(--ma-brand-tint);
  --brand-tint-border:var(--ma-brand-tint-border);
  --brand-on-dark:var(--ma-brand-on-dark);
  --on-brand:var(--ma-on-brand);
  --on-brand-muted:var(--ma-on-brand-muted);
  --brand-tile:var(--ma-brand-tile);
  --gold:var(--ma-gold);
  --ink:var(--ma-ink);
  --graphite:var(--ma-graphite);
  --canvas:var(--ma-canvas);
  --surface:var(--ma-surface);
  --surface-sunken:var(--ma-surface-sunken);
  --line:var(--ma-line);
  --line-strong:var(--ma-line-strong);
  --text-body:var(--ma-text-body);
  --muted:var(--ma-muted);
  --text-on-dark:var(--ma-text-on-dark);
  --text-on-dark-muted:var(--ma-text-on-dark-muted);
  --nav-inactive:var(--ma-nav-inactive);
  --star:var(--ma-star);
  --online:var(--ma-online);
  --whatsapp:var(--ma-whatsapp);
  --success:var(--ma-success);
  --success-tint:var(--ma-success-tint);
  --success-ink:var(--ma-success-ink);
  --font-sans:var(--ma-font-sans);
  --space-1:var(--ma-space-1);
  --space-2:var(--ma-space-2);
  --space-3:var(--ma-space-3);
  --gap-card:var(--ma-gap-card);
  --gutter:var(--ma-gutter);
  --space-5:var(--ma-space-5);
  --space-6:var(--ma-space-6);
  --space-7:var(--ma-space-7);
  --gap-section:var(--ma-gap-section);
  --space-12:var(--ma-space-12);
  --radius-sm:var(--ma-radius-sm);
  --radius-icon:var(--ma-radius-icon);
  --radius-md:var(--ma-radius-md);
  --radius-lg:var(--ma-radius-lg);
  --radius-xl:var(--ma-radius-xl);
  --radius-2xl:var(--ma-radius-2xl);
  --radius-pill:var(--ma-radius-pill);
  --shadow-brand:var(--ma-shadow-brand);
  --shadow-nav-active:var(--ma-shadow-nav-active);
  --shadow-nav:var(--ma-shadow-nav);
  --shadow-header:var(--ma-shadow-header);
  --shadow-lift:var(--ma-shadow-lift);
  --shadow-faq-open:var(--ma-shadow-faq-open);
  --shadow-tabs:var(--ma-shadow-tabs);
  --shadow-whatsapp:var(--ma-shadow-whatsapp);
  --duration-press:var(--ma-duration-press);
  --duration-lift:var(--ma-duration-lift);
  --duration-rise:var(--ma-duration-rise);
  --duration-ring:var(--ma-duration-ring);
  --ease-out:var(--ma-ease-out);
  --ease-spring:var(--ma-ease-spring);
  --display-lg-size:var(--ma-display-lg-size);
  --display-lg-line:var(--ma-display-lg-line);
  --display-lg-weight:var(--ma-display-lg-weight);
  --display-size:var(--ma-display-size);
  --display-line:var(--ma-display-line);
  --display-weight:var(--ma-display-weight);
  --title-lg-size:var(--ma-title-lg-size);
  --title-lg-line:var(--ma-title-lg-line);
  --title-lg-weight:var(--ma-title-lg-weight);
  --title-size:var(--ma-title-size);
  --title-line:var(--ma-title-line);
  --title-weight:var(--ma-title-weight);
  --h3-size:var(--ma-h3-size);
  --h3-line:var(--ma-h3-line);
  --h3-weight:var(--ma-h3-weight);
  --body-lg-size:var(--ma-body-lg-size);
  --body-lg-line:var(--ma-body-lg-line);
  --body-lg-weight:var(--ma-body-lg-weight);
  --body-size:var(--ma-body-size);
  --body-line:var(--ma-body-line);
  --body-weight:var(--ma-body-weight);
  --cta-size:var(--ma-cta-size);
  --cta-line:var(--ma-cta-line);
  --cta-weight:var(--ma-cta-weight);
  --button-size:var(--ma-button-size);
  --button-line:var(--ma-button-line);
  --button-weight:var(--ma-button-weight);
  --price-size:var(--ma-price-size);
  --price-line:var(--ma-price-line);
  --price-weight:var(--ma-price-weight);
  --eyebrow-size:var(--ma-eyebrow-size);
  --eyebrow-line:var(--ma-eyebrow-line);
  --eyebrow-weight:var(--ma-eyebrow-weight);
  --caption-size:var(--ma-caption-size);
  --caption-line:var(--ma-caption-line);
  --caption-weight:var(--ma-caption-weight);
  --chip-size:var(--ma-chip-size);
  --chip-line:var(--ma-chip-line);
  --chip-weight:var(--ma-chip-weight);
}

/* WordPress theme compatibility: stop the theme's heading/paragraph colors leaking into components (component rules below still win). */
.ma h1, .ma h2, .ma h3, .ma h4, .ma h5, .ma h6, .ma p { color: inherit; }

/* Mahbod Style Academy — component styles (v2, Design System board v1). RTL first. Every value comes from tokens.css. */
.ma, .ma * { box-sizing: border-box; }
.ma { direction: rtl; font-family: var(--font-sans); color: var(--ink); font-size: 14px; line-height: 2; -webkit-font-smoothing: antialiased; }
.ma :where(a) { color: inherit; text-decoration: none; }
.ma :where(button, input, textarea) { font-family: inherit; }
.ma svg { flex: none; }
.ma-preview { padding: var(--space-5); background: var(--canvas); min-height: 100%; }
.ma-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.ma-grid { display: grid; gap: var(--gap-card); }
.ma-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ma-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ma-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ma-slider { display: flex; gap: var(--gap-card); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: none; }
.ma-slider > * { scroll-snap-align: start; flex: 0 0 280px; }
@media (max-width: 760px) { .ma-grid-2, .ma-grid-3, .ma-grid-4 { grid-template-columns: 1fr; } }

/* Focus: solid 2px ring, ink on light grounds, white on red and dark */
.ma :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ma-on-dark :focus-visible, .ma-on-brand :focus-visible { outline-color: var(--text-on-dark); }

/* Motion helpers */
.ma-press { transition: transform var(--duration-press) var(--ease-out), box-shadow var(--duration-press); }
.ma-press:active { transform: scale(.96); }
.ma-lift { transition: transform var(--duration-lift) var(--ease-out), box-shadow var(--duration-lift); }
.ma-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.ma-zoom img { transition: transform var(--duration-rise) var(--ease-out); }
.ma-zoom:hover img { transform: scale(1.06); }
@keyframes ma-spin { to { transform: rotate(360deg); } }
@keyframes ma-pulse { 0% { box-shadow: 0 0 0 0 rgba(242, 201, 76, .65); } 100% { box-shadow: 0 0 0 14px rgba(242, 201, 76, 0); } }
@keyframes ma-shine { 0% { transform: translateX(160%) skewX(-20deg); } 60%, 100% { transform: translateX(-260%) skewX(-20deg); } }
@keyframes ma-rise { from { opacity: 0; transform: translateY(28px) scale(.98); } to { opacity: 1; transform: none; } }
.ma-spin { animation: ma-spin var(--duration-ring) linear infinite; transform-origin: 50% 50%; transform-box: fill-box; }
.ma-rise { animation: ma-rise var(--duration-rise) var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) { .ma *, .ma *::after { animation: none !important; transition: none !important; } }

/* ---------- Button ---------- */
.ma-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 50px; padding: 0 24px; border-radius: var(--radius-md); border: 1.5px solid transparent; font: 700 15px/1 var(--font-sans); cursor: pointer; white-space: nowrap; transition: transform var(--duration-press) var(--ease-out), filter .15s; }
.ma-btn:hover { filter: brightness(.95); }
.ma-btn:active { transform: scale(.96); }
.ma-btn svg { width: 18px; height: 18px; }
.ma-btn-sm { height: 44px; padding: 0 18px; font-size: 14px; }
.ma-btn-primary { background: var(--brand-strong); color: var(--on-brand); }
.ma-btn-gold { height: 54px; padding: 0 26px; background: var(--gold); color: var(--ink); font-size: 16px; font-weight: 900; animation: ma-pulse 2.2s ease-out infinite; }
.ma-btn-gold::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent); animation: ma-shine 3.2s ease-in-out infinite; }
.ma-btn-outline-light { background: transparent; color: var(--on-brand); border-color: rgba(255, 255, 255, .55); }
.ma-btn-soft { background: var(--brand-tint); color: var(--brand-strong); border-color: var(--brand-tint-border); }
.ma-btn-dark { background: var(--ink); color: var(--text-on-dark); }
.ma-btn-white { background: var(--surface); color: var(--ink); }
.ma-btn-whatsapp { background: var(--whatsapp); color: var(--ink); box-shadow: var(--shadow-whatsapp); }
.ma-btn-block { width: 100%; justify-content: space-between; }
.ma-link { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--brand-strong); font: 700 13px/1 var(--font-sans); }
.ma-link:hover { color: var(--brand-deep); }
.ma-link svg { width: 14px; height: 14px; }

/* ---------- Icon button ---------- */
.ma-iconbtn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-icon); border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; transition: transform var(--duration-press) var(--ease-out); }
.ma-iconbtn:active { transform: scale(.96); }
.ma-iconbtn svg { width: 20px; height: 20px; }
.ma-iconbtn-brand { background: var(--brand-strong); border-color: var(--brand-strong); color: var(--on-brand); box-shadow: var(--shadow-brand); }
.ma-iconbtn-arrow { width: 46px; height: 46px; border-radius: 16px; }
.ma-iconbtn-tint { background: var(--brand-tint); border-color: var(--brand-tint); color: var(--brand-strong); width: 46px; height: 46px; }
.ma-iconbtn-whatsapp { background: var(--whatsapp); border-color: var(--whatsapp); color: var(--ink); }
.ma-iconbtn-glass { background: rgba(255, 255, 255, .2); border-color: transparent; color: var(--on-brand); width: 36px; height: 36px; border-radius: var(--radius-sm); }

/* ---------- Chips ---------- */
.ma-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--radius-sm); font: 700 11px/1 var(--font-sans); white-space: nowrap; }
.ma-chip svg { width: 14px; height: 14px; }
.ma-chip-dark { background: var(--ink); color: var(--text-on-dark); }
.ma-chip-glass { background: rgba(28, 29, 33, .62); color: var(--text-on-dark); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ma-chip-light { background: var(--surface); color: var(--ink); font-size: 12px; }
.ma-chip-tint { background: var(--brand-tint); color: var(--brand-strong); font-size: 12px; }
.ma-chip-success { background: var(--success-tint); color: var(--success-ink); font-size: 12px; }
.ma-chip-status { height: 34px; padding: 0 16px; border-radius: var(--radius-pill); background: var(--brand-tile); border: 1px solid rgba(255, 255, 255, .28); color: var(--on-brand); font-size: 14px; }
.ma-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); display: inline-block; flex: none; }
.ma-dot-online { width: 6px; height: 6px; background: var(--online); }
.ma-dot-success { background: var(--success); }
.ma-num { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--brand-tint); color: var(--brand-strong); font: 900 12px/1 var(--font-sans); flex: none; }
.ma-num-solid { background: var(--brand-strong); color: var(--on-brand); }

/* ---------- Desktop header ---------- */
.ma-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-3) 0; }
.ma-header-logo img { height: 34px; display: block; }
.ma-nav { display: flex; gap: var(--space-5); white-space: nowrap; font: 700 14px/1 var(--font-sans); color: var(--graphite); }
.ma-nav a:hover { color: var(--brand-strong); }
.ma-header-actions { display: flex; gap: var(--space-2); align-items: center; }
.ma-header-actions .ma-btn { height: 44px; }

/* ---------- Mobile header (floating glass bar) ---------- */
.ma-mheader { padding: 10px 12px 0; }
.ma-mheader-bar { height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px 0 9px; border-radius: var(--radius-lg); transition: all .5s var(--ease-out); }
.ma-mheader-bar img { height: 32px; display: block; transition: height .5s var(--ease-out); }
.ma-mheader-bar > div { display: flex; gap: var(--space-2); }
.ma-mheader.is-scrolled .ma-mheader-bar { height: 56px; background: rgba(255, 255, 255, .8); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); box-shadow: var(--shadow-header); }
.ma-mheader.is-scrolled img { height: 27px; }

/* ---------- Bottom nav ---------- */
.ma-bottomnav { height: 74px; border-radius: var(--radius-xl); display: flex; align-items: stretch; padding: 0 6px; background: rgba(28, 29, 33, .88); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); box-shadow: var(--shadow-nav); }
.ma-bottomnav.is-fixed { position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 30; }
.ma-nv { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); background: none; border: 0; padding: 0; color: var(--nav-inactive); position: relative; cursor: pointer; }
.ma-nv .ic { width: 44px; height: 44px; border-radius: 16px; display: flex; align-items: center; justify-content: center; position: relative; transition: transform .5s var(--ease-spring), background .35s, box-shadow .35s; }
.ma-nv .ic svg { width: 22px; height: 22px; }
.ma-nv .lbl { font: 700 11px/1 var(--font-sans); transition: transform .45s; }
.ma-nv.is-active { color: var(--text-on-dark); }
.ma-nv.is-active .ic { background: var(--brand); color: var(--on-brand); transform: translateY(-18px) scale(1.06); box-shadow: var(--shadow-nav-active); }
.ma-nv.is-active .lbl { transform: translateY(-10px); }
.ma-nv .ma-dot { position: absolute; top: 6px; left: 8px; }

/* ---------- Drawer (mobile menu) ---------- */
.ma-drawer { width: 322px; background: var(--surface); border-radius: var(--radius-2xl) 0 0 var(--radius-2xl); box-shadow: -30px 0 60px -30px rgba(0, 0, 0, .45); display: flex; flex-direction: column; padding: 22px 18px; }
.ma-drawer-top { display: flex; align-items: center; justify-content: space-between; }
.ma-drawer-top img { height: 30px; }
.ma-drawer nav { margin-top: 14px; display: flex; flex-direction: column; gap: 2px; }
.ma-drawer > .ma-btn { margin-top: 14px; }
.ma-search { margin-top: 20px; height: 50px; border-radius: 16px; background: var(--canvas); border: 1.5px solid var(--line); display: flex; align-items: center; gap: var(--space-2); padding: 0 14px; color: var(--muted); }
.ma-search svg { width: 18px; height: 18px; }
.ma-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 14px; color: var(--ink); }
.ma-search input::placeholder { color: var(--muted); }
.ma-mrow { display: flex; align-items: center; gap: var(--space-3); height: 52px; padding: 0 10px; border-radius: 16px; color: var(--graphite); font: 500 15px/1 var(--font-sans); transition: background .25s; }
.ma-mrow:hover, .ma-mrow.is-active { background: var(--brand-tint); }
.ma-mrow.is-active { color: var(--brand-strong); font-weight: 700; }
.ma-mrow .mic { width: 36px; height: 36px; border-radius: 12px; background: var(--canvas); color: var(--brand-strong); display: grid; place-items: center; transition: transform var(--duration-lift); }
.ma-mrow:hover .mic { transform: rotate(-8deg) scale(1.08); }
.ma-mrow.is-active .mic { background: var(--brand-strong); color: var(--on-brand); }
.ma-mrow .mic svg { width: 18px; height: 18px; }
.ma-follow { display: flex; align-items: center; gap: 10px; font: 700 11px/1 var(--font-sans); letter-spacing: 3px; color: var(--brand-strong); direction: ltr; margin-top: var(--space-6); }
.ma-follow span { flex: 1; height: 1px; background: var(--brand-tint-border); }

/* ---------- Hero ---------- */
.ma-hero { position: relative; overflow: hidden; background: var(--brand-strong); color: var(--on-brand); border-radius: var(--radius-2xl); padding: var(--gap-section) var(--space-6); text-align: center; }
.ma-hero-mark { width: 180px; margin: 0 auto var(--space-3); display: block; }
.ma-hero h1 { margin: 0; font-size: 30px; line-height: 1.35; font-weight: 900; }
.ma-hero h2 { margin: var(--space-2) 0 0; font-size: 16px; line-height: 1.6; font-weight: 700; }
.ma-hero p { margin: var(--space-2) auto 0; font-size: 14px; max-width: 560px; }
.ma-hero .ma-stats { margin: var(--space-5) auto 0; max-width: 480px; }
.ma-hero .ma-chip-status { margin-top: var(--gutter); }
.ma-hero-actions { display: flex; flex-direction: column; gap: 10px; margin: var(--space-6) auto 0; max-width: 360px; }
.ma-hero-ring { position: absolute; border: 1px dashed rgba(255, 255, 255, .25); border-radius: 50%; pointer-events: none; }
@media (min-width: 900px) { .ma-hero { padding: var(--space-12) var(--gap-section); } .ma-hero h1 { font-size: 40px; line-height: 1.3; } .ma-hero-actions { flex-direction: row; justify-content: center; max-width: none; } }

/* ---------- Stat tile ---------- */
.ma-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.ma-stat { padding: 10px 6px; border-radius: 16px; text-align: center; }
.ma-stat strong { display: block; font: 900 18px/1.4 var(--font-sans); }
.ma-stat small { display: block; font: 500 11px/1.7 var(--font-sans); }
.ma-stat-on-brand { background: var(--brand-tile); border: 1px solid rgba(255, 255, 255, .22); color: var(--on-brand); }
.ma-stat-on-brand small { color: var(--on-brand-muted); }
.ma-stat-on-card { background: var(--canvas); color: var(--ink); }
.ma-stat-on-card small { color: var(--muted); }

/* ---------- Cards ---------- */
.ma-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: var(--space-5); }
.ma-feature { display: flex; flex-direction: column; gap: var(--space-2); }
.ma-feature-icon { width: 48px; height: 48px; border-radius: 16px; background: var(--brand-tint); color: var(--brand-strong); display: grid; place-items: center; }
.ma-feature-icon svg { width: 24px; height: 24px; }
.ma-feature h3 { margin: var(--space-2) 0 0; font: 700 16px/1.6 var(--font-sans); color: var(--brand-strong); }
.ma-feature p { margin: 0; color: var(--muted); }

/* ---------- Section header ---------- */
.ma-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gutter); margin-bottom: var(--space-5); }
.ma-eyebrow { display: block; font: 700 12px/1.6 var(--font-sans); color: var(--brand-strong); }
.ma-section-title { margin: 0; font: 900 20px/1.5 var(--font-sans); color: var(--ink); }
@media (min-width: 900px) { .ma-section-title { font-size: 26px; line-height: 1.45; } }
.ma-on-dark .ma-section-title { color: var(--text-on-dark); }
.ma-on-dark .ma-eyebrow { color: var(--gold); }

/* ---------- Course card (card-in-card) ---------- */
.ma-course { padding: var(--space-2); border-radius: var(--radius-xl); display: flex; flex-direction: column; }
.ma-course-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; height: 184px; background: var(--graphite); }
.ma-course-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ma-course-media .ma-chip { position: absolute; }
.ma-course-media .tl { top: 10px; right: 10px; }
.ma-course-media .bl { bottom: 10px; left: 10px; }
.ma-course-body { padding: 14px 10px 8px; display: flex; flex-direction: column; gap: 10px; }
.ma-course h3 { margin: 0; font: 700 16px/1.6 var(--font-sans); }
.ma-course p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.9; }
.ma-meta { display: flex; align-items: center; gap: var(--space-2); color: var(--muted); font: 500 12px/1.7 var(--font-sans); }
.ma-meta .ma-icon-chip { width: 24px; height: 24px; border-radius: 8px; background: var(--brand-tint); color: var(--brand-strong); display: grid; place-items: center; }
.ma-meta .ma-icon-chip svg { width: 14px; height: 14px; }
.ma-stars { display: flex; gap: 2px; color: var(--star); }
.ma-stars svg { width: 14px; height: 14px; }
.ma-divider { height: 1px; background: var(--line); }
.ma-course-foot { display: flex; align-items: center; justify-content: space-between; }
.ma-price { font: 900 19px/1.4 var(--font-sans); color: var(--ink); white-space: nowrap; }
.ma-price small { font: 400 12px/1 var(--font-sans); color: var(--muted); margin-right: var(--space-1); }

/* ---------- Dark section + in-person card ---------- */
.ma-dark { background: var(--ink); color: var(--text-on-dark); border-radius: var(--radius-2xl); padding: var(--space-6); }
.ma-inperson { background: var(--graphite); border: 1px solid rgba(255, 255, 255, .06); border-radius: var(--radius-xl); padding: var(--space-2); }
.ma-inperson img { width: 100%; display: block; border-radius: var(--radius-lg); aspect-ratio: 451 / 206; object-fit: cover; }
.ma-inperson h3 { margin: var(--gutter) 10px 0; font: 700 16px/1.6 var(--font-sans); color: var(--text-on-dark); }
.ma-inperson p { margin: var(--space-2) 10px 0; color: var(--text-on-dark-muted); font-size: 13px; }
.ma-inperson .ma-btn { margin: var(--gutter) 10px 10px; }

/* ---------- Bestseller ---------- */
.ma-best { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-2); border-radius: var(--radius-xl); }
.ma-best-thumb { position: relative; width: 104px; flex: none; }
.ma-best-thumb img { width: 104px; height: 76px; object-fit: cover; border-radius: 16px; display: block; }
.ma-best-thumb .ma-num { position: absolute; top: 6px; right: 6px; }
.ma-best h4 { margin: 0; font: 700 14px/1.6 var(--font-sans); }
.ma-best-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-1); color: var(--muted); font: 500 12px/1.6 var(--font-sans); }
.ma-best-row span { white-space: nowrap; }
.ma-best-row b { color: var(--ink); font-weight: 900; font-size: 14px; }

/* ---------- Testimonial ---------- */
.ma-testimonial { margin: 0; background: var(--graphite); color: var(--text-on-dark); border-radius: var(--radius-xl); padding: var(--space-5); display: flex; flex-direction: column; gap: 14px; }
.ma-testimonial-head { display: flex; align-items: center; gap: var(--space-3); }
.ma-avatar { width: 46px; height: 46px; border-radius: 16px; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; font: 900 18px/1 var(--font-sans); flex: none; }
.ma-testimonial-head > div { flex: 1; }
.ma-testimonial h4 { margin: 0; font: 700 15px/1.5 var(--font-sans); }
.ma-testimonial .ma-course-label { display: block; color: var(--gold); font: 700 12px/1.6 var(--font-sans); }
.ma-quote { color: var(--brand); width: 26px; height: 26px; }
.ma-testimonial blockquote { margin: 0; color: var(--text-on-dark-muted); font: 400 14px/2 var(--font-sans); }

/* ---------- Article (magazine) ---------- */
.ma-band { background: var(--surface-sunken); border-radius: var(--radius-2xl); padding: var(--space-5); }
.ma-article { background: var(--surface); border-radius: var(--radius-xl); padding: var(--space-2); }
.ma-article img { width: 100%; aspect-ratio: 250 / 136; object-fit: cover; display: block; border-radius: var(--radius-lg); }
.ma-article h4 { margin: var(--space-2) var(--space-2) var(--space-1); font: 700 14px/1.6 var(--font-sans); }

/* ---------- Banners ---------- */
.ma-banner { position: relative; overflow: hidden; border-radius: var(--radius-2xl); padding: var(--gap-section) var(--space-6); display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.ma-banner-copy { flex: 1 1 360px; max-width: 640px; }
.ma-banner h3 { margin: var(--space-1) 0 var(--space-2); font: 900 22px/1.5 var(--font-sans); }
.ma-banner p { margin: 0; font-size: 14px; }
.ma-banner-brand { background: var(--brand-strong); color: var(--on-brand); }
.ma-banner-brand .ma-eyebrow { color: var(--on-brand); }
.ma-banner-dark { background: var(--ink); color: var(--text-on-dark); }
.ma-banner-dark .ma-eyebrow { color: var(--gold); display: inline-flex; align-items: center; gap: var(--space-2); }
.ma-banner-dark p { color: var(--text-on-dark-muted); }
.ma-banner-icon { width: 76px; height: 76px; border-radius: var(--radius-lg); background: var(--brand-strong); color: var(--on-brand); display: grid; place-items: center; flex: none; }
.ma-banner-icon svg { width: 32px; height: 32px; }
.ma-banner-aside { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.ma-banner-aside .ma-btn { min-width: 260px; }
.ma-banner-aside small { font: 700 13px/1 var(--font-sans); color: var(--text-on-dark); }
.ma-dots { position: absolute; pointer-events: none; }

/* ---------- FAQ ---------- */
.ma-faq { display: flex; flex-direction: column; gap: 10px; }
.ma-faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); transition: box-shadow var(--duration-lift) var(--ease-out), border-color .25s; }
.ma-faq details[open] { box-shadow: var(--shadow-faq-open); border-color: var(--brand-tint-border); }
.ma-faq summary { list-style: none; display: flex; align-items: center; gap: var(--space-3); padding: 14px 16px; font: 700 14px/1.7 var(--font-sans); cursor: pointer; }
.ma-faq summary::-webkit-details-marker { display: none; }
.ma-faq summary .ma-chev { margin-right: auto; width: 18px; height: 18px; color: var(--muted); transition: transform .4s var(--ease-out); }
.ma-faq details[open] summary .ma-chev { transform: rotate(180deg); color: var(--brand-strong); }
.ma-faq details > div { padding: 0 16px 16px; padding-right: calc(16px + 28px + var(--space-3)); color: var(--text-body); animation: ma-rise .45s var(--ease-out) both; }

/* ---------- Footer ---------- */
.ma-footer { background: var(--ink); color: var(--text-on-dark); border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; padding: var(--gap-section); display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--gap-section); }
.ma-footer img { height: 30px; display: block; }
.ma-footer .ma-tagline { color: var(--brand-on-dark); font: 700 14px/1.6 var(--font-sans); margin: var(--space-3) 0 var(--gutter); }
.ma-footer h5 { margin: 0 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid rgba(255, 255, 255, .15); font: 700 14px/1.6 var(--font-sans); }
.ma-footer ul { list-style: none; margin: 0; padding: 0; color: var(--text-on-dark-muted); font-size: 13px; line-height: 2.2; }
.ma-contact { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; color: var(--text-on-dark); margin-bottom: var(--space-2); }
.ma-contact svg { width: 16px; height: 16px; color: var(--brand-on-dark); }
.ma-social { display: flex; gap: 10px; margin-top: var(--gutter); }
.ma-social .ma-iconbtn { background: var(--graphite); border-color: var(--graphite); color: var(--text-on-dark); }
.ma-social-tint { justify-content: center; }
.ma-social-tint .ma-iconbtn { width: 46px; height: 46px; background: var(--brand-tint); border-color: var(--brand-tint); color: var(--brand-strong); }
@media (max-width: 760px) { .ma-footer { grid-template-columns: 1fr; } .ma-nav { display: none; } }

/* ---------- Course page ---------- */
.ma-breadcrumb { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font: 400 13px/1.6 var(--font-sans); color: var(--muted); }
.ma-breadcrumb a { color: var(--graphite); }
.ma-breadcrumb a:hover { color: var(--brand-strong); }
.ma-breadcrumb [aria-current] { color: var(--ink); font-weight: 700; }
.ma-coursehero { position: relative; overflow: hidden; background: var(--ink); color: var(--text-on-dark); border-radius: var(--radius-2xl); padding: var(--space-12); display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-12); align-items: center; }
.ma-coursehero h1 { margin: var(--gutter) 0 0; font: 900 40px/1.3 var(--font-sans); }
.ma-coursehero .sub { margin: var(--space-2) 0 0; font: 700 18px/1.6 var(--font-sans); color: var(--text-on-dark-muted); }
.ma-coursehero p { margin: var(--gutter) 0 0; color: var(--text-on-dark-muted); font-size: 15px; }
.ma-coursehero-tags { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.ma-coursehero-tags .ma-chip { height: 34px; padding: 0 14px; font-size: 13px; background: var(--graphite); color: var(--text-on-dark); border: 1px solid rgba(255, 255, 255, .12); }
.ma-facts { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: var(--space-5); font: 500 13px/1.6 var(--font-sans); color: var(--text-on-dark); }
.ma-facts span { display: inline-flex; align-items: center; gap: 6px; }
.ma-facts svg { width: 16px; height: 16px; color: var(--brand-on-dark); }
.ma-teacher { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); }
.ma-teacher .ma-avatar { border-radius: 50%; width: 48px; height: 48px; }
.ma-teacher small { display: block; font: 500 12px/1.4 var(--font-sans); color: var(--text-on-dark-muted); }
.ma-teacher b { font: 900 15px/1.5 var(--font-sans); }
.ma-coursehero-cta { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; margin-top: var(--space-6); }
.ma-coursehero-cta .ma-price { color: var(--text-on-dark); font-size: 24px; }
.ma-coursehero-cta .ma-price small { color: var(--text-on-dark-muted); }
.ma-cover { position: relative; z-index: 0; }
.ma-cover::before { content: ""; position: absolute; inset: 8px -8px -8px 8px; border-radius: var(--radius-xl); background: var(--brand-strong); transform: rotate(-3deg); z-index: -1; }
.ma-cover img { width: 100%; display: block; border-radius: var(--radius-xl); aspect-ratio: 16 / 9; object-fit: cover; }
.ma-enrolled { display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 24px; border-radius: var(--radius-md); background: rgba(30, 142, 85, .16); border: 1px solid rgba(91, 214, 138, .35); color: var(--online); font: 700 16px/1 var(--font-sans); }
@media (max-width: 900px) { .ma-coursehero { grid-template-columns: 1fr; padding: var(--space-6); gap: var(--space-6); } .ma-coursehero h1 { font-size: 30px; line-height: 1.35; } }

.ma-tabs { position: sticky; top: 12px; z-index: 5; display: flex; gap: 6px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-tabs); overflow-x: auto; scrollbar-width: none; }
.ma-tabs a { flex: 1; min-height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 13px; font: 700 15px/1 var(--font-sans); color: var(--graphite); white-space: nowrap; padding: 0 var(--space-3); }
.ma-tabs a:hover { background: var(--canvas); }
.ma-tabs a[aria-current] { background: var(--ink); color: var(--text-on-dark); }

.ma-learn { padding: 22px; border-radius: var(--radius-md); background: var(--canvas); }
.ma-learn h3 { margin: 0 0 var(--space-3); font: 700 16px/1.6 var(--font-sans); }
.ma-learn ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.ma-learn li { display: flex; gap: 10px; align-items: flex-start; font: 500 15px/1.8 var(--font-sans); }
.ma-check { width: 26px; height: 26px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-strong); display: grid; place-items: center; flex: none; }
.ma-check svg { width: 14px; height: 14px; }
@media (max-width: 760px) { .ma-learn ul { grid-template-columns: 1fr; } }

.ma-lessons-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-3); flex-wrap: wrap; }
.ma-lessons-head h2 { margin: 0; font: 900 20px/1.5 var(--font-sans); }
.ma-lessons-head small { color: var(--muted); font-size: 13px; }
.ma-lesson { display: flex; align-items: center; gap: 14px; padding: 12px 10px; border-top: 1px solid var(--line); }
.ma-lesson .n { width: 36px; height: 36px; border-radius: 50%; background: var(--canvas); display: grid; place-items: center; font: 900 14px/1 var(--font-sans); flex: none; }
.ma-lesson .t { flex: 1; font: 700 16px/1.6 var(--font-sans); }
.ma-lesson .state { display: inline-flex; align-items: center; gap: 6px; width: 96px; font: 700 13px/1 var(--font-sans); color: var(--success-ink); }
.ma-lesson .state.locked { color: var(--muted); }
.ma-lesson .state svg { width: 16px; height: 16px; }
.ma-lesson .ma-iconbtn { border-radius: 50%; }

.ma-progress { display: flex; flex-direction: column; gap: 6px; }
.ma-progress-top { display: flex; justify-content: space-between; font: 500 13px/1.6 var(--font-sans); color: var(--muted); }
.ma-progress-top b { color: var(--success-ink); font-weight: 900; }
.ma-progress-bar { height: 10px; border-radius: var(--radius-pill); background: var(--canvas); overflow: hidden; }
.ma-progress-bar span { display: block; height: 100%; border-radius: inherit; background: var(--success); }

.ma-side { display: flex; flex-direction: column; gap: var(--gutter); }
.ma-side .ma-card { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.ma-status { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--success-tint); color: var(--success-ink); font: 700 15px/1.4 var(--font-sans); }
.ma-status svg { width: 20px; height: 20px; }
.ma-buybox .ma-price { font-size: 26px; }
.ma-buybox .ma-btn { width: 100%; }
.ma-facts-list { list-style: none; margin: 0; padding: 0; }
.ma-facts-list li { display: flex; align-items: center; gap: var(--space-3); padding: 10px 2px; border-top: 1px solid var(--line); font-size: 14px; }
.ma-facts-list li:first-child { border-top: 0; }
.ma-facts-list svg { width: 18px; height: 18px; color: var(--muted); }
.ma-facts-list span { flex: 1; color: var(--muted); }
.ma-facts-list b { font-weight: 700; }

.ma-field { display: flex; flex-direction: column; gap: var(--space-2); }
.ma-field label { font: 700 15px/1.4 var(--font-sans); }
.ma-field label i { font-style: normal; color: var(--brand-strong); }
.ma-field textarea, .ma-field input { min-height: 50px; padding: 14px 16px; border-radius: var(--radius-md); border: 1px solid var(--line-strong); background: var(--surface); font: 400 15px/1.9 var(--font-sans); color: var(--ink); resize: vertical; }
.ma-field textarea { min-height: 140px; }
.ma-field textarea::placeholder, .ma-field input::placeholder { color: var(--muted); }
.ma-rate { display: flex; align-items: center; gap: var(--space-2); }
.ma-rate b { margin-left: var(--space-3); font: 700 15px/1 var(--font-sans); }
.ma-rate button { width: 40px; height: 40px; border: 0; background: transparent; color: var(--star); padding: 0; cursor: pointer; }
.ma-rate button svg { width: 26px; height: 26px; }
.ma-empty { padding: 18px 20px; border: 1.5px dashed var(--line-strong); border-radius: var(--radius-md); color: var(--muted); }

/* ---------- Order (post-purchase) ---------- */
.ma-order-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.ma-order-head .who { display: flex; align-items: center; gap: var(--gutter); }
.ma-success-badge { width: 52px; height: 52px; border-radius: 50%; background: var(--success); color: var(--on-brand); display: grid; place-items: center; flex: none; }
.ma-success-badge svg { width: 24px; height: 24px; }
.ma-order-head h2 { margin: 0; font: 900 20px/1.5 var(--font-sans); }
.ma-order-head p { margin: 0; color: var(--muted); font-size: 14px; }
.ma-order-meta { display: flex; gap: var(--space-6); }
.ma-order-meta small { display: block; color: var(--muted); font: 500 12px/1.6 var(--font-sans); }
.ma-order-meta b { font: 900 16px/1.4 var(--font-sans); }
.ma-access { position: relative; overflow: hidden; background: var(--ink); color: var(--text-on-dark); border-radius: var(--radius-2xl); padding: var(--space-12); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center; }
.ma-access small { display: block; margin-top: var(--gutter); color: var(--text-on-dark-muted); font-size: 14px; }
.ma-access h1 { margin: var(--space-1) 0 0; font: 900 40px/1.3 var(--font-sans); }
.ma-access p { color: var(--text-on-dark-muted); margin: var(--space-3) 0 0; }
.ma-access .ma-btn { margin-top: var(--space-6); }
.ma-link-light { display: inline-block; margin-top: var(--gutter); color: var(--text-on-dark-muted); font: 500 14px/1 var(--font-sans); border-bottom: 1px solid rgba(255, 255, 255, .3); padding-bottom: 8px; }
.ma-chip-activated { height: 38px; padding: 0 16px; border-radius: var(--radius-pill); background: rgba(30, 142, 85, .16); border: 1px solid rgba(91, 214, 138, .35); color: var(--online); font-size: 13px; }
.ma-player { position: relative; z-index: 0; aspect-ratio: 16 / 10; border-radius: var(--radius-xl); display: grid; place-items: center; }
.ma-player .screen { position: absolute; inset: 0; border-radius: inherit; background: var(--graphite); border: 1px solid rgba(255, 255, 255, .08); }
.ma-player .play, .ma-player .ma-chip { z-index: 1; }
.ma-player::before { content: ""; position: absolute; inset: 10px -10px -10px 10px; border-radius: var(--radius-xl); background: var(--brand-strong); transform: rotate(-4deg); z-index: -1; }
.ma-player .play { position: relative; width: 96px; height: 96px; border-radius: 50%; background: var(--surface); color: var(--brand-strong); display: grid; place-items: center; box-shadow: 0 0 0 14px rgba(216, 85, 79, .25); }
.ma-player .play svg { width: 34px; height: 34px; }
.ma-player .ma-chip { position: absolute; bottom: 20px; right: -14px; height: 44px; padding: 0 18px; border-radius: var(--radius-pill); font-size: 13px; }
@media (max-width: 900px) { .ma-access { grid-template-columns: 1fr; padding: var(--space-6); } .ma-access h1 { font-size: 30px; } }
.ma-summary { width: 100%; border-collapse: collapse; font-size: 14px; }
.ma-summary th { text-align: right; font-weight: 400; color: var(--muted); padding: 16px 0; border-top: 1px solid var(--line); }
.ma-summary td { text-align: left; font-weight: 700; padding: 16px 0; border-top: 1px solid var(--line); }
.ma-summary tr.total th, .ma-summary tr.total td { border-top: 2px solid var(--ink); padding-top: 20px; }
.ma-summary tr.total th { color: var(--ink); font-weight: 700; }
.ma-summary tr.total td { font: 900 22px/1 var(--font-sans); color: var(--success); }