/* 05 — pricing (1343px) */
.pricing { position: relative; background: #fff; padding: 80px var(--gutter); }
.pricing .sec-head .sub { max-width: 580px; }
.pr-toggle { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 64px; font-size: 14px; line-height: 21px; color: var(--grey-2); }
.pr-toggle span { cursor: pointer; transition: color .2s; } .pr-toggle span.on { color: var(--ink); }
.pr-toggle em { font-style: normal; color: var(--up-ink); }
.sw { position: relative; width: 44px; height: 24px; border-radius: 999px; background: #d9d9d9; transition: background-color .3s; }
.sw i { position: absolute; left: 2px; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .4s var(--spring); }
.sw[aria-pressed="true"] { background: var(--indigo); } .sw[aria-pressed="true"] i { transform: translateX(20px); }
.pr-wrap { position: relative; display: grid; grid-template-columns: 440px 424px 424px; justify-content: center; align-items: center; max-width: 1344px; margin: 40px auto 0; border-radius: 80px; background: #f5f5f5; padding: 0; height: 765px; }
.pr { position: relative; border-radius: 56px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.pr-1 { height: 717px; padding: 48px 32px 48px 56px; }
.pr-2 { width: 400px; height: 685px; padding: 32px; background: #fff; justify-self: center; }
.pr-3 { width: 400px; height: 685px; padding: 32px; box-shadow: 0 0 10px rgba(0, 0, 0, .1); justify-self: start; }
.pr-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.pr > *:not(.pr-bg) { position: relative; z-index: 1; }
.pr-title { display: flex; align-items: center; gap: 8px; }
.pr-title h3 { font-size: 24px; line-height: 36px; font-weight: 500; color: var(--ink-3); }
.pr-tag { display: inline-flex; align-items: center; gap: 6px; height: 29px; padding: 4px 8px; border-radius: 10px; background: #d9d9d9; font-size: 14px; color: #525252; }
.pr-tag.pop { background: linear-gradient(#b2b2ff -70%, #ebebeb 53%, #b2b2ff 160%); color: #525252; }
.pr-tag.glass { background: rgba(0, 0, 0, .2); color: #fff; }
.pr-price { display: flex; align-items: flex-end; gap: 4px; margin-top: 24px; }
.pr-price b { font-family: var(--display); font-weight: 900; font-size: 48px; line-height: 48px; letter-spacing: -2.4px; color: var(--ink-2); }
.pr-price b i { font-style: normal; color: #8f8f8f; }
.pr-price span { font-size: 20px; line-height: 30px; color: var(--ink-2); padding-bottom: 2px; }
.pr-desc { margin-top: 8px; font-size: 16px; line-height: 24px; color: var(--grey); max-width: 352px; }
.pr-ic { width: 80px; height: 80px; border-radius: 28px; display: grid; place-items: center; background: #fff; }
.ic-1 i { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); }
.ic-2 { background: #bebeff; position: relative; } .ic-2 i { position: absolute; width: 23px; height: 23px; border-radius: 50%; background: var(--ink); } .ic-2 i:first-child { left: 21px; top: 20px; } .ic-2 i:last-child { left: 36px; top: 37px; }
.ic-3 { background: var(--indigo); grid-template-columns: 17px 17px; gap: 4px; align-content: center; justify-content: center; } .ic-3 i { width: 17px; height: 17px; border-radius: 50%; background: #fff; }
.pr-bot h4 { margin-top: 24px; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--ink-2); }
.pr-list { display: grid; gap: 8px; margin-top: 12px; }
.pr-list li { position: relative; padding-left: 24px; font-size: 14px; line-height: 21px; color: var(--ink-2); }
.pr-list li::before { content: ''; position: absolute; left: 2px; top: 6px; width: 10px; height: 6px; border-left: 1.6px solid var(--ink-2); border-bottom: 1.6px solid var(--ink-2); transform: rotate(-45deg); }
.pr-list b { font-weight: 600; }
.pr-bot .btn { margin-top: 40px; height: 60px; }
.pr [data-pr] { transition: opacity .25s; }
@media (max-width: 1400px) { .pr-wrap { grid-template-columns: 1fr 1fr 1fr; height: auto; padding: 24px; gap: 12px; } .pr-1, .pr-2, .pr-3 { width: auto; height: auto; padding: 32px; gap: 48px; } }
@media (max-width: 900px) {
  .pr-wrap { grid-template-columns: 1fr; border-radius: 40px; padding: 12px; }
  .pr { border-radius: 36px; }
  .pr-toggle { margin-top: 36px; font-size: 12px; }
}