/* Account & billing (account.html), 25 Oct 2026: Coop's billing page design (/workspace/billing-page-20261025/design.png).
   Body only; the shared header and footer come from css/shell.css. Card + copy per the brand guide (24px card radius, yellow CTA,
   ink outline secondary, #C2410C links, 3px #C2410C focus ring). The green "Active" pill is Coop's design (the brand otherwise avoids
   greens): #1E7A46 on #EEF8F1 is 4.92:1 (passes AA 4.5:1 for small text). */
.ab-page{background:#F7F5F0;color:#1D1D1F;font-family:Inter,system-ui,-apple-system,sans-serif;letter-spacing:-.01em;padding:80px 20px 100px;min-height:0}
.ab-wrap{max-width:640px;margin:0 auto}
.ab-head{text-align:center;margin:0 0 44px}
.ab-eyebrow{margin:0 0 14px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#5E5E63}
.ab-h1{margin:0;font-size:clamp(40px,5.6vw,56px);line-height:1.05;letter-spacing:-.035em;font-weight:800;color:#1D1D1F}
.ab-lead{margin:14px auto 0;font-size:20px;line-height:1.5;color:#5E5E63;max-width:36rem}
.ab-card{background:#FFFFFF;border:1px solid #E6E2DA;border-radius:24px;padding:40px 40px 36px;text-align:center}
.ab-kicker{margin:0 0 12px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#5E5E63}
.ab-title-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 12px}
.ab-title{margin:0;font-size:28px;line-height:1.25;letter-spacing:-.02em;font-weight:800;color:#1D1D1F}
.ab-pill{display:inline-flex;align-items:center;gap:6px;min-height:27px;padding:2px 12px 2px 10px;border-radius:999px;font-size:13px;font-weight:700;line-height:1;white-space:nowrap}
.ab-pill svg{width:13px;height:13px;flex:none}
.ab-pill-active{background:#EEF8F1;color:#1E7A46}
.ab-pill-cancelled{background:#EFEFF1;color:#3A3A3F}
.ab-price{margin:18px 0 0;display:flex;align-items:baseline;justify-content:center;gap:10px;color:#1D1D1F}
.ab-amt{font-size:64px;line-height:1;font-weight:800;letter-spacing:-.04em}
.ab-per{font-size:20px;font-weight:600;color:#5E5E63}
.ab-renew{margin:24px auto 0;max-width:470px;font-size:17px;line-height:1.5;color:#5E5E63}
.ab-renew strong{color:#1D1D1F;font-weight:700}
.ab-dl{margin:28px 0 0;padding:17px 0;border-top:1px solid #ECE9E3;border-bottom:1px solid #ECE9E3;display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.ab-dl div{min-width:0}
.ab-dl dt{font-size:13px;font-weight:600;color:#5E5E63;margin:0 0 6px}
.ab-dl dd{margin:0;font-size:17px;font-weight:600;color:#1D1D1F;overflow-wrap:anywhere}
.ab-actions{margin:28px 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.ab-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:999px;font:inherit;font-size:17px;font-weight:700;line-height:1.2;text-decoration:none!important;cursor:pointer;box-shadow:none;transition:background-color .15s,color .15s}
.ab-btn-primary{background:#FFC21A;color:#1D1D1F;border:1.5px solid #FFC21A}
.ab-btn-primary:hover{background:#F5B400;border-color:#F5B400;color:#1D1D1F}
.ab-btn-outline{background:transparent;color:#1D1D1F;border:1.5px solid #1D1D1F}
.ab-btn-outline:hover{background:#1D1D1F;color:#FFFFFF}
.ab-help{margin:28px auto 0;max-width:560px;text-align:center;font-size:15px;line-height:1.6;color:#5E5E63}
/* links: bold + brand link colour, no underline (as designed); underline on hover. Beats styles.css ".page p a:not(.btn)" */
.ab-page .ab-help a:not(.btn),.ab-page .ab-renew a:not(.btn){color:#C2410C;font-weight:700;text-decoration:none}
.ab-page .ab-help a:not(.btn):hover,.ab-page .ab-renew a:not(.btn):hover{text-decoration:underline}
.ab-page a:focus-visible,.ab-page button:focus-visible{outline:3px solid #C2410C;outline-offset:3px;border-radius:999px}
.ab-help a:focus-visible{border-radius:4px}
.ab-page .org-share{margin-top:32px;text-align:left}
/* signed-in nav: the current page (Account) as a white pill, like .app-links in css/shell.css */
.ns .nav-acct a[aria-current="page"]{background:#fff;font-weight:600;box-shadow:0 0 0 1px #E6E2DA;padding:8px 14px;border-radius:999px}
@media (max-width:560px){
  .ab-page{padding:48px 20px 72px}
  .ab-head{margin-bottom:32px}
  .ab-lead{font-size:18px}
  .ab-card{padding:30px 22px 26px}
  .ab-title{font-size:24px}
  .ab-amt{font-size:56px}
  .ab-renew{font-size:16px}
  .ab-dl{grid-template-columns:1fr}
  .ab-actions{flex-direction:column}
  .ab-btn{width:100%;padding:0 16px;font-size:16px}
}
@media (max-width:900px){.ns .nav-acct a[aria-current="page"]{padding:0 14px}}
@media (prefers-reduced-motion:reduce){.ab-btn{transition:none}}