/* Mithila Tax Solutions — component stylesheet.
   Every value comes from tokens.css (generated from tokens.json). Class prefix: mts-.
   Plain HTML/CSS: works in PHP templates, Liquid, React or anything else. */

/* ---------- Base ---------- */
.mts-root, .mts-root * { box-sizing: border-box; }
.mts-root {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: 18px; line-height: 28px;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.mts-root.on-surface { background: var(--surface); }
.mts-root h1, .mts-root h2, .mts-root h3, .mts-root h4 { font-family: var(--font-heading); color: var(--text); margin: 0; }
.mts-root p { margin: 0; }
.mts-root :lang(hi), .mts-root :lang(mai) { font-family: var(--font-devanagari); line-height: 1.67; }
.mts-root img { max-width: 100%; height: auto; display: block; }

.mts-container { width: 100%; max-width: calc(var(--content-max) + 2 * var(--gutter-desktop)); margin-inline: auto; padding-inline: var(--gutter-desktop); }
.mts-section { padding-block: var(--space-96); }
.mts-section--alt { background: var(--surface); }
.mts-stack > * + * { margin-top: var(--space-16); }
.mts-measure { max-width: var(--measure); }

.mts-h1 { font: 700 56px/64px var(--font-heading); letter-spacing: -0.01em; }
.mts-h2 { font: 700 40px/48px var(--font-heading); letter-spacing: -0.005em; }
.mts-h3 { font: 600 24px/32px var(--font-heading); }
.mts-lead { font-size: 20px; line-height: 30px; color: var(--text-secondary); }
.mts-body { font-size: 18px; line-height: 28px; }
.mts-small { font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.mts-eyebrow { font: 600 14px/20px var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary); }
.mts-num { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }

@media (max-width: 767px) {
  .mts-root { font-size: 16px; line-height: 26px; }
  .mts-container { padding-inline: var(--gutter-mobile); }
  .mts-section { padding-block: var(--space-48); }
  .mts-h1 { font-size: 36px; line-height: 44px; }
  .mts-h2 { font-size: 28px; line-height: 36px; }
  .mts-h3 { font-size: 22px; line-height: 30px; }
  .mts-lead { font-size: 18px; line-height: 28px; }
  .mts-body { font-size: 16px; line-height: 26px; }
}

/* ---------- Focus (one rule for everything) ---------- */
.mts-root :focus { outline: none; }
.mts-root :focus-visible { outline: var(--stroke-focus) solid var(--focus-ring); outline-offset: 2px; }
.mts-inverse :focus-visible, .mts-root .mts-inverse :focus-visible { outline-color: var(--focus-ring-inverse); }

/* ---------- Links ---------- */
.mts-link { color: var(--primary); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mts-link:hover { text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.mts-link--arrow { text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-8); min-height: var(--touch-min); max-width: 100%; }
.mts-link--arrow svg { flex: none; }
.mts-link--arrow:hover { text-decoration: underline; text-decoration-color: var(--accent); }

/* ---------- Buttons ---------- */
.mts-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  min-height: 48px; min-width: var(--touch-min); padding: var(--space-12) var(--space-24);
  border: 1px solid transparent; border-radius: var(--radius-control);
  font: 600 16px/24px var(--font-body); text-decoration: none; cursor: pointer;
  transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out;
}
.mts-btn svg { width: 20px; height: 20px; flex: none; }
.mts-btn--primary { background: var(--primary); color: var(--on-primary); }
.mts-btn--primary:hover { background: var(--primary-hover); }
.mts-btn--primary:active { background: var(--primary-hover); transform: translateY(1px); }
.mts-btn--secondary { background: var(--surface); color: var(--primary); border-color: var(--primary); }
.mts-btn--secondary:hover { background: var(--primary-tint); }
.mts-btn--secondary:active { background: var(--primary-tint); border-color: var(--primary-hover); color: var(--primary-hover); transform: translateY(1px); }
.mts-btn--text { background: transparent; color: var(--primary); padding-inline: var(--space-12); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.mts-btn--text:hover { text-decoration-color: var(--accent); text-decoration-thickness: 2px; background: var(--primary-tint); }
.mts-btn--inverse { background: var(--surface); color: var(--primary); }
.mts-btn--inverse:hover { background: var(--primary-tint); }
.mts-btn--sm { min-height: var(--touch-min); padding: var(--space-8) var(--space-16); }
.mts-btn--block { width: 100%; }
.mts-btn:disabled, .mts-btn[aria-disabled="true"] {
  background: var(--disabled-surface); color: var(--disabled-text); border-color: var(--disabled-surface); cursor: not-allowed; transform: none; text-decoration: none;
}
.mts-btn.is-loading { cursor: progress; }
.mts-btn.is-loading .mts-spinner { display: inline-block; }
.mts-spinner { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: mts-spin .8s linear infinite; }
@keyframes mts-spin { to { transform: rotate(360deg); } }

/* ---------- Badges / tags ---------- */
.mts-badge { display: inline-flex; align-items: center; gap: var(--space-4); padding: 2px var(--space-8); border-radius: var(--radius-control); font: 600 14px/20px var(--font-body); background: var(--primary-tint); color: var(--primary); }
.mts-badge--accent { background: var(--accent-tint); color: var(--text); }
.mts-badge--success { background: var(--success-tint); color: var(--success); }
.mts-badge--warning { background: var(--warning-tint); color: var(--warning); }
.mts-badge--error { background: var(--error-tint); color: var(--error); }

/* ---------- Forms ---------- */
.mts-form { display: grid; gap: var(--space-24); }
.mts-field { display: grid; gap: var(--space-8); }
.mts-label { font: 600 16px/24px var(--font-body); color: var(--text); }
.mts-req { color: var(--accent); margin-left: 2px; }
.mts-opt { font-weight: 400; color: var(--text-secondary); }
.mts-hint { font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.mts-input, .mts-select, .mts-textarea {
  width: 100%; min-height: 48px; padding: var(--space-12) var(--space-16);
  font: 400 16px/24px var(--font-body); color: var(--text); background: var(--surface);
  border: 1px solid var(--border-control); border-radius: var(--radius-control);
}
.mts-textarea { min-height: 120px; resize: vertical; }
.mts-select { appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2324355B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-position: right 14px center; background-size: 20px 20px; background-repeat: no-repeat; }
.mts-input::placeholder, .mts-textarea::placeholder { color: var(--text-secondary); }
.mts-input:hover, .mts-select:hover, .mts-textarea:hover { border-color: var(--text-secondary); }
.mts-input:focus-visible, .mts-select:focus-visible, .mts-textarea:focus-visible { border-color: var(--primary); outline-offset: 0; }
.mts-input[aria-invalid="true"], .mts-select[aria-invalid="true"], .mts-textarea[aria-invalid="true"] { border: var(--stroke-focus) solid var(--error); }
.mts-input:disabled, .mts-select:disabled, .mts-textarea:disabled { background: var(--disabled-surface); color: var(--disabled-text); border-color: var(--disabled-surface); cursor: not-allowed; }
.mts-input[readonly] { background: var(--bg); border-style: dashed; }
.mts-error-msg, .mts-success-msg { display: flex; gap: var(--space-8); align-items: flex-start; font: 600 14px/20px var(--font-body); }
.mts-error-msg { color: var(--error); }
.mts-success-msg { color: var(--success); }
.mts-error-msg svg, .mts-success-msg svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.mts-choice { display: flex; gap: var(--space-12); align-items: flex-start; min-height: var(--touch-min); padding-block: var(--space-8); cursor: pointer; }
.mts-choice input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--primary); flex: none; }
.mts-fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
.mts-fieldset legend { font: 600 16px/24px var(--font-body); margin-bottom: var(--space-8); padding: 0; }

/* ---------- Alerts / submission feedback ---------- */
.mts-alert { display: flex; gap: var(--space-12); padding: var(--space-16) var(--space-24); border-radius: var(--radius-control); border: 1px solid; font-size: 16px; line-height: 24px; color: var(--text); }
.mts-alert svg { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.mts-alert strong { display: block; font-weight: 600; }
.mts-alert--info { background: var(--primary-tint); border-color: var(--primary); }
.mts-alert--info svg { color: var(--primary); }
.mts-alert--success { background: var(--success-tint); border-color: var(--success); }
.mts-alert--success svg, .mts-alert--success strong { color: var(--success); }
.mts-alert--warning { background: var(--warning-tint); border-color: var(--warning); }
.mts-alert--warning svg, .mts-alert--warning strong { color: var(--warning); }
.mts-alert--error { background: var(--error-tint); border-color: var(--error); }
.mts-alert--error svg, .mts-alert--error strong { color: var(--error); }
.mts-alert ul { margin: var(--space-4) 0 0; padding-left: 20px; }
.mts-alert a { color: inherit; font-weight: 600; }

/* ---------- Paired-line motif ---------- */
.mts-rule { display: flex; align-items: center; gap: var(--space-12); color: var(--border-decorative); }
.mts-rule::before, .mts-rule::after { content: ""; flex: 1; height: 7px; border-top: var(--stroke-hairline) solid currentColor; border-bottom: var(--stroke-hairline) solid currentColor; }
.mts-rule__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.mts-rule--short { width: 96px; }
.mts-rule--short::after { display: none; }
.mts-rule--indigo { color: var(--primary); }
.mts-pair { display: block; width: 48px; height: 7px; border-top: 2px solid var(--primary); border-bottom: 2px solid var(--primary); }
.mts-ledger { background-image: repeating-linear-gradient(to bottom, transparent 0 18px, var(--border-decorative) 18px 19px, transparent 19px 22px, var(--border-decorative) 22px 23px, transparent 23px 48px); }

/* ---------- Header ---------- */
.mts-skip { position: absolute; left: var(--space-16); top: -100px; z-index: 100; background: var(--primary); color: var(--on-primary); padding: var(--space-12) var(--space-16); border-radius: var(--radius-control); font-weight: 600; }
.mts-skip:focus-visible { top: var(--space-8); outline-color: var(--primary); }
.mts-header { position: relative; background: var(--surface); border-bottom: var(--stroke-hairline) solid var(--border-decorative); }
.mts-header__bar { display: flex; align-items: center; gap: var(--space-32); min-height: var(--header-height); }
.mts-header__logo { display: inline-flex; align-items: center; min-height: var(--touch-min); flex: none; }
.mts-root .mts-header__logo img { height: 40px; width: auto; }
.mts-nav { display: flex; align-items: center; gap: var(--space-4); margin: 0; padding: 0; list-style: none; flex: 1; }
.mts-nav__link, .mts-nav__trigger {
  display: inline-flex; align-items: center; gap: var(--space-4); min-height: var(--touch-min); padding: 0 var(--space-12);
  font: 500 16px/24px var(--font-body); color: var(--text); text-decoration: none; background: none; border: 0; border-radius: var(--radius-control); cursor: pointer;
}
.mts-nav__link:hover, .mts-nav__trigger:hover { color: var(--primary); background: var(--primary-tint); }
.mts-nav__link[aria-current="page"] { color: var(--primary); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
.mts-nav__trigger[aria-expanded="true"] { color: var(--primary); background: var(--primary-tint); }
.mts-nav__trigger svg { width: 16px; height: 16px; transition: transform .15s ease-out; }
.mts-nav__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.mts-header__actions { display: flex; align-items: center; gap: var(--space-12); margin-left: auto; }
.mts-mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: var(--surface); border-top: var(--stroke-hairline) solid var(--border-decorative); border-bottom: var(--stroke-hairline) solid var(--border-decorative); box-shadow: var(--shadow-overlay); }
.mts-mega[hidden] { display: none; }
.mts-mega__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-32); padding-block: var(--space-32); }
.mts-mega__group h3 { font: 600 14px/20px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: var(--space-8); }
.mts-mega__group ul { list-style: none; margin: 0; padding: 0; }
.mts-mega__group a { display: flex; align-items: center; min-height: var(--touch-min); padding: 0 var(--space-8); margin-inline: calc(-1 * var(--space-8)); color: var(--text); text-decoration: none; border-radius: var(--radius-control); }
.mts-mega__group a:hover { background: var(--primary-tint); color: var(--primary); }
.mts-mega__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-16); padding-block: var(--space-16); border-top: var(--stroke-hairline) solid var(--border-decorative); }
.mts-menu-btn { display: none; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--border-control); border-radius: var(--radius-control); background: var(--surface); color: var(--primary); cursor: pointer; }
.mts-menu-btn svg { width: 24px; height: 24px; }
.mts-drawer { background: var(--surface); border-top: var(--stroke-hairline) solid var(--border-decorative); }
.mts-drawer[hidden] { display: none; }
.mts-drawer__list { list-style: none; margin: 0; padding: var(--space-8) 0; }
.mts-drawer__list > li { border-bottom: var(--stroke-hairline) solid var(--border-decorative); }
.mts-drawer__item { display: flex; width: 100%; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 var(--gutter-mobile); background: none; border: 0; font: 600 16px/24px var(--font-body); color: var(--text); text-decoration: none; cursor: pointer; text-align: left; }
.mts-drawer__item svg { width: 18px; height: 18px; color: var(--primary); transition: transform .15s ease-out; }
.mts-drawer__item[aria-expanded="true"] svg { transform: rotate(180deg); }
.mts-drawer__sub { list-style: none; margin: 0; padding: 0 0 var(--space-8); background: var(--bg); }
.mts-drawer__sub[hidden] { display: none; }
.mts-drawer__sub a { display: flex; align-items: center; min-height: var(--touch-min); padding: 0 var(--gutter-mobile) 0 calc(var(--gutter-mobile) + 12px); color: var(--text); text-decoration: none; }
.mts-drawer__cta { display: grid; gap: var(--space-12); padding: var(--space-16) var(--gutter-mobile) var(--space-24); }
@media (max-width: 1023px) {
  .mts-header__bar { min-height: 64px; gap: var(--space-16); }
  .mts-root .mts-header__logo img { height: 36px; }
  .mts-nav, .mts-header__actions .mts-hide-md { display: none; }
  .mts-menu-btn { display: inline-flex; }
}

/* ---------- Footer ---------- */
.mts-footer { background: var(--primary); color: var(--on-primary); padding-block: var(--space-64) var(--space-32); }
.mts-footer a { color: var(--on-primary); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--touch-min); }
.mts-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mts-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--space-32); }
.mts-footer h2 { font: 600 14px/20px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--on-primary-muted); margin-bottom: var(--space-8); }
.mts-footer ul { list-style: none; margin: 0; padding: 0; }
.mts-footer p, .mts-footer small { color: var(--on-primary-muted); }
.mts-root .mts-footer__logo { height: 40px; width: auto; margin-bottom: var(--space-16); }
.mts-footer__base { margin-top: var(--space-48); padding-top: var(--space-24); border-top: var(--stroke-hairline) solid rgba(255, 255, 255, 0.24); display: flex; flex-wrap: wrap; gap: var(--space-16) var(--space-32); justify-content: space-between; font-size: 14px; line-height: 20px; }
.mts-footer .mts-pair { border-color: var(--on-primary-muted); margin-bottom: var(--space-16); }
@media (max-width: 767px) { .mts-footer__grid { grid-template-columns: 1fr; gap: var(--space-24); } .mts-footer { padding-block: var(--space-48) var(--space-24); } }
@media (min-width: 768px) and (max-width: 1023px) { .mts-footer__grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Cards ---------- */
.mts-grid { display: grid; gap: var(--gutter-desktop); grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.mts-grid--4 { --cols: 4; }
.mts-grid--2 { --cols: 2; }
@media (max-width: 1023px) { .mts-grid { --cols: 2; } }
@media (max-width: 639px) { .mts-grid { --cols: 1; gap: var(--space-16); } }
.mts-card { background: var(--surface); border: var(--stroke-hairline) solid var(--border-decorative); border-radius: var(--radius-card); padding: var(--space-24); }
.mts-card--flat { background: var(--bg); }
.mts-service-card { position: relative; display: flex; flex-direction: column; gap: var(--space-12); background: var(--surface); border: var(--stroke-hairline) solid var(--border-decorative); border-radius: var(--radius-card); padding: var(--space-24); transition: border-color .15s ease-out, box-shadow .15s ease-out; }
.mts-service-card:hover { border-color: var(--primary); box-shadow: var(--shadow-raised); }
.mts-service-card:focus-within { border-color: var(--primary); }
.mts-service-card__icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--radius-control); background: var(--primary-tint); color: var(--primary); }
.mts-service-card__icon svg { width: 26px; height: 26px; }
.mts-service-card h3 { font: 600 22px/30px var(--font-heading); }
.mts-service-card p { color: var(--text-secondary); font-size: 16px; line-height: 24px; }
.mts-service-card ul { list-style: none; margin: 0; padding: 0; font-size: 16px; line-height: 24px; }
.mts-service-card li { padding-block: var(--space-4); }
.mts-service-card__link { margin-top: auto; }
.mts-service-card__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-card); } /* whole card clickable, one tab stop */

/* ---------- Pricing ---------- */
.mts-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-24); align-items: stretch; }
@media (max-width: 1023px) { .mts-plans { grid-template-columns: 1fr; max-width: 520px; } }
.mts-plan { display: flex; flex-direction: column; gap: var(--space-16); background: var(--surface); border: var(--stroke-hairline) solid var(--border-decorative); border-radius: var(--radius-card); padding: var(--space-32) var(--space-24); }
.mts-plan--featured { border: var(--stroke-focus) solid var(--primary); }
.mts-plan__flag { align-self: flex-start; }
.mts-plan__name { font: 600 22px/30px var(--font-heading); }
.mts-plan__price { font: 700 36px/44px var(--font-heading); color: var(--text); font-variant-numeric: tabular-nums lining-nums; }
.mts-plan__price small { font: 400 16px/24px var(--font-body); color: var(--text-secondary); }
.mts-plan__note { font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.mts-plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-8); font-size: 16px; line-height: 24px; }
.mts-plan li { display: flex; gap: var(--space-8); }
.mts-plan li svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--success); }
.mts-plan li.is-excluded { color: var(--text-secondary); }
.mts-plan li.is-excluded svg { color: var(--text-secondary); }
.mts-plan .mts-btn { margin-top: auto; }
.mts-table-wrap { overflow-x: auto; border: var(--stroke-hairline) solid var(--border-decorative); border-radius: var(--radius-card); background: var(--surface); }
.mts-table-wrap:focus-visible { outline-offset: 2px; }
.mts-table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 24px; min-width: 640px; }
.mts-table caption { text-align: left; padding: var(--space-16) var(--space-24); font: 600 18px/28px var(--font-heading); }
.mts-table th, .mts-table td { padding: var(--space-12) var(--space-24); border-top: var(--stroke-hairline) solid var(--border-decorative); text-align: left; vertical-align: top; }
.mts-table thead th { background: var(--primary-tint); color: var(--text); font-weight: 600; border-top: 0; }
.mts-table tbody th { font-weight: 500; }
.mts-table td.is-num, .mts-table th.is-num { text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.mts-table tbody th[scope="row"] { position: sticky; left: 0; background: var(--surface); }
.mts-yes, .mts-no { display: inline-flex; align-items: center; gap: var(--space-4); font-weight: 600; }
.mts-yes { color: var(--success); }
.mts-no { color: var(--text-secondary); font-weight: 400; }
.mts-yes svg, .mts-no svg { width: 18px; height: 18px; }

/* ---------- Process steps ---------- */
.mts-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--steps, 4), minmax(0, 1fr)); gap: var(--space-24); counter-reset: step; }
.mts-step { position: relative; display: grid; gap: var(--space-8); padding-top: var(--space-48); counter-increment: step; }
.mts-step::before { content: counter(step, decimal-leading-zero); position: absolute; top: 0; left: 0; font: 700 24px/32px var(--font-heading); color: var(--primary); font-variant-numeric: tabular-nums; }
.mts-step::after { content: ""; position: absolute; top: 12px; left: 48px; right: 0; height: 7px; border-top: 1px solid var(--border-decorative); border-bottom: 1px solid var(--border-decorative); }
.mts-step:last-child::after { display: none; }
.mts-step.is-current::before { color: var(--accent); }
.mts-step h3 { font: 600 20px/28px var(--font-heading); }
.mts-step p { color: var(--text-secondary); font-size: 16px; line-height: 24px; }
@media (max-width: 767px) {
  .mts-steps { grid-template-columns: 1fr; gap: 0; }
  .mts-step { padding: 0 0 var(--space-24) var(--space-48); }
  .mts-step::after { top: 36px; bottom: 4px; left: 12px; right: auto; width: 7px; height: auto; border: 0; border-left: 1px solid var(--border-decorative); border-right: 1px solid var(--border-decorative); }
}

/* ---------- Document checklist ---------- */
.mts-checklist { list-style: none; margin: 0; padding: 0; border: var(--stroke-hairline) solid var(--border-decorative); border-radius: var(--radius-card); background: var(--surface); }
.mts-checklist li { display: grid; grid-template-columns: 24px 1fr auto; gap: var(--space-12); padding: var(--space-16) var(--space-24); border-top: var(--stroke-hairline) solid var(--border-decorative); align-items: start; }
.mts-checklist li:first-child { border-top: 0; }
.mts-checklist svg { width: 22px; height: 22px; color: var(--primary); margin-top: 2px; }
.mts-checklist strong { display: block; font-weight: 600; }
.mts-checklist span.mts-small { display: block; }

/* ---------- Accordion (FAQ) ---------- */
.mts-accordion { border: var(--stroke-hairline) solid var(--border-decorative); border-radius: var(--radius-card); background: var(--surface); }
.mts-accordion__item + .mts-accordion__item { border-top: var(--stroke-hairline) solid var(--border-decorative); }
.mts-accordion h3 { margin: 0; font: inherit; }
.mts-accordion__btn { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--space-16); min-height: 56px; padding: var(--space-16) var(--space-24); background: none; border: 0; font: 600 18px/26px var(--font-heading); color: var(--text); text-align: left; cursor: pointer; border-radius: var(--radius-card); }
.mts-accordion__btn:hover { color: var(--primary); }
.mts-accordion__btn svg { width: 20px; height: 20px; flex: none; color: var(--primary); transition: transform .15s ease-out; }
.mts-accordion__btn[aria-expanded="true"] svg { transform: rotate(45deg); }
.mts-accordion__panel { padding: 0 var(--space-24) var(--space-24); color: var(--text); max-width: calc(var(--measure) + 48px); }
.mts-accordion__panel[hidden] { display: none; }

/* ---------- Breadcrumb ---------- */
.mts-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; font-size: 14px; line-height: 20px; }
.mts-breadcrumb li { display: inline-flex; align-items: center; color: var(--text-secondary); }
.mts-breadcrumb li + li::before { content: ""; width: 6px; height: 6px; margin: 0 var(--space-8); border-top: 1.5px solid var(--text-secondary); border-right: 1.5px solid var(--text-secondary); transform: rotate(45deg); }
.mts-breadcrumb a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 32px; }
.mts-breadcrumb [aria-current="page"] { color: var(--text); font-weight: 600; }
@media (max-width: 479px) { .mts-breadcrumb li:not(:nth-last-child(-n+2)) { display: none; } }

/* ---------- Article card ---------- */
.mts-article { position: relative; display: flex; flex-direction: column; background: var(--surface); border: var(--stroke-hairline) solid var(--border-decorative); border-radius: var(--radius-card); overflow: hidden; transition: border-color .15s ease-out; }
.mts-article:hover { border-color: var(--primary); }
.mts-article__media { aspect-ratio: 16 / 9; background: var(--primary-tint); }
.mts-article__body { display: grid; gap: var(--space-8); padding: var(--space-24); }
.mts-article h3 { font: 600 20px/28px var(--font-heading); }
.mts-article h3 a { color: var(--text); text-decoration: none; }
.mts-article h3 a::after { content: ""; position: absolute; inset: 0; }
.mts-article:hover h3 a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.mts-article p { font-size: 16px; line-height: 24px; color: var(--text-secondary); }

/* ---------- Filters ---------- */
.mts-filters { display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: center; }
.mts-chip { display: inline-flex; align-items: center; gap: var(--space-8); min-height: var(--touch-min); padding: 0 var(--space-16); border: 1px solid var(--border-control); border-radius: var(--radius-control); background: var(--surface); color: var(--text); font: 500 16px/24px var(--font-body); cursor: pointer; }
.mts-chip:hover { border-color: var(--primary); color: var(--primary); }
.mts-chip[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.mts-chip[aria-pressed="true"]::before { content: ""; width: 10px; height: 6px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translateY(-2px); }
.mts-search { position: relative; flex: 1 1 260px; }
.mts-search svg { position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--text-secondary); pointer-events: none; }
.mts-search .mts-input { padding-left: 44px; }

/* ---------- Pagination ---------- */
.mts-pagination ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.mts-pagination a, .mts-pagination span { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-4); min-width: var(--touch-min); min-height: var(--touch-min); padding: 0 var(--space-12); border-radius: var(--radius-control); color: var(--primary); font: 600 16px/24px var(--font-body); text-decoration: none; font-variant-numeric: tabular-nums; }
.mts-pagination a:hover { background: var(--primary-tint); }
.mts-pagination a[aria-current="page"] { background: var(--primary); color: var(--on-primary); }
.mts-pagination .is-disabled { color: var(--disabled-text); cursor: not-allowed; }
.mts-pagination .is-gap { color: var(--text-secondary); min-width: 24px; padding: 0; }
@media (max-width: 479px) { .mts-pagination .is-far { display: none; } }

/* ---------- Empty / loading ---------- */
.mts-empty { display: grid; justify-items: center; gap: var(--space-12); padding: var(--space-48) var(--space-24); text-align: center; border: 1px dashed var(--border-control); border-radius: var(--radius-card); background: var(--surface); }
.mts-empty svg { width: 48px; height: 48px; color: var(--primary); }
.mts-empty p { color: var(--text-secondary); max-width: 44ch; }
.mts-skeleton { display: block; background: var(--disabled-surface); border-radius: var(--radius-control); height: 16px; animation: mts-pulse 1.4s ease-in-out infinite; }
@keyframes mts-pulse { 50% { opacity: .55; } }

/* ---------- Hero ---------- */
.mts-hero { padding-block: var(--space-96) var(--space-64); background: var(--surface); border-bottom: var(--stroke-hairline) solid var(--border-decorative); }
.mts-hero__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-64); align-items: center; }
.mts-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-12); }
@media (max-width: 1023px) { .mts-hero__grid { grid-template-columns: 1fr; gap: var(--space-32); } }
@media (max-width: 767px) { .mts-hero { padding-block: var(--space-48); } .mts-hero__actions .mts-btn { width: 100%; } }

/* ---------- CTA band ---------- */
.mts-cta { background: var(--primary); color: var(--on-primary); border-radius: var(--radius-card); padding: var(--space-48); display: flex; flex-wrap: wrap; gap: var(--space-24); align-items: center; justify-content: space-between; }
.mts-cta h2 { color: var(--on-primary); }
.mts-cta p { color: var(--on-primary-muted); }
@media (max-width: 767px) { .mts-cta { padding: var(--space-32) var(--space-24); } .mts-cta .mts-btn { width: 100%; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .mts-root *, .mts-root *::before, .mts-root *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .mts-spinner { animation: none; border-right-color: currentColor; opacity: .6; }
}