[hidden] { display: none !important; }
.account-page { min-height: 100vh; }
.skip-link { position: absolute; top: -100px; left: 20px; z-index: 100; background: var(--gold); color: var(--gold-ink); padding: 10px; }
.skip-link:focus { top: 8px; }
.account-header { max-width: 1160px; padding: 26px 24px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); }
.account-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 22px; color: var(--paper); }
.account-header nav { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 20px; font-size: 14px; }
.account-header nav a { color: var(--paper-2); }
.account-main { max-width: 1100px; margin: auto; padding: 56px 24px 70px; }
.account-intro h1 { font-size: clamp(2.9rem, 6.2vw, 5rem); margin: 14px 0 20px; }
.account-intro .lede { font-size: 18px; max-width: 100%; }
.account-status { color: var(--paper-2); margin: 22px 0; }
.account-status:empty { margin: 0; }
.account-error { border: 1px solid #a65757; background: #341e23; color: #ffe1dc; border-radius: 10px; padding: 14px 18px; margin: 24px 0; overflow-wrap: anywhere; }
.account-heading { margin: 30px 0 18px; display: flex; justify-content: space-between; gap: 12px; align-items: center; font-size: 14px; overflow-wrap: anywhere; }
.account-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(270px, 1fr); gap: 22px; }
.account-primary { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.account-card { background: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 18px; padding: clamp(22px, 3.6vw, 34px); display: flex; flex-direction: column; align-items: stretch; gap: 17px; }
.account-card h2 { font-size: 1.45rem; font-weight: 600; line-height: 1.25; }
.account-card p, .account-card li { font-size: 15px; color: var(--paper-2); }
.account-card strong { color: var(--paper); }
.signin-card { max-width: 580px; margin: 32px 0 0; }
.account-card form { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.account-card label { display: block; font-size: 14px; font-weight: 500; color: var(--paper); }
.account-card input:not([type=checkbox]), .account-card textarea, .account-card select { display: block; width: 100%; border: 1px solid var(--line-strong); background: var(--ink-1); border-radius: 8px; padding: 12px; color: var(--paper); font: inherit; font-size: 15px; }
.account-card input[readonly] { font-family: var(--font-mono); font-size: 12px; }
.account-card input::placeholder, .account-card textarea::placeholder { color: var(--paper-3); }
.account-card .btn { justify-content: center; min-height: 44px; line-height: 1.35; }
.account-card button:disabled { opacity: .5; cursor: default; transform: none; }
.text-button { border: 0; background: none; color: var(--gold); padding: 6px 0; cursor: pointer; font: inherit; font-size: 14px; }
.account-card .fine-print { font-size: 12px; line-height: 1.65; color: var(--paper-2); }
.account-price { color: var(--paper) !important; font-family: var(--font-display); font-size: 3.8rem !important; line-height: 1; }
.account-price span { font-family: var(--font-body); font-size: 13px; color: var(--paper-2); display: block; margin-top: 12px; }
.account-plan { align-self: start; border-top: 2px solid var(--gold); }
.plan-benefits { display: grid; gap: 12px; margin: 10px 0; }
.plan-benefits li { padding-left: 21px; position: relative; }
.plan-benefits li::before { content: '✓'; color: var(--gold); position: absolute; left: 0; }
.account-wide { grid-column: 1 / -1; }
.activation-steps { padding-left: 23px; margin: 0 0 20px; }
.activation-steps li { padding: 4px 0; }
.copy-row { display: flex; gap: 8px; margin: 8px 0; }
.copy-row input { min-width: 0; }
.copy-row button { flex-shrink: 0; padding-inline: 14px; }
#billing-section, #create-section, #card-section { display: flex; flex-direction: column; gap: 16px; }
.account-notice { padding: 15px; background: color-mix(in oklab, var(--gold) 8%, transparent); border: 1px solid color-mix(in oklab, var(--gold) 24%, transparent); border-radius: 10px; font-size: 14px; }
.account-notice p { margin-top: 6px; }
.account-card .consent { display: flex; align-items: flex-start; gap: 12px; font-size: 13px; line-height: 1.65; }
.consent input { margin-top: 5px; flex-shrink: 0; width: 17px; height: 17px; accent-color: var(--gold); }
.account-deadline { color: var(--gold) !important; font-weight: 500; }
.account-card .licence-status { font-size: 1rem; font-weight: 600; color: var(--paper); }
.billing-facts { display: grid; gap: 14px; padding-block: 17px; border-block: 1px solid var(--line); margin: 0; }
.billing-facts div { display: grid; gap: 4px; }
.billing-facts dt { color: var(--paper-2); font-size: 12px; }
.billing-facts dd { margin: 0; color: var(--paper); font-size: 15px; overflow-wrap: anywhere; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.section-heading h2 { margin-top: 10px; }
.device-count { background: var(--ink-1); color: var(--gold); border: 1px solid var(--line); border-radius: 30px; padding: 7px 13px; font: 13px var(--font-mono); white-space: nowrap; }
.device-list { display: grid; gap: 10px; }
.device-list li { display: flex; align-items: center; gap: 16px; justify-content: space-between; padding: 17px 0; border-top: 1px solid var(--line); }
.device-name { font-weight: 600; color: var(--paper); overflow-wrap: anywhere; }
.device-meta { display: block; font-size: 12px; margin-top: 3px; }
.device-list .text-button { color: #ffc8b8; flex-shrink: 0; }
.empty-state { padding: 18px; border: 1px dashed var(--line-strong); border-radius: 10px; }
.account-footer { padding: 26px; display: flex; justify-content: center; flex-wrap: wrap; gap: 22px; border-top: 1px solid var(--line); font-size: 13px; }
@media (max-width: 720px) { .account-grid { grid-template-columns: 1fr; } .account-main { padding-top: 32px; } .account-header { gap: 14px; } .account-header nav { gap: 12px; } .account-intro .lede { font-size: 16px; } .account-heading { align-items: flex-start; } .section-heading { align-items: flex-start; } }
@media (max-width: 400px) { .account-header { flex-wrap: wrap; } .account-header nav { justify-content: flex-start; } .account-main { padding-inline: 16px; } .device-list li { flex-direction: column; align-items: flex-start; gap: 6px; } .copy-row { flex-direction: column; } }

.account-card .kicker { color: var(--gold); font-size: .75rem; }