/* A quiet, focused workspace for sign-in and membership. */
.account-main{width:min(1120px,calc(100% - 96px));display:grid;grid-template-columns:minmax(0,.83fr) minmax(0,1.17fr);align-items:start;gap:clamp(48px,7.5vw,108px);padding-block:100px 112px;min-height:calc(100svh - 220px)}
.account-intro{padding-top:22px}
.account-intro>.eyebrow{color:var(--accent);font-size:11px;letter-spacing:.15em;line-height:1.6}
.account-intro h1{font-size:clamp(48px,4.6vw,64px);font-weight:500;letter-spacing:-.058em;line-height:1.08;margin:24px 0 0;white-space:normal}
.account-intro h1 .serif{display:inline-block;font-size:1.045em;letter-spacing:-.045em;line-height:1.2}
.account-description{max-width:355px;color:var(--muted);font-size:16px;margin-top:25px;line-height:1.75}
.account-steps{list-style:none;padding:0;margin:46px 0 0;max-width:370px}
.account-steps li{display:flex;gap:17px;padding:22px 0;border-top:1px solid var(--line)}
.account-steps li>span{display:grid;place-items:center;align-self:start;width:29px;height:29px;flex-shrink:0;color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,transparent);border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);border-radius:50%;font-size:10px;font-weight:550;font-variant-numeric:tabular-nums;margin-top:1px}
.account-steps h2{font-size:15px;font-weight:600;letter-spacing:-.02em;line-height:1.6}
.account-steps p{font-size:14px;color:var(--muted);margin-top:6px;line-height:1.7}
.account-explore-link{display:inline-flex;align-items:center;gap:14px;min-height:44px;font-size:14px;font-weight:550;margin-top:15px}
.account-explore-link:hover{color:var(--accent)}
.account-workspace{min-width:0}
.account-card{padding:36px;border:1px solid var(--line);border-radius:28px;background:var(--paper);box-shadow:0 20px 70px -42px #17130c35,0 1px 2px #17130c04}
.account-card-heading{display:flex;align-items:center;gap:13px;margin-bottom:27px}
.account-symbol{width:46px;height:46px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);border-radius:15px;flex-shrink:0}
.account-symbol svg{width:29px;height:29px;fill:none;stroke:var(--ink);stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.account-kicker{font-size:10px;font-weight:600;letter-spacing:.12em;color:var(--muted);line-height:1.6}
.account-card h2{font-size:32px;font-weight:550;letter-spacing:-.045em;line-height:1.16}
.card-description{font-size:15px;line-height:1.7;color:var(--muted);margin-top:12px}
.account-page .button{border-radius:100px;min-height:50px;font-size:14px;line-height:1.5;padding:13px 22px;gap:12px;text-align:center}
.account-primary{width:100%;margin-top:25px}
.account-plan-preview{font-size:14px;color:var(--muted);border-top:1px solid var(--line);padding-top:25px;margin-top:28px;line-height:1.7}
.account-plan-preview strong{font-size:15px;letter-spacing:-.02em;color:var(--ink);font-weight:600;display:block}
.account-plan-preview p{margin-top:7px;font-size:14px;line-height:1.7}
.account-plan-preview a{display:inline-flex;align-items:center;gap:12px;color:var(--ink);font-size:14px;min-height:44px;margin-top:5px;text-underline-offset:4px}
.account-plan-preview a:hover{text-decoration:underline}
.sign-in-form{margin-top:29px}
.sign-in-form label{display:block;font-size:14px;font-weight:550;margin-bottom:10px;line-height:1.5}
.sign-in-form input{width:100%;min-height:54px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);font:inherit;font-size:16px;line-height:1.5;box-shadow:inset 0 1px 2px #00000003;transition:border-color .15s,box-shadow .15s}
.sign-in-form input::placeholder{color:var(--muted);opacity:.8}
.sign-in-form input:hover{border-color:color-mix(in srgb,var(--ink) 35%,var(--line))}
.sign-in-form input:focus-visible{outline:3px solid color-mix(in srgb,var(--focus) 45%,transparent);outline-offset:3px;border-color:var(--focus)}
.sign-in-form input:disabled{opacity:.65}
.sign-in-form input[aria-invalid=true]{border-color:#b95c48}
.sign-in-form .field-help{font-size:13px;color:var(--muted);line-height:1.7;margin-top:10px}
.sign-in-form .account-primary{margin-top:24px}
.code-destination{font-size:15px;color:var(--muted);line-height:1.75;margin-bottom:24px;overflow-wrap:anywhere}
.code-destination strong{font-weight:550;color:var(--ink)}
.sign-in-form .code-input{font-size:28px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.32em;text-align:center;padding-left:calc(16px + .32em);min-height:64px}
.code-options{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:10px}
.account-page button{border:0}
.account-page .button-secondary{border:1px solid var(--line);background:var(--paper);color:var(--ink)}
.account-page .button-secondary:hover{background:var(--surface)}
.account-page button:disabled{cursor:not-allowed;opacity:.48}
.account-card[aria-busy=true] button:disabled{cursor:wait}
.account-fine-print{color:var(--muted);font-size:12px;line-height:1.8;margin-top:20px}
.account-message{color:var(--muted);font-size:14px;line-height:1.7;margin-top:20px;padding:15px 17px;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow-wrap:anywhere}
.account-message:empty{display:none}
.account-message[data-kind=error]{border-color:color-mix(in srgb,#b95c48 55%,var(--line));background:color-mix(in srgb,#b95c48 5%,var(--paper));color:var(--ink)}
.account-identity{display:flex;justify-content:space-between;align-items:center;gap:15px;padding-block:25px;margin-top:7px;border-bottom:1px solid var(--line)}
.account-identity>div{min-width:0}
.detail-label{font-size:10px;letter-spacing:.12em;color:var(--muted);font-weight:600;line-height:1.5}
.account-identity p{font-size:15px;font-weight:500;margin-top:6px;overflow-wrap:anywhere;line-height:1.6}
.quiet-button,.quiet-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;font-size:13px;font-weight:500;color:var(--muted);line-height:1.5;background:none;padding:11px 0;flex-shrink:0}
.quiet-button:hover,.quiet-link:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.membership-card{padding:26px 24px;margin-top:25px;background:var(--surface);border:1px solid var(--line);border-radius:20px}
.membership-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.membership-heading h3{font-size:20px;font-weight:550;letter-spacing:-.035em;line-height:1.4;margin:0}
.status-pill{display:inline-flex;align-items:center;gap:6px;min-height:28px;border:1px solid var(--line);border-radius:100px;padding:4px 10px;font-size:11px;font-weight:500;line-height:1.5;background:var(--paper);color:var(--muted)}
.status-pill::before{content:'';width:4px;height:4px;border-radius:50%;background:currentColor}
.status-pill[data-active=true]{color:var(--ink);background:var(--paper)}
.membership-card>p{font-size:14px;line-height:1.75;margin-top:14px;color:var(--muted)}
.membership-card>.subscription-price{font-size:30px;letter-spacing:-.04em;line-height:1.3;color:var(--ink);margin-top:20px;font-weight:500}
.membership-card>.subscription-date{font-size:13px;padding-top:16px;border-top:1px solid var(--line);margin-top:18px}
.membership-actions{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-top:22px}
.membership-actions:has(>[hidden]):not(:has(>:not([hidden]))){display:none}
.membership-actions .account-primary{margin:0}
.membership-actions>.quiet-button{align-self:center}
#account-unavailable{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:25px}
.account-local-note{display:flex;align-items:start;gap:11px;font-size:12px;color:var(--muted);line-height:1.8;margin:24px 18px 0}
.account-local-note svg{width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round;margin-top:3px}
.app-approval{margin-top:22px}
.approval-heading{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.approval-heading svg{width:24px;height:24px;fill:none;stroke:var(--accent);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.app-approval h2{font-size:29px;letter-spacing:-.04em}
.approval-actions{display:flex;align-items:stretch;flex-direction:column;gap:10px;margin-top:25px}
.approval-actions .quiet-link{align-self:center}
.purchase-options{padding:0;margin:30px 0 0;border:0;min-width:0}
.purchase-options legend{font-size:16px;font-weight:550;letter-spacing:-.025em;padding:0;margin-bottom:3px;line-height:1.5}
.purchase-options>div{border:1px solid var(--line);border-radius:20px;padding:24px;margin-top:14px;background:var(--paper)}
.purchase-options h4{font-size:17px;line-height:1.5;font-weight:550;letter-spacing:-.025em;margin:0 0 8px}
.purchase-options p{font-size:14px;line-height:1.75;color:var(--muted)}
.purchase-options .button{width:100%;margin-top:20px;background:var(--surface);font-size:14px;padding-inline:15px}
.purchase-options .account-fine-print{font-size:12px;margin-top:13px}
.conversion-consent{border-top:1px solid var(--line);padding-top:18px;margin-top:18px}
.conversion-consent label{display:flex;gap:12px;align-items:start;font-size:13px;line-height:1.8;color:var(--muted);cursor:pointer}
.conversion-consent input{accent-color:var(--ink);width:19px;height:19px;flex-shrink:0;margin:3px 0 0}
.conversion-consent input:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
@media(min-width:1101px){.account-intro{position:sticky;top:152px}}
@media(max-width:1100px){.account-main{width:calc(100% - 64px);gap:45px;padding-block:76px 88px}.account-card{padding:29px}.account-intro h1{font-size:52px}.account-description{font-size:15px}.account-card h2{font-size:29px}.account-kicker{font-size:9px;letter-spacing:.1em}.membership-card{padding:22px}.purchase-options>div{padding:22px}}
@media(max-width:800px){.account-main{grid-template-columns:minmax(0,1fr);max-width:570px;width:calc(100% - 48px);gap:32px;padding-block:54px 72px}.account-intro{padding:0;text-align:center}.account-intro h1{font-size:52px;margin-top:19px}.account-intro h1 br{display:none}.account-intro h1 .serif{display:block}.account-description{max-width:410px;margin:19px auto 0;font-size:15px}.account-steps,.account-explore-link{display:none}.account-card{padding:32px}.account-card h2{font-size:31px}.account-local-note{margin-inline:12px}}
@media(max-width:480px){.account-main{width:calc(100% - 32px);padding-block:40px 56px;gap:28px}.account-intro h1{font-size:46px;letter-spacing:-.05em}.account-intro>.eyebrow{font-size:10px}.account-description{padding-inline:12px;line-height:1.7;font-size:14px}.account-card{padding:26px 23px;border-radius:24px}.account-card h2{font-size:29px}.account-card-heading{gap:11px;margin-bottom:25px}.account-kicker{font-size:9px}.account-symbol{width:42px;height:42px;border-radius:14px}.account-identity{align-items:flex-start;gap:10px}.account-identity p{font-size:14px}.account-identity .quiet-button{padding-top:5px}.membership-card{padding:21px 19px}.membership-heading h3{font-size:19px}.purchase-options>div{padding:21px 19px}.account-local-note{margin-inline:5px}.account-nav .nav-demo{display:none}.account-nav{gap:12px}.account-page .site-header{gap:12px}.sign-in-form .code-input{font-size:27px}.code-options{gap:5px}.quiet-button,.quiet-link{font-size:13px}.account-plan-preview{padding-top:24px}.account-fine-print{font-size:12px}}
@media(prefers-reduced-motion:reduce){.sign-in-form input{transition:none}}
@media(max-width:380px){.account-page .account-nav{display:none}.account-page .theme-control{margin-left:auto}}
