/* Server support is public only as a verified whole percentage. */
.subscriber-progress { margin: 28px 0; padding: clamp(20px, 3vw, 32px); border: 1px solid #526d52; border-radius: 16px; background: linear-gradient(120deg, #183523, #0b2117); color: #e0e9de; }
.subscriber-progress[hidden], .subscriber-goal[hidden], .subscriber-goal [hidden] { display: none !important; }
.subscriber-header { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.subscriber-eyebrow { margin: 0 0 9px; color: #c6d6a6; font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.subscriber-progress h2 { margin: 0; color: #f3ebd4; font: 600 clamp(24px, 3vw, 33px)/1.2 Georgia, serif; letter-spacing: -.02em; }
.subscriber-intro { max-width: 63ch; margin: 10px 0 0; color: #c6d6c4; font-size: 13px; line-height: 1.65; }
.subscriber-link { flex-shrink: 0; padding: 12px 16px; border: 1px solid #dfcf9f; border-radius: 8px; color: #24291c; background: #e3d4a5; text-decoration: none; font-size: 13px; font-weight: 750; }
.subscriber-progress .subscriber-link, .subscriber-progress .subscriber-link:visited { color: #24291c; }
.subscriber-link:hover { background: #f1e3ba; }
.subscriber-link:focus-visible { outline: 3px solid #f4eccb; outline-offset: 4px; }
.subscriber-budget { margin-top: 22px; padding-top: 18px; border-top: 1px solid #456049; }
.subscriber-period, .subscriber-verified { color: #b2c6b0; font-size: 11px; line-height: 1.5; margin: 0; }
.subscriber-coverage { display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px; margin: 12px 0; font-variant-numeric: tabular-nums; }
.subscriber-coverage strong { color: #f0efda; font: 750 clamp(32px, 4vw, 44px)/1 system-ui, sans-serif; letter-spacing: -.045em; }
.subscriber-coverage span { color: #d0dfca; font-size: 13px; }
.subscriber-meter { position: relative; height: 12px; overflow: hidden; border: 1px solid #527153; border-radius: 20px; background: #0b1e13; }
.subscriber-meter > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #789e66, #c8d991); }
.subscriber-meter::before, .subscriber-meter::after { position: absolute; top: 0; bottom: 0; content: ""; border-left: 2px solid #e4e8cd; }
.subscriber-meter::before { left: 50%; } .subscriber-meter::after { left: 75%; }
.subscriber-next-step { margin: 8px 0 0; color: #dce8c4; font-size: 12px; line-height: 1.6; }
.subscriber-awaiting { margin: 14px 0 0; padding: 12px 15px; border-left: 2px solid #c4ae6d; background: #a99c5e0d; color: #d7d8c1; font-size: 12px; line-height: 1.7; }
.subscriber-awaiting strong { display: block; color: #f0ecd6; }
.subscriber-goals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 680px; padding: 0; margin: 16px 0 0; list-style: none; }
.subscriber-goal-step { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid #48634b; border-radius: 8px; background: #12291b; }
.subscriber-goal-icon { display: grid; flex-shrink: 0; place-items: center; width: 24px; height: 24px; border: 1px solid #688466; border-radius: 50%; color: #c3d1ac; font-size: 11px; }
.subscriber-goal-step strong { display: block; color: #e0e9d5; font-size: 12px; line-height: 1.4; }
.subscriber-goal-step small { display: block; margin-top: 3px; color: #b9c7b0; font-size: 11px; }
.subscriber-goal-step[data-state="reached"] { border-color: #788f5c; }
.subscriber-goal-step[data-state="reached"] .subscriber-goal-icon { background: #4c6137; color: #eff5cb; }
.subscriber-verified { margin: 13px 0 0; }
@media (max-width: 700px) {
  .subscriber-header { flex-direction: column; align-items: flex-start; gap: 16px; }
}
@media (max-width: 460px) {
  .subscriber-goal-step { align-items: flex-start; flex-direction: column; gap: 7px; }
}