/* Visible one-off pricing cards, inspired by PricingPages / Osmo. */
.home-pricing { padding-block: 78px 62px; background: var(--ink); color: var(--white); }
.pricing-meta { display: flex; justify-content: space-between; gap: 20px; font-size: 9px; letter-spacing: 1.5px; color: #a0aa92; padding-bottom: 23px; border-bottom: 1px solid #353d2c; }
.pricing-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; padding: 34px 0 36px; }
.pricing-heading h2 { font-size: clamp(38px, 4.5vw, 66px); line-height: 1.08; letter-spacing: -.058em; }
.pricing-heading h2 span { color: var(--lime); }
.pricing-heading > p { margin: 0 0 5px; color: #a8b29c; font-size: 14px; line-height: 1.8; }
.studio-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.studio-plan { min-width: 0; display: flex; flex-direction: column; padding: 28px; border: 1px solid #3f4934; border-radius: 16px; background: #1b1f17; }
.studio-plan-featured { border-color: var(--lime); background: #222a1b; }
.studio-plan-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 9px; color: #a6b298; }
.studio-plan-top > span { line-height: 1.6; }
.studio-plan-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #6f7b62; }
.studio-plan-featured .studio-plan-dot { background: var(--lime); box-shadow: 0 0 15px #d2f86a36; }
.studio-plan h3 { margin: 29px 0 16px; font-size: 27px; line-height: 1.18; letter-spacing: -.04em; }
.studio-plan-price { margin: 0; }
.studio-plan-price strong { display: block; font-size: clamp(35px, 3.5vw, 52px); font-weight: 600; line-height: 1.1; letter-spacing: -.055em; white-space: nowrap; }
.studio-plan-price small { font-size: .56em; font-weight: 400; }
.studio-plan-price > span { display: block; margin-top: 9px; color: #869778; font-size: 10px; }
.studio-plan-featured .studio-plan-price strong { color: var(--lime); }
.studio-plan-preview { margin: 23px 0 0; overflow: hidden; border: 1px solid #425236; border-radius: 9px; background: #11170b; }
.studio-plan-preview > a { display: block; }
.studio-plan-preview img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: top; }
.studio-plan-preview span { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; padding: 9px 11px; color: #a3b692; font-size: 9px; }
.studio-plan-preview .icon { width: 13px; height: 13px; }
.studio-plan-preview a:hover span { color: var(--lime); }
.studio-plan-description { min-height: 87px; margin: 24px 0 21px; color: #a9b69c; font-size: 13px; line-height: 1.75; }
.studio-plan-features { list-style: none; padding: 21px 0 0; margin: 0 0 22px; border-top: 1px solid #3c4730; }
.studio-plan-features li { display: flex; align-items: start; gap: 11px; margin-bottom: 13px; color: #d5dfca; font-size: 12px; line-height: 1.55; }
.studio-plan-features li::before { content: "✓"; flex: none; color: var(--lime); }
.studio-plan-timing { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 15px; margin-top: auto; margin-bottom: 24px; color: #8c9d7c; font-size: 10px; }
.studio-plan-timing strong { font-size: 11px; color: #c3d0b5; font-weight: 600; }
.studio-plan-button { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 52px; padding: 14px 18px; border: 1px solid #697c51; border-radius: 9px; font-size: 12px; font-weight: 600; transition: background .2s, color .2s; }
.studio-plan-button .icon { width: 19px; height: 19px; }
.studio-plan-featured .studio-plan-button { color: var(--ink); background: var(--lime); border-color: var(--lime); }
.studio-plan-button:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.studio-plan-details-button { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 20px; min-height: 56px; margin-top: 12px; padding: 16px 18px; border: 1px solid #91a47c; border-radius: 9px; color: var(--white); font-size: 14px; font-weight: 600; transition: background .2s, color .2s; }
.studio-plan-details-button .icon { width: 21px; height: 21px; }
.studio-plan-details-button:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.studio-plan-details-button:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
.studio-plan-links { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 5px 18px; padding-top: 14px; color: #91a47c; font-size: 10px; }
.studio-plan-links a { padding: 8px 0; }
.studio-plan-links a:hover { color: var(--lime); }
.pricing-assurance { display: flex; align-items: center; flex-wrap: wrap; gap: 15px 32px; padding: 25px 0; margin-top: 11px; border-bottom: 1px solid #353d2c; font-size: 11px; }
.pricing-assurance > span { margin-right: auto; color: #6d805d; }
.pricing-assurance p { display: flex; align-items: center; gap: 9px; margin: 0; color: #a7b398; }
.pricing-assurance p::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--lime); }
.studio-pricing-payment { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; padding: 32px 0; }
.studio-pricing-payment > div:first-child { display: flex; align-items: center; gap: 30px; }
.studio-pricing-payment > div:first-child > strong { font-size: 75px; line-height: 1; letter-spacing: -.06em; color: var(--lime); font-weight: 600; white-space: nowrap; }
.studio-pricing-payment > div:first-child > strong small { font-size: .4em; font-weight: 400; }
.studio-pricing-payment p { margin: 0; font-size: 15px; line-height: 1.65; }
.studio-pricing-payment p span { color: #7e906c; font-size: 11px; }
.studio-pricing-payment > div:last-child { padding-left: 36px; border-left: 1px solid #353d2c; }
.studio-pricing-payment > div:last-child > span { font-size: 9px; letter-spacing: 1.4px; color: #7e906c; }
.studio-pricing-payment > div:last-child p { display: flex; justify-content: space-between; align-items: center; gap: 20px; max-width: 370px; margin: 13px 0 9px; font-size: 20px; }
.studio-pricing-payment > div:last-child strong { font-size: 28px; font-weight: 600; letter-spacing: -.04em; white-space: nowrap; }
.studio-pricing-payment > div:last-child strong small { font-size: 17px; font-weight: 400; }
.studio-pricing-payment > div:last-child > small { color: #7e906c; font-size: 10px; line-height: 1.6; }
.studio-price-details { border: 1px solid #3f4934; border-radius: 12px; margin-top: 6px; }
.studio-price-details > summary { min-height: 65px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 17px 24px; cursor: pointer; list-style: none; color: #c2cfb6; font-size: 13px; }
.studio-price-details > summary::-webkit-details-marker { display: none; }
.studio-price-details > summary .icon { width: 19px; height: 19px; flex: none; }
.studio-price-details[open] > summary .icon { transform: rotate(45deg); }
.pricing-comparison { padding: 30px; background: var(--paper); color: var(--ink); border-radius: 0 0 11px 11px; }
.pricing-compare-heading { display: flex; justify-content: space-between; gap: 30px; align-items: end; margin-bottom: 25px; }
.pricing-compare-heading h3 { margin: 0; font-size: 27px; letter-spacing: -.045em; }
.pricing-compare-heading p { margin: 0; font-size: 12px; color: #646e57; line-height: 1.7; }
.pricing-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 12px; line-height: 1.6; }
.pricing-table th,
.pricing-table td { text-align: left; vertical-align: top; border-bottom: 1px solid #c5cdbb; padding: 19px 14px; overflow-wrap: anywhere; }
.pricing-table th:first-child { width: 24%; padding-left: 0; }
.pricing-table tbody th { color: #626f55; font-weight: 400; }
.pricing-table-price { display: block; font-size: 23px; font-weight: 600; letter-spacing: -.045em; white-space: nowrap; }
.pricing-table-price small { font-size: 14px; font-weight: 400; }
.pricing-marker { display: inline-block; width: 6px; height: 6px; margin-right: 9px; background: #5f8331; }
.pricing-marker-catalog { background: #3e739b; }
.pricing-marker-company { background: #bb674a; }
.pricing-mobile-label { display: none; }
.pricing-comparison-footer { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-top: 24px; }
.pricing-comparison-footer p { margin: 0; color: #647058; font-size: 10px; line-height: 1.7; }
.pricing-comparison-footer a { display: inline-flex; align-items: center; gap: 20px; min-height: 44px; border-bottom: 1px solid #647058; font-size: 12px; font-weight: 600; }
.pricing-comparison-footer .icon { width: 18px; height: 18px; }
.pricing-comparison a:focus-visible { outline-color: #477700; }

@media (max-width: 1100px) {
  .studio-plan { padding: 23px; }
  .studio-plan h3 { font-size: 23px; }
  .studio-plan-price strong { font-size: 37px; }
  .studio-plan-description { min-height: 115px; font-size: 12px; }
  .pricing-assurance { gap: 15px 22px; }
  .studio-pricing-payment { gap: 25px; }
  .studio-pricing-payment > div:first-child { gap: 22px; }
  .studio-pricing-payment > div:first-child > strong { font-size: 65px; }
  .studio-pricing-payment p { font-size: 13px; }
}
@media (max-width: 760px) {
  .home-pricing { padding-block: 46px; }
  .home-pricing .wrap { width: calc(100% - 40px); }
  .pricing-meta { font-size: 8px; gap: 16px; }
  .pricing-heading { flex-direction: column; align-items: start; gap: 20px; padding-block: 26px; }
  .pricing-heading h2 { font-size: 40px; }
  .pricing-heading > p { font-size: 13px; }
  .studio-plans { grid-template-columns: 1fr; gap: 16px; }
  .studio-plan { padding: 26px; }
  .studio-plan h3 { font-size: 27px; margin-top: 22px; }
  .studio-plan-price strong { font-size: 47px; }
  .studio-plan-description { min-height: 0; margin-top: 19px; font-size: 13px; }
  .studio-plan-features { margin-bottom: 15px; padding-top: 18px; }
  .studio-plan-features li { font-size: 12px; margin-bottom: 11px; }
  .studio-plan-timing { margin-bottom: 18px; }
  .pricing-assurance > span { width: 100%; }
  .studio-pricing-payment { grid-template-columns: 1fr; gap: 24px; padding-block: 27px; }
  .studio-pricing-payment > div:last-child { padding: 23px 0 0; border-left: 0; border-top: 1px solid #353d2c; }
  .studio-price-details > summary { padding-inline: 20px; font-size: 12px; }
  .pricing-comparison { padding: 25px 20px; }
  .pricing-compare-heading { flex-direction: column; align-items: start; gap: 15px; }
  .pricing-table,
  .pricing-table tbody,
  .pricing-table tr,
  .pricing-table th,
  .pricing-table td { display: block; width: 100%; }
  .pricing-table thead { display: none; }
  .pricing-table tbody th { padding: 19px 0 10px; color: #141414; font-size: 14px; font-weight: 600; border-bottom: 0; }
  .pricing-table td { display: grid; grid-template-columns: 91px minmax(0, 1fr); align-items: start; gap: 12px; padding: 12px 0; font-size: 11px; }
  .pricing-mobile-label { display: block; color: #68715e; font-size: 11px; }
  .pricing-comparison-footer { flex-direction: column; align-items: start; gap: 15px; }
}
@media (prefers-reduced-motion: reduce) { .studio-plan-button, .studio-plan-details-button { transition: none; } }