/* ─── Features grid ─── */
.mk-feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 640px) {
  .mk-feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .mk-feature-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.mk-feature-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mk-feature-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-brand-50);
  color: var(--color-brand-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mk-feature-card h3 {
  font-size: var(--mk-fs-h3);
  font-weight: var(--mk-fw-semibold);
  line-height: var(--mk-lh-snug);
  color: var(--color-text-primary);
}
.mk-feature-card p {
  font-size: var(--mk-fs-body-sm);
  line-height: var(--mk-lh-normal);
  color: var(--color-text-secondary);
}

/* ─── How it works ─── */
.mk-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 768px) {
  .mk-steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}
.mk-step {
  position: relative;
  padding: 32px 24px;
  background: var(--color-surface-0);
  border: 1px solid var(--mk-border-subtle);
  border-radius: var(--mk-radius-card);
  box-shadow: var(--mk-shadow-card);
}
.mk-step__num {
  font-family: var(--font-inter), system-ui, sans-serif;
  font-size: 48px;
  font-weight: 800;
  /* color-brand-100 (#DBEAFE) failed WCAG AA large text (1.22:1 on white);
     color-brand-500 (#3B82F6) passes at 3.68:1 (threshold: 3.0:1 for 48px bold) */
  color: var(--color-brand-500);
  line-height: 1;
  margin-bottom: 12px;
  letter-spacing: var(--mk-tracking-tight);
}
.mk-step h3 {
  font-size: var(--mk-fs-h3);
  font-weight: var(--mk-fw-semibold);
  color: var(--color-text-primary);
}
.mk-step p {
  margin-top: 8px;
  font-size: var(--mk-fs-body);
  line-height: var(--mk-lh-normal);
  color: var(--color-text-secondary);
}

/* ─── Use cases ─── */
.mk-usecase-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .mk-usecase-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.mk-usecase-card {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  min-height: 160px;
}
.mk-usecase-icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-brand-50);
  color: var(--color-brand-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mk-usecase-card h3 {
  font-size: var(--mk-fs-h3);
  font-weight: var(--mk-fw-semibold);
  color: var(--color-text-primary);
}
.mk-usecase-card p {
  margin-top: 8px;
  font-size: var(--mk-fs-body);
  line-height: var(--mk-lh-normal);
  color: var(--color-text-secondary);
}

/* ─── Pricing ─── */
.mk-billing-toggle {
  display: inline-flex;
  background: var(--color-surface-2);
  border-radius: var(--mk-radius-chip);
  padding: 4px;
  gap: 4px;
}
.mk-billing-toggle__option {
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--mk-radius-chip);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text-secondary);
  text-decoration: none;
  display: inline-block;
}
/* Client Component (button) — aria-pressed */
.mk-billing-toggle__option[aria-pressed="true"],
/* Server Component (a) — aria-current */
.mk-billing-toggle__option[aria-current="page"],
.mk-billing-toggle__option[data-active="true"] {
  background: var(--color-surface-0);
  color: var(--color-text-primary);
  box-shadow: var(--mk-shadow-card);
}
/* LanguagesDetails (details/summary JS-free 言語一覧) */
.lm-details {
  display: inline-block;
}
.lm-details__summary {
  list-style: none;
  cursor: pointer;
  color: var(--color-brand-600);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  background: transparent;
  border: none;
  padding: 0;
  font-family: inherit;
}
.lm-details__summary::-webkit-details-marker { display: none; }
.lm-details--card .lm-details__summary {
  margin-left: 22px;
  color: var(--color-text-tertiary);
  font-size: 11px;
  font-weight: 500;
}
.lm-details[open] .lm-details__summary {
  margin-bottom: 12px;
}
.lm-details__panel {
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-3);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-6);
  max-width: 880px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-height: 480px;
  overflow-y: auto;
}
.lm-details__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.lm-details__section-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
  flex-wrap: wrap;
}
.lm-details__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}
.lm-details__badge--free {
  background: var(--color-success-100);
  color: var(--color-success-text);
}
.lm-details__badge--paid {
  background: var(--color-brand-100);
  color: var(--color-brand-600);
}
.lm-details__count {
  color: var(--color-text-tertiary);
  font-weight: 500;
  font-size: 13px;
}
.lm-details__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 1023px) {
  .lm-details__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .lm-details__list { grid-template-columns: 1fr; }
}
.lm-details__row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
}
.lm-details__flag { font-size: 20px; line-height: 1; }
.lm-details__names { display: flex; flex-direction: column; min-width: 0; }
.lm-details__ja {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lm-details__native {
  font-size: 12px;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lm-details__bcp {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-tertiary);
  letter-spacing: 0.04em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.lm-details__footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-surface-3);
}
.lm-details__note {
  font-size: 12px;
  color: var(--color-text-tertiary);
  margin: 0;
}
.lm-details__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-brand-500);
  color: var(--color-text-on-brand);
  padding: 12px 18px;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}
.lm-details__cta:hover {
  background: var(--color-brand-600);
}
.mk-pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .mk-pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1280px) {
  .mk-pricing-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.mk-pricing-grid--two {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .mk-pricing-grid--two {
    grid-template-columns: repeat(2, 1fr);
    max-width: 720px;
    margin-inline: auto;
  }
}
.mk-pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px 28px;
  background: var(--color-surface-0);
  border: 1px solid var(--mk-border-subtle);
  border-radius: var(--mk-radius-card);
  box-shadow: var(--mk-shadow-card);
}
.mk-pricing-card--recommend {
  box-shadow: var(--mk-shadow-pricing-recommend);
}
@media (min-width: 1280px) {
  .mk-pricing-card--recommend {
    transform: scale(1.03);
  }
}
.mk-pricing-card__ribbon {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 14px;
  background: var(--mk-accent-amber);
  /* #fff on #f59e0b = 2.15:1 — fails WCAG AA. Use dark stone #1c1917 = 8.14:1. */
  color: #1c1917;
  font-size: 12px;
  font-weight: var(--mk-fw-semibold);
  border-radius: var(--mk-radius-chip);
  white-space: nowrap;
}
.mk-pricing-card__name {
  font-size: var(--mk-fs-h3);
  font-weight: var(--mk-fw-semibold);
  color: var(--color-text-primary);
}
.mk-pricing-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.mk-pricing-card__price {
  font-family: var(--font-inter), system-ui, sans-serif;
  font-size: 48px;
  font-weight: 700;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: var(--mk-tracking-tight);
}
.mk-pricing-card__suffix {
  font-size: 14px;
  color: var(--color-text-tertiary);
}
.mk-pricing-card__yearly {
  font-size: 13px;
  color: var(--color-text-tertiary);
}
.mk-pricing-card__desc {
  font-size: var(--mk-fs-body-sm);
  color: var(--color-text-secondary);
  line-height: var(--mk-lh-normal);
}
.mk-pricing-card__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.mk-pricing-card__features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-primary);
}
.mk-pricing-card__features li.is-excluded {
  color: var(--color-text-tertiary);
}
.mk-pricing-card__cta {
  margin-top: auto;
}

.mk-pricing-card__lang-link {
  display: inline-block;
  margin-top: 4px;
  padding: 0;
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-tertiary);
  cursor: pointer;
  text-align: left;
}
.mk-pricing-card__lang-link:hover {
  color: var(--color-brand-600);
}

.mk-pricing-aux {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 32px;
  font-size: 14px;
}
.mk-pricing-aux a {
  color: var(--color-brand-600);
  text-decoration: none;
}
.mk-pricing-aux a:hover {
  text-decoration: underline;
}

/* ─── Pricing comparison table ─── */
.mk-comparison {
  overflow-x: auto;
  border: 1px solid var(--mk-border-subtle);
  border-radius: var(--mk-radius-card);
  background: var(--color-surface-0);
  box-shadow: var(--mk-shadow-card);
}
.mk-comparison table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 640px;
}
.mk-comparison th,
.mk-comparison td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--mk-divider);
  white-space: nowrap;
}
.mk-comparison thead th {
  background: var(--color-surface-1);
  font-weight: var(--mk-fw-semibold);
  color: var(--color-text-primary);
  position: sticky;
  top: 72px;
}
.mk-comparison tbody tr:hover {
  background: var(--color-surface-1);
}
.mk-comparison .mk-yes {
  color: var(--color-success-500);
  font-weight: 600;
}
.mk-comparison .mk-no {
  color: var(--color-text-disabled);
}

/* ─── Testimonials ─── */
.mk-testimonial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .mk-testimonial-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.mk-testimonial-card {
  padding: 32px 24px;
  border: 2px dashed var(--mk-border-strong);
  border-radius: var(--mk-radius-card);
  background: var(--color-surface-0);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--color-text-tertiary);
}
.mk-testimonial-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mk-testimonial-card__title {
  font-size: 18px;
  letter-spacing: var(--mk-tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.mk-testimonial-card__body {
  font-size: 14px;
  color: var(--color-text-secondary);
}

/* ─── FAQ ─── */
.mk-faq {
  max-width: 760px;
  margin-inline: auto;
}
.mk-faq details {
  border-bottom: 1px solid var(--mk-divider);
  padding: 20px 0;
}
.mk-faq details:first-of-type {
  border-top: 1px solid var(--mk-divider);
}
.mk-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-weight: var(--mk-fw-semibold);
  font-size: 16px;
  color: var(--color-text-primary);
}
.mk-faq summary::-webkit-details-marker {
  display: none;
}
.mk-faq summary::marker {
  display: none;
  content: "";
}
.mk-faq summary .mk-faq__chev {
  margin-left: auto;
  transition: transform var(--duration-base) var(--ease-out);
  color: var(--color-text-tertiary);
}
.mk-faq details[open] summary .mk-faq__chev {
  transform: rotate(180deg);
}
.mk-faq__answer {
  padding: 12px 0 0 32px;
  color: var(--color-text-secondary);
  font-size: 15px;
  line-height: 1.7;
}
.mk-faq__icon {
  color: var(--color-brand-500);
  flex: 0 0 auto;
}

/* Phase 5: CSS-only FAQ icons — replaces inline SVG to reduce RSC payload */
/* HelpCircle: a small coloured circle with a "?" */
.mk-faq__icon-q {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--color-brand-400);
  color: var(--color-brand-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.mk-faq__icon-q::before {
  content: "?";
}
/* ChevronDown: CSS border-trick triangle */
.mk-faq__chev-arrow {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--duration-base) var(--ease-out);
  color: var(--color-text-tertiary);
}
.mk-faq__chev-arrow::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--duration-base) var(--ease-out);
}
.mk-faq details[open] summary .mk-faq__chev-arrow::before {
  transform: rotate(-135deg) translateY(-2px);
}

/* ─── CTA Block ─── */
.mk-cta-block {
  text-align: center;
  position: relative;
  overflow: hidden;
}
.mk-cta-block h2 {
  color: #fff;
  font-size: clamp(28px, 4vw, 36px);
  font-weight: var(--mk-fw-semibold);
  line-height: 1.2;
}
.mk-cta-block p {
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 18px;
}
.mk-cta-block__buttons {
  margin-top: 32px;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* ─── Page-level (legal / contact) ─── */
.mk-doc {
  max-width: 760px;
  margin-inline: auto;
}
.mk-doc h1 {
  font-size: 36px;
  font-weight: var(--mk-fw-semibold);
  color: var(--color-text-primary);
  letter-spacing: var(--mk-tracking-tight);
  margin-bottom: 8px;
}
.mk-doc__updated {
  color: var(--color-text-tertiary);
  font-size: 14px;
  margin-bottom: 32px;
}
.mk-doc h2 {
  font-size: 24px;
  font-weight: var(--mk-fw-semibold);
  color: var(--color-text-primary);
  margin-top: 40px;
  margin-bottom: 16px;
}
.mk-doc h3 {
  font-size: 20px;
  font-weight: var(--mk-fw-semibold);
  color: var(--color-text-primary);
  margin-top: 24px;
  margin-bottom: 12px;
}
.mk-doc p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text-primary);
  margin-bottom: 16px;
}
.mk-doc ul,
.mk-doc ol {
  padding-left: 24px;
  margin-bottom: 16px;
  line-height: 1.8;
  color: var(--color-text-primary);
}
.mk-doc li + li {
  margin-top: 8px;
}
.mk-doc a {
  color: var(--color-brand-600);
  text-decoration: underline;
}
.mk-doc a:hover {
  color: var(--color-brand-500);
}
.mk-doc table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
  font-size: 15px;
}
.mk-doc th,
.mk-doc td {
  border: 1px solid var(--mk-border-subtle);
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
}
.mk-doc th {
  background: var(--color-surface-1);
  font-weight: var(--mk-fw-semibold);
}
.mk-doc__back {
  display: inline-block;
  margin-top: 32px;
  font-size: 14px;
  color: var(--color-brand-600);
  text-decoration: none;
}
.mk-doc__back:hover {
  text-decoration: underline;
}

/* ─── Contact ─── */
.mk-contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 1024px) {
  .mk-contact-grid {
    grid-template-columns: 2fr 1fr;
  }
}
.mk-form {
  background: var(--color-surface-0);
  border: 1px solid var(--mk-border-subtle);
  border-radius: var(--mk-radius-card);
  padding: 40px;
  box-shadow: var(--mk-shadow-card);
}
@media (max-width: 768px) {
  .mk-form {
    padding: 24px;
  }
}
.mk-form__field {
  margin-bottom: 20px;
}
.mk-form__label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: 6px;
}
.mk-form__required {
  color: var(--color-danger-500);
  margin-left: 4px;
}
.mk-form__input,
.mk-form__select,
.mk-form__textarea {
  width: 100%;
  padding: 10px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--color-text-primary);
  background: var(--color-surface-0);
  border: 1px solid var(--mk-border-strong);
  border-radius: 10px;
  min-height: 44px;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}
.mk-form__textarea {
  min-height: 144px;
  resize: vertical;
}
.mk-form__input:focus,
.mk-form__select:focus,
.mk-form__textarea:focus {
  outline: none;
  border-color: var(--color-brand-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.mk-form__error {
  margin-top: 4px;
  font-size: 13px;
  color: var(--color-danger-500);
}
.mk-form__alert {
  margin-bottom: 20px;
  padding: 12px 16px;
  background: var(--color-danger-100);
  color: var(--color-danger-text);
  border-radius: 10px;
  font-size: 14px;
}
.mk-form__consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: var(--color-text-primary);
}
.mk-form__consent input {
  margin-top: 4px;
}
.mk-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.mk-form__sidebar {
  background: var(--color-surface-1);
  border: 1px solid var(--mk-border-subtle);
  border-radius: var(--mk-radius-card);
  padding: 32px 24px;
}
.mk-form__sidebar h2 {
  font-size: 16px;
  font-weight: var(--mk-fw-semibold);
  margin-bottom: 8px;
  color: var(--color-text-primary);
}
.mk-form__sidebar p {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: 16px;
}
.mk-form__success {
  text-align: center;
  padding: 32px;
}
.mk-form__success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-success-100);
  color: var(--color-success-500);
  margin-bottom: 16px;
}
.mk-form__success h2 {
  font-size: 22px;
  font-weight: var(--mk-fw-semibold);
  color: var(--color-text-primary);
  margin-bottom: 8px;
}
.mk-form__success p {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-bottom: 24px;
}

/* ─── Visually hidden ─── */
.mk-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Problem section (LP redesign 2026-05) ─── */
.mk-problem-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .mk-problem-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.mk-problem-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mk-problem-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--mk-accent-amber-soft);
  color: var(--mk-accent-amber);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mk-problem-card h3 {
  font-size: var(--mk-fs-h3);
  font-weight: var(--mk-fw-semibold);
  color: var(--color-text-primary);
}
.mk-problem-card p {
  font-size: var(--mk-fs-body);
  line-height: var(--mk-lh-normal);
  color: var(--color-text-secondary);
}

/* ─── Industry focus section ─── */
.mk-industry-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .mk-industry-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.mk-industry-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mk-industry-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-brand-50);
  color: var(--color-brand-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mk-industry-card h3 {
  font-size: var(--mk-fs-h3);
  font-weight: var(--mk-fw-semibold);
  color: var(--color-text-primary);
}
.mk-industry-card p {
  font-size: var(--mk-fs-body);
  line-height: var(--mk-lh-normal);
  color: var(--color-text-secondary);
}
.mk-industry-cta {
  margin-top: 32px;
  text-align: center;
}
.mk-industry-cta__note {
  font-size: 14px;
  color: var(--color-text-tertiary);
  margin-bottom: 16px;
}

/* ─── Roadmap section ─── */
.mk-roadmap-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .mk-roadmap-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .mk-roadmap-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.mk-roadmap-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}
.mk-roadmap-card__badge {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: var(--mk-fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--mk-accent-amber-soft);
  /* mk-accent-amber (#f59e0b) on mk-accent-amber-soft (#fef3c7) = 1.93:1 — fails WCAG AA.
     Use warning-text (#92400e) = 6.37:1. */
  color: var(--color-warning-text);
  border-radius: var(--mk-radius-chip);
}
.mk-roadmap-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--color-brand-50);
  color: var(--color-brand-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mk-roadmap-card h3 {
  font-size: var(--mk-fs-h4);
  font-weight: var(--mk-fw-semibold);
  color: var(--color-text-primary);
}
.mk-roadmap-card p {
  font-size: var(--mk-fs-body-sm);
  line-height: var(--mk-lh-normal);
  color: var(--color-text-secondary);
}
.mk-roadmap-cta {
  margin-top: 32px;
  text-align: center;
}

/* Phase 5: CSS-only testimonial icon — replaces <Icon name="MessageCircle"> SVG */
.mk-testimonial-icon-css {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-brand-50);
  color: var(--color-brand-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: 0 0 auto;
}
.mk-testimonial-icon-css::before {
  content: "";
  display: block;
  width: 22px;
  height: 18px;
  border: 2px solid currentColor;
  border-radius: 12px 12px 12px 2px;
}
.mk-testimonial-icon-css::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 8px;
  left: 8px;
  width: 6px;
  height: 6px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) skew(-10deg, -10deg);
}

/* ─── Testimonials redesign — quote variant (replaces dashed placeholder) ─── */
.mk-testimonial-card--quote {
  border: 1px solid var(--mk-border-subtle);
  border-style: solid;
  background: var(--color-surface-0);
  text-align: left;
  align-items: flex-start;
  color: var(--color-text-primary);
  box-shadow: var(--mk-shadow-card);
}
.mk-testimonial-card--quote .mk-testimonial-card__title {
  font-size: var(--mk-fs-h4);
  letter-spacing: var(--mk-tracking-tight);
  text-transform: none;
  color: var(--color-text-primary);
  font-weight: var(--mk-fw-semibold);
  line-height: var(--mk-lh-snug);
  text-align: left;
}
.mk-testimonial-card--quote .mk-testimonial-card__body {
  font-size: 14px;
  line-height: var(--mk-lh-relaxed);
  color: var(--color-text-secondary);
  text-align: left;
}
.mk-testimonial-card__meta {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--mk-divider);
  font-size: 13px;
  color: var(--color-text-tertiary);
  text-align: left;
  width: 100%;
}
.mk-testimonial-card__industry {
  color: var(--color-brand-600);
  font-weight: var(--mk-fw-medium);
}
.mk-testimonial-card__role {
  /* color-text-tertiary (#64748b) on --mk-bg-tinted (#eff6ff) = 4.37:1 — just below WCAG AA 4.5:1.
     Use color-text-secondary (#475569) = 6.96:1 to meet AA. */
  color: var(--color-text-secondary);
}

/* ─── Locale switcher (header & mobile) ─── */
/* <details> pattern: summary = trigger (open/close only, no navigation) */
.mk-header__locale-dropdown {
  position: relative;
  list-style: none;
}
/* Remove default <details> marker */
.mk-header__locale-dropdown > summary {
  list-style: none;
}
.mk-header__locale-dropdown > summary::-webkit-details-marker {
  display: none;
}
.mk-header__locale {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  font-size: 14px;
  font-weight: var(--mk-fw-medium);
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid var(--mk-border-subtle);
  border-radius: var(--mk-radius-chip);
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.mk-header__locale:hover,
.mk-header__locale-dropdown[open] .mk-header__locale {
  border-color: var(--color-brand-500);
  color: var(--color-brand-600);
}
/* Dropdown menu — hidden by default, shown when <details> is open */
.mk-header__locale-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 140px;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  background: var(--color-surface, #fff);
  border: 1px solid var(--mk-border-subtle);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
  z-index: 200;
}
.mk-header__locale-dropdown[open] .mk-header__locale-menu {
  display: block;
}
.mk-header__locale-option {
  display: block;
  padding: 8px 14px;
  font-size: 14px;
  color: var(--color-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.mk-header__locale-option:hover {
  background: var(--color-brand-50, #f0f9ff);
  color: var(--color-brand-700, #0369a1);
}
.mk-header__locale-option--active {
  font-weight: var(--mk-fw-medium);
  color: var(--color-brand-600);
}
.mk-header__mobile-locale-dropdown {
  border-top: 1px solid var(--mk-divider);
  margin-top: 8px;
}
.mk-header__mobile-locale-row {
  display: flex;
  align-items: center;
}
.mk-header__mobile-locale {
  flex: 1;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: var(--mk-fw-medium);
  color: var(--color-brand-600);
  text-decoration: none;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.mk-header__mobile-locale-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
}
.mk-header__mobile-locale-list {
  list-style: none;
  margin: 0;
  padding: 4px 0 8px;
}
.mk-header__mobile-locale-option {
  padding: 10px 24px;
  font-size: 14px;
  color: var(--color-text-secondary);
  text-decoration: none;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.mk-header__mobile-locale-option:hover {
  background: var(--color-brand-50, #f0f9ff);
  color: var(--color-brand-700, #0369a1);
}
.mk-header__mobile-locale-option--active {
  font-weight: var(--mk-fw-medium);
  color: var(--color-brand-600);
}
@media (max-width: 1023px) {
  .mk-header__locale-dropdown {
    display: none;
  }

/* ─── CSS-only icon system (Phase 5b) ──────────────────────────────────────
 * Replaces inline SVG in section components (Features, Problem, Roadmap,
 * UseCases, IndustryFocus, TTSNeural2). Each span gets data-icon=<name> and
 * displays the icon via background-image: url("data:image/svg+xml,...").
 * This removes ~25 SVG elements from the RSC flight payload (~8-12 KB).
 * Caller icon containers already have width/height/display:flex set.
 * ────────────────────────────────────────────────────────────────────────── */
.mk-css-icon {
  display: block;
  width: 28px;
  height: 28px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  /* color: var(--color-brand-600) — SVG uses currentColor but data-URI can't
     inherit, so we bake in the brand color (#2563EB ≈ brand-600). */
}
/* Mic */
[data-icon="Mic"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2' width='6' height='12' rx='3'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Cline x1='12' y1='19' x2='12' y2='22'/%3E%3C/svg%3E");
}
/* Languages */
[data-icon="Languages"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 6 6'/%3E%3Cpath d='m4 14 6-6 2-3'/%3E%3Cpath d='M2 5h12'/%3E%3Cpath d='M7 2h1'/%3E%3Cpath d='m22 22-5-10-5 10'/%3E%3Cpath d='M14 18h6'/%3E%3C/svg%3E");
}
/* QrCode */
[data-icon="QrCode"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Cpath d='M14 14h3v3'/%3E%3Cpath d='M21 14v3'/%3E%3Cpath d='M14 21h3'/%3E%3Cpath d='M21 21v-3'/%3E%3C/svg%3E");
}
/* Sparkles */
[data-icon="Sparkles"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v3'/%3E%3Cpath d='M12 18v3'/%3E%3Cpath d='M3 12h3'/%3E%3Cpath d='M18 12h3'/%3E%3Cpath d='m5.5 5.5 2 2'/%3E%3Cpath d='m16.5 16.5 2 2'/%3E%3Cpath d='m5.5 18.5 2-2'/%3E%3Cpath d='m16.5 7.5 2-2'/%3E%3C/svg%3E");
}
/* FileText */
[data-icon="FileText"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cline x1='10' y1='9' x2='8' y2='9'/%3E%3C/svg%3E");
}
/* ShieldCheck */
[data-icon="ShieldCheck"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpolyline points='9 12 11 14 15 10'/%3E%3C/svg%3E");
}
/* Mail */
[data-icon="Mail"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpolyline points='22%2C4 12%2C13 2%2C4'/%3E%3C/svg%3E");
}
/* Coffee */
[data-icon="Coffee"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 8h1a4 4 0 1 1 0 8h-1'/%3E%3Cpath d='M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z'/%3E%3Cline x1='6' y1='2' x2='6' y2='4'/%3E%3Cline x1='10' y1='2' x2='10' y2='4'/%3E%3Cline x1='14' y1='2' x2='14' y2='4'/%3E%3C/svg%3E");
}
/* Briefcase */
[data-icon="Briefcase"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E");
}
/* Users */
[data-icon="Users"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}
/* Lock */
[data-icon="Lock"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}
/* KeyRound */
[data-icon="KeyRound"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 18a4 4 0 0 1 4-4h12'/%3E%3Ccircle cx='6' cy='18' r='2'/%3E%3Cpath d='M14 14V8a4 4 0 1 1 8 0v6'/%3E%3C/svg%3E");
}
/* MessageCircle */
[data-icon="MessageCircle"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E");
}
/* GraduationCap */
[data-icon="GraduationCap"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 10v6'/%3E%3Cpath d='M2 10 12 5l10 5-10 5L2 10Z'/%3E%3Cpath d='M6 12v5c3 3 9 3 12 0v-5'/%3E%3C/svg%3E");
}
/* Plane */
[data-icon="Plane"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z'/%3E%3C/svg%3E");
}
/* CheckCircle */
[data-icon="CheckCircle"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
}
/* Star */
[data-icon="Star"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");
}
/* ArrowRight (used in CTA buttons) */
[data-icon="ArrowRight"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
}
/* Settings (industry focus: manufacturing dictionary) */
[data-icon="Settings"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
}
/* Truck (industry focus: logistics dictionary) */
[data-icon="Truck"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='3' width='15' height='13'/%3E%3Cpolygon points='16 8 20 8 23 11 23 16 16 16 16 8'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E");
}
/* BookOpen (business features: industry dictionary) */
[data-icon="BookOpen"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E");
}
/* AlertCircle (problem section: DeepL gap) */
[data-icon="AlertCircle"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
}
}