.price-hero { padding: 112px 0 76px; position: relative; }
.price-hero-grid { align-items: center; display: grid; gap: 72px; grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr); }
.price-hero-copy h1 { font-size: clamp(40px, 5.6vw, 72px); font-weight: 500; letter-spacing: -.045em; line-height: 1.02; margin: 22px 0 25px; max-width: 760px; white-space: normal; }
.price-hero-copy p { color: var(--landing-muted); font-size: 18px; line-height: 1.75; margin: 0; max-width: 650px; }
.price-hero-panel { background: linear-gradient(145deg, rgba(20, 43, 66, .92), rgba(8, 23, 39, .9)); border: 1px solid var(--landing-line); border-radius: 24px; box-shadow: 20px 24px 64px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .08); padding: 22px; position: relative; transform: rotate(2deg); }
.price-hero-panel::after { border: 1px solid color-mix(in srgb, var(--landing-lime) 20%, transparent); border-radius: inherit; content: ''; inset: 12px -12px -12px 12px; pointer-events: none; position: absolute; transform: rotate(-4deg); z-index: -1; }
.price-hero-panel-top { align-items: center; border-bottom: 1px solid var(--landing-line); color: var(--landing-muted); display: flex; font: 500 11px/1 'DM Mono', monospace; justify-content: space-between; letter-spacing: .12em; padding-bottom: 18px; text-transform: uppercase; }
.price-hero-panel-top i { color: var(--landing-lime); }
.price-hero-cycle { align-items: center; border-bottom: 1px solid var(--landing-line); display: flex; gap: 15px; padding: 18px 4px; }
.price-hero-cycle i { align-items: center; background: rgba(114, 228, 255, .08); border: 1px solid rgba(114, 228, 255, .14); border-radius: 11px; color: var(--landing-cyan); display: flex; height: 34px; justify-content: center; width: 34px; }
.price-hero-cycle span { color: var(--landing-text); font-size: 16px; }
.price-hero-cycle small { color: var(--landing-muted); font: 11px/1 'DM Mono', monospace; margin-left: auto; }
.price-hero-cycle.is-highlighted i { background: rgba(201, 248, 110, .12); border-color: rgba(201, 248, 110, .3); color: var(--landing-lime); }
.price-hero-cycle.is-highlighted span { color: var(--landing-lime); }
.price-hero-panel-note { color: var(--landing-muted); font-size: 12px; line-height: 1.6; padding: 19px 4px 2px; }
.price-hero-panel-note i { color: var(--landing-lime); margin-right: 7px; }
.price-section { padding-top: 70px; }
.price-cycle-picker { background: rgba(255, 255, 255, .035); border: 1px solid var(--landing-line); border-radius: 18px; display: grid; gap: 8px; grid-template-columns: repeat(4, 1fr); margin: 0 auto 32px; max-width: 760px; padding: 8px; }
.price-cycle-button { align-items: center; background: transparent; border: 1px solid transparent; border-radius: 12px; color: var(--landing-muted); cursor: pointer; display: flex; font-family: inherit; font-size: 14px; font-weight: 500; gap: 9px; justify-content: center; line-height: 1.2; min-height: 48px; padding: 0 10px; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; }
.price-cycle-button i { color: var(--landing-cyan); font-size: 13px; }
.price-cycle-button:hover { color: var(--landing-text); transform: translateY(-2px); }
.price-cycle-button.is-active { background: color-mix(in srgb, var(--landing-lime) 15%, transparent); border-color: color-mix(in srgb, var(--landing-lime) 58%, var(--landing-line)); color: var(--landing-text); box-shadow: 0 0 22px color-mix(in srgb, var(--landing-lime) 9%, transparent); }
.price-cycle-button.is-active i { color: var(--landing-lime); }
.price-grid { align-items: stretch; display: grid; gap: 24px 16px; grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.price-grid .landing-plan { height: auto; }
.price-card { align-self: stretch; min-width: 0; padding: 28px; }
.price-card-heading { align-items: start; display: flex; gap: 12px; justify-content: space-between; }
.price-card-status { color: var(--landing-lime); font: 10px/1 'DM Mono', monospace; white-space: nowrap; }
.price-card-status i { font-size: 7px; margin-right: 4px; }
.price-card-current { border-bottom: 1px solid var(--landing-line); margin-top: 24px; padding-bottom: 20px; }
.price-card-current > span { color: var(--landing-lime); font: 500 11px/1 'DM Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }
.price-card-current > div { align-items: baseline; display: flex; gap: 7px; margin-top: 7px; }
.price-card-current strong { font-family: 'DM Mono', monospace; font-size: 44px; font-weight: 500; letter-spacing: -.06em; }
.price-card-current small { color: var(--landing-muted); font-size: 13px; }
.price-rate-list { display: grid; gap: 7px; margin: 20px 0 4px; }
.price-rate { align-items: center; background: rgba(255, 255, 255, .025); border: 1px solid transparent; border-radius: 10px; display: grid; gap: 8px; grid-template-columns: 1fr auto auto; padding: 10px 11px; transition: background .2s ease, border-color .2s ease; }
.price-rate span { color: var(--landing-muted); font-size: 12px; }
.price-rate span i { color: var(--landing-cyan); font-size: 10px; margin-right: 7px; width: 12px; }
.price-rate strong { color: var(--landing-text); font: 500 14px/1 'DM Mono', monospace; }
.price-rate small { color: var(--landing-muted); font: 10px/1 'DM Mono', monospace; }
.price-rate.is-active { background: color-mix(in srgb, var(--landing-lime) 11%, transparent); border-color: color-mix(in srgb, var(--landing-lime) 34%, var(--landing-line)); }
.price-rate.is-active span, .price-rate.is-active span i, .price-rate.is-active strong { color: var(--landing-lime); }
.price-card .landing-plan-features { margin-top: 22px; }
.price-edit-note { color: var(--landing-muted); font-size: 13px; line-height: 1.6; margin: 22px auto 0; text-align: center; }
.price-edit-note i { color: var(--landing-cyan); margin-right: 5px; }
.price-edit-note a { color: var(--landing-lime); text-decoration: none; }
.price-edit-note a:hover { text-decoration: underline; }
.price-cta-section { padding-bottom: 112px; }

html[data-color-mode="light"] body.kuma-landing .price-hero-panel { background: linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(233, 241, 248, .88)); box-shadow: 20px 24px 64px rgba(35, 66, 94, .14), inset 0 1px 0 rgba(255, 255, 255, .94); }
html[data-color-mode="light"] body.kuma-landing .price-cycle-picker { background: rgba(255, 255, 255, .7); }
html[data-color-mode="light"] body.kuma-landing .price-cycle-button.is-active { background: rgba(255, 189, 63, .16); }
html[data-color-mode="light"] body.kuma-landing .price-rate { background: rgba(35, 66, 94, .035); }
html[data-color-mode="light"] body.kuma-landing .price-rate.is-active { background: rgba(255, 189, 63, .13); }

@media (max-width: 940px) {
  .price-hero-grid { gap: 44px; grid-template-columns: 1fr; }
  .price-hero-panel { margin: 0 auto; max-width: 560px; transform: none; width: 100%; }
  .price-grid { grid-template-columns: repeat(2, 1fr); }
  .price-card:last-child { grid-column: 1 / -1; margin: 0 auto; max-width: calc(50% - 8px); width: 100%; }
}

@media (max-width: 680px) {
  .price-hero { padding-top: 74px; }
  .price-hero-copy h1 { font-size: clamp(38px, 12vw, 56px); }
  .price-hero-copy p { font-size: 16px; }
  .price-cycle-picker { grid-template-columns: repeat(2, 1fr); }
  .price-grid { grid-template-columns: 1fr; }
  .price-card:last-child { grid-column: auto; max-width: none; }
  .price-card-current strong { font-size: 40px; }
  .price-cta-section { padding-bottom: 70px; }
}