/* 2026-09-22: shared plan overview, based on /service/schedule#plans.
   Keep this section consistent across service introductions and pricing.
   Scope overrides here so each page's other sections retain their own design. */
.marketing-site :is(#plans, #environment).mk-plan-overview {
  --mk-ink: #18334f;
  --mk-muted: #536579;
  --mk-line: #dce4e9;
  --mk-blue: #173e52;
  --mk-blue-dark: #0c293a;
  color: #17394b;
  background: #fffdfa;
  padding-block: 44px 38px;
  border-block: 1px solid #e7ecec;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: normal;
}
.mk-plan-overview > .mk-wrap { width: min(1200px, calc(100% - 80px)); }
.marketing-site :is(#plans, #environment).mk-plan-overview .mk-section-head {
  max-width: none;
  text-align: center;
  margin-bottom: 25px;
}
.marketing-site :is(#plans, #environment).mk-plan-overview h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: inherit;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: .01em;
}
.mk-plan-overview .mk-plan-icon { color: #708f8b; width: 28px; height: 28px; flex: none; }
.marketing-site :is(#plans, #environment).mk-plan-overview .mk-phrase { display: inline; }
.marketing-site .mk-plan-overview .mk-plans {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(7, auto);
  gap: 0 20px;
}
.marketing-site .mk-plan-overview .mk-plan,
.marketing-site .mk-plan-overview .mk-plan.featured {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 7;
  row-gap: 0;
  padding: 24px;
  border: 1px solid #dae4e8;
  border-radius: 7px;
  background: #fff;
  text-align: center;
  overflow: hidden;
}
.marketing-site .mk-plan-overview .mk-plan .mk-plan-label {
  background: #17394b;
  color: #fff;
  margin: -24px -24px 18px !important;
  padding: 9px 12px;
  font-size: .8125rem;
  letter-spacing: .025em;
}
.marketing-site :is(#plans, #environment).mk-plan-overview .mk-plan h3 {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .01em;
  margin-bottom: 8px;
}
.marketing-site .mk-plan-overview .mk-plan-desc {
  min-height: 3.8em;
  font-size: .875rem;
  line-height: 1.8;
  max-width: 22em;
  margin-inline: auto;
}
.marketing-site .mk-plan-overview .mk-price { margin-top: 15px !important; font-size: .8125rem; line-height: 1.8; }
.marketing-site .mk-plan-overview .mk-price strong { font-family: Arial, sans-serif; font-weight: 700; font-size: 2.25rem; letter-spacing: -.03em; }
.marketing-site .mk-plan-overview .mk-price-sub { font-size: .8125rem; }
.mk-plan-overview .mk-grade-prices > span { display: block; line-height: 1.9; white-space: nowrap; font-size: .75rem; }
.mk-plan-overview .mk-plan-note small { display: block; font-size: .6875rem; line-height: 1.85; margin-top: 5px; }
.mk-plan-overview .mk-plan-alias { position: absolute; }
.marketing-site .mk-plan-overview .mk-plan ul {
  display: grid;
  grid-auto-rows: minmax(34px, auto);
  align-content: start;
  text-align: left;
  margin: 18px 0 0;
  padding: 16px 0 22px;
}
.marketing-site .mk-plan-overview .mk-plan li { font-size: .875rem; padding-block: 4px; line-height: 1.8; }
.marketing-site .mk-plan-overview .mk-plan .mk-button { font-size: .875rem; min-height: 46px; padding: 11px 10px; background: var(--mk-blue); color: #fff; border-color: var(--mk-blue); }
.marketing-site .mk-plan-overview .mk-plan .mk-button:hover { background: var(--mk-blue-dark); }
.marketing-site .mk-plan-overview .mk-under-note { max-width: 1000px; margin-inline: auto; text-align: center; font-size: .75rem; line-height: 1.9; }
.marketing-site .mk-plan-overview .mk-under-note a { text-decoration: underline; text-underline-offset: 4px; font-weight: 700; }
@media (min-width: 1000px) {
  .mk-plan-overview .mk-grade-prices > span { display: inline; font-size: .6875rem; }
  .mk-plan-overview .mk-grade-prices > span + span::before { content: "・"; }
}
@media (max-width: 1100px) {
  .marketing-site .mk-plan-overview > .mk-wrap { width: calc(100% - 56px); }
}
@media (max-width: 900px) {
  .marketing-site .mk-plan-overview .mk-plans { grid-template-columns: 1fr; gap: 20px; grid-template-rows: none; max-width: 500px; margin-inline: auto; }
  .marketing-site .mk-plan-overview .mk-plan,
  .marketing-site .mk-plan-overview .mk-plan.featured { display: flex; grid-row: auto; }
  .marketing-site .mk-plan-overview .mk-plan-desc { min-height: 0; }
}
@media (max-width: 800px) {
  .marketing-site .mk-plan-overview > .mk-wrap { width: calc(100% - 40px); }
}
@media (max-width: 560px) {
  .marketing-site .mk-plan-overview > .mk-wrap { width: calc(100% - 36px); }
  .marketing-site :is(#plans, #environment).mk-plan-overview h2 { font-size: 1.125rem; text-align: left; align-items: flex-start; }
  .marketing-site :is(#plans, #environment).mk-plan-overview .mk-phrase { display: inline-block; }
  .mk-plan-overview .mk-grade-prices > span { font-size: .8125rem; }
  .mk-plan-overview .mk-plan-note small { font-size: .75rem; }
}

/* Service introductions share the AI page’s warm pricing background. */
.marketing-site:is(.textbook-presentation,.ai-presentation,.schedule-presentation,.school-presentation,.home-presentation) :is(#plans,#environment).mk-plan-overview {
  background: #f3eddf;
  border-color: #e2d7bc;
}