/* Pricing */
.pricing-hero {
  position: relative;
  display: grid;
  min-height: 244px;
  place-items: center;
  color: var(--color-reverse-text);
  background-image: linear-gradient(var(--overlay-dark-40), var(--overlay-dark-40)), var(--pricing-hero-image);
  background-position: center;
  background-size: cover;
}
.pricing-hero__inner { display: grid; min-height: inherit; place-items: center; }
.pricing-hero__copy { max-width: var(--container-narrow); text-align: center; }
.pricing-hero h1 { margin-bottom: 20px; color: inherit; font-size: 40px; }
.pricing-hero p { margin-bottom: 0; }

.pricing-product { padding-block: 24px; background: var(--color-subtle-background); }
.pricing-product__inner { display: grid; gap: 24px; }
.pricing-product__media { position: relative; width: 100%; margin: 0; aspect-ratio: 327 / 230; overflow: hidden; border-radius: var(--radius-medium); }
.pricing-product__image { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
.pricing-product__content { display: flex; min-width: 0; flex-direction: column; gap: 24px; }
.pricing-product__content header > *,
.pricing-product__description p,
.pricing-product__price p { margin-bottom: 0; }
.pricing-product__content header p { font-size: 20px; font-weight: 700; line-height: 1.3; }
.pricing-product__content h2 { font-size: 32px; }
.pricing-product__description p { line-height: 1.5; }
.pricing-product__price { display: flex; flex-direction: column; gap: 5px; font-weight: 700; }
.pricing-product__price p:first-child { font-size: 40px; line-height: 1.2; text-align: center; }
.pricing-product__price p:last-child { font-size: 20px; line-height: 1.3; text-align: right; }
.pricing-note { margin-bottom: 0; color: #597587; font-size: 14px; }
.pricing-product__actions { display: grid; gap: 12px; }
.pricing-product__actions .button { width: 100%; min-height: 52px; padding-inline: 12px; font-weight: 700; }
.pricing-product__actions .button--secondary { color: var(--color-surface); background: var(--color-main-blue); }

.pricing-comparison { padding-block: 24px; background: var(--color-surface); }
.pricing-comparison__inner,
.pricing-payment__inner,
.pricing-warranty__inner { display: flex; flex-direction: column; gap: 24px; }
.pricing-section-heading { display: flex; max-width: var(--container-narrow); flex-direction: column; gap: 16px; }
.pricing-section-heading > *,
.pricing-section-heading > div p { margin-bottom: 0; }
.pricing-section-heading > p:first-child { color: var(--color-accent-orange); font-size: 18px; font-weight: 700; line-height: 1.4; }
.pricing-section-heading h2 { font-size: 36px; }

.comparison-products { display: grid; gap: 12px; }
.comparison-products article { display: flex; padding: 16px; flex-direction: column; gap: 8px; border: 1px solid #d8dee2; border-radius: var(--radius-large); }
.comparison-products article > * { margin-bottom: 0; }
.comparison-products h3 { font-size: 18px; line-height: 1.4; white-space: nowrap; }
.comparison-products article > p:nth-of-type(1) { font-size: 36px; font-weight: 700; line-height: 1.2; }
.comparison-products .button { width: 100%; margin-top: 8px; font-weight: 700; }

.comparison-table { display: flex; flex-direction: column; gap: 12px; }
.comparison-table__head { display: none; }
.comparison-group { display: flex; padding: 16px; flex-direction: column; gap: 8px; border: 1px solid #d8dee2; border-radius: var(--radius-large); }
.comparison-group h3 { margin-bottom: 0; font-size: 18px; line-height: 1.4; }
.comparison-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
.comparison-row > p { margin-bottom: 0; }
.comparison-row > p:first-child { grid-column: 1 / -1; }
.comparison-row > p:not(:first-child) { color: var(--color-accent-orange); font-size: 14px; }
.comparison-row > p:not(:first-child) span { display: inline; margin-right: 4px; }

.pricing-payment { padding-block: 24px; background: var(--color-subtle-background); }
.payment-grid { display: grid; gap: 12px; }
.payment-bank-group { display: contents; }
.payment-bank-group__title { display: none; }
.payment-grid article,
.warranty-grid article { display: flex; padding: 16px; flex-direction: column; gap: 8px; border: 1px solid #d8dee2; border-radius: var(--radius-large); background: var(--color-surface); }
.payment-grid article > *,
.payment-grid article div p,
.warranty-grid article > * { margin-bottom: 0; }
.payment-method__details { display: flex; flex-direction: column; }
.payment-grid h3,
.warranty-grid h3 { font-size: 24px; line-height: 1.3; }
.payment-method--yucho h3 { font-size: 18px; line-height: 1.4; }

.pricing-warranty { padding-block: 24px; background: var(--color-surface); }
.warranty-content { display: flex; flex-direction: column; gap: 24px; }
.warranty-grid { display: grid; gap: 12px; }
.warranty-contact { display: flex; padding: 16px; flex-direction: column; gap: 8px; border: 5px solid #d8dee2; border-radius: var(--radius-large); text-align: left; }
.warranty-contact > *, .warranty-contact div p { margin-bottom: 0; }
.warranty-contact h3 { font-size: 20px; line-height: 1.3; }
.warranty-contact > p { color: #597587; font-size: 14px; }
.pricing-page .global-cta { background-image: linear-gradient(var(--overlay-dark-40), var(--overlay-dark-40)), url("/assets/images/pricing/cta.webp"); }

@media (min-width: 768px) {
  .pricing-product,
  .pricing-comparison,
  .pricing-payment,
  .pricing-warranty { padding-block: 64px; }
  .pricing-product__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 40px; }
  .pricing-product__actions { grid-column: 1 / -1; grid-template-columns: repeat(2, max-content); justify-content: center; }
  .pricing-product__actions .button { width: auto; padding-inline: 24px; }
  .comparison-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .comparison-table { gap: 16px; }
  .comparison-row { grid-template-columns: minmax(0, 1.8fr) repeat(2, minmax(80px, 1fr)); align-items: stretch; gap: 0; }
  .comparison-row > p { display: flex; min-height: 56px; padding: 12px 16px; align-items: center; background: var(--color-subtle-background); }
  .comparison-row > p:first-child { grid-column: auto; }
  .comparison-row > p:not(:first-child) { justify-content: center; color: var(--color-text); font-size: 16px; }
  .comparison-row > p:not(:first-child) span { display: none; }
  .warranty-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .pricing-warranty__note { order: 2; }
  .warranty-contact { order: 3; width: min(600px, 100%); margin-inline: auto; text-align: center; }
}
@media (min-width: 1024px) {
  .pricing-hero { min-height: 368px; }
  .pricing-hero h1 { font-size: 60px; }
  .pricing-hero p { font-size: 20px; }
  .pricing-product,
  .pricing-comparison,
  .pricing-payment,
  .pricing-warranty { padding-block: 112px; }
  .pricing-product__inner { grid-template-columns: minmax(0, 1.55fr) minmax(390px, 1fr); gap: 35px; }
  .pricing-product__media { aspect-ratio: 763 / 640; }
  .pricing-product__image { top: -7.03%; left: -13.89%; width: 119.66%; height: auto; object-fit: initial; }
  .pricing-product__content header p { font-size: 32px; }
  .pricing-product__content h2 { font-size: 48px; }
  .pricing-product__description { font-size: 20px; }
  .pricing-product__price p:first-child { font-size: 60px; }
  .pricing-product__price p:last-child { font-size: 32px; }
  .pricing-product__actions { gap: 16px; }
  .pricing-product__actions .button { padding-inline: 40px; font-size: 18px; font-weight: 500; }

  .pricing-comparison__inner,
  .pricing-payment__inner { gap: 80px; }
  .pricing-warranty__inner { gap: 80px; }
  .pricing-section-heading { margin-inline: auto; align-items: center; text-align: center; }
  .pricing-section-heading > p:first-child { font-size: 26px; }
  .pricing-section-heading h2 { font-size: 60px; }
  .pricing-section-heading > p:last-child,
  .pricing-section-heading > div { font-size: 20px; }
  .comparison-products { grid-template-columns: 400px repeat(2, minmax(0, 1fr)); }
  .comparison-products article:first-child { grid-column: 2; }
  .comparison-products article { padding: 0 16px; border: 0; align-items: center; text-align: center; }
  .comparison-products h3 { font-size: 26px; }
  .comparison-products article > p:nth-of-type(1) { font-size: 60px; }
  .comparison-products article > p:nth-of-type(2) { font-size: 18px; }
  .comparison-products .button { width: 300px; margin-top: 8px; }
  .comparison-table__head { display: grid; grid-template-columns: 400px repeat(2, minmax(0, 1fr)); text-align: center; }
  .comparison-table__head span { padding: 8px 16px; font-size: 18px; font-weight: 700; }
  .comparison-table__head span:first-child { color: transparent; }
  .comparison-group { padding: 0; gap: 0; border: 0; }
  .comparison-group h3 { padding-block: 20px; font-size: 26px; }
  .comparison-row { grid-template-columns: 400px repeat(2, minmax(0, 1fr)); }
  .payment-grid { width: min(890px, 100%); margin-inline: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 48px; }
  .payment-bank-group { display: grid; padding: 30px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; border: 1px solid #d8dee2; border-radius: var(--radius-large); background: var(--color-surface); }
  .payment-grid .payment-bank-group__title { display: block; grid-column: 1 / -1; margin-bottom: 0; font-size: 40px; line-height: 1.3; text-align: center; }
  .payment-bank-group .payment-method { padding: 0; gap: 15px; border: 0; border-radius: 0; background: transparent; }
  .payment-bank-group .payment-method__mobile-title { display: none; }
  .payment-bank-group .payment-method--yucho { gap: 41px; }
  .payment-bank-group .payment-method--yucho h3 { font-size: 18px; text-align: left; }
  .payment-method--chiba .payment-method__details p:first-child { font-weight: 700; }
  .payment-grid .payment-method--credit { padding: 30px; }
  .payment-method--credit h3 { font-size: 40px; text-align: center; }
  .payment-method--credit .payment-method__details { gap: 27px; }
  .warranty-grid { width: min(890px, 100%); margin-inline: auto; gap: 48px; }
  .warranty-grid article { padding: 20px; }
  .warranty-grid h3 { font-size: 40px; text-align: center; }
  .pricing-warranty__note { width: min(890px, 100%); margin-inline: auto; }
  .warranty-contact { padding: 20px; }
  .warranty-contact h3 { font-size: 32px; }
  .warranty-contact div { font-size: 26px; }
  .warranty-contact > p { font-size: 18px; }
}