:root {
  --accent: rgba(28, 147, 35, 1);
  --inactive-opacity: 0.3;
}

a { color: var(--accent); }
.mol img { display: block; width: 100%; }

.mol { padding: 100px 24px; display: flex; flex-direction: column; align-items: center; }

/* Tabs */
.mol-tabs { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 100%; }
.mol-tabbar { display: flex; max-width: 100%; overflow-x: auto; border-bottom: 1px solid #dfe3ea; }
.mol-tabbar button {
  appearance: none; background: none; border: 0; cursor: pointer; font-family: inherit; white-space: nowrap;
  padding: 12px 28px; font-size: 17px; font-weight: 600; color: #111; transition: color .3s, box-shadow .3s;
}
.mol-sub button { padding: 10px 22px; font-size: 15px; }
.mol-tabbar button.is-on { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }

/* Desktop */
.mol-grid { width: 100%; max-width: 1240px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); column-gap: 64px;padding-top: 60px; }
.mol-card { grid-column: 2; grid-row: 1 / span var(--rows); background: #fff; border-radius: 20px; box-shadow: 0 10px 40px rgba(20, 30, 60, .06); }
.mol-intro { grid-column: 1; grid-row: 1; padding-top: 32px; }
.mol-intro h2 { margin: 0; font-size: 34px; line-height: 44px; font-weight: 500; letter-spacing: -2%; text-wrap: pretty; }
.mol-head { grid-column: 2; grid-row: 1; padding: 40px 48px 8px; display: flex; flex-direction: column; gap: 10px; position: relative; }

.mol-row { display: contents; }
.mol-text { grid-column: 1; grid-row: var(--row); padding: 16px 0; min-height: 30vh; }
.mol-textbox {
  display: flex; flex-direction: column; gap: 10px; cursor: pointer;
  padding: 22px 26px; margin-left: -26px; border-radius: 16px;
  transition: background .5s, transform .5s cubic-bezier(.2, .7, .2, 1);
}
.mol-textbox h3 { margin: 0; font-size: 24px;font-weight: 500;color: rgba(14, 14, 14, 1); transition: color .4s; }
.mol-textbox p { margin: 0; font-size: 17px; line-height: 1.6; color: #444; max-width: 400px; text-wrap: pretty; }
.mol-imgs { grid-column: 2; grid-row: var(--row); padding: 24px 48px; display: flex; flex-direction: column; gap: 16px; align-self: start; position: relative; }
.mol-imgs img { opacity: var(--inactive-opacity); filter: grayscale(.6); transition: opacity .5s ease, filter .5s; }
.mol-row.is-last .mol-text { min-height: 0; }
.mol-row.is-last .mol-imgs { padding-bottom: 48px; }

.mol-row.is-active .mol-textbox { background: color-mix(in oklch, var(--accent) 10%, #fff); transform: translateX(8px); }
.mol-row.is-active .mol-textbox h3 { font-weight: 600; }
.mol-row.is-active .mol-imgs img { opacity: 1; filter: none; }

/* Mobile */
@media (max-width: 899px) {
  .mol-grid { display: flex; flex-direction: column; gap: 24px; max-width: 720px; }
  .mol-card { display: none; }
  .mol-intro { padding: 0; }
  .mol-intro h2 { font-size: 28px; line-height: 1.35; text-align: center; max-width: none; text-wrap: balance; margin-bottom: 8px; }
  .mol-head { background: #fff; border-radius: 16px; padding: 20px 16px; }
  .mol-row {
    display: flex; flex-direction: column; gap: 16px;
    border: 1px solid #e4e6ea; border-radius: 16px; padding: 22px 16px; background: #fff;
    opacity: 0; transform: translateY(40px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
  }
  .mol-row.is-seen { opacity: 1; transform: none; }
  .mol-text, .mol-row.is-last .mol-text { padding: 0; min-height: 0; }
  .mol-textbox, .mol-row.is-active .mol-textbox { padding: 0; margin: 0; gap: 6px; background: none; transform: none; cursor: default; }
  .mol-textbox h3, .mol-row.is-active .mol-textbox h3 { font-size: 20px; font-weight: 700; color: #1a1a1a; }
  .mol-textbox p { font-size: 15px; line-height: 1.5; color: #555; }
  .mol-imgs, .mol-row.is-last .mol-imgs { padding: 0; }
  .mol-imgs img { opacity: 1; filter: none; }
}

/* -------scroll-cards----- */
.mdx-features {
  --green: #0B9A0B;
  background: #fff;
  padding: 104px 0 96px;
  font-family: 'Inter', system-ui, sans-serif;
  overflow: hidden;
}
.mdx-head { display: flex; flex-direction: column; gap: 24px; }
.mdx-title {
  margin: 0; max-width: 900px;
  font-family: 'Libertinus Serif Display', 'Libertinus Serif', Georgia, serif;
  font-weight: 400; font-size: 48px; line-height: 1.1; letter-spacing: -0.01em;
  color: #111; text-wrap: balance;
}
.mdx-title span { color: var(--green); }
.mdx-sub { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.mdx-sub p { margin: 0; max-width: 760px; font-size: 16px; line-height: 1.55; color: #555; text-wrap: pretty; }

.mdx-nav { display: flex; gap: 16px; }
.mdx-btn {
  width: 40px; height: 40px; padding: 0; border-radius: 50%;
  border: 1px solid transparent; background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .2s, color .2s;
}
.mdx-btn:disabled { background: #F5F5F5; color: #B3B3B3; border-color: #E6E6E6; cursor: default; }

.mdx-track {
  /* left edge aligned to .container-xl, bleeds to the right viewport edge */
  margin-top: 48px; margin-right: calc(50% - 50vw); padding: 0;
  display: flex; gap: 28px; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-padding-left: 0;
  scroll-behavior: smooth; scrollbar-width: none;
}
.mdx-track::-webkit-scrollbar { display: none; }
.mdx-card { flex: 0 0 min(480px, 82vw); scroll-snap-align: start; display: flex; flex-direction: column; }
.mdx-media { aspect-ratio: 480 / 400; border-radius: 12px; overflow: hidden; background: #F7F7F7; margin-bottom: 20px; }
.mdx-media img { width: 100%; height: 100%; display: block; object-fit: cover; }
.mdx-card h3 { margin: 0 0 8px; font-size: 18px; font-weight: 500; line-height: 1.35; color: #111; }
.mdx-sub p, .mdx-card p { margin-bottom: 0; }
.mdx-card p { margin: 0; font-size: 16px; line-height: 1.5; color: #666; text-wrap: pretty; }
.mdx-spacer { flex: 0 0 32px; }

@media (max-width: 768px) {
  .mdx-features { padding: 64px 0; }
  .mdx-title { font-size: 34px; }
}


.mlf-section{padding:100px 0;}
.mlf-title span{color:var(--green)}
.mlf-grid-wrap{overflow:hidden;max-width:1140px;margin:0 auto}
.mlf-grid{margin-right:-1px}
.mlf-item{border-width:0 1px 1px 0;border-style:solid;border-color:rgba(235,235,235,1);padding:42px 24px;min-height:170px;display:flex;flex-direction:column;gap:16px}
.mlf-item img{flex-shrink:0;width: 24px;height: 24px;}
.mlf-item p{margin:0;font-size:16px;font-weight:500;font-style:normal;line-height:24px;letter-spacing:-0.02em;color:#141414}