/* Sign-up and sign-in screens (/start-payment, /login, /forgot-password, /reset-password/{token}, /login/link/confirm),
   resources/views/components/site/account.blade.php: one paper card on the page's gradient canvas, the support line under it.
   Palette tokens: base.css, none overridden. */
.ac{display:flex;align-items:center;min-height:calc(100svh - 72px);padding-block:clamp(40px,6vw,88px)}
.ac > .wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:20px;width:100%}
.ac-card{--pad:clamp(24px,4vw,40px);width:100%;max-width:468px;padding:var(--pad);border-radius:var(--r-l);background:var(--paper);box-shadow:var(--sh-3)}

/* head: the chosen plan (or «free»), the serif title, one line under it */
.ac-pick{display:inline-flex;align-items:flex-start;gap:8px;margin-bottom:20px;padding:7px 12px 7px 10px;border-radius:10px;background:var(--wash);box-shadow:inset 0 0 0 var(--hair) var(--line);font-size:13px;line-height:1.4;color:var(--muted)}
.ac-pick b{font-weight:500;color:var(--ink)}
.ac-pick .ic{width:14px;height:14px;margin-top:1px;color:var(--good)}
.ac-h{font:400 clamp(30px,3vw,38px)/1.1 var(--display);letter-spacing:-.014em;text-wrap:balance}
.ac-sub{margin-top:12px;font-size:15px;line-height:1.55;color:var(--muted);text-wrap:pretty}
.ac-addr{font-weight:500;color:var(--ink);overflow-wrap:anywhere}

/* status and errors that have no field of their own */
.ac-note,.ac-alert{display:flex;align-items:flex-start;gap:10px;margin-top:20px;padding:12px 14px;border-radius:10px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.ac-note{background:var(--accent-soft)}
.ac-note .ic{color:var(--accent)}
.ac-note.warn{background:var(--wheat-soft)}
.ac-note.warn .ic{color:var(--wheat-ink)}
.ac-alert{background:var(--bad-soft)}
.ac-alert .ic{color:var(--bad)}
.ac-note .ic,.ac-alert .ic{width:16px;height:16px;margin-top:2px}

/* form */
.ac-form{display:flex;flex-direction:column;gap:18px;margin-top:28px}
.ac-field{display:flex;flex-direction:column;gap:7px;min-width:0}
.ac-field label{font-size:13px;font-weight:500;color:var(--ink-2)}
.ac-lab{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ac-lab a{font-size:13px;color:var(--muted);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px;transition:color var(--t-1)}
.ac-lab a:hover{color:var(--ink)}
.ac-in{position:relative}
.ac-input{width:100%;height:48px;padding:0 14px;border:0;border-radius:10px;background:var(--wash);box-shadow:inset 0 0 0 var(--hair) var(--line-2);color:var(--ink);font:400 16px/1.2 var(--sans);transition:box-shadow var(--t-1)}
.ac-input::placeholder{color:var(--muted);opacity:1}
.ac-input:focus{outline:none;box-shadow:inset 0 0 0 1px var(--accent),0 0 0 4px var(--focus-halo)}
.ac-input[aria-invalid="true"]{box-shadow:inset 0 0 0 1px var(--bad)}
.ac-in.has-eye .ac-input{padding-right:116px}
.ac-eye{position:absolute;top:6px;right:6px;bottom:6px;display:inline-flex;align-items:center;padding:0 10px;border:0;border-radius:7px;background:none;color:var(--muted);font:500 13px/1 var(--sans);cursor:pointer;transition:color var(--t-1),background-color var(--t-1)}
.ac-eye:hover{color:var(--ink);background:var(--wash-2)}
.ac-eye span{display:inline-flex;align-items:center;gap:6px}
.ac-eye .ic{width:15px;height:15px}
.ac-eye .off,.ac-eye[aria-pressed="true"] .on{display:none}
.ac-eye[aria-pressed="true"] .off{display:inline-flex}
.ac-hint{font-size:13px;line-height:1.5;color:var(--muted);text-wrap:pretty}
.ac-field .form-error{margin-top:0;font-size:13px;line-height:1.45}
.ac-check{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;font-size:14px;color:var(--ink-2);cursor:pointer}
.ac-check input{width:16px;height:16px;margin:0;accent-color:var(--ink);cursor:pointer}
.ac-submit{width:100%;height:48px}
.ac-submit .ic{width:15px;height:15px;transition:transform var(--t-2) var(--ease-out)}
.ac-submit:hover .ic{transform:translateX(3px)}
.ac-or{display:flex;align-items:center;gap:12px;margin:18px 0;font-size:13px;color:var(--muted)}
.ac-or::before,.ac-or::after{content:"";flex:1;height:var(--hair);background:var(--line-2)}

/* quiet lines under the form */
.ac-help,.ac-fine p{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.5;color:var(--muted);text-wrap:pretty}
.ac-help .ic,.ac-fine .ic{width:14px;height:14px;margin-top:2px}
.ac-fine{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.ac-fine a,.ac-support a{color:inherit;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px;transition:color var(--t-1)}
.ac-fine a:hover,.ac-support a:hover{color:var(--ink)}
.ac-back{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-size:14px;font-weight:500;color:var(--ink);text-decoration:none}
.ac-back .ic{width:15px;height:15px}

/* foot of the card: the other way in */
.ac-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin:28px calc(-1 * var(--pad)) calc(-1 * var(--pad));padding:18px var(--pad);border-top:var(--hair) solid var(--rule);font-size:14px;color:var(--muted)}
.ac-foot a{display:inline-flex;align-items:center;gap:6px;font-weight:500;color:var(--ink);text-decoration:none}
.ac-foot a .ic{width:14px;height:14px;transition:transform var(--t-2) var(--ease-out)}
.ac-foot a:hover .ic{transform:translateX(3px)}
.ac-support{max-width:468px;font-size:14px;line-height:1.5;color:var(--muted);text-align:center;text-wrap:balance}

@media (max-width:520px){
  .ac{align-items:flex-start;min-height:0;padding-block:24px 48px}
  .ac-card{--pad:22px}
}
@media (forced-colors:active){.ac-card{border:1px solid CanvasText}.ac-input{border:1px solid CanvasText}}