/* Comparable plans, with the Simples offer carrying the brand's navy contrast. */
.pricing .plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.pricing .plan-band { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 34px 30px 30px; margin: 0; border: 1px solid #e4e8ee; border-radius: 14px; background: #fff; box-shadow: 0 3px 8px -5px #1722350c; overflow: visible; }
.pricing .plan-band.featured { background: var(--hero-backdrop); color: #f8fafc; border-color: #263349; box-shadow: 0 16px 40px -28px #0b162a66; }
.pricing .plan-band:has(.feature-tooltip[data-open="true"]) { z-index: 25; }
.pricing .plan-top { display: flex; flex-direction: column; align-items: stretch; gap: 27px; }
.pricing .plan-top > div:first-child { min-height: 124px; }
.pricing .plan-name { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; min-height: 32px; }
.pricing .plan-name h3 { font-size: 25px; line-height: 1.25; letter-spacing: -.04em; font-weight: 500; }
.pricing .popular { flex: none; margin: 0; padding: 6px 8px; border: 1px solid #d9f99d; border-radius: 5px; background: #d9f99d; color: #3f6212; font-size: 10px; line-height: 1.3; font-weight: 500; }
.pricing .plan-description { max-width: none; margin-top: 16px; font-size: 14px; line-height: 1.7; color: #64748b; }
.pricing .featured .plan-description { color: #b9c5d6; }
.pricing .plan-amount { display: flex; flex-wrap: wrap; gap: 0 7px; align-items: baseline; }
.pricing .plan-amount > small { flex-basis: 100%; margin: 0 0 10px; font-size: 12px; line-height: 1.5; color: #64748b; }
.pricing .plan-band:not(:first-child) .plan-amount > small { color: #4d7c0f; }
.pricing .plan-band.featured .plan-amount > small { color: #bef264; }
.pricing .plan-amount strong { font-size: clamp(45px, 3.5vw, 52px); line-height: 1.15; letter-spacing: -.055em; font-weight: 500; }
.pricing .plan-amount > span { margin: 0; font-size: 13px; color: #64748b; }
.pricing .featured .plan-amount > span { color: #b9c5d6; }
.pricing .plan-benefits { flex: 1; margin-top: 30px; padding-block: 27px 30px; border-top: 1px solid #e8ecf1; }
.pricing .featured .plan-benefits { border-color: #ffffff1c; }
.pricing .plan-features { display: grid; grid-template-columns: 1fr; gap: 15px; margin: 0; padding: 0; border: 0; }
.pricing .plan-features > li { display: flex; align-items: flex-start; gap: 11px; padding: 0; font-size: 14px; line-height: 1.6; color: #64748b; }
.pricing .featured .plan-features > li { color: #b9c5d6; }
.pricing .plan-features > li > .icon { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 3px; color: #65a30d; stroke-width: 1.9; }
.pricing .featured .plan-features > li > .icon { color: #a3e635; }
.pricing .plan-cta { width: 100%; max-width: none; min-height: 51px; margin-top: 0; padding: 13px 16px; justify-content: center; gap: 16px; border-radius: 10px; border-color: #172235; color: #fff; background: linear-gradient(180deg, #ffffff0c, #ffffff00) #172235; font-size: 13px; }
.pricing .plan-cta:hover { background-color: #263349; border-color: #263349; }
.pricing .featured .plan-cta { color: #111b2e; background: #fff; border-color: #fff; box-shadow: 0 2px 3px #00000008; }
.pricing .featured .plan-cta:hover { background-color: #e9eef5; border-color: #e9eef5; box-shadow: 0 3px 10px #00000010; }
.pricing .pricing-note { color: #7a879b; font-size: 11px; line-height: 1.8; margin-top: 28px; }

/* The information stays readable beyond the card, including narrow viewports. */
.pricing .feature-tooltip { margin-left: 4px; vertical-align: -4px; line-height: 1; }
.pricing .feature-tooltip > button { position: relative; display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #94a3b8; transition: color .18s, background-color .18s; }
.pricing .feature-tooltip > button::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; }
.pricing .feature-tooltip > button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.pricing .feature-tooltip > button:hover, .pricing .feature-tooltip > button[aria-expanded="true"] { color: #334155; background: #f1f5f9; }
.pricing .featured .feature-tooltip > button { color: #a4b3c8; }
.pricing .featured .feature-tooltip > button:hover, .pricing .featured .feature-tooltip > button[aria-expanded="true"] { color: white; background: #ffffff12; }
.pricing .tooltip-body, .pricing .feature-tooltip:hover .tooltip-body, .pricing .feature-tooltip:focus-within .tooltip-body { display: none; }
.pricing .feature-tooltip[data-open="true"] .tooltip-body { display: block; }
.pricing .tooltip-body { position: fixed; inset: auto; left: var(--tooltip-x, 0px); top: var(--tooltip-y, 0px); z-index: 100; width: 370px; max-width: calc(100vw - 40px); max-height: calc(100dvh - 40px); padding: 25px 27px; border: 1px solid #e8ecf1; border-radius: 18px; background: #fff; color: #64748b; box-shadow: 0 7px 16px -8px #0f172a18, 0 24px 60px -18px #0f172a30; text-align: left; cursor: auto; }
.pricing .tooltip-body strong { display: block; font-size: 15px; line-height: 1.55; font-weight: 500; color: #172235; }
.pricing .tooltip-body ul { display: grid; grid-template-columns: 1fr; gap: 11px; margin: 17px 0 0; padding: 0; list-style: none; }
.pricing .tooltip-body li { display: grid; grid-template-columns: 5px 1fr; align-items: start; column-gap: 10px; padding: 0; font-size: 13px; line-height: 1.65; color: #64748b; }
.pricing .tooltip-body li::before { content: ""; width: 4px; height: 4px; margin-top: 9px; border-radius: 50%; background: #c5ccd7; }
.pricing .tooltip-body::after { content: ""; position: absolute; inset: auto; width: 12px; height: 12px; background: white; border: 0 solid #e8ecf1; transform: rotate(45deg); }
.pricing [data-side="right"] .tooltip-body::after { left: -7px; top: calc(var(--tooltip-arrow) - 6px); border-width: 0 0 1px 1px; }
.pricing [data-side="left"] .tooltip-body::after { right: -7px; top: calc(var(--tooltip-arrow) - 6px); border-width: 1px 1px 0 0; }
.pricing [data-side="bottom"] .tooltip-body::after { top: -7px; left: calc(var(--tooltip-arrow) - 6px); border-width: 1px 0 0 1px; }
.pricing [data-side="top"] .tooltip-body::after { bottom: -7px; left: calc(var(--tooltip-arrow) - 6px); border-width: 0 1px 1px 0; }

@media (min-width: 901px) and (max-width: 1200px) {
  .pricing .plans { gap: 16px; }
  .pricing .plan-band { padding: 28px 22px 24px; }
  .pricing .plan-name { align-content: flex-start; min-height: 64px; }
  .pricing .plan-name h3 { font-size: 23px; }
  .pricing .plan-top > div:first-child { min-height: 157px; }
  .pricing .plan-features > li { font-size: 13px; }
}
@media (max-width: 900px) {
  .pricing .plans { grid-template-columns: 1fr; gap: 22px; }
  .pricing .plan-band { padding: 32px; }
  .pricing .plan-top { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; }
  .pricing .plan-top > div:first-child { min-height: 0; }
  .pricing .plan-name { justify-content: flex-start; gap: 14px; }
  .pricing .plan-description { max-width: 410px; }
  .pricing .plan-amount { min-width: 165px; }
  .pricing .plan-benefits { margin-top: 28px; }
  .pricing .plan-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; }
  .pricing .plan-cta { max-width: 320px; align-self: flex-start; }
}
@media (max-width: 600px) {
  .pricing .plan-band { padding: 29px 24px 25px; }
  .pricing .plan-top { grid-template-columns: 1fr; gap: 25px; }
  .pricing .plan-name { gap: 10px; }
  .pricing .plan-name h3 { font-size: 24px; }
  .pricing .plan-description { margin-top: 14px; }
  .pricing .plan-amount strong { font-size: 48px; }
  .pricing .plan-benefits { padding-block: 24px 27px; margin-top: 27px; }
  .pricing .plan-features { grid-template-columns: 1fr; gap: 14px; }
  .pricing .plan-cta { max-width: none; }
  .pricing .feature-tooltip > button::before { inset: -11px; }
  .pricing .tooltip-body { width: 360px; max-width: calc(100vw - 40px); padding: 22px; border-radius: 16px; }
  .pricing .tooltip-body strong { font-size: 14px; }
  .pricing .tooltip-body li { font-size: 12px; }
}
@media (max-height: 500px) {
  .pricing .tooltip-body { overflow-y: auto; }
}