#plan-form{--period-accent:var(--ui-check,#3b82f6);--period-border:var(--ui-border,var(--input-bord));--period-check-border:var(--ui-check-border,#718096);--period-field:var(--ui-field,var(--input-bg));--period-muted:var(--ui-muted,var(--text));--period-link:var(--ui-link,var(--link-color));--period-focus:var(--ui-focus,var(--link-color));--period-on-accent:var(--ui-on-check,#fff);}
/* Payment periods: native radio buttons presented as six equal steps. */
.plan-period-summary{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border:1px solid var(--period-border);border-radius:6px;background:var(--period-field);font-size:12px;line-height:18px;color:var(--period-muted);white-space:nowrap;}
#plan-period-value{min-width:8ch;text-align:right;font-family:'nunito-semibold';color:var(--text);}
.plan-periods{position:relative;display:grid;grid-template-columns:repeat(6,minmax(44px,1fr));width:calc(100% - 40px);max-width:640px;min-width:0;margin:10px auto 0;padding:0;border:0;touch-action:pan-y pinch-zoom;user-select:none;}
.plan-period-legend,.plan-period-input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.plan-period-option{position:relative;display:flex;align-items:center;justify-content:center;min-height:52px;padding:26px 2px 0;border-radius:5px;font-size:13px;line-height:20px;white-space:nowrap;color:var(--period-muted);cursor:grab;touch-action:pan-y pinch-zoom;-webkit-tap-highlight-color:transparent;}
.plan-periods.is-dragging .plan-period-option{cursor:grabbing;}
.plan-period-option::before{content:"";position:absolute;z-index:1;top:12px;left:50%;width:10px;height:10px;box-sizing:border-box;border:2px solid var(--period-accent);border-radius:50%;background:var(--period-accent);transform:translate(-50%,-50%);pointer-events:none;}
.plan-period-option::after{content:"";position:absolute;top:12px;left:50%;width:100%;height:3px;background:var(--period-accent);transform:translateY(-50%);pointer-events:none;}
.plan-period-option:last-child::after{display:none;}
.plan-period-input:checked ~ .plan-period-option::before{border-color:var(--period-check-border);background:var(--period-field);}
.plan-period-input:checked ~ .plan-period-option::after{background:var(--period-border);}
.plan-period-input:checked + .plan-period-option{font-family:'nunito-semibold';color:var(--period-link);}
.plan-period-input:checked + .plan-period-option::before{width:20px;height:20px;border:5px solid var(--period-accent);background:var(--period-on-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--period-accent) 18%,transparent);}
.plan-period-option:hover{color:var(--period-link);}
.plan-period-input:focus-visible + .plan-period-option::before{outline:2px solid var(--period-focus);outline-offset:3px;}
@media (max-width:400px){.plan-periods{width:calc(100% - 16px);}}