/* Secondary pages share the gallery tokens, font and folder masthead. */
.pricing,.connect{padding:0 24px;margin:56px auto 100px}
.pricing{max-width:840px}.connect{max-width:620px}
.pricing h1,.connect h1{font-size:clamp(32px,3.25vw,40px);font-weight:400;line-height:1.12;letter-spacing:-1.45px;text-wrap:balance}
.pricing h1{text-align:center;margin-bottom:40px}.connect>h1{text-align:center;margin-bottom:14px}
.page-description{color:var(--secondary);font-size:16px;text-align:center;max-width:360px;margin:0 auto 40px;text-wrap:balance}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.plan{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:28px;min-height:360px}
.plan.pro{border-color:#515557;background:#202223}
h2{font-size:22px;font-weight:400;line-height:1.3;letter-spacing:-.5px}
.price{font-size:48px;line-height:1.15;letter-spacing:-1.8px;display:flex;align-items:center;gap:12px;margin:24px 0;font-variant-numeric:tabular-nums}
.price span{font-size:14px;letter-spacing:0;color:var(--secondary)}
.action{display:block;width:100%;padding:11px 18px;border:1px solid transparent;border-radius:var(--radius-inset);font:inherit;line-height:1.5;text-align:center;background:#e7e9e7;color:#1b1d1e;cursor:pointer}
@media(hover:hover) and (pointer:fine){.action:hover:not(:disabled){background:#fff}}.action.secondary{background:transparent;color:var(--foreground);border-color:#414547}@media(hover:hover) and (pointer:fine){.action.secondary:hover:not(:disabled){background:var(--surface-hover)}}
.plan ul{list-style:none;border-top:1px solid var(--line);padding:20px 0 0;margin:24px 0 0;color:var(--secondary)}
.plan li{display:flex;gap:10px;align-items:baseline;margin:10px 0}.plan li:before{content:'✓';color:var(--foreground);font-size:14px}
#plan-status{margin-top:24px;color:var(--secondary);text-align:center}
.connection-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin-top:36px}.connection-card h2{margin-bottom:24px}
.connect label{display:block;margin:20px 0 8px;color:var(--secondary);font-size:14px}
.copy-row{display:flex;gap:10px}.copy-row input,.account input{width:100%;min-width:0;border:1px solid #414547;border-radius:var(--radius-inset);background:var(--background);color:var(--foreground);padding:12px;font:inherit}.copy-row input{flex:1;font-size:14px}.copy-row .action{width:auto;min-width:80px}
.setup-hint{color:var(--secondary);margin-top:16px;font-size:14px;max-width:440px}
.pro-link{display:inline-block;margin-top:24px;text-decoration:underline;text-underline-offset:4px;color:var(--secondary)}.pro-link:hover{color:var(--foreground)}.connect>.pro-link+.pro-link{float:right}
#key-panel{margin-top:28px}.key-list{list-style:none;padding:0}.key-list li{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line)}.key-list button{font:inherit;text-decoration:underline}.key-result{display:block;overflow-wrap:anywhere;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin:16px 0;font:14px/1.5 monospace}
.account h1{margin-bottom:32px}.account form .action{margin-top:28px}.account-links{display:flex;justify-content:space-between;margin-top:24px;color:var(--secondary)}.account-links a{text-decoration:underline;text-underline-offset:4px}.account-actions{display:grid;gap:16px;margin-top:32px}.account #account-plan{color:var(--secondary);margin-top:8px}.account #consent-panel p{margin:12px 0}
@media(max-width:600px){.pricing,.connect{margin-top:40px}.plans{grid-template-columns:1fr;gap:16px}.plan{min-height:0;padding:24px}.pricing h1{margin-bottom:28px}.connection-card{padding:20px}.copy-row{gap:8px}.copy-row input{font-size:13px}.copy-row .action{min-width:64px;padding:10px}.connect>.pro-link+.pro-link{float:none;margin-left:24px}}

.connect-links{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}.connect-links #plan-status{flex-basis:100%;order:2}.connect-links #plan-status[hidden]{display:none}

.action:active:not(:disabled){background:#ccd1cf}.action.secondary:active:not(:disabled){background:#33383a}.action:disabled{opacity:.55;cursor:wait}.key-list button:hover:not(:disabled){color:#fff}.key-list button:active:not(:disabled){color:#b9c0c2}.account-actions>button:last-child:hover:not(:disabled){text-decoration:underline}.account-actions>button:last-child:active:not(:disabled){color:#b9c0c2}

/* Account details use the same quiet typography and lines as the gallery. */
.account.connect { max-width: 488px; margin-top: 56px; }
.account.connect > h1 { margin: 0 0 28px; text-align: left; font-size: 30px; line-height: 1.2; letter-spacing: -1px; }
.account-identity { border-top: 1px solid var(--line); padding: 22px 0 24px; }
.account-label { display: block; margin-bottom: 8px; color: var(--secondary); font-size: 14px; }
.account #account-email { color: var(--foreground); font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.account #ai-grants:empty { display: none; }
.account #ai-grants:not(:empty) { margin: 0 0 24px; }
.account #account-panel .account-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 0; }
.account #account-panel .account-actions > button { display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 42px; padding: 9px 16px; border: 1px solid #414547; border-radius: var(--radius-inset); background: transparent; color: var(--foreground); font-size: 14px; line-height: 1.4; }
@media (hover: hover) and (pointer: fine) { .account #account-panel .account-actions > button:hover:not(:disabled) { background: var(--surface-hover); text-decoration: none; } }
.account #account-panel .account-actions > button:active:not(:disabled) { background: #33383a; color: var(--foreground); }
.account #account-panel .account-actions > button:disabled { opacity: .55; cursor: wait; }
.account #plan-status { text-align: left; }
@media (max-width: 600px) { .account.connect { margin-top: 40px; } .account.connect > h1 { font-size: 28px; } }