/* Plan cards keep pricing and checkout data in site.js. */
html:root body[data-page="pricing"] .pricing-page { padding: 64px 0 88px; }
html:root body[data-page="pricing"] .pricing-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 38px; }
html:root body[data-page="pricing"] .pricing-page .section-head { max-width: 660px; margin: 0; text-align: left; }
html:root body[data-page="pricing"] .pricing-page .section-head h1 { max-width: 640px; margin: 13px 0 20px; font: 650 clamp(38px, 4.25vw, 58px)/1.09 Manrope, sans-serif; letter-spacing: -.055em; }
html:root body[data-page="pricing"] .pricing-page .section-head > p { margin-inline: 0; max-width: 550px; font-size: 17px; line-height: 1.75; }
html:root body[data-page="pricing"] .pricing-page .section-head > .eyebrow { font-size: 14px; font-weight: 650; letter-spacing: 0; }
html:root body[data-page="pricing"] .pricing-billing { flex: none; padding-bottom: 3px; }
html:root body[data-page="pricing"] .pricing-billing > p { margin: 0 0 11px; font-size: 14px; color: var(--muted); }
html:root body[data-page="pricing"] .billing-toggle { display: flex; width: fit-content; margin: 0; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
html:root body[data-page="pricing"] .billing-toggle button { min-width: 96px; min-height: 42px; padding: 10px 19px; border-radius: 7px; font-size: 14px; font-weight: 700; }
html:root body[data-page="pricing"] .billing-toggle button.on { color: #fff; background: #20292b; border-color: #20292b; }
html:root body[data-page="pricing"] .billing-toggle .billing-save { margin-left: 3px; color: #37664b; font-weight: 650; }
html:root body[data-page="pricing"] .billing-toggle button.on .billing-save { color: #bfe3cb; }
html:root body[data-page="pricing"] #public-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; gap: 18px; border: 0; background: transparent; overflow: visible; }
html:root body[data-page="pricing"] #public-plans .plan { display: flex; flex-direction: column; align-items: stretch; min-height: 372px; padding: 28px 25px 25px; border: 1px solid #dce2e3; border-radius: 14px; color: #20292b; background: #fff; box-shadow: none; }
html:root body[data-page="pricing"] #public-plans .plan.featured { border: 2px solid #4b735a; background: #edf5ef; box-shadow: 0 8px 24px #24493b0d; }
html:root body[data-page="pricing"] #public-plans .plan-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 0 0 27px; }
html:root body[data-page="pricing"] #public-plans .plan h3 { margin: 0; font: 650 22px/1.2 Manrope, sans-serif; letter-spacing: -.035em; }
html:root body[data-page="pricing"] #public-plans .plan-recommendation { display: inline-flex; padding: 5px 8px; border: 1px solid #d4b84e; border-radius: 6px; color: #20292b; background: #f5d96c; font-size: 14px; line-height: 1.3; font-weight: 650; white-space: nowrap; }
html:root body[data-page="pricing"] #public-plans .price { gap: 5px; }
html:root body[data-page="pricing"] #public-plans .price b { font: 650 43px/1.12 Manrope, sans-serif; letter-spacing: -.055em; }
html:root body[data-page="pricing"] #public-plans .price > span { font-size: 14px; }
html:root body[data-page="pricing"] #public-plans .plan-sub { min-height: 18px; margin: 8px 0 0; font-size: 14px; line-height: 1.6; }
html:root body[data-page="pricing"] #public-plans .plan ul { display: flex; flex-direction: column; gap: 12px; padding: 22px 0 0; margin: 24px 0 28px; border-top: 1px solid #d3dfe0; list-style: none; }
html:root body[data-page="pricing"] #public-plans .plan li { margin: 0; font-size: 16px; line-height: 1.65; list-style: none; }
html:root body[data-page="pricing"] #public-plans .plan li b { font-size: 18px; font-weight: 650; letter-spacing: -.025em; color: #20292b; }
html:root body[data-page="pricing"] #public-plans .plan > .btn { margin-top: auto; min-height: 46px; padding-inline: 10px; border-radius: 9px; font-size: 14px; line-height: 1.4; white-space: normal; }
html:root body[data-page="pricing"] #public-plans .plan.featured > .btn-primary:not(:disabled) { color: #20292b; background: #f5d96c; border-color: #d4b84e; }
html:root body[data-page="pricing"] #public-plans .plan.featured > .btn-primary:hover:not(:disabled) { background: #ebcc57; border-color: #aa9038; }
html:root body[data-page="pricing"] #public-plans .plan.featured > .btn-primary:active:not(:disabled) { background: #e2c24e; }
html:root body[data-page="pricing"] #public-plans .plan button:disabled { color: #686e70; background: #f3f5f5; border-color: #e1e5e6; }
html:root body[data-page="pricing"] #pricing-availability { margin: 19px 0 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--muted); font-size: 14px; line-height: 1.65; }
html:root body[data-page="pricing"] .pricing-note { margin: 16px 0 0; max-width: none; font-size: 14px; line-height: 1.75; text-align: left; }
html:root body[data-page="pricing"] .plan-inclusions { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 16px 33px; padding: 30px 0; margin: 12px 0 0; font-size: 14px; border-bottom: 1px solid var(--line); }
html:root body[data-page="pricing"] .plan-inclusions strong { margin-right: auto; color: var(--ink); font-weight: 650; }
html:root body[data-page="pricing"] .plan-inclusions span::before { color: #37664b; }
html:root body[data-page="pricing"] .pricing-details { display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; margin-top: 56px; }
html:root body[data-page="pricing"] .packs-section { display: flex; flex-direction: column; gap: 19px; padding: 0; border: 0; }
html:root body[data-page="pricing"] .packs-section h2,
html:root body[data-page="pricing"] .pricing-faq h2 { margin: 0 0 15px; font: 650 28px/1.2 Manrope, sans-serif; letter-spacing: -.045em; }
html:root body[data-page="pricing"] .packs-section .eyebrow { margin: 0 0 12px; font-size: 14px; letter-spacing: 0; }
html:root body[data-page="pricing"] .packs-section p { margin: 0; max-width: 390px; font-size: 14px; line-height: 1.75; }
html:root body[data-page="pricing"] .pack-list { display: grid; grid-template-columns: 1fr; padding: 0 18px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
html:root body[data-page="pricing"] .pack-list li { gap: 18px; padding: 14px 0; font-size: 14px; }
html:root body[data-page="pricing"] .pack-list li:last-child { border-bottom: 0; }
html:root body[data-page="pricing"] .pack-list span { color: var(--ink); font-weight: 700; }
html:root body[data-page="pricing"] .packs-section > .link { width: fit-content; margin-top: -2px; font-size: 14px; }
html:root body[data-page="pricing"] .pricing-faq { display: block; min-width: 0; max-width: none; padding: 0; }
html:root body[data-page="pricing"] .pricing-faq h2 { margin-bottom: 19px; }
html:root body[data-page="pricing"] .pricing-faq .faq summary { padding: 20px 30px 20px 0; font-size: 16px; font-weight: 650; }
html:root body[data-page="pricing"] .pricing-faq .faq p { font-size: 16px; line-height: 1.8; }

@media (max-width: 1100px) {
  html:root body[data-page="pricing"] #public-plans { gap: 14px; }
  html:root body[data-page="pricing"] #public-plans .plan { padding: 25px 20px 22px; }
  html:root body[data-page="pricing"] #public-plans .price b { font-size: 37px; }
  html:root body[data-page="pricing"] #public-plans .plan li { font-size: 16px; }
  html:root body[data-page="pricing"] #public-plans .plan > .btn { font-size: 14px; }
  html:root body[data-page="pricing"] .pricing-details { gap: 40px; }
  html:root body[data-page="pricing"] .plan-inclusions { gap: 15px 22px; }
}

@media (max-width: 950px) {
  html:root body[data-page="pricing"] .pricing-intro { align-items: flex-start; flex-direction: column; gap: 25px; margin-bottom: 28px; }
  html:root body[data-page="pricing"] #public-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  html:root body[data-page="pricing"] #public-plans .plan { min-height: 355px; padding: 27px; }
  html:root body[data-page="pricing"] #public-plans .price b { font-size: 41px; }
  html:root body[data-page="pricing"] #public-plans .plan li { font-size: 16px; }
  html:root body[data-page="pricing"] #public-plans .plan > .btn { font-size: 14px; }
  html:root body[data-page="pricing"] .plan-inclusions strong { flex-basis: 100%; }
  html:root body[data-page="pricing"] .pricing-details { grid-template-columns: 1fr; gap: 46px; margin-top: 42px; }
  html:root body[data-page="pricing"] .packs-section p { max-width: 520px; }
}

@media (max-width: 540px) {
  html:root body[data-page="pricing"] .pricing-page { padding: 36px 0 55px; }
  html:root body[data-page="pricing"] .pricing-page .section-head h1 { margin: 10px 0 18px; font-size: clamp(35px, 9.6vw, 44px); line-height: 1.08; letter-spacing: -.05em; }
  html:root body[data-page="pricing"] .pricing-page .section-head > p { font-size: 16px; line-height: 1.75; }
  html:root body[data-page="pricing"] .pricing-page .section-head > .eyebrow { font-size: 14px; }
  html:root body[data-page="pricing"] #public-plans { grid-template-columns: 1fr; gap: 14px; }
  html:root body[data-page="pricing"] #public-plans .plan { min-height: 0; padding: 25px; }
  html:root body[data-page="pricing"] #public-plans .plan-heading { margin-bottom: 24px; }
  html:root body[data-page="pricing"] #public-plans .plan ul { gap: 10px; margin: 22px 0 24px; padding-top: 20px; }
  html:root body[data-page="pricing"] #pricing-availability { font-size: 14px; }
  html:root body[data-page="pricing"] .pricing-note { font-size: 14px; }
  html:root body[data-page="pricing"] .plan-inclusions { display: flex; flex-direction: row; gap: 13px 20px; padding: 27px 0; font-size: 14px; }
  html:root body[data-page="pricing"] .plan-inclusions span { flex-basis: 100%; }
  html:root body[data-page="pricing"] .packs-section h2,
  html:root body[data-page="pricing"] .pricing-faq h2 { font-size: 25px; }
}

/* Top-up packs: a slider per kind, whose stops are the packs on sale. */
html:root body[data-page="pricing"] .pack-pickers { display: grid; gap: 16px; }
html:root body[data-page="pricing"] .pack-picker { display: grid; gap: 14px; padding: 22px 24px 24px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
html:root body[data-page="pricing"] .pack-picker-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
html:root body[data-page="pricing"] .pack-picker h3 { margin: 0; font: 650 19px/1.2 Manrope, sans-serif; letter-spacing: -.03em; }
html:root body[data-page="pricing"] .pack-picker-note { font-size: 14px; color: var(--muted); }
html:root body[data-page="pricing"] .pack-picker-amount { display: grid; gap: 12px; }
html:root body[data-page="pricing"] .pack-picker-value { font-size: 16px; }
html:root body[data-page="pricing"] .pack-picker-value b { font: 650 30px/1 Manrope, sans-serif; letter-spacing: -.04em; margin-right: 6px; }
html:root body[data-page="pricing"] .pack-picker input[type="range"] { width: 100%; height: 28px; margin: 0; appearance: none; background: transparent; cursor: pointer; }
html:root body[data-page="pricing"] .pack-picker input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: #e3e5e1; }
html:root body[data-page="pricing"] .pack-picker input[type="range"]::-moz-range-track { height: 6px; border-radius: 6px; background: #e3e5e1; }
html:root body[data-page="pricing"] .pack-picker input[type="range"]::-webkit-slider-thumb { appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: #20292b; border: 3px solid #fff; box-shadow: 0 1px 4px #20292b40; }
html:root body[data-page="pricing"] .pack-picker input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #20292b; border: 3px solid #fff; box-shadow: 0 1px 4px #20292b40; }
html:root body[data-page="pricing"] .pack-picker input[type="range"]:focus-visible { outline: 2px solid #20292b; outline-offset: 4px; border-radius: 8px; }
html:root body[data-page="pricing"] .pack-picker-stops { display: flex; justify-content: space-between; margin-top: -8px; font-size: 13px; color: var(--muted); }
html:root body[data-page="pricing"] .pack-picker-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--line); }
html:root body[data-page="pricing"] .pack-picker-price { font-size: 14px; color: var(--muted); }
html:root body[data-page="pricing"] .pack-picker-price b { font-size: 18px; font-weight: 650; color: var(--ink); letter-spacing: -.02em; }
html:root body[data-page="pricing"] #public-plans .plan-fit { margin: -20px 0 22px; font-size: 14px; color: var(--muted); }