/* Own the plan layout independently of legacy .plan-card theme rules. */
#order-plans .offer-catalog {
    --offer-ink: var(--st-ink, #203247);
    --offer-muted: var(--st-muted, #536778);
    --offer-line: var(--st-line, #dce5ed);
    --offer-paper: var(--st-paper, #fff);
    --offer-primary: var(--st-primary, #2563eb);
    --offer-soft: var(--st-soft, #f3f7fa);
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    min-width: 0;
    container-type: inline-size;
    color: var(--offer-ink);
}
#order-plans .offer-family {margin: 0 0 38px; min-width: 0; padding: 0; border: 0; background: none; box-shadow: none}
#order-plans .offer-family-heading {display: flex; align-items: center; gap: 14px; padding: 0 0 18px; flex-wrap: wrap}
#order-plans .offer-family-heading > div {min-width: 0; flex: 1 1 180px}
#order-plans .offer-family-heading h2 {font-size: 22px; line-height: 1.35; margin: 4px 0 0; color: var(--offer-ink); overflow-wrap: anywhere}
#order-plans .offer-family-icon {display: grid; place-items: center; flex: 0 0 44px; height: 44px; border-radius: 8px; color: #2563eb; background: #eaf1ff; font-size: 19px}
#order-plans .offer-family:nth-child(3n+2) .offer-family-icon {background: #e5f6ef; color: #087d63}
#order-plans .offer-family:nth-child(3n) .offer-family-icon {background: #fff2df; color: #9c5a08}
#order-plans .offer-family-count {color: var(--offer-muted); font-size: 13px; white-space: nowrap}
#order-plans .offer-eyebrow {display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 750; text-transform: uppercase; color: var(--offer-primary)}
#order-plans .offer-grid {display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; align-items: stretch}
#order-plans .offer-card {display: flex; flex-direction: column; min-width: 0; padding: 0; border: 1px solid var(--offer-line); border-top: 3px solid var(--offer-primary); border-radius: 8px; background: var(--offer-paper); box-shadow: 0 3px 12px #20324706; overflow: visible}
#order-plans .offer-card:nth-child(3n+2) {border-top-color: #0a9278}
#order-plans .offer-card:nth-child(3n) {border-top-color: #b34470}
#order-plans .offer-card.offer-recommended {border-color: var(--offer-primary)}
#order-plans .offer-card :is(p, h3, span, dt, dd, a, strong, small) {min-width: 0; letter-spacing: 0}
#order-plans .offer-head {display: grid; gap: 12px; padding: 20px 22px 16px; min-height: 115px; align-content: start; border-bottom: 1px solid var(--offer-line)}
#order-plans .offer-topline {display: flex; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; align-items: center}
#order-plans .offer-availability {display: inline-flex; gap: 5px; align-items: center; font-size: 11px; font-weight: 700; color: #076c53; background: #e9f7f0; padding: 5px 8px; border-radius: 5px; line-height: 1.4; overflow-wrap: anywhere}
#order-plans .offer-availability[data-capacity=limited],
#order-plans .offer-availability[data-capacity=maintenance] {background: #fff2dc; color: #875002}
#order-plans .offer-availability[data-capacity=disabled],
#order-plans .offer-availability[data-capacity=sold_out] {background: #fdebf0; color: #a1304e}
#order-plans .offer-title {font-size: 20px; font-weight: 750; line-height: 1.4; color: var(--offer-ink); margin: 0; width: 100%; text-wrap: wrap; overflow-wrap: anywhere; word-break: normal}
#order-plans .offer-badges {display: flex; flex-wrap: wrap; gap: 6px}
#order-plans .offer-badges > span {display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font-size: 11px; font-weight: 650; line-height: 1.4; padding: 5px 8px; border-radius: 4px; background: #fff3df; color: #885003; overflow-wrap: anywhere}
#order-plans .offer-pricing {padding: 18px 22px 0; font-variant-numeric: tabular-nums}
#order-plans .offer-promotion {display: flex; flex-wrap: wrap; gap: 5px 8px; align-items: center; min-height: 32px; font-size: 12px; line-height: 1.4; color: var(--offer-muted)}
#order-plans .offer-promotion del {white-space: nowrap}
#order-plans .offer-promotion del + span {color: #087a5c; font-weight: 650}
#order-plans .offer-price {display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; padding: 4px 0 16px}
#order-plans .offer-price strong {font-size: 34px; line-height: 1.15; font-weight: 800; color: var(--offer-ink); overflow-wrap: anywhere}
#order-plans .offer-price > span {font-size: 13px; color: var(--offer-muted)}
#order-plans .offer-term {display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 10px 0; border-top: 1px solid var(--offer-line); font-size: 12px; color: var(--offer-muted)}
#order-plans .offer-term strong {margin-left: auto; color: var(--offer-ink); font-size: 13px; overflow-wrap: anywhere}
#order-plans .offer-saving {color: #087a5c; font-weight: 650}
#order-plans .offer-hourly {display: block; font-size: 12px; margin-top: 4px; color: var(--offer-muted)}
#order-plans .offer-specs {display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 14px 22px; gap: 0 18px; padding: 0; font-variant-numeric: tabular-nums}
#order-plans .offer-specs > div {min-width: 0; padding: 11px 0; border-top: 1px solid var(--offer-line)}
#order-plans .offer-specs dt {display: flex; align-items: baseline; gap: 7px; color: var(--offer-muted); font-size: 12px; line-height: 1.45; font-weight: 500; overflow-wrap: anywhere}
#order-plans .offer-specs i {color: var(--offer-primary); width: 15px; flex-shrink: 0; text-align: center}
#order-plans .offer-specs > div:nth-child(2n) i {color: #07836d}
#order-plans .offer-specs dd {margin: 6px 0 0; font-size: 17px; font-weight: 750; line-height: 1.4; color: var(--offer-ink); white-space: normal; overflow-wrap: anywhere; text-overflow: clip; overflow: visible}
#order-plans .offer-application {display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 22px 14px; padding: 12px 0; border-top: 1px solid var(--offer-line)}
#order-plans .offer-application > span {display: grid; flex: 1}
#order-plans .offer-application small {font-size: 11px; color: var(--offer-muted)}
#order-plans .offer-application strong {font-size: 14px}
#order-plans .offer-notice {margin: 0 22px 12px; padding: 0 0 0 12px; border-left: 3px solid #d59a34; font-size: 12px; line-height: 1.6; color: var(--offer-muted); overflow-wrap: anywhere}
#order-plans .offer-notice strong {color: var(--offer-ink)}
#order-plans .offer-publisher, #order-plans .offer-capacity {margin: 0 22px 12px; font-size: 12px; line-height: 1.6; color: var(--offer-muted); overflow-wrap: anywhere}
#order-plans .offer-details {margin: 0 22px 16px; padding: 0; font-size: 13px; color: var(--offer-muted); border: 0; background: none}
#order-plans .offer-details summary {display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; min-height: 44px; cursor: pointer; border-block: 1px solid var(--offer-line); color: var(--offer-ink); font-weight: 650; list-style: none}
#order-plans .offer-details summary::-webkit-details-marker {display: none}
#order-plans .offer-details summary i {font-size: 10px; transition: transform .18s ease}
#order-plans .offer-details[open] summary i {transform: rotate(180deg)}
#order-plans .offer-details p {font-size: 13px; line-height: 1.65; margin: 12px 0; color: var(--offer-muted); overflow-wrap: anywhere}
#order-plans .offer-details ul {padding: 0; margin: 12px 0; list-style: none}
#order-plans .offer-details li {padding: 4px 0; line-height: 1.6; overflow-wrap: anywhere}
#order-plans .offer-details li i {color: #07836d; margin-right: 6px}
#order-plans .offer-footer {display: grid; gap: 16px; padding: 0 22px 22px; margin-top: auto; background: none; border: 0}
#order-plans .offer-location-label {display: block; font-size: 11px; color: var(--offer-muted); margin-bottom: 8px}
#order-plans .offer-locations > div {display: flex; flex-wrap: wrap; gap: 8px 12px}
#order-plans .offer-locations > div > span {display: inline-flex; align-items: center; gap: 7px; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; color: var(--offer-ink)}
#order-plans .offer-locations img {flex-shrink: 0}
#order-plans .offer-order {display: flex; justify-content: center; align-items: center; gap: 12px; min-height: 46px; padding: 11px 14px; border-radius: 6px; background: var(--offer-primary); color: #fff; font-size: 14px; line-height: 1.4; font-weight: 700; text-decoration: none; text-align: center; overflow-wrap: anywhere; border: 1px solid transparent}
#order-plans .offer-order:hover {filter: brightness(.92); color: #fff}
#order-plans .offer-order i {flex-shrink: 0}
#order-plans .offer-order-disabled {background: var(--offer-soft); color: var(--offer-muted); border-color: var(--offer-line)}
#order-plans :is(.offer-order, .offer-details summary):focus-visible {outline: 3px solid var(--offer-primary); outline-offset: 4px}
@container (max-width: 1060px) {#order-plans .offer-grid {grid-template-columns: repeat(2,minmax(0,1fr))}}
@container (max-width: 680px) {#order-plans .offer-grid {grid-template-columns: minmax(0,1fr)}}
@media (prefers-reduced-motion: no-preference) {
    [data-motion=on] #order-plans .offer-card {transition: border-color .18s ease, box-shadow .18s ease}
    [data-motion=on] #order-plans .offer-card:hover {border-color: var(--offer-primary); box-shadow: 0 6px 18px #20324710}
}
@media (prefers-reduced-motion: reduce) {#order-plans .offer-details summary i {transition: none}}
[data-theme=dark] #order-plans .offer-catalog {--offer-ink: #e9edf4; --offer-muted: #b3c2d2; --offer-line: #354657; --offer-paper: #182431; --offer-soft: #233345}
[data-theme=dark] #order-plans :is(.offer-promotion del + span, .offer-saving) {color: #6bdec0}