/* Real account, allowance and plan pages. Uses the shared BrandlyUp tokens. */
.ux-account{font-family:var(--font-sans,Poppins,system-ui,sans-serif)}
.ux-account h1{font-size:38px;letter-spacing:-.045em;line-height:1.2}
.ux-account h2{font-size:24px;letter-spacing:-.035em;line-height:1.3}
.ux-account h3{font-size:16px;letter-spacing:-.02em;line-height:1.5}
.ux-account p{line-height:1.8}
.ux-account .small{font-size:14px}
.ux-account .tiny{font-size:12px;line-height:1.75}
.ux-account .card{border-radius:20px}
.ux-account .card-pad{padding:26px}
.ux-account .btn{min-height:44px;border-radius:12px;font-size:13px;white-space:normal;text-align:center}
.ux-account .btn-primary:hover{background:var(--primary-hover)}
.ux-account .text-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;text-underline-offset:4px}
.ux-account .text-link:hover{text-decoration:underline}
.ux-account .text-link .lucide{width:16px;height:16px}
.ux-account .eyebrow{font-size:11px;line-height:1.6}
.ux-account-heading{max-width:730px;padding-top:14px}
.ux-account-heading>p{max-width:660px}
.ux-account .pricing-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:stretch}
.ux-account .plan-card{min-width:0;display:flex;flex-direction:column;padding:24px}
.ux-account .plan-card>.flex-row{align-items:flex-start;flex-wrap:wrap;gap:8px}
.ux-account .plan-card h2{font-size:34px;line-height:1.25}
.ux-account .plan-card>.btn{width:100%;margin-top:24px}
.ux-account .plan-card>.plan-feature-list{padding:0;list-style:none;display:grid;gap:10px;margin-top:24px}
.ux-account .plan-feature-list li{padding-left:16px;position:relative}
.ux-account .plan-feature-list li:before{position:absolute;left:0;top:.75em;content:"";width:5px;height:5px;border-radius:50%;background:var(--primary)}
.ux-account .plan-availability{display:flex;align-items:flex-start;gap:6px;color:var(--green)}
.ux-account .plan-availability .lucide{width:14px;height:14px;flex-shrink:0;margin-top:3px}
.ux-account .plan-allowance>strong{color:var(--ink)}
.ux-account .plan-creator-pro{border-color:var(--line-strong);box-shadow:0 8px 28px #4608ad0a}
.ux-account-explain,.ux-feature-status-grid,.ux-billing-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.ux-account-explain>div,.ux-feature-status-item,.ux-billing-summary>section{min-width:0}
.ux-feature-status-item{padding-top:20px;border-top:1px solid var(--line)}
.ux-allowance{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:32px;align-items:start}
.ux-allowance h2{font-size:32px}
.ux-allowance-assurance{padding:22px;border-radius:14px;background:var(--wash)}
.ux-allowance-assurance>.lucide{color:var(--primary);margin-bottom:12px;width:24px;height:24px}
.ux-account-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ux-account-details>summary{min-height:44px;display:list-item;list-style-position:inside;color:var(--ink);font-size:14px;line-height:1.8;font-weight:600;cursor:pointer}
.ux-account-details[open]>summary{padding-bottom:12px;border-bottom:1px solid var(--line)}
.ux-account .table-wrap{max-width:100%;overflow-x:auto}
.ux-account .records-table td{overflow-wrap:anywhere}
.ux-account .records-table th{font-size:11px}
.ux-account .notice{line-height:1.8}
.ux-account .page-heading{gap:24px}
html.dark .ux-account .plan-availability{color:#86efac}
@media(max-width:1280px){.ux-account .pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ux-billing-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.ux-billing-summary>section:last-child{grid-column:1/-1}}
@media(max-width:900px){.ux-account-explain,.ux-feature-status-grid{grid-template-columns:1fr;gap:20px}.ux-allowance{grid-template-columns:1fr;gap:20px}.ux-account .page-heading{align-items:flex-start}}
@media(max-width:640px){.ux-account h1{font-size:30px}.ux-account h2{font-size:22px}.ux-account .pricing-grid,.ux-billing-summary{grid-template-columns:1fr;gap:16px}.ux-account .plan-card h2,.ux-allowance h2{font-size:28px}.ux-account .card-pad{padding:22px}.ux-account .page-heading{flex-direction:column;gap:20px}.ux-account-actions{width:100%}.ux-account-actions .btn{flex:1}.ux-account .plan-card>.btn{margin-top:24px}.ux-allowance-assurance{padding:18px}.ux-account .records-table td{font-size:13px}.ux-account-heading{padding-top:0}.ux-account .eyebrow{letter-spacing:1px}}
@media(prefers-reduced-motion:reduce){.ux-account .btn{transition:none}}
