/* Studio account: menu-product surfaces, service selection, dock label lift,
   and the 760ms disclosure rhythm. Existing fonts, colours and destinations. */
.account-page { --account-ease: cubic-bezier(.45,0,.25,1); padding-top: calc(var(--top-h) + 20px); padding-bottom: 40px; }
.account-page .account-head { display: block; padding-top: 24px; padding-bottom: 26px; }
.account-page .account-head > div { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px 40px; align-items: end; }
.account-page .account-head .eyebrow { grid-column: 1 / -1; margin: 0; }
.account-page .account-head h1 { font-family: 'MQ Manrope',var(--sans); font-weight: 400; font-size: clamp(36px,3.2vw,48px); margin: 0; }
.account-page .account-head .lead { margin: 0; }
.account-page .account-head .lead { max-width: 56ch; font-size: 15px; line-height: 1.8; }
.account-page .account-preview-note {
  padding: 20px 0; border: 0; border-block: 1px solid var(--line); border-radius: 0;
  background: transparent; gap: 30px;
}
.account-page .account-preview-note > span { flex: 0 0 190px; }
.account-page .account-preview-note p { margin: 0; font-size: 12px; max-width: 80ch; }
.account-page .account-preview-note > a { flex-shrink: 0; font-size: 12px; }
.account-page .account-layout { grid-template-columns: 240px minmax(0,1fr); gap: 40px; margin-top: 28px; align-items: start; }
.account-page .account-nav { position: relative; gap: 6px; isolation: isolate; }
.account-page .account-nav a {
  position: relative; min-height: 72px; padding: 16px 20px; gap: 15px; border-radius: 18px;
  background: transparent; color: var(--ink2); z-index: 1;
  transition: color 420ms var(--account-ease);
}
.account-nav__selection {
  position: absolute; inset: 0 0 auto; z-index: 0; pointer-events: none;
  height: var(--account-selection-height,72px); transform: translateY(var(--account-selection-y,0px));
  border: 1px solid var(--line); border-radius: 18px;
  background: color-mix(in srgb,var(--ink) 4%,transparent);
  transition: transform 760ms var(--account-ease),height 760ms var(--account-ease);
}
.account-nav__selection::before { content: ''; position: absolute; width: 2px; height: 16px; left: 0; top: calc(50% - 8px); background: var(--favorite,#30d158); }
.account-page .account-nav a[aria-current],.account-page .account-nav a:hover { background: transparent; color: var(--ink); }
.account-nav__copy { display: grid; gap: 5px; }
.account-page .account-nav__label { display: block; width: fit-content; position: relative; font-size: 14px; transition: transform 760ms var(--account-ease); }
.account-nav__label::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; opacity: .55; transform: scaleX(0); transform-origin: left; transition: transform 760ms var(--account-ease); }
.account-nav__caption { font-size: 11px; line-height: 1.4; color: var(--ink2); }
.account-page .account-nav a:is(:hover,:focus-visible:where(:not([data-pointer-focus]))) .account-nav__label { transform: translateY(-2px); }
.account-nav a:is(:hover,:focus-visible:where(:not([data-pointer-focus]))) .account-nav__label::after { transform: scaleX(1); }
.account-page .account-nav__icon { width: 18px; height: 18px; transition: color 560ms var(--account-ease),transform 760ms var(--account-ease); }
.account-page .account-nav a[aria-current] .account-nav__icon { color: var(--favorite,#30d158); }
.account-nav a:is(:hover,:focus-visible:where(:not([data-pointer-focus]))) .account-nav__icon { transform: translateY(-3px); color: var(--ink); }
.account-page .account-nav__count { background: transparent; border: 1px solid var(--line); border-radius: 50%; min-width: 22px; padding: 3px; font-size: 10px; }
.account-page .account-body { min-width: 0; padding-bottom: 40px; }
.account-stage { min-height: 330px; overflow: clip; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb,var(--ink) 2%,var(--bg0)); }
.account-panel { padding: 26px 32px 34px; min-height: 328px; }
.account-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.account-panel__head .eyebrow { margin: 0; font: 10px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); }
.account-panel__symbol { display: grid; place-items: center; width: 42px; height: 42px; color: var(--ink2); }
.account-panel__symbol .account-nav__icon { width: 28px; height: 28px; stroke-width: .8; }
.account-panel__symbol svg :is(path,circle,rect) { transform-box: fill-box; transform-origin: center; transition: transform 760ms var(--account-ease),stroke 760ms var(--account-ease); }
.account-panel:hover .account-panel__symbol svg :is(path,circle,rect) { transform: translateY(-2px); stroke: var(--ink); }
.account-page .account-panel :is(.pilot-panel,.pilot-workspace,.account-empty,.account-product) { padding: 0; min-height: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.account-page .account-panel :is(h2,h3) { margin: 0 0 16px; font: 400 28px/1.3 'MQ Manrope',var(--sans); letter-spacing: -.035em; max-width: 30ch; }
.account-page .account-panel :is(.pilot-panel,.account-empty,.account-product) > p { color: var(--ink2); font-size: 14px; line-height: 1.8; margin: 0 0 24px; max-width: 62ch; }
.account-page .account-panel .pilot-mode { font: 10px/1.7 var(--mono); margin-bottom: 18px; }
.account-page .account-panel .product-note { font-size: 12px; }
.account-page .account-empty > svg { display: none; }
.account-page .account-section-head { margin-bottom: 20px; }
.account-page .account-section-head h2 { margin: 0; }
.account-page .saved-grid h3 { font-size: 19px; letter-spacing: -.02em; margin: 17px 0 0; }
.account-page .account-panel .btn {
  position: relative; min-height: 46px; padding: 10px 0; border: 0; border-radius: 0; gap: 28px;
  color: var(--ink); background: none; background-image: none; box-shadow: none;
  font-size: 13px; letter-spacing: 0; translate: none; white-space: normal; text-align: left;
  justify-content: flex-start; margin: 6px 24px 0 0;
}
.account-page .account-panel .btn::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: var(--ink2); transform: scaleX(.6); transform-origin: left; opacity: .5; transition: transform 760ms var(--account-ease),opacity 760ms var(--account-ease); }
.account-action__label { display: inline-block; transition: transform 760ms var(--account-ease); }
.account-action__arrow { display: inline-block; transition: transform 760ms var(--account-ease); }
.account-page .account-panel .btn:is(:hover,:focus-visible:where(:not([data-pointer-focus]))) { background: none; translate: none; }
.account-page .account-panel .btn:is(:hover,:focus-visible:where(:not([data-pointer-focus])))::after { transform: scaleX(1); opacity: 1; }
.account-page .btn:is(:hover,:focus-visible:where(:not([data-pointer-focus]))) .account-action__label { transform: translateY(-3px); }
.account-page .btn:is(:hover,:focus-visible:where(:not([data-pointer-focus]))) .account-action__arrow { transform: translate(3px,-3px); }
.account-page .account-panel .btn:disabled { opacity: .45; cursor: default; }
.account-page .account-panel .btn:disabled::after { transform: scaleX(.6); }
.account-page .account-panel .btn:disabled .account-action__label { transform: none; }
.account-page .account-panel .input { border-radius: 0; background: transparent; border: 0; border-bottom: 1px solid var(--line2); padding: 12px 0; transition: border-color 560ms var(--account-ease); }
.account-page .account-panel .input:focus { border-bottom-color: var(--ink); }
.account-page :is(a,button,input,textarea):focus-visible:where(:not([data-pointer-focus])) { outline: 1px solid var(--ink2); outline-offset: 5px; }
.account-page .product-feedback { margin-top: 22px; padding-top: 18px; }
html[data-motion="reduced"] .account-page :is(.account-action__label,.account-action__arrow,.account-nav__label,.account-nav__icon,.account-panel__symbol path,.account-panel__symbol circle,.account-panel__symbol rect) { transform: none !important; }
@media(prefers-reduced-motion:reduce) {
  .account-page :is(.account-action__label,.account-action__arrow,.account-nav__label,.account-nav__icon,.account-panel__symbol path,.account-panel__symbol circle,.account-panel__symbol rect) { transform: none !important; }
}
/* Preserve existing narrow-window containment; no new mobile composition. */
@media(max-width:1000px) { .account-page .account-head > div { display: block; } .account-page .account-head :is(h1,.lead) { margin-top: 16px; } .account-page .account-layout { grid-template-columns: 1fr; gap: 20px; } .account-page .account-nav { flex-direction: column; } .account-page .account-preview-note > span { flex-basis: auto; } .account-panel { padding: 24px; } }