/*
 * Manabi Video Navi V326 — fact-based conversion journey.
 *
 * This layer owns presentation only. Each prompt must be rendered from an
 * actual diagnosis, saved route, review date, trial state, or plan boundary.
 * It never creates a timer, deadline, scarcity message, or purchase action.
 */

body.app-shell.future-ui.mnv-future-ui:is(
  .page-index,
  .page-login,
  .page-register,
  .page-experience,
  .page-pricing,
  .page-dekiru_route,
  .page-diagnostic_result,
  .page-route,
  .page-assessment,
  .page-adaptive_day,
  .page-subscription,
  .page-experience_continue,
  .page-experience_saved_result,
  .page-courses,
  .page-mypage
) #main-content :is(.conversion-decision-card, .contextual-upgrade) {
  position: relative;
  display: grid;
  min-width: 0;
  gap: var(--mf-space-4);
  overflow: hidden;
  padding: clamp(20px, 3.4vw, 34px) !important;
  border: 1px solid var(--mf-line-strong) !important;
  border-radius: var(--mf-radius-lg) !important;
  background: var(--mf-surface-0) !important;
  background-color: var(--mf-surface-0) !important;
  color: var(--mf-text-1) !important;
  -webkit-text-fill-color: var(--mf-text-1) !important;
  box-shadow: var(--mf-shadow-2) !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

body.app-shell.future-ui.mnv-future-ui:is(
  .page-index,
  .page-login,
  .page-register,
  .page-experience,
  .page-pricing,
  .page-dekiru_route,
  .page-diagnostic_result,
  .page-route,
  .page-assessment,
  .page-adaptive_day,
  .page-subscription,
  .page-experience_continue,
  .page-experience_saved_result,
  .page-courses,
  .page-mypage
) #main-content :is(.conversion-decision-card, .contextual-upgrade)::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, var(--mf-cyan-400), var(--mf-blue-600));
  content: "";
  pointer-events: none;
}

body.app-shell.future-ui.mnv-future-ui #main-content
  :is(.conversion-decision-card, .contextual-upgrade)
  :is(h1, h2, h3, h4, strong, dt, legend) {
  color: var(--mf-text-1) !important;
  -webkit-text-fill-color: var(--mf-text-1) !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

body.app-shell.future-ui.mnv-future-ui #main-content
  :is(.conversion-decision-card, .contextual-upgrade)
  :is(p, small, dd, li, .muted) {
  color: var(--mf-text-2) !important;
  -webkit-text-fill-color: var(--mf-text-2) !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

body.app-shell.future-ui.mnv-future-ui #main-content
  :is(.conversion-decision-card, .contextual-upgrade) > :first-child {
  margin-block-start: 0;
}

body.app-shell.future-ui.mnv-future-ui #main-content
  :is(.conversion-decision-card, .contextual-upgrade) > :last-child {
  margin-block-end: 0;
}

/* WebKit text fill is inherited; pair every button surface with explicit ink. */
body.app-shell.future-ui.mnv-future-ui #main-content
  :is(.conversion-decision-card, .contextual-upgrade)
  :is(.button, button, .primary-inline) {
  -webkit-text-fill-color: currentColor !important;
}

body.app-shell.future-ui.mnv-future-ui #main-content
  :is(.conversion-decision-card, .contextual-upgrade)
  :is(.button.primary, button.primary, .primary-inline) {
  color: var(--mf-text-inverse) !important;
  -webkit-text-fill-color: var(--mf-text-inverse) !important;
}

body.app-shell.future-ui.mnv-future-ui #main-content .conversion-decision-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mf-space-4);
  align-items: start;
}

body.app-shell.future-ui.mnv-future-ui #main-content .conversion-decision-head > div {
  min-width: 0;
}

/*
 * Most screens place eyebrow, heading, and copy directly in this container,
 * so one column is the safe default. Character art opts into the split layout
 * with an explicit class; :has() additionally supports a direct image without
 * making older browsers misplace ordinary heading children.
 */
body.app-shell.future-ui.mnv-future-ui #main-content
  .conversion-decision-head.has-character {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

@supports selector(:has(*)) {
  body.app-shell.future-ui.mnv-future-ui #main-content
    .conversion-decision-head:has(> .conversion-character) {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

body.app-shell.future-ui.mnv-future-ui #main-content
  .conversion-decision-head :is(h1, h2, h3) {
  margin: var(--mf-space-2) 0;
  font-size: clamp(1.45rem, 3.4vw, 2.15rem);
  line-height: 1.28;
  text-wrap: balance;
}

body.app-shell.future-ui.mnv-future-ui #main-content .conversion-character {
  width: clamp(64px, 10vw, 104px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 22px rgba(47, 107, 255, .22));
}

body.app-shell.future-ui.mnv-future-ui #main-content .conversion-fact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: var(--mf-space-3);
  margin: 0;
}

body.app-shell.future-ui.mnv-future-ui #main-content
  :is(.conversion-fact, .conversion-fact-grid > div) {
  display: grid;
  min-width: 0;
  gap: var(--mf-space-1);
  margin: 0;
  padding: var(--mf-space-4);
  border: 1px solid var(--mf-line) !important;
  border-radius: var(--mf-radius-md);
  background: var(--mf-surface-1) !important;
  color: var(--mf-text-1) !important;
  -webkit-text-fill-color: var(--mf-text-1) !important;
}

body.app-shell.future-ui.mnv-future-ui #main-content
  :is(.conversion-fact, .conversion-fact-grid > div) :is(dt, span, small) {
  color: var(--mf-text-2) !important;
  -webkit-text-fill-color: var(--mf-text-2) !important;
  font-size: .76rem;
  font-weight: 750;
  line-height: 1.5;
}

body.app-shell.future-ui.mnv-future-ui #main-content
  :is(.conversion-fact, .conversion-fact-grid > div) :is(dd, strong) {
  margin: 0;
  color: var(--mf-text-1) !important;
  -webkit-text-fill-color: var(--mf-text-1) !important;
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 900;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

body.app-shell.future-ui.mnv-future-ui #main-content
  :is(.conversion-loss-note, .conversion-solution, .conversion-progress-note) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--mf-space-3);
  align-items: start;
  margin: 0;
  padding: var(--mf-space-4);
  border: 1px solid var(--mf-line) !important;
  border-radius: var(--mf-radius-md);
  color: var(--mf-text-1) !important;
  -webkit-text-fill-color: var(--mf-text-1) !important;
}

body.app-shell.future-ui.mnv-future-ui #main-content .conversion-loss-note {
  border-inline-start: 4px solid var(--mf-orange-600) !important;
  background: var(--mf-warning-soft) !important;
}

body.app-shell.future-ui.mnv-future-ui #main-content .conversion-solution {
  border-inline-start: 4px solid var(--mf-green-600) !important;
  background: var(--mf-success-soft) !important;
}

body.app-shell.future-ui.mnv-future-ui #main-content .conversion-progress-note {
  border-inline-start: 4px solid var(--mf-blue-600) !important;
  background: var(--mf-info-soft) !important;
}

body.app-shell.future-ui.mnv-future-ui #main-content
  :is(.conversion-loss-note, .conversion-solution, .conversion-progress-note)
  > :is(svg, .conversion-note-icon) {
  width: 22px;
  height: 22px;
  color: var(--mf-blue-600) !important;
  -webkit-text-fill-color: var(--mf-blue-600) !important;
}

body.app-shell.future-ui.mnv-future-ui #main-content
  :is(.conversion-loss-note, .conversion-solution, .conversion-progress-note)
  :is(strong, p, small) {
  margin: 0;
}

body.app-shell.future-ui.mnv-future-ui #main-content
  :is(.conversion-loss-note, .conversion-solution, .conversion-progress-note) p {
  margin-top: var(--mf-space-1);
  line-height: 1.7;
}

body.app-shell.future-ui.mnv-future-ui #main-content
  :is(.conversion-action-row, .conversion-decision-card > .guide-actions) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mf-space-3);
  align-items: stretch;
  margin: 0;
}

body.app-shell.future-ui.mnv-future-ui #main-content
  :is(.conversion-action-row, .conversion-decision-card > .guide-actions)
  :is(.button, button) {
  min-height: 50px;
  justify-content: center;
}

body.app-shell.future-ui.mnv-future-ui #main-content
  :is(.conversion-action-row, .conversion-decision-card > .guide-actions)
  .primary {
  flex: 1 1 280px;
}

body.app-shell.future-ui.mnv-future-ui #main-content .conversion-assurance {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mf-space-2) var(--mf-space-4);
  align-items: center;
  margin: 0;
  color: var(--mf-text-2) !important;
  -webkit-text-fill-color: var(--mf-text-2) !important;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.65;
}

body.app-shell.future-ui.mnv-future-ui #main-content .conversion-assurance > span {
  display: inline-flex;
  gap: var(--mf-space-2);
  align-items: center;
}

body.app-shell.future-ui.mnv-future-ui #main-content .conversion-assurance svg {
  flex: 0 0 auto;
  color: var(--mf-green-600);
}

body.app-shell.future-ui.mnv-future-ui #main-content
  :is(.conversion-service-preview, .conversion-plan-fit) {
  display: grid;
  gap: var(--mf-space-4);
  margin: 0;
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid var(--mf-line) !important;
  border-radius: var(--mf-radius-lg);
  background: var(--mf-surface-1) !important;
  color: var(--mf-text-1) !important;
  -webkit-text-fill-color: var(--mf-text-1) !important;
}

body.app-shell.future-ui.mnv-future-ui #main-content .conversion-service-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--mf-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

body.app-shell.future-ui.mnv-future-ui #main-content .conversion-service-steps > li {
  display: grid;
  min-width: 0;
  gap: var(--mf-space-2);
  padding: var(--mf-space-3);
  border: 1px solid var(--mf-line) !important;
  border-radius: var(--mf-radius-sm);
  background: var(--mf-surface-0) !important;
  color: var(--mf-text-1) !important;
  -webkit-text-fill-color: var(--mf-text-1) !important;
}

body.app-shell.future-ui.mnv-future-ui #main-content .conversion-service-steps > li > b {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 10px;
  background: var(--mf-blue-600) !important;
  color: var(--mf-text-inverse) !important;
  -webkit-text-fill-color: var(--mf-text-inverse) !important;
}

body.app-shell.future-ui.mnv-future-ui #main-content .conversion-service-steps > li small {
  color: var(--mf-text-2) !important;
  -webkit-text-fill-color: var(--mf-text-2) !important;
  line-height: 1.5;
}

body.app-shell.future-ui.mnv-future-ui #main-content .conversion-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: var(--mf-space-3);
}

body.app-shell.future-ui.mnv-future-ui #main-content .conversion-plan-option {
  display: grid;
  min-width: 0;
  gap: var(--mf-space-2);
  padding: var(--mf-space-4);
  border: 1px solid var(--mf-line) !important;
  border-radius: var(--mf-radius-md);
  background: var(--mf-surface-0) !important;
  color: var(--mf-text-1) !important;
  -webkit-text-fill-color: var(--mf-text-1) !important;
}

body.app-shell.future-ui.mnv-future-ui #main-content .conversion-plan-option.is-recommended {
  border-color: var(--mf-blue-600) !important;
  box-shadow: var(--mf-focus-ring) !important;
}

body.app-shell.future-ui.mnv-future-ui #main-content .register-conversion-context {
  margin: 0 0 var(--mf-space-5);
}

body.app-shell.future-ui.mnv-future-ui.page-index #main-content .home-conversion-v326 {
  scroll-margin-block-start: var(--mf-sticky-top);
}

body.app-shell.future-ui.mnv-future-ui.page-index #main-content
  .home-conversion-v326[data-has-goal="true"] {
  border-color: var(--mf-blue-600) !important;
}

@media (max-width: 820px) {
  body.app-shell.future-ui.mnv-future-ui #main-content .conversion-service-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  body.app-shell.future-ui.mnv-future-ui #main-content
    .conversion-decision-head.has-character {
    grid-template-columns: minmax(0, 1fr);
  }

  @supports selector(:has(*)) {
    body.app-shell.future-ui.mnv-future-ui #main-content
      .conversion-decision-head:has(> .conversion-character) {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  body.app-shell.future-ui.mnv-future-ui #main-content .conversion-character {
    width: 72px;
    order: -1;
  }

  body.app-shell.future-ui.mnv-future-ui #main-content
    :is(.conversion-loss-note, .conversion-solution, .conversion-progress-note) {
    grid-template-columns: minmax(0, 1fr);
  }

  body.app-shell.future-ui.mnv-future-ui #main-content .conversion-service-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  body.app-shell.future-ui.mnv-future-ui #main-content
    :is(.conversion-action-row, .conversion-decision-card > .guide-actions) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  body.app-shell.future-ui.mnv-future-ui #main-content
    :is(.conversion-action-row, .conversion-decision-card > .guide-actions)
    :is(.button, button) {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.app-shell.future-ui.mnv-future-ui #main-content
    :is(.conversion-decision-card, .contextual-upgrade, .conversion-plan-option) {
    animation: none !important;
    transition: none !important;
  }
}

@media (forced-colors: active) {
  body.app-shell.future-ui.mnv-future-ui #main-content :is(
    .conversion-decision-card,
    .contextual-upgrade,
    .conversion-fact,
    .conversion-fact-grid > div,
    .conversion-loss-note,
    .conversion-solution,
    .conversion-progress-note,
    .conversion-service-preview,
    .conversion-service-steps > li,
    .conversion-plan-fit,
    .conversion-plan-option
  ) {
    border-color: CanvasText !important;
    background: Canvas !important;
    color: CanvasText !important;
    -webkit-text-fill-color: CanvasText !important;
    box-shadow: none !important;
    forced-color-adjust: auto !important;
  }

  body.app-shell.future-ui.mnv-future-ui #main-content
    :is(.conversion-decision-card, .contextual-upgrade)::before {
    background: Highlight !important;
  }
}