/* Package details come from /v1/public/packages; allowance guidance reflects the current accounting rules. */
.packages-page { display: flex; flex-direction: column; min-height: 100svh; background: var(--sx-color-background); }
.packages-page main { flex: 1; }
.packages-page .header-help.is-current { color: var(--sx-color-text); }
.packages-page .packages-list-section { width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding-block: 56px; }
.packages-list-section > h1 { margin: 0 0 32px; color: var(--sx-color-text); font-size: 28px; font-weight: 600; text-align: center; line-height: 1.6; }
.packages-status { color: var(--sx-color-muted); font-size: var(--sx-font-label); text-align: center; }
.packages-status:empty { display: none; }
.packages-page .packages-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 340px)); justify-content: center; align-items: stretch; gap: 32px 24px; margin: 0; padding-block-start: 16px; }
.packages-page .package-card { position: relative; inline-size: 100%; max-inline-size: 340px; justify-self: center; display: flex; flex-direction: column; min-width: 0; padding: 28px; border: 1px solid var(--sx-color-border); border-radius: var(--sx-radius-overlay); background: var(--sx-color-surface); box-shadow: var(--sx-shadow-card); }
.packages-page .package-card.is-recommended { border-color: var(--sx-color-brand); box-shadow: 0 0 0 1px color-mix(in srgb, var(--sx-color-brand) 18%, transparent), var(--sx-shadow-card); }
.package-badge { position: absolute; top: 0; left: 50%; max-width: calc(100% - 32px); transform: translate(-50%, -50%); padding: 4px 14px; border: 1px solid color-mix(in srgb, var(--sx-color-brand) 40%, var(--sx-color-border)); border-radius: 999px; background: var(--sx-color-surface); color: var(--sx-color-brand); font-size: var(--sx-font-caption); font-weight: 600; line-height: 1.6; white-space: nowrap; }
.package-heading { display: grid; min-block-size: 104px; align-content: start; gap: 8px; }
.package-card h2 { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.package-duration { color: var(--sx-color-muted); font-size: var(--sx-font-label); }
.package-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-block: 16px 24px; padding-block-end: 24px; border-block-end: 1px solid var(--sx-color-border); }
.package-price strong { min-width: 0; max-width: 100%; color: var(--sx-color-text); font-size: clamp(26px, 3vw, 32px); font-weight: 600; line-height: 1.4; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.package-price span { color: var(--sx-color-muted); font-size: var(--sx-font-label); }
.package-limits-title { margin: 0 0 12px; color: var(--sx-color-muted); font-size: var(--sx-font-caption); font-weight: 400; }
.package-limits { display: grid; gap: 16px; margin: 0 0 24px; }
.package-limit { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.package-limit dt { color: var(--sx-color-muted); font-size: var(--sx-font-label); }
.package-limit dd { margin: 0; color: var(--sx-color-text); font-size: var(--sx-font-label); font-weight: 600; font-variant-numeric: tabular-nums; }
.package-extras { display: grid; gap: 10px; margin-block-start: auto; padding-block-start: 20px; border-block-start: 1px solid var(--sx-color-border); }
.package-extra { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.package-extra strong { color: var(--sx-color-text); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.packages-page .package-extras span { color: var(--sx-color-muted); font-size: 12px; }
.packages-page .packages-unavailable { width: min(600px, calc(100% - 32px)); min-height: 280px; padding: 32px; margin: 56px auto; text-align: center; }
.packages-page .packages-unavailable h1 { font-size: 24px; }
.packages-unavailable p { margin-block: 16px 24px; color: var(--sx-color-muted); }
.packages-page .package-usage { width: min(1120px, calc(100% - 48px)); margin: 8px auto 0; padding-block: 56px 80px; border-block-start: 1px solid var(--sx-color-border); scroll-margin-block-start: 24px; }
.package-usage-heading { max-width: 720px; margin-block-end: 32px; }
.package-usage-kicker { color: var(--sx-color-brand-hover); font-size: var(--sx-font-caption); font-weight: 600; }
.package-usage-heading h2 { margin: 12px 0; color: var(--sx-color-text); font-size: clamp(24px, 2.6vw, 30px); font-weight: 600; line-height: var(--sx-leading-heading); text-wrap: balance; }
.package-usage-heading p, .package-usage-aside p { margin: 0; color: var(--sx-color-muted); font-size: var(--sx-font-label); line-height: var(--sx-leading-body); }
.package-usage-highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.package-usage-highlight { min-width: 0; padding: 24px; border: 1px solid color-mix(in srgb, var(--sx-color-border) 70%, transparent); border-radius: var(--sx-radius-overlay); background: color-mix(in srgb, var(--sx-color-surface) 70%, transparent); box-shadow: var(--sx-shadow-card); }
.package-usage-icon { display: grid; width: 40px; height: 40px; margin-block-end: 20px; place-items: center; border: 1px solid color-mix(in srgb, var(--sx-color-brand) 25%, transparent); border-radius: var(--sx-radius-card); background: color-mix(in srgb, var(--sx-color-brand) 9%, transparent); color: var(--sx-color-brand-hover); font-size: 20px; }
.package-usage-highlight h3 { margin: 0 0 8px; font-size: 16px; font-weight: 600; line-height: var(--sx-leading-heading); }
.package-usage-highlight p { margin: 0; color: var(--sx-color-muted); font-size: var(--sx-font-label); line-height: var(--sx-leading-body); }
.package-usage-details { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.8fr); gap: 64px; margin-block-start: 48px; }
.package-usage-aside { padding-block-start: 20px; }
.package-usage-aside h3 { margin: 12px 0; font-size: 22px; font-weight: 600; line-height: var(--sx-leading-heading); }
.package-usage-account { display: inline-flex; min-height: 44px; align-items: center; gap: 12px; margin-block-start: 16px; color: var(--sx-color-brand-hover); font-size: var(--sx-font-label); text-decoration: none; }
.package-usage-account:hover { color: var(--sx-color-text); }
html[dir="ltr"] .package-usage-account > .sx-public-icon { transform: rotate(180deg); }
.package-usage-faq { min-width: 0; border-block-start: 1px solid var(--sx-color-border); }
.package-usage-faq details { border-block-end: 1px solid var(--sx-color-border); }
.package-usage-faq summary { display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 24px; padding-block: 20px; color: var(--sx-color-text); font-size: var(--sx-font-body); font-weight: 500; line-height: var(--sx-leading-body); list-style: none; cursor: pointer; }
.package-usage-faq summary::-webkit-details-marker { display: none; }
.package-usage-toggle { position: relative; display: block; width: 28px; height: 28px; flex: 0 0 28px; border: 1px solid var(--sx-color-border); border-radius: var(--sx-radius-control); color: var(--sx-color-muted); transition: color var(--sx-motion-fast), border-color var(--sx-motion-fast), background var(--sx-motion-fast); }
.package-usage-toggle::before, .package-usage-toggle::after { position: absolute; inset: 50% auto auto 50%; width: 10px; height: 1px; background: currentColor; transform: translate(-50%, -50%); content: ""; }
.package-usage-toggle::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform var(--sx-motion-fast) var(--sx-ease-out); }
.package-usage-faq details[open] .package-usage-toggle { border-color: color-mix(in srgb, var(--sx-color-brand) 50%, transparent); background: color-mix(in srgb, var(--sx-color-brand) 10%, transparent); color: var(--sx-color-brand-hover); }
.package-usage-faq details[open] .package-usage-toggle::after { transform: translate(-50%, -50%) rotate(0deg); }
.package-usage-faq summary:hover { color: var(--sx-color-brand-hover); }
.package-usage-faq details > p { margin: 0; padding-block-end: 24px; padding-inline-end: 48px; color: var(--sx-color-muted); font-size: var(--sx-font-label); line-height: var(--sx-leading-body); }
.package-usage-faq summary:focus-visible, .package-usage-account:focus-visible { outline: 2px solid var(--sx-color-focus); outline-offset: 4px; border-radius: var(--sx-radius-control); }
@media (max-width: 860px) {
  .package-usage-details { grid-template-columns: 1fr; gap: 24px; }
  .package-usage-aside { padding-block-start: 0; }
  .package-usage-highlight { padding: 20px; }
}
@media (max-width: 680px) {
  .packages-page .packages-list-section { width: calc(100% - 32px); padding-block: 32px; }
  .packages-list-section > h1 { margin-block-end: 24px; font-size: 24px; }
  .packages-page .package-card { padding: 24px; }
  .packages-page .package-usage { width: calc(100% - 32px); margin-block-start: 16px; padding-block: 32px 48px; }
  .package-usage-highlights { grid-template-columns: 1fr; gap: 12px; }
  .package-usage-highlight { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; padding: 20px; }
  .package-usage-icon { grid-row: span 2; margin: 0; }
  .package-usage-highlight h3 { margin-block-end: 6px; }
  .package-usage-details { margin-block-start: 32px; }
  .package-usage-faq summary { gap: 16px; font-size: var(--sx-font-label); }
  .package-usage-faq details > p { padding-inline-end: 0; }
}