.subs-page{max-width:880px;padding-top:40px;padding-bottom:90px}
.subs-back{display:inline-block;font-size:.86rem;font-weight:700;margin-bottom:18px}
.subs-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.subs-head h1{margin:4px 0 0}
.subs-lead{color:var(--muted);max-width:60ch;margin:-2px 0 24px}
.subs-card{display:block;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:18px 20px;margin:12px 0;color:var(--ink);transition:border-color .18s ease,box-shadow .18s ease}
a.subs-card:hover{text-decoration:none;border-color:#c9d4c4;box-shadow:0 10px 24px rgba(31,38,30,.07)}
.subs-card h2{font-size:1.25rem;margin:0 0 6px}
.subs-card p{margin:0;color:var(--muted);font-size:.9rem}
.subs-state{display:inline-block;width:fit-content;background:#e8eee5;color:var(--green);border-radius:999px;padding:3px 9px;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.subs-empty{background:var(--paper);border:1px dashed var(--line);border-radius:20px;padding:40px 24px;text-align:center;margin-top:20px}
.subs-empty h2{margin:0 0 6px}
.subs-progress{width:100%;height:8px;accent-color:var(--green);margin:10px 0 0}
.subs-progress-head{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:.84rem;font-weight:700;color:var(--muted)}
.subs-step h1{font-size:clamp(2rem,5vw,3.2rem);margin:34px 0 22px;max-width:15ch}
.subs-form{margin-top:10px}
.subs-option{display:flex;align-items:center;gap:10px;padding:17px 18px;margin:10px 0;background:var(--paper);border:1px solid #d9dfd4;border-radius:15px;cursor:pointer;font-size:.95rem;transition:border-color .15s ease,background .15s ease}
.subs-option:hover{border-color:#b9c9b4}
.subs-option:has(input:checked){border:2px solid #296b44;background:#f1f7ee;padding:16px 17px}
.subs-option input{accent-color:var(--green);flex:none}
.subs-field{display:block;margin:16px 0;font-size:.9rem;font-weight:700}
.subs-field select,.subs-field input[type=date],.subs-field textarea{display:block;width:100%;box-sizing:border-box;margin-top:7px;padding:13px 14px;border:1px solid #ccd2c9;border-radius:12px;background:#fff;font:inherit;font-weight:400}
.subs-field select:focus,.subs-field input:focus{outline:2px solid #9fbd9f;outline-offset:1px}
.subs-submit{border:0;background:var(--green);color:#fff;padding:15px 24px;border-radius:12px;font:inherit;font-weight:700;cursor:pointer;width:100%;margin-top:20px}
.subs-submit:hover{filter:brightness(1.08)}
.subs-submit-inline{width:auto;margin-top:0;padding:11px 18px;font-size:.84rem}
.subs-inline-form{display:inline;margin:0}
.subs-actions{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.subs-actions button{border:1px solid #d5d9cf;background:#fff;color:var(--ink);border-radius:9px;padding:9px 13px;font:inherit;font-size:.82rem;font-weight:700;cursor:pointer}
.subs-actions button:hover{background:#f1f3ec}
.subs-notice{background:#fff1e7;padding:12px 14px;border-radius:10px;margin:10px 0}
.subs-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:18px 0}
.subs-summary div{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px}
.subs-summary strong{display:block;font-family:'Fraunces',serif;font-size:1.65rem;line-height:1.1}
.subs-muted{color:var(--muted);font-size:.8rem}
.subs-section{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:20px;margin:14px 0}
.subs-section h2{font-size:1.25rem;margin:0 0 6px}
.subs-choice{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.subs-choice select{max-width:100%;padding:9px 11px;border:1px solid #ccd2c9;border-radius:9px;background:#fff;font:inherit;font-size:.84rem}
.subs-choice button{border:0;background:var(--green);color:#fff;border-radius:9px;padding:9px 13px;font:inherit;font-size:.8rem;font-weight:700;cursor:pointer}
.subs-occurrence{padding:15px 17px}
.subs-occurrence-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.subs-occurrence-head strong{font-family:'Fraunces',serif;font-size:1.05rem}
.subs-occurrence p{margin:4px 0}
.subs-empty-text{color:var(--muted);font-size:.86rem}
@media(max-width:640px){
  .subs-page{padding-top:24px}
  .subs-head{align-items:flex-start;flex-direction:column}
  .subs-head .button{width:100%}
  .subs-step h1{font-size:clamp(1.8rem,8vw,2.4rem)}
  .subs-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.subs-heading{margin:34px 0 10px;font-size:1.5rem}
.subs-occurrence select{display:block;width:100%;box-sizing:border-box;margin-top:8px;padding:10px 12px;border:1px solid #ccd2c9;border-radius:10px;background:#fff;font:inherit;font-size:.86rem}
.subs-occurrence form .subs-submit-inline{margin-top:10px}

/* Keep the wizard's Continue/Confirm action visible while the step scrolls.
   Sticky (not fixed) keeps it inside the 880px column and returns it to the
   normal flow once the customer reaches the end of the step. */
.subs-wizard .subs-submit{
  position:sticky;
  bottom:16px;
  z-index:10;
  box-shadow:0 12px 28px rgba(20,28,22,.20);
}
@media(max-width:640px){
  .subs-wizard .subs-submit{bottom:calc(12px + env(safe-area-inset-bottom))}
}

.subs-pay{margin:10px 0 22px}
.subs-pay .subs-muted{margin:0 0 10px}
.subs-pay .button{display:inline-flex;width:auto}