.features-page {
  --features-hero: #e5f3f0;
  --features-surface: #fff;
  --features-inset: #f5f9ff;
  --features-border: #d2d2d2;
  --features-accent: #3476f0;
  background: var(--figma-canvas);
  color: var(--figma-ink);
}
html[data-bs-theme="dark"] .features-page {
  --features-hero: #102b2b;
  --features-surface: #132342;
  --features-inset: #081827;
  --features-border: #304158;
  --features-accent: #89b2ff;
}
.features-page #mainNav,
.features-page #mainNav.navbar-shrink,
.features-page #mainNav::before { background: var(--features-hero) !important; }
.features-page #mainNav .navbar-nav > li.nav-item > a.nav-link.active { color: var(--features-accent) !important; }
#key-features-main { font-size: 20px; line-height: 1.6; }
#key-features-main :is(h1, h2, h3, p, figure, ol, ul, dl, dd) { margin: 0; }
#key-features-main p { color: var(--figma-copy); }
#key-features-main :is(h1, h2, h3) { color: var(--figma-ink); font-weight: 800; letter-spacing: -.035em; }
#key-features-main :is(h1, h2, h3, .features-body-lines, .features-hero-lead, .features-board-grid p, .features-operate-card > p, .features-brand-visual p) > span { display: block; }
#key-features-main h1 { font-size: 64px; line-height: 1.25; }
#key-features-main h2 { font-size: 44px; line-height: 58px; }
#key-features-main h3 { font-size: 28px; line-height: 40px; }
.features-container { width: min(1320px, calc(100% - 64px)); margin-inline: auto !important; }
.features-hero { padding: 180px 32px 80px; background: var(--features-hero); }
.features-hero-inner { max-width: 1400px; margin: auto; display: grid; grid-template-columns: minmax(0, 620fr) minmax(0, 700fr); gap: 80px; align-items: center; }
.features-hero-copy, .features-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; min-width: 0; }
#key-features-main .features-eyebrow { color: var(--features-accent); font-size: 16px; line-height: 26px; font-weight: 600; letter-spacing: .03em; }
.features-hero-lead { font-size: 24px; line-height: 36px; font-weight: 500; }
.features-actions { display: flex; flex-wrap: wrap; gap: 16px; }
.features-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: 220px; min-height: 56px; padding: 12px 24px; border-radius: 100px; text-decoration: none; font-size: 18px; line-height: 28px; font-weight: 600; text-align: center; }
.features-button-primary { color: #fff; }
.features-button-secondary { background: var(--features-surface); color: var(--figma-ink); border: 1px solid var(--features-border); }
.features-button-secondary:hover { color: var(--features-accent); border-color: var(--features-accent); }
#key-features-main .features-small { font-size: 16px; line-height: 26px; }
#key-features-main .features-label { font-size: 16px; line-height: 26px; }
#key-features-main .features-muted { color: var(--figma-muted); }
#key-features-main .features-accent { color: var(--features-accent); }
#key-features-main .features-subheading { color: var(--figma-ink); font-size: 28px; line-height: 40px; font-weight: 700; letter-spacing: -.025em; }
.features-panel { background: var(--features-surface); border: 1px solid var(--features-border); border-radius: 30px; }
.features-board { padding: 32px; display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.features-board-heading { display: flex; gap: 16px; align-items: center; justify-content: space-between; }
.features-board-heading > p { flex: 1; }
.features-chip { display: inline-flex; align-items: center; justify-content: center; border-radius: 100px; padding: 8px 16px; background: var(--features-inset); color: var(--features-accent); font-size: 14px; line-height: 22px; font-weight: 700; }
.features-board-heading > .features-chip { flex-shrink: 0; min-width: 164px; padding-inline: 8px; }
.features-board-card { padding: 24px; border-radius: 30px; background: var(--features-inset); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
#key-features-main .features-board-card > .features-small { font-size: 14px; line-height: 22px; font-weight: 700; }
.features-board-card .features-chip { background: var(--features-surface); }
.features-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.features-board-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.features-navigation { padding-block: 28px; background: var(--figma-canvas); scroll-margin-top: 100px; }
.features-navigation ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 0; list-style: none; }
.features-navigation a { display: flex; gap: 16px; align-items: center; padding: 16px; border: 1px solid var(--features-border); border-radius: 30px; color: var(--figma-ink); text-decoration: none; font-size: 16px; line-height: 26px; font-weight: 600; height: 100%; }
#key-features-main .features-navigation a > .features-small { color: var(--features-accent); font-size: 14px; line-height: 22px; min-width: 30px; }
.features-navigation a:hover { border-color: var(--features-accent); color: var(--features-accent); }
.features-section { padding-block: 112px; scroll-margin-top: 100px; background: var(--figma-canvas); }
.features-section-alt { background: var(--figma-page); }
html[data-bs-theme="dark"] .features-section-alt { background: #081b2d; }
.features-detail-grid { display: grid; grid-template-columns: minmax(0, 520fr) minmax(0, 720fr); gap: 80px; align-items: center; }
.features-detail-reversed { grid-template-columns: minmax(0, 720fr) minmax(0, 520fr); }
.features-detail-reversed > .features-copy { grid-column: 2; grid-row: 1; }
.features-detail-reversed > .features-visual { grid-column: 1; grid-row: 1; }
.features-checklist { display: flex; flex-direction: column; gap: 12px; padding: 0; list-style: none; }
.features-checklist li { display: flex; gap: 12px; align-items: flex-start; }
.features-icon { display: block; width: 28px; height: 28px; flex: 0 0 28px; margin-top: 2px; }
.features-link { display: inline-flex; align-items: baseline; gap: 12px; font-size: 16px; line-height: 26px; font-weight: 600; color: var(--features-accent); text-decoration: none; }
.features-link:hover, .features-contact:hover { text-decoration: underline; }
.features-visual { padding: 32px; display: flex; flex-direction: column; gap: 24px; min-width: 0; min-height: 504px; justify-content: center; }
.features-question { padding: 28px; display: flex; flex-direction: column; gap: 20px; background: var(--features-inset); }
.features-question .features-chip { background: var(--features-surface); }
.features-branches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.features-branches > div { padding: 24px; display: flex; flex-direction: column; gap: 12px; background: var(--features-inset); border-radius: 24px; }
.features-channels { gap: 20px; min-height: 518px; }
.features-channel { display: flex; align-items: center; gap: 16px; background: var(--features-inset); border-radius: 24px; padding: 20px; }
.features-channel > div { min-width: 0; }
.features-channel > div > p:first-child { font-weight: 600; }
.features-chart dl { display: flex; flex-direction: column; gap: 24px; }
.features-chart-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding-bottom: 26px; }
.features-chart-item dt { font-weight: 500; }
.features-chart-item dd { color: var(--features-accent); font-weight: 700; }
.features-chart-track { position: absolute; inset: auto 0 0; height: 14px; background: var(--features-inset); border-radius: 100px; overflow: hidden; }
.features-chart-bar { display: block; height: 100%; background: #3476f0; border-radius: inherit; }
.features-chart-bar.bar-1 { width: 45%; }
.features-chart-bar.bar-2 { width: 32%; background: #69a0fa; }
.features-chart-bar.bar-3 { width: 23%; background: #a0c1fa; }
.features-operate { padding-block: 104px; }
.features-operate-heading { display: flex; flex-direction: column; gap: 20px; margin-bottom: 40px; }
.features-operate-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.features-operate-card { padding: 40px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; min-width: 0; min-height: 634px; }
.features-team-visual, .features-brand-visual { width: 100%; padding: 24px; background: var(--features-inset); border-radius: 24px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.features-role { display: flex; gap: 16px; align-items: center; }
.features-role .features-chip { min-width: 76px; background: var(--features-surface); }
.features-brand-visual { align-items: flex-start; }
.features-brand-visual > .features-chip { background: #3476f0; color: #fff; }
.features-plan-note { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; }
.features-start { padding-block: 96px; }
.features-start-card { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 64px; border-radius: 30px; background: #08243d; text-align: center; }
#key-features-main .features-start-card h2 { color: #fff; }
#key-features-main .features-start-card > p { color: #c3c3cd; }
.features-start-card .features-actions { justify-content: center; gap: 24px; }
.features-start-card .features-button-secondary { background: transparent; color: #fff; border-color: #72869a; }
.features-contact { font-size: 16px; line-height: 26px; color: #fff; text-decoration: none; }
.features-page a:focus-visible { outline: 3px solid var(--features-accent); outline-offset: 5px; }
@media (max-width: 1399.98px) {
  .features-hero-inner, .features-detail-grid { gap: 40px; }
  #key-features-main h1 { font-size: 52px; }
  #key-features-main h2 { font-size: 38px; line-height: 50px; }
  #key-features-main .features-subheading { font-size: 24px; line-height: 34px; }
  .features-board-heading { flex-wrap: wrap; }
  .features-board-heading > p { flex-basis: 100%; }
  .features-hero-lead { font-size: 21px; line-height: 34px; }
  .features-operate-card { padding: 32px; }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .features-page #mainNav .navbar-nav { gap: 12px; }
  .features-page #mainNav .btn-get-started { width: 140px; padding-inline: 12px; white-space: nowrap; }
}
@media (min-width: 992px) and (max-width: 1399.98px) {
  .features-page .figma-footer-grid { grid-template-columns: minmax(0, 1fr) max-content; }
}
@media (max-width: 991.98px) {
  .features-hero { padding-top: 148px; padding-bottom: 56px; }
  .features-hero-inner, .features-detail-grid, .features-detail-reversed { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .features-hero-copy { max-width: 700px; }
  .features-visual, .features-operate-card { min-height: 0; }
  .features-board { max-width: 720px; width: 100%; }
  .features-board-heading > p { flex-basis: auto; }
  .features-navigation ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .features-navigation a { justify-content: flex-start; }
  .features-detail-reversed > :is(.features-copy, .features-visual) { grid-column: auto; grid-row: auto; }
  .features-section { padding-block: 64px; }
  .features-copy { max-width: 720px; }
  .features-operate-card { padding: 24px; }
  #key-features-main h3 { font-size: 28px; line-height: 40px; }
  .features-role { flex-wrap: wrap; gap: 8px; }
  .features-start-card { padding: 48px 32px; }
}
@media (max-width: 767.98px) {
  #key-features-main { font-size: 18px; line-height: 1.65; }
  .features-container { width: calc(100% - 40px); }
  .features-hero { padding: 132px 20px 48px; }
  #key-features-main h1 { font-size: 38px; line-height: 1.3; }
  #key-features-main h2 { font-size: 32px; line-height: 44px; }
  .features-hero-lead { font-size: 18px; line-height: 30px; }
  html[lang="ja"] :is(.features-body-lines, .features-hero-lead) > span { display: inline !important; }
  .features-hero-copy, .features-copy { gap: 20px; }
  .features-actions { width: 100%; }
  .features-button { min-width: 0; width: 100%; font-size: 17px; }
  .features-board, .features-visual { padding: 20px; border-radius: 24px; gap: 20px; }
  .features-board-heading > p { flex-basis: 100%; }
  .features-board-grid, .features-branches, .features-operate-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .features-board-card, .features-question, .features-branches > div { padding: 20px; }
  .features-navigation { padding-block: 24px; }
  .features-navigation ol { gap: 12px; }
  .features-navigation a { padding: 12px; border-radius: 20px; gap: 8px; font-size: 16px; align-items: flex-start; }
  .features-navigation a > .features-small { font-size: 14px; }
  .features-section { padding-block: 48px; }
  .features-channel { padding: 16px; gap: 12px; }
  #key-features-main .features-label, .features-link { font-size: 16px; line-height: 26px; }
  #key-features-main .features-subheading { font-size: 22px; line-height: 32px; }
  .features-operate-heading { margin-bottom: 28px; }
  .features-operate-card { padding: 24px; border-radius: 24px; gap: 20px; }
  .features-team-visual, .features-brand-visual { padding: 20px; }
  .features-role { flex-wrap: nowrap; gap: 12px; align-items: flex-start; }
  .features-role .features-chip { min-width: 64px; }
  .features-plan-note { margin-top: 24px; }
  .features-start-card { padding: 40px 24px; border-radius: 24px; }
  .features-start-card .features-actions { gap: 16px; }
}
@media (max-width: 359.98px) {
  #key-features-main h1 { font-size: 32px; }
  #key-features-main h2 { font-size: 28px; line-height: 38px; }
  .features-navigation ol { grid-template-columns: minmax(0, 1fr); }
  .features-role { flex-wrap: wrap; }
}